Just getting started with d3 and building a sankey diagram. I came across a sample that uses an external .json file with d3.v3, even though it is an outdated version. Since my tree also relies on this version, I'd like to stick to just one d3 version. The sankey diagram is functioning properly, but now I want to swap out the static json data with dynamic data fetched from a database. My plan is to load the page, query the database, fetch the data, format it as an array of objects, and then pass it to the sankey code.
To ease into the changes, I've copied the contents of the json file and inserted them directly into my page.
var MYDATA = {
"links": [
{"source":"Agricultural Energy Use","target":"Carbon Dioxide","value":"1.4"},
{"source":"Agriculture","target":"Agriculture Soils","value":"5.2"},
{"source":"Agriculture","target":"Livestock and Manure","value":"5.4"},
{"source":"Agriculture","target":"Other Agriculture","value":"1.7"},
...
};
The relevant section of the sankey code where the file is loaded looks like this:
d3.json("#APP_FILES#sankeygreenhouse.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
};
});
I am attempting to modify this to use MYDATA instead of '#APP_FILES#sankeygreenhouse.json'. However, when I changed the line to
d3.json(MYDATA, function(error, graph) {
I encountered a 404 error. What steps should I take to make this work?