Menu
I am working on a parallel coordinates graph with d3.js and I am trying to plot some multiple dimensional data from an external json file.
This is how the data in the json file is structured:
[
{
"timestamp": 1437571117.035159,
"dimension": 10,
"value": [
{
"value": 0.13347661474528993,
"label": "A"
},
{
"value": 0.8677079004784608,
"label": "B"
},
{
"value": 0.7757451827314333,
"label": "C"
},
{
"value": 0.9614725817942508,
"label": "D"
},
{
"value": 0.5259754037241577,
"label": "E"
}
{
"value": 0.9683208234943124,
"label": "F"
},
{
"value": 0.9256394748794468,
"label": "G"
},
{
"value": 0.8749624261426282,
"label": "H"
},
{
"value": 0.6171642160674041,
"label": "I"
},
{
"value": 0.9933299503850428,
"label": "J"
}
]
}
]
And this is how so far I am handling the domain and how the graph plots the items data:
d3.json("json/10dim.json", function(error, data) {
if (error) {return console.log(error)};
x.domain(dimensions = d3.keys(data[2].value).filter(function(d) {
return y[d] = d3.scale.linear()
.domain(d3.extent(data, function(p) { return +p[d]; }))
.range([height, 0]);
}));
etc...
The console does not give me any type of error, but neither the graphs get plotted, nor the axes are properly labeled. This is a jsfiddle with the complete code and this is the reference that I have used to code this project.
Do you have an idea of how to solve this issue? In any case, thanks in advance for your replies!
307
I bet I know why you weren't seeing any error or HTML: the code was being ran before the DOM loaded, i.e. the <script> tag your code was in was before the <body> tags. In any case, you would have had an error off the bat since your JSON is not valid, but I assume that was a small example and the real JSON is valid. Moving on, your JSON structure is very annoying to work with for this application. Assuming you can't modify your JSON, I propose you read it in like you provided and then transform it a small bit to the following format:
[
{
"timestamp": 1437571117.035159,
"dimension": 10,
"A": 0.13347661474528993,
"B": 0.8677079004784608,
"C": 0.7757451827314333,
"D": 0.9614725817942508,
"E": 0.5259754037241577,
"F": 0.9683208234943124,
"G": 0.9256394748794468,
"H": 0.8749624261426282,
"I": 0.6171642160674041,
"J": 0.9933299503850428
}
]
There are many good reasons as to why you would want to do this for this example, but mainly, the built-in D3 data methods want array of objects to read keys directly from.
If you do this, this full working jsfiddle should almost be a copy and paste for you. A few notes from this fiddle:
<body> tag before the <script> tag that contains the JavaScript, else, it wouldn't work in the Fiddle for the same reason I gave above.Lastly, make sure you add CSS before running the D3 code, else, you'll get a solid black graph!
Hope this helps!
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
