An introduction to d3.js

Step 5: Add styling to the map.

By default, each of the path elements will inherent a black ("#000000") fill and stroke. To update each of our US states, we can group all of the states together by appending the SVG "g" group element and give this the class attribute land.

CSS:

.land {
  fill: #eee;
  stroke: #777777;
}

JavaScript:

svg.append("g")
      .attr("class", "land")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.state_pol).features) 
    .enter().append("path")
      .attr("d", path)

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
  fill: #eee;
  stroke: #777777;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> 
<script>

var width = 960,
    height = 500;

var projection = d3.geo.conicConformal()
    .rotate([98, 0])
    .center([0, 38])
    .parallels([29.5, 45.5])
    .scale(1000) // Change to 300 to zoom out
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// Upload our topojson file, which is stored in the same folder as our index.html file
d3.json("state_pol.json", function(error, us) { // passes an error and object variable
  svg.append("g")
      .attr("class", "land")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.state_pol).features) // us.objects.state_pol cooresponds to the original file name, state_pol.shp
    .enter().append("path")
      .attr("d", path)
});
</script>

Step 6: Add Data to the Map

Now, let's add some data to this map! Download this CSV file listing the location of the top 150 ports in the United States, which was taken from the National Transportation Atlas Database. I converted the original file from .shp to .csv using ogr2ogr because this is a more familiar data format among beginners.

As data files are requested asynchronously by JavaScript, the order in which different data layers are loaded is unpredictable. For instance, you may call for a map to have a set of countries as the bottom layer and the names of each country layered on top of this. You would first load the "country" path elements and then load the "country name" text elements. However, if your browser first is able to load the text before the paths due to discrepancies in file sizes (e.g., path is WAY bigger than text), the text will render first.

To address this issue, I recommend using d3's queue library and defer manipulating the imported data until ALL of the data is loaded to the web browser. Once the code is ready, a callback fuction is triggered, passing an error variable and a variable for the data packets, in order respectively.

<script src="http://d3js.org/queue.v1.min.js" charset="utf-8"></script>

// Load all our data at once using queue.js
queue()
    .defer(d3.json, "state_pol.json")
    .defer(d3.csv, "ports_major.csv")
    .await(ready);

function ready(error, us, ports){

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
  fill: #eee;
  stroke: #777777;
}
.ports{
    fill:red;
    fill-opacity: 0.3;
    stroke-width: 1px;
    stroke: red;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="http://d3js.org/queue.v1.min.js"></script>
<script src="http://d3js.org/d3.geo.projection.v0.min.js"></script> 
<script>

var width = 960,
    height = 500;

var projection = d3.geo.conicConformal()
    .rotate([98, 0])
    .center([0, 38])
    .parallels([29.5, 45.5])
    .scale(1000) // Change to 300 to zoom out
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

// Create a scale that maps total tonnage to a radius size between 2 and 30 pixels
var port_size = d3.scale.sqrt().domain([0, 252070000]).range([2,30]);

// Load all our data at once using queue.js
queue()
    .defer(d3.json, "state_pol.json")
    .defer(d3.csv, "ports_major.csv")
    .await(ready);

function ready(error, us, ports){ // passes an error and object variables for the states and ports
  svg.append("g")
      .attr("class", "land")
    .selectAll("path")
      .data(topojson.feature(us, us.objects.state_pol).features) // us.objects.state_pol cooresponds to the original file name, state_pol.shp
    .enter().append("path")
      .attr("d", path)

// map the GPS coordinates to 
  svg.append("g")
    .selectAll("circle")
   .data(ports).enter()
    .append("circle")
    .attr("class", "ports")
    .attr("cx", function(d) {
           return projection([d["long"], d["lat"] ])[0]; // return x location on svg
           })
    .attr("cy", function(d) {
           return projection([d["long"],d["lat"] ])[1]; // return y location on svg
           })
    .attr("r", function(d){ return port_size(+d.TOTAL)});    
};

</script>

Live Coding D3.js