Getting Started with D3

Chapter 5. Layout

All the examples so far have focused on D3’s ability to join a data set with elements of a web page. We have seen the .selectAll('element').data(data).enter().append('element') idiom over and over again in each example, and it is getting used to this idiom that really constitutes D3’s learning curve. Having been thoroughly exposed to this idiom, this getting started guide will finish with a light exploration of two of D3’s many layout tools. The aim of this last set of examples is to hint at the great range of possibilities opened up by D3, and how easy it is to use these tools. For many more beautiful examples visit http://d3js.org.

Subway Connectivity

The MTA provides a set of General Transit Feed Specification (GTFS) files for each form of transit in New York that it controls. These are used by (among others) Google to provide services such as map overlays, distance calculations, and schedule displays. These files are wonderfully constructed and well documented at https://developers.google.com/transit/gtfs/—a real pleasure to play with!

With minimal fuss, we are able to join the stops.txt and stop_times.txt files in order to create a record of which stations are connected to one another. This data is stored in stations_graph.json and contains two lists. One is called nodes, an individual element of which looks like the following:

{
    "name": "St George"
}

The other is called links, an individual element of which looks like the following:

{
    "source": 0, 
    "target": 264 ...