D3 on AngularJS: Create Dynamic Visualizations with AngularJS (2014)
What next?
This chapter will cover additional resources and stepping off points for continued exploration of D3.
Maps
Built into D3 is an extensive collection of utility methods that make working with geographic data much easier. D3, in combination with command line tools like ogr2ogr make it easy to convert GIS shapefiles into a type of JSON (GeoJSON, specifically) that D3 can read and draw as SVG. A common use case is in the creation of choropleths and other thematic maps commonly used in data visualization.
Because geoJSON files can get quite large, another great tool by Mike Bostock is TopoJSON. TopoJSON is an alternative map file format to GeoJSON, expect the files it produces are much smaller and consequently load much faster inside of a browser. In addition to TopoJSON the file format, there’s TopoJSON the library (for reading the format) and TopoJSON the command line program (for creating TopoJSON files from GeoJSON files.) For an in depth tutorial on creating maps, see Mike Bostock’s excellent Let’s Make a Map tutorial.
Layouts
D3 Offers an extensive collection of pre-existing layout helper functions that make building the typical cookie-cutter graphs like pie, histogram, and stack chart ease. D3 does not provide methods like createPieChart. Instead, D3 offers functions that make creating them from scratch easier. Lets walk though a quick pie chart example to show this in action. We’ll combine to two new methods, d3.svg.arc(), which creates a arc generator, and d3.layout.pie(). The pie() layout simply takes data and produces the necessary parameters that arc() expects.
1 var data = [4,5,6];
2 var pie = d3.layout.pie();
3 console.log(pie(data)); // =>
4 [
5 { data:4, value:4, startAngle:4.61, endAngle:6.28 },
6 { data:5, value:5, startAngle:2.51, endAngle:4.61 },
7 { data:6, value:6, startAngle:0, endAngle:2.51 }
8 ]
Now we can use an arc generator to take the start and end angles above and produce the necessary d attribute values to draw arc paths in SVG.
1 // create an arc generator function, setting the outer radius
2 // of the created arcs to `100` and inner radius to `0`
3 var arc = d3.svg.arc().outerRadius(100).innerRadius(0);
1 var color = d3.scale.category10();
2 var arcs = vis.selectAll('path').data(pie([4,5,6]))
3 .enter().append('path')
4 .attr({ d: arc }) // create the arc paths using the arc generator
5 .style({
6 // style each arc slice with a different color and white border
7 fill: function(d, i){ return color(i) },
8 stroke: 'white'
9 });
Here’s what it all looks like together. Note the containing g element and (200,200) translation so that the center of the pie chart isn’t stuck in the top, left corner of the svg.
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
5 <script>
6 var vis = d3.select('body').append('svg').append('g')
7 .attr('transform', 'translate(200,200)');
8 var color = d3.scale.category10();
9 var arc = d3.svg.arc().outerRadius(100).innerRadius(0);
10 var pie = d3.layout.pie();
11 var arcs = vis.selectAll('path').data(pie([4,5,6]))
12 .enter().append('path').attr({
13 d: arc,
14 fill: function(d, i){ return color(i) },
15 stroke: 'white'
16 });
17 </script>
18 </body>
19 </html>
There are many more layouts like this one so if you ever find yourself creating a pretty common graph type, be sure to look for possible pre-existing layout helpers first.
Plugins and other tools
The venerable Mike Bostock and others have collected several common D3 plugins that haven’t seemed necessary enough to be put into D3 core but are, on occasion, extremely useful. One of the most interesting among them is the d3.fisheye plugin which applies a distorted fisheye lense effect which is useful when focusing in a particular portion of a larger collection of elements.
fisheye plugin
There are a few common tools that are often used with D3. Chief among them may be Crossfilter. Think of Crossfilter as offering faster alternatives to D3’s array helpers. With it, it’s possible to quickly sort and filter extremely large amounts (millions of rows) of data.