D3 Sankey Diagram Implementation

[Gabriel Driver-Wilson]

I've been trying to get a sankey diagram to work using the d3 sankey plugin. I've followed Mike Bostock's example here but I can't get it to work.

I think it's because I don't know how the data is formatted within the "energy.json" file he references in the example. 

I tried to create my own JSON file which had a "node" object which has many objects with a "name" attribute inside it, and a "link" object with many objects with "source", "target" and "value" attributes but I doesn't work. 

I also get an error within the code when setting the sankey.layout property. 

Anything will help. Thanks! 

[Paul Halliday]

Does this help?

{

"nodes":

[

{"name":"a"}, // This would be 0 

{"name":"b"}, // This would be 1

{"name":"c"}  // This would be 2

],

"links":

[

{"source":0,"target":1,"value":10},

{"source":2,"target":1,"value":4},

{"source":3,"target":0,"value":8}

]

}

Note that once a source -> target exists you can't let it occur again the other way around.

This is bad:

source 0 -> target 4

source 4 -> target 0

Perhaps this is why you aren't having any luck?

--
Paul Halliday
http://www.pintumbler.org/

[Gabriel Driver-Wilson]

Thanks but, that's how I think I have it currently set up but it doesn't seem to work. I've attached the file.

Now I'm also getting an error that says this:

[Error] TypeError: 'undefined' is not an object (evaluating 'source.sourceLinks.push')

(anonymous function)                   (sankey.js, line 91)

forEach

computeNodeLinks                       (sankey.js, line 86)

        layout                                          (sankey.js, line 40)

(anonymous function)                   (sankey.html, line 36)

(anonymous function)                   (d3.v3.min.js, line 1)

(anonymous function)                   (d3.v3.min.js, line 1)

t                                                 (d3.v3.min.js, line 1)

u                                                (d3.v3.min.js, line 1) 

Which is triggering within my "sankey.html" file when setting the layout of the sankey diagram to "32" which I literally just copied from Mike's example above.. so I'm really not sure what the problem is.

[Paul Halliday]

Can you remove the quotes from your source target values and try again?

{"source": "1","target": "12","value": "58"}

should be:

{"source": 1,"target": 12,"value": 58}

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Gabriel Driver-Wilson]

That worked!! For that problem at least.. 

Now I'm getting this:

1. Uncaught TypeError: Cannot read property 'forEach' of undefined sankey.js:127
1. (anonymous function)sankey.js:127
2. computeNodeBreadthssankey.js:123
3. sankey.layoutsankey.js:42
4. (anonymous function)sankey.html:36
5. (anonymous function)d3.v3.min.js:1
6. (anonymous function)d3.v3.min.js:1
7. td3.v3.min.js:1
8. u
2. Which references the code here.

Thanks so much for helping! :)

[Paul Halliday]

Yeah, sorry; I forgot to mention that your indexes were messed up a little.

You need to start at 0. 

IIRC you had 25 'names' which when referenced in your source/targets would be 0 -> 24. I think you had things labelled up to 25 and you missed 0 which would likely produce that error. Look at your JSON again and align the source -> targets to the proper indexes and remove the ones that don't actually exist.

Good luck!

[Gabriel Driver-Wilson]

Ok I fixed the indexing problem, thanks!

Now the diagram appears but looks like the picture i'm attaching. :( I've attached all my code so please help! Thanks! :)

[Phuoc Do]

You'll also need to get the stylesheet for it:

.node rect {

  cursor: move;

  fill-opacity: .9;

  shape-rendering: crispEdges;

}

.node text {

  pointer-events: none;

  text-shadow: 0 1px 0 #fff;

}

.link {

  fill: none;

  stroke: #000;

  stroke-opacity: .2;

}

.link:hover {

  stroke-opacity: .5;

}

Phuoc Do

https://vida.io/dnprock

[Gabriel Driver-Wilson]

Dude! Thank you so much for showing me your reproduced code! You're the greatest. Seriously saving my ass! haha

[Saket Dabi]

I having a weird problem i moved my sankey from v3 to v4 of d3 and i am getting error TypeError: source is undefined. it takes me to sankey.js here
links.forEach(function(link) {
       var source = link.source,
           target = link.target;
      if (typeof source === "number") source = link.source = nodes[link.source];
      if (typeof target === "number") target = link.target = nodes[link.target];
      source.sourceLinks.push(link);
      target.targetLinks.push(link);
    });
  }

i am using a csv for my data source , i am not sure it was working in d3 v3

[Phuoc Do]

That error probably means your data is not loaded in the format it expects. Does your data have source and target columns?

[Saket Dabi]

It have country chanel sales column , i thought its implicit as it was working in d3 v3 version

Regards

Saket Dabi

--

You received this message because you are subscribed to the Google Groups "d3-js" group.

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.

[Phuoc Do]

Try to rename columns to source and target in your CSV file.

--
You received this message because you are subscribed to a topic in the Google Groups "d3-js" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/d3-js/zTJeZjwK-Qc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to d3-js+unsubscribe@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Phuoc Do