Our look at using the D3 JavaScript library to create interactive charts continues with part 2 of 3, as we add tool-tips to each data point in the chart that become activated when the user hovers her mouse over a point.
In my fourth post about the D3.js library for creating data-driven documents we will explore zooming in on detail within a chart and, indirectly, how one might organize their charting code in a single javascript object.
In my previous article, Meet D3: Data Driven Documents, I discussed my experience learning D3, in particular, discovering what D3 is not: it is not, strictly speaking, a SVG library. You will not find a function in the library to draw a circle or rectangle. Instead, you use its powerful selections interface to manipulate the DOM.
For example, assuming the DOM contains this element:
[code language=”html”]
[/code]
If we want to add a green circle with radius 10px at point (100,100), there is no draw-a-circle function in D3. Instead we do this:
[code language=”javascript”]
d3.select(‘#mychart’)
.append(‘circle’)
.attr(‘cx’, 100)
.attr(‘cy’, 100)
.attr(‘r’, 10)
.attr(‘fill’, ‘green’);
[/code]