syntagmatic / parallel-coordinates

A d3-based parallel coordinates plot in canvas. This library is no longer actively developed.
http://syntagmatic.github.com/parallel-coordinates/
Other
511 stars 212 forks source link

Include white space between highest/lowest data value and highest/lowest tick mark #309

Closed tbadams45 closed 8 years ago

tbadams45 commented 8 years ago

Hi,

I have the following parcoords plot: china_js

On the rightmost axis (barley), the max value is ~465. I'm trying to include a tick mark at 500 and have there be white space in between this tick mark and the max value, like the picture below. china_paper

How should I do this? Setting the axis with parcoords.dimensions("Barley_1000_tons": { orient: 'left', title: 'Barley (kiltons)', innerTickSize: 5, outerTickSize: 8, type: "number", tickValues: [100,200,300,400,500] })

will include the tick mark at the correct location, but the label will be above the top of the parcoords plot (see pic below). china_js_inspect

I'm attempting to do the same thing with a tick mark at 100, but the value is ~110.

BroHammie commented 8 years ago

You need to configure the scale attribute in the dimension config using a linear domain, this will determine the height of the axis relative to the data set. Something like this in your dimension config should work:

yscale: d3.log.linear.domain([100,500]),

Let me test a bit real quick.

BroHammie commented 8 years ago

I was close. Try this:

var range = parcoords.height() - parcoords.margin().top - parcoords.margin().bottom;

parcoords.dimensions("Barley_1000_tons": 
{ 
orient: 'left',
 title: 'Barley (kiltons)',
 innerTickSize: 5,
 outerTickSize: 8,
 type: "number",
 tickValues: [100,200,300,400,500],
 yscale: d3.scale.linear().domain([0, 500]).range([range, 1])
})
tbadams45 commented 8 years ago

Perfect. Many thanks.