Sankey Diagram (D3) - How to use multiple units for link values and how to add notes to mouseover popup box?

Question

http://bl.ocks.org/d3noob/5028304

Looking at this example, hovering over a link shows the source, the target, and the value. The value is appended with the variable 'units', which for this example is "Widgets".

var units = "Widgets";

var formatNumber = d3.format(",.0f"), // zero decimal places
  format = function(d) { return formatNumber(d) + " " + units; }, 
  color = d3.scale.category20(); 

Is there any way of creating classes so that the link between one source and target is appended with one type of unit and others use different units? In this example, let's say we wanted the links between "Energy" and all of its targets to use MWh for its units, but all other links would use Widgets.

I'd also love to know how to add notes, such as URLs, to the text box that pops up on mouse hover.

Answer 1

You could add unit as a property on the data objects and then pass d.unit into format along with d.value.

You can't do anything too elaborate with the default <title> tooltip but there are a million jQuery plugins for doing more elaborate things with tooltips

Answer 2

Here's the solution:

d3.json("network2.json", function(error, graph) {

var nodeMap = {};
graph.nodes.forEach(function(x) { nodeMap[x.name] = x; });
graph.links = graph.links.map(function(x) {
  return {
    source: nodeMap[x.source],
    target: nodeMap[x.target],
    value: x.value,
    units: x.units
  };
});

  link.append("title")
    .text(function(d) {
        return d.source.name + " ↔ " + d.target.name + "\n" +
                       d.value + " " + d.units; });