javascript - d3js Parallel Coordinates categorical data - Stack Overflow

admin管理员组

文章数量:1345476

I am looking for a method of adding categorical data to the d3js parallel coordinates. D3js is new to me, I can understand some of what is being done, but have not been able to figure out a way of doing this. Parallel sets are not a good option, as most of my data is continuous.

If you think of the car example, I would like to be a able to filter by brand on an axis (eg. filter so that only data on Ford is shown). I'm assuming that a variable would be needed to define each car (eg. Peugeot, Ford, BMW, Audi etc...)

Here is the car example.

Thanks to anyone who responds.

I am looking for a method of adding categorical data to the d3js parallel coordinates. D3js is new to me, I can understand some of what is being done, but have not been able to figure out a way of doing this. Parallel sets are not a good option, as most of my data is continuous.

If you think of the car example, I would like to be a able to filter by brand on an axis (eg. filter so that only data on Ford is shown). I'm assuming that a variable would be needed to define each car (eg. Peugeot, Ford, BMW, Audi etc...)

Here is the car example.

http://bl.ocks/1341281

Thanks to anyone who responds.

• javascript
• d3.js
• parallel-coordinates

Share Improve this question Follow edited Jul 9, 2014 at 6:19 VividD 10.5k88 gold badges6666 silver badges112112 bronze badges asked Nov 5, 2012 at 6:40 user1799353user1799353 7111 silver badge22 bronze badges 1

• You may be interested in Robert Kosara's "parallel sets" - see here and also Robert Kosara, Fabian Bendix, Helwig Hauser, "Parallel Sets: Interactive Exploration and Visual Analysis of Categorical Data", Transactions on Visualization and Computer Graphics, vol. 12, no. 4, pp. 558–568, 2006 available here – Silverfish Commented Jan 15, 2015 at 15:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

Actually all you need is an ordinal scale! The axis will take care of the rest.

Check it out here.

Basically I changed:

x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
  return d != "name" && (y[d] = d3.scale.linear()
      .domain(d3.extent(cars, function(p) { return +p[d]; }))
      .range([h, 0]));
}));

to:

x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {

    if(d === "name") return false;

    if(d === "colour") {
        y[d] = d3.scale.ordinal()
          .domain(cars.map(function(p) { return p[d]; }))
          .rangePoints([h, 0]);

    }
    else {
        y[d] = d3.scale.linear()
          .domain(d3.extent(cars, function(p) { return +p[d]; }))
          .range([h, 0]);
    }

    return true;
}));

And I added one string valued categorical column to the data. I was a bit lazy for hard-coding which property is string-valued.

本文标签： javascriptd3js Parallel Coordinates categorical dataStack Overflow