Search code examples
layoutd3.jsparallel-coordinates

D3.js Parallel Coordinates with Horizontal layout for axes

I am using http://bl.ocks.org/jasondavies/1341281 parallel coordinates visualization to visualize my data. However, I wish to reorient the axes to a Horizontal Layout instead of traditional vertically layout of the axes for some specific task. I tried playing with the code but didn't reach anywhere with it.

I have attached an image which describes what I am really trying to achieve. I have fair enough confidence that if I can get the axes to correct layout I can fix the labels on axes and ticks. Can somebody please help with this? Thank you in advance. Expected Layout of the axes

Solution

  • You can rotate the graph like this by rotating the group which contains the chart:

    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"
+ "rotate(270, "+width/2 + "," + height/2 + ")");

    This means to rotate the chart by 270 degrees about the center of the chart which is given by width/2 and height/2.

    Working code here

    Hope this helps!