d3js Parallel Coordinates categorical data

Question

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.org/1341281

Thanks to anyone who responds.

Answer 1

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.