Brushing ordinal data on y-axis of parallel coordinate (warning, I am a beginner)

[YoDude]

I REALLY like this graph and its functionality and it is totally what I want/need! Buuutttt,,,, the only thing is is that I need to allow ordinal data on the y-axis (names and stuff) but that seems to break the brushing.

I changed the y-scale from linear to ordinal y[k] = d3.scale.linear().domain(d3.extent(data, function(d) { return +d[k]; })).range([h, 0])); to y[k] = d3.scale.ordinal().domain(data.map(function(d) { return d[k]; })).rangePoints([h, 0])
 

and all reference to .range also got changed to .rangePoints

Everything works... BUT, when I brush it doesn't filter. Sometime all the lines show up (if I move the brush all the way up most or all the lines will appear), sometimes none, sometimes a few.

I think if that got working, this graph would be amazing.

...well, somehow getting the ordinal data to be arranged alphabetically on the axis would be even more amazing but that would probably be another post... unless someone has time to answer both Qs now...

THX!

[Kai Chang]

I'm working on refactoring that graph into a reusable chart:

http://syntagmatic.github.com/parallel-coordinates/

Plan to make a new example of CSV upload soon. The page you linked is
buggy, so I'll replace that gist with the new version.

Ordinal axes have come up a few times. My first attempt is here:

http://bl.ocks.org/4020926

I do want to support ordinal axes, with sort order and brushing in the
reusable chart. I haven't looked deeply into it yet, but here are my
thoughts:

I'm not sure on the status of ordinal scale inversion. That would
definitely help.

Otherwise, we could use the solution Bob suggested, mapping the values
in the ordinal dimension to integers. For example on this page:

http://bl.ocks.org/d/3150059/

If you run this in the console, you'll get the list of unique values
for the "group" dimension in alphabetical order:

_(data).chain().pluck("group").uniq().value().sort()

http://underscorejs.org/#chain
http://underscorejs.org/#pluck
http://underscorejs.org/#uniq

Then add a new dimension, "group_id", to every data object and put
that as a dimension in parallel coordinates. Brushing will work
normally, but it won't display the group name properly in the chart.
It will show the integer instead.

[Kai Chang]

Included an example of mapping an attribute of the data to integers
(in this case, the first word of the "name" column which corresponds
to car manufacturer) to display ordinal data in parallel coordinates:

http://syntagmatic.github.com/parallel-coordinates/examples/ordinal.html

[YoDude]

Hi Kai, 

Thanks SO much for responding and in such detail! I have seen your name on the copyright note on the graphs and it's soo cool you responded to my question! Thx!

I looked at your links and don't think I will go with the number to name approach (for my data, this would take too long to figure out and I need it to be simple for the user). 

I REALLY like this link you sent me: http://bl.ocks.org/d/3150059/ (but don't see how it was an example of mapping ordinal data to integers...). this is what I am trying to modify. awesome graph.  

This is exactly what I need: http://bl.ocks.org/4020926 for the graph but with the functionality of the other one (that is, export, save, exclude, light and dark theme options, list of food groups, and search feature).I got it mostly working... that is, names show up on one of the y-axis of the graph and the input data is accurately depicted with the lines of the graph, the inverting still works, and all the other features... Brushing still doesn't work and now all the data is out of order (not alphabetical and the numbers are all unordered). 

Any suggestions on how I can order each y-axis without sorting the actual CSV file?

Thanks!!

 

(let me know if you want me to post the mods I did to your code) :)

[Kai Chang]

For http://bl.ocks.org/d/3150059/, run this in a console. It's a code
snippet that will return the unique entities of an ordinal column, in
this case "group", in alphabetical order.

_(data).chain().pluck("group").uniq().value().sort()

You're correct that most of the examples sort the original data. I'll
think about this.

I'm working on compatibility for a new set of CSV data to focus on
these problems, the gravesites of US veterans. An example here:

http://syntagmatic.github.com/parallel-coordinates/examples/veterans.html

Takes a while to load to construct indexes. First name, last name,
middle name, cemetary name, war, branch are all ordinal columns.
States like California and Ohio have tragically large numbers of
gravesites (250k+), and this page isn't quite fast enough to display
them yet.

The data's from here:

https://explore.data.gov/browse?tags=gravesites

I'll keep working with these files for a few weeks to develop better
support for ordinal dimensions.

It'd be helpful to see what you're working on, since it sounds like
you've gotten quite far. I'm always curious to see what people are
doing with parallel coordinates. Thanks!

[YoDude]

I ran it in the web console (firefox) and it returned the food names in alphabetic order. is there a way of making it appear on the axis alphabetic too? (sorry if its a stupid question!) cuz now I have the numerical axis (which now think they are ordinal) displayed in random order... 

I haven't had that much time to work on the graph recently (unfortunately!!) but I will clean up my code a bit (messy with trial and error stuff and commented-out stuff ahaha) and definitely send or post when I can :)

[YoDude]

...I keep finding this example - http://philau.willbowman.com/2012/digitalInnovation/DevelopmentReferences/LIBS/d3JS/examples/brush/brush-ordinal.html. I am basically trying to combine this with yours (http://bl.ocks.org/d/3150059/). 

[YoDude]

I changed this:

 // Extract the list of numerical dimensions and create a scale for each.

  xscale.domain(dimensions = d3.keys(data[0]).filter(function(k) {

    return (_.isNumber(data[0][k])) && (yscale[k] = d3.scale.linear()

      .domain(d3.extent(data, function(d) { return +d[k]; }))

      .range([h, 0]));

  }).sort());

to this:

  // Extract the list of numerical dimensions and create a scale for each.

  xscale.domain(dimensions = d3.keys(data[0]).filter(function(k) {

    return k!='name' && (yscale[k] = d3.scale.ordinal().rangePoints([h, 0]),

      yscale[k].domain(data.map(function(d) { return d[k]; })))

    

and I changed all uses of .range() to .rangePoints(). 

Everything still seems to work as it was (other than brushing) but now the y-axis is disorganized. The table beneath the graph ("Food Groups") is still alphabetical but the y-axis is not (but inverting still seems to work). Is there a type of "sort" that I can use on ordinal data for the y-axes?

Thanks again :)