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

enter image description here

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.

score 1 · Accepted Answer · answered Aug 08 '13 at 05:51

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

answered Aug 08 '13 at 05:51

Scott Cameron

5,293
2
29
32

Scott, something like... ... in the JSON: {"source":"Source1","target":"Target1","value":"40.0","units":"Gbps"} ... in the .html: var formatNumber = d3.format(",.0"), format = function(d) { return formatNumber(d) + " " + d.units; }, – Lokitez Aug 08 '13 at 14:00
In the linked example, it look like the d passed into format() is actually d.value from the data. So you'd either need to pass the entire datum into your format (and then d.value into formatNumber) or pass d.value and d.unit into format as two arguments. – Scott Cameron Aug 08 '13 at 14:23
I understand what you're saying needs to be done, but I can't figure out how to do it. I actually don't need the number to be formatted. I just need to make it show 'value' + " " + 'units'. – Lokitez Aug 08 '13 at 15:30
Here's the part where it's actually adding the link titles: link.append("title") .text(function(d) { return d.source.name + " → " + d.target.name + "\n" + format(d.value); }); – Lokitez Aug 08 '13 at 15:37
Sorry, I'm not following what is missing. You've got d.value there and format() appends a hard-coded units value. Just change it to append d.unit instead. Either change the format() function to accept d (rather than d.value) or get rid of format and just do 'd.value + " " + d.unit' if you don't need number formatting. Am I missing something here? – Scott Cameron Aug 08 '13 at 15:49
Sorry Scott. I was looking at the wrong bit of code. I resolved the issue and it's working beautifully now. Thanks for your help. You definitely put me on the right path. – Lokitez Aug 08 '13 at 18:58

score 1 · Answer 2 · edited Jan 19 '14 at 02:44

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

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

2 Answers2