Creating Charts for the Web - Clojure Data Analysis - page 333

4. Associate the data with the chart: This happens in three places. The create-

links and create-nodes functions associate the edges and nodes with their
elements, and start-force passes a copy of both to the force object.

5. Enter each data point and create the HTML using append and attr: Again, the

create-links and create-nodes functions do this for their respective data types.

All of these work together to create the graph. Additionally, since the force-directed layout is
animated, we also create a tick handler to update the browser with the latest positions of
the objects.

There's more…

For more about D3, see its website at http://d3js.org/ .

Creating interactive visualizations with D3

One of the great things about working on the Web is how easy it is to make things interactive.
Also, since D3 exposes the underlying HTML elements— in fact, it often forces you to work
in them—making a D3 graph interactive is pretty straightforward; we just use standard
HTML events.

For this recipe, we'll take the force-directed layout visualization of the US census data that we
did in the last recipe, Visualizing graphs with force-directed layout , and make it interactive.
We'll add a data panel to the right-hand side of the graph, and whenever the user hovers over
a node, the page will display the census data from that node in the data panel.

Getting ready

We'll start with the visualization from the last recipe, Visualizing graphs with force-directed
layout , and add to it.

How to do it…

Even though we're adding to an existing graph, we'll do it on a new URL, so we'll also need to
add a handler, route, and ClojureScript for it. To do this, perform the following steps:

1. Here's the handler, which also includes the HTML for the data panel:

(defn interactive-force-plot []
(d3-page "Interactive Force-Directive Layout"
(str "webviz"
".int_force"