An introduction to d3.js

Step 7: Allow the User to Zoom

Add the zoom function used in the first examples to allow users to inspect portions of our map with greater resolution.

var zoom = d3.behavior.zoom()
  .on("zoom",function() {
    // Using d3 mouse events, dynamically update translation and scale.
    svg.selectAll("g").attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
});

svg.call(zoom);

<!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)

var zoom = d3.behavior.zoom()
  .on("zoom",function() {
    // Using d3 mouse events, dynamically update translation and scale.
    svg.selectAll("g").attr("transform","translate("+ 
        d3.event.translate.join(",")+")scale("+d3.event.scale+")");
});

svg.call(zoom);

</script>

Step 8: Add Tooltips

We can provide further interactions between the user and our data by including a tooltip function. Tooltips allow you to display element-specific data in conjunction with different mouse events (e.g., hover, click, etc.). Check out the quick example below:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>

text {
  font: 10px sans-serif;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

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

var tooltip = d3.select("body")
              .append("div")
              .style("position", "absolute")
              .style("z-index", "10")
              .style("visibility", "hidden")
              .style("color", "white")
              .style("padding", "8px")
              .style("background-color", "rgba(0, 0, 0, 0.75)")
              .style("border-radius", "6px")
              .style("font", "12px sans-serif")
              .text("tooltip");

var ages = [{"age": 28, "x": 20, "y": 40}, {"age": 18, "x": 60, "y": 80}, {"age": 38, "x": 100, "y": 120}];

</script>
</html>

Now, add a tooltip to display information regarding the amount of tonnage exchanges at each port per year.

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);

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .style("color", "white")
    .style("padding", "8px")
    .style("background-color", "rgba(0, 0, 0, 0.75)")
    .style("border-radius", "6px")
    .style("font", "12px sans-serif")
    .text("tooltip");

// 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]);

// Create a scientific number format
var scinum = d3.format(".1e");

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

// 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)})
    .on("mouseover", function(d) {
                      console.log(d);
                      tooltip.text( "Total : " + scinum(d.TOTAL) +" tons per year" );
                      tooltip.style("visibility", "visible");
              })
              .on("mousemove", function() {
                  return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
              })
              .on("mouseout", function(){return tooltip.style("visibility", "hidden");});    
};

svg.call(zoom);

</script>

Step 9: Add a Legend

To finalize you map, you map want to apply a legend to give the user a sense of scale.

CSS:

.legend circle {
  fill: none;
  stroke: #ccc;
}

.legend text {
  fill: #777;
  font: 10px sans-serif;
  text-anchor: middle;
}

Javascript:

var legend = svg.append("g")
      .attr("class", "legend")
      .attr("transform", "translate(" + (width - 80) + "," + (height - 20) + ")")
    .selectAll("g")
      .data([1e6, 5e7, 3e8])
    .enter().append("g");

  legend.append("circle")
      .attr("cy", function(d) { return -1*port_size(d); })
      .attr("r", port_size);

  legend.append("text")
      .attr("y", function(d) { return -2*port_size(d); })
      .attr("dy", "-0.1em")
      .text(d3.format(".1s"));

<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
  fill: #eee;
  stroke: #777777;
}
.ports{
    fill:red;
    fill-opacity: 0.3;
    stroke-width: 1px;
    stroke: red;
}

.legend circle {
  fill: none;
  stroke: red;
}

.legend text {
  fill: #777;
  font: 10px sans-serif;
  text-anchor: middle;
}
</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);

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .style("color", "white")
    .style("padding", "8px")
    .style("background-color", "rgba(0, 0, 0, 0.75)")
    .style("border-radius", "6px")
    .style("font", "12px sans-serif")
    .text("tooltip");

// 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]);

// Create a scientific number format
var scinum = d3.format(".1e");

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

var legend = svg.append("g")
      .attr("class", "legend")
      .attr("transform", "translate(" + (width - 80) + "," + (height - 20) + ")")
    .selectAll("g")
      .data([1e6, 5e7, 2.5e8])
    .enter().append("g");

legend.append("circle")
      .attr("cy", function(d) { return -1*port_size(d); })
      .attr("r", port_size);

legend.append("text")
      .attr("y", function(d) { return -2*port_size(d); })
      .attr("dy", "-0.1em")
      .text(d3.format(".1s"));  
};

svg.call(zoom);

</script>

Step 10: Save your figure(s) for publications?

Drag this link to your bookmarks bar for later usage: SVG Crowbar 2.

Live Coding D3.js