D3: Getting Interactive With Your SVG Elements

D3: Getting Interactive With Your SVG Elements

In my previous two articles about D3, I wrote about what D3 is (and is not) and data binding. This month we’ll begin exploring user interaction with elements on a SVG canvas. We’ll progress over a series of “slides,” each showing an active SVG...
D3: Binding Data

D3: Binding Data

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]

Meet D3: Data Driven Documents

Meet D3: Data Driven Documents

Introduction There are many tutorials on the web to get one started using D3. Links to some of these works will follow later in this article. While they are all wonderful (and I thank each author for getting me over the steep D3 learning curve), most of these...