Integrate json code into a d3 html file

Question

I'm testing the sandey chart from the following link: https://gist.github.com/d3noob/c2637e28b79fb3bfea13

But I can only see the the chart in Firefox, not in Chrome. I suspect because Chrome doesn't allow to access data from an external file.

Therefore, I'm trying to integrate the json code, but when I try it, the chart doesn't show up in Firefox

I have added a variable with all the json code like:

var dataset = {"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}]};

And I've replaced this line of code:

d3.json("sankey-formatted.json", function(error, graph) {

For this one (just replacing the name of the file by the dataset variable):

d3.json(dataset, function(error, graph) {

,,, but not the chart is not showing. Any ideas why the sankey chart is not showing?

Thanks

Answer 1

The problem you're facing is that d3.json...

...returns a new request to get the JSON file at the specified url with the default mime type application/json.

That being said, the solution is simpler than you think: since you already have a variable with all the data, just name it as graph (your d3.json function loads the file and populates a data array called graph):

var graph = {"nodes":[{"node":0,"name":"node0"},...

And drop the d3.json function, don't forgetting to remove the closing curly bracket/parenthesis:

d3.json("sankey-formatted.json", function(error, graph) {//remove this...

    //your function

});//...and don't fortget to remove this too.