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

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:

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

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

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

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


Copyright © Mike Taptich 2015... JK. Take what you want from here.