Formatting Data From a JSON

Learn how to create a Sankey diagram using JSON data.

From a JSON file with numeric link values

As explained in the previous lesson, data used to form a Sankey diagram needs to be a combination of nodes and links.

{
"nodes":[
{"node":0,"name":"node0"},
{"node":1,"name":"node1"},
{"node":2,"name":"node2"},
{"node":3,"name":"node3"},
{"node":4,"name":"node4"}
],
"links":[
{"source":0,"target":2,"value":2},
{"source":1,"target":2,"value":2},
{"source":1,"target":3,"value":2},
{"source":0,"target":4,"value":2},
{"source":2,"target":3,"value":2},
{"source":2,"target":4,"value":2},
{"source":3,"target":4,"value":4}
]}

As we also noted earlier, the "node" entries in the "nodes" section of the JSON file are superfluous and really only there for our benefit since D3 will automatically index the nodes starting at zero. As a test to check this out, we can change our data to the following:

{
"nodes":[
{"name":"Barry"},
{"name":"Frodo"},
{"name":"Elvis"},
{"name":"Sarah"},
{"name":"Alice"}
],
"links":[
{"source":0,"target":2,"value":2},
{"source":1,"target":2,"value":2},
{"source":1,"target":3,"value":2},
{"source":0,"target":4,"value":2},
{"source":2,"target":3,"value":2},
{"source":2,"target":4,"value":2},
{"source":3,"target":4,"value":4}
]}

This will produce the following graph:

Get hands-on with 1400+ tech skills courses.