Geek Answers Handbook

Parallel coordinates of multidimensional data not displayed in D3

I am working on a parallel coordinate d3.js with d3.js and I am trying to build some data from an external json file.

Here's 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 I process the domain and how the graph displays the data of the elements:

 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 error, but neither the graphics nor the graphics are displayed correctly. This is jsfiddle with full code, and this is the link I used to encode this project.

Do you have an idea to solve this problem? Anyway, in advance for your answers!

+6
source share
1 answer

I bet I know why you didn't see any error or HTML: the code ran before the DOM was loaded, i.e. the <script> tag in which your code was located was before the <body> tags. In any case, you would have a bug with a bat, since your JSON is invalid, but I assume this was a small example, and the real JSON is valid. Moving on, your JSON framework is very annoying for working with this application. Assuming that you cannot change your JSON, I suggest you read it like you do, and then convert it a 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 why you would like to do this for this example, but basically, the D3 data built-in methods want an array of objects to read keys directly from.

If you do this, this full jsfiddle job should be almost a copy and paste for you. A few notes from this fiddle:

  • I did not load JSON data from the file; instead, I just loaded it into a variable so that it works with jsfiddle. For the violin to work for you, copy lines 74 onwards and uncomment lines 93 and 169.
  • I had to include another dummy record in the data because it needs a minimum and maximum size. If you try to use a single entry, you will not get an error; you just have a very uninteresting plot and no tags without a mark :-)
  • Please note that I have included the <body> tag before the <script> tag that contains JavaScript, otherwise it will not work in Fiddle for the same reason as I above.

Finally, make sure you add CSS before running the D3 code, otherwise you will get a solid black graph!

Hope this helps!

+3
source

More articles:


All Articles