Box plot y axis extent is too large on small numbers

[amergin]

I'm seeing an issue where my data is somewhere between [0, 0.5] yet the chart is drawn with a clearly larger extent:

d3.extent(config.reduced.top(Infinity)[0].value)
[0.003021, 0.832]
d3.extent(config.reduced.top(Infinity)[1].value)
[0.0002859, 0.6982]
d3.extent(config.reduced.top(Infinity)[2].value)
[0.000007057, 0.5115]
$scope.chart.yAxisMax()
12.832
$scope.chart.yAxisMin()
-11.999992943

Any way around this without having to override the domain manually - that is, to have to recompute the extent whenever the chart filter is triggered?

.elasticY(false)
.y(d3.scale.linear().domain([currentExtent]))

?

[amergin]

My bad, it seems that this can be controlled by tweaking the setting yAxisPadding, i.e. set

.yAxisPadding('10%')

produces sane figures. Although it's weird the default value would be so high considering the docs mention the default value to be 0.

[gordonwoodhull]

Yeah, we've run into this before. I think this chart was tuned for its example and it contains the suspicious lines

    // default padding to handle min/max whisker text
    _chart.yAxisPadding(12);

https://github.com/dc-js/dc.js/blob/develop/src/box-plot.js#L54-L55

... which may work great for that example but it's not great to adjust the domain in order to fit some text in range coordinates.

I don't think we currently have range padding (?) but that's what's needed here. At least there is access to the thing you need to override.

[stevenmyhre]

Another issue, if you have very small values as @amergin does, the yAxisMin value is calculated based on the minimum value, not taking into account the range. When you use a percentage for yAxisPadding, this doesn't scale well. For example: if your minimum value is 0.5, and your max is 2000, with a yAxisPadding of 5% then you will end up with only 5% of 0.5 (.025) when I would expect it to calculate based on the target range (a percentage of pixels not values). I was able to just override the yAxisMin function to use a percentage of the max - min, but thought I would give my 2 cents.

https://github.com/dc-js/dc.js/blob/develop/src/box-plot.js#L204-209

[cwolcott]

I have been thinking through this for the last hour. @gordonwoodhull has anything every come of this? Why was this closed?

[gordonwoodhull]

It's still open.

It's actually not that hard to compute elastic manually - just add a preRender & preRedraw handler.

I guess the tricky part is computing the text height (in range coordinates) and transforming it to domain coordinates, without already having the scale calculated.

[cwolcott]

Sorry. I now see that #1120 is open and #725 was closed. I am working on an updated BoxPlot with more options and have a fix for this also that I would like to pass through someone after this weekend.

[cwolcott]

Here is the work that I am performing on boxPlot.

Below is the current output from the dc.js boxplot for 4 different datasets. As discussed the hardcoding of the yAxisPadding=12 causes issues with smaller range charts.

Below is a fix to dynamically calculate the yAxisPadding within the boxPlot code. It still allows the users to add additional yAxisPadding if needed.

Finally I had a requirement to render the data within the boxPlot. The idea came from the following stackoverflow question.

https://stackoverflow.com/questions/29779079/adding-a-scatter-of-points-to-a-boxplot-using-matplotlib

This is what I am currently working on. I have some code cleanup and a couple of additional actions to complete. Currently the developer can provide the following:

• renderData(boolean) - Display the data points on the boxPlot. Default - false
• dataBoxPercentage(percentage) - Display the data points within a bounded box. Default - 0.9

I would like to allow the developer to define the symbol for outliers, but might leave this for later.
I would like to allow the developer to turn off outliers (based on a comment on stackoverflow), but this involves a recalc of the yAxis min/max. Probably leave for later.
Working on toolTips for the data points.

Any thoughts?

[gordonwoodhull]

Those look great! I hope you will consider contributing a PR.

[cwolcott]

I will definitely be happy to contributing a PR. I have never contributed before so I will need to determine the process.

[gordonwoodhull]

It's not too hard, just start out by forking the repo and then creating a branch with the changes you want to contribute. When you push that branch to GitHub and visit your repo's page, github will ask you if you want to do a PR.

There are some annoying details after that, but that's enough to share your work with others.

The branch is so you can separate changes that you want to contribute from ones you don't.

[she12]

I am new to d3. The tip to change the yAxisPadding worked for me to plot small values between 6.5 to 7.4. I have the data with 3 digits after the decimal point e.g. 7.401. Any suggestions on what should I change to display the 3 digits. Right now it only shows one digit after the decimal point on the boxPlot like below:

The scatterPlot data within boxPlot looks great! Can you please share the code for the same here or at GitHub?

[she12]

My bad, it seems the 3 digits after the decimal can be done by setting the tickFormat:

.tickFormat(d3.format('.3f'))

[she12]

@cwolcott
The scatterPlot data within boxPlot looks great! Can you please share the code for the same here or at GitHub?

[gordonwoodhull]

Fixed by #1370 in 3.0.4, which introduces yRangePadding to adjust padding in pixel coordinates.