Cover by Mike Dewar

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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": 

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required