Data Joins in D3.js

Suppose we have a visualization, like the one to the right, containing 26 text elements, one for each letter in the alphabet.

The details of how we got here aren't too important, so you can skip to the next step if you wish. However, if you're interested in how we reached this starting point, we began with a data array:

var alphabet='abcdefghijklmnopqrstuvwxyz'.split('');

Then we used D3 to make the SVG-based view you see to the right in the boxed labeled 'Visualization':

d3.select('svg').selectAll('text').data(alphabet).enter().append(text)
	.text(function(d){return d;})
	.attr('x', function(d,i){return i*15;})
	.attr('y', 15);