Question

I am new to d3 and i am trying to use http://syntagmatic.github.io/parallel-coordinates/

Here you see the minimalistic example from the website.

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="d3.parcoords.js"></script>
<link rel="stylesheet" type="text/css" href="d3.parcoords.css">
<div id="example" class="parcoords" style="width:360px;height:150px"></div>

<script>
var data = [
  [0,-0,0,0,0,3 ],
  [1,-1,1,2,1,6 ],
  [2,-2,4,4,0.5,2],
  [3,-3,9,6,0.33,4],
  [4,-4,16,8,0.25,9]
];

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .createAxes();
</script>

I want some dimensions not to be shown and tried different approaches with # parcoords.dimensions(dimensions). How would you solve this?

Was it helpful?

Solution

I had a look at the fiddle Gerrat set-up but doesn't look to have worked the way I thought it should. In that fiddle the names of dimensions have been removed, but the link or lines between the dimension still represent the original data. This behaviour seems odd to me and it might be a bug.

Anyway, I've set-up a fiddle that pre-filters the data using:

data.forEach( function (e,j) { 
    var temp ={};
    filteredDimensions.forEach ( function (d,i) {
        temp[d] = e[d]
    })
    filteredData.push(temp)
})

With a working fiddle here

OTHER TIPS

Just add your .dimensions() call after .ticks(), and before .createAxes():

var pc = d3.parcoords()("#example")
  .data(data)
  .render()
  .ticks(3)
  .dimensions([1,2,4])
  .render()
  .createAxes();

Jsfiddle here

After looking at user1614080's solution, he just filters the data ahead-of-time, which is easy, and always available, but not what you asked for. I tried using his example (with the names), and just used the names for the dimensions (jsFiddle here). The way I did it works just fine with named dimensions too.

The dimensions just need to come somewhere after the .render(), but I'm not sure why.

EDIT: Finally figured out why this wasn't showing right. .render() needs to be called after the dimensions are updated (alludes to it slightly here). Both examples updated to fix the inflection points between the axes.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top