CODEWITHSUNDEEP
javascriptd3.jsdimensions
gimba
gimba

Reputation: 511

how to use dimensions with d3 parcoords

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?

Upvotes: 1

Views: 1814

Answers (2)

Gerrat
Gerrat

Reputation: 29690

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.

Upvotes: 1

user1614080
user1614080

Reputation: 2874

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

Upvotes: 2

Related Questions