O'Reilly logo

Expert Data Visualization by Jos Dirksen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawing the visualization

We visualize the data in two different way. We show it as a map, and as a set of small cubes. First, we'll look at the steps you need to take to show the map:

The first thing we do is to set up some scales and helper functions:

 // setup the projection  var projection = d3.geoAlbersUsa();  var path = d3.geoPath()      .projection(projection);   // add the scales  var scale = d3.scaleLinear().domain([-0.8, 0, 0, 0.8])      .range(["blue", "#A6D8F0", "#FFB3A6" ,"red"]); 

Here we see two features provided by D3 that help in showing geo data. With the d3.geoAlbersUsa function, we tell D3 that we want the geometry rendered using the Albers USA projection coordinate system. With the d3.geoPath() function, we convert JSON in GeoJSON ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required