Enhanced BoxPlot chart

[cwolcott]

I plan to submit an enhanced BoxPlot chart that is fully backward compatible. This enhancement will also fix issue #1120. I have never submitted a pull request, but would like to learn so I can help maintain this chart and potentially help with others.

Currently I am using a different name for this chart (BoxPlotJitter), but I will change it back to BoxPlot. It looks like I need to submit changes for src/box-plot.js, src/d3.box.js and style/dc.scss.

We are currently running against dc.js 2.1.9.

I will build a jsfiddle example and post the link later today to show the enhancements.

[cwolcott]

Here is a jsfiddle example of the BoxPlot Enhancements. The example looks best with bottom results.

Row 1 - BoxPlot (Original BoxPlot from dc.js 2.1.9)
Row 2 - New BoxPlotJitter (No new attributes) *
Row 3 - New BoxPlotJitter (All new attributes enabled)

The browser warnings/errors are coming from the original BoxPlot. You can disable the original BoxPlot charts by toggling the variable showOldBoxPlots in jsfiddle.

• Row 2 shows that the enhanced BoxPlot is backward compatible, except for the fix to the yAxis (Box plot y axis extent is too large on small numbers #1120).

Row 3 has all the new attributes enabled:

• renderData(true) - Show the actual values as opaque circles;
• renderTitle(true) - Show tooltips for each value;
• dataBoxPercentage(0.50) - Use a percentage of the box to display the data (0.00 - 0.99)
• boldOutlier(true) - Display the outlier as a red size 3 circle

Enabling the renderData is more impressive when you have a lot of data to show. The examples below show the dataBoxPercentages set to 0.90, 0.70, 0.50 and 0.30.

[gordonwoodhull]

That looks really great. I can see how it's really useful to show the data points.

I think the original d3 boxplot plugin that the chart was based on has been abandoned

https://github.com/d3/d3-plugins/tree/master/box

So there should be no issue modifying that file. And of course it's never a problem to add more styles.

There is something funny in your demo where if the window is initially narrow, the chart gets squished, which doesn't seem to happen with the old chart. I guess this is partly because you're not specifying the width in this example, but it might be worth looking into.

[Zaknarfen]

Is this going to be added? I am in need of this new BoxPlot. I've been manually adding it to d3 and dc just like the jsfiddle example, but since I am dealing with Angular and TypeScript it would be nice to have this in the library.

[gordonwoodhull]

Hi @Zaknarfen.

I hope so! Would you care to help @cwolcott with a Pull Request for this?

I think it may need a few revised or new tests for the new features. Nothing much, just expected number of dots, that kind of thing.

[cwolcott]

I can start tomorrow. I have never performed a pull request before. I will attempt to get it started tomorrow and work through it during the weekend. Is there a good place to get assistance? Our project has not upgraded to dc.js v3.0.x yet, but a sister project has and it went well.

So I will plan to integrate to 3.0.1?

[Zaknarfen]

I just tested here in a mid-size project and it looks amazing! @gordonwoodhull I was hoping @cwolcott would do that, it will help people out there I am sure. Just another thought in the future it would be really cool to have a horizontal box option, I'll try to do that meanwhile.

[gordonwoodhull]

That's great, @cwolcott! It's pretty easy with GitHub - you pretty much just push a branch to your fork and it leads you through the rest.

They have a lot of great guides, for example this one: https://help.github.com/articles/creating-a-pull-request/

Please just reach out if you run into trouble. Yes, I'd prefer a PR against 3.0 / develop, but the changes for 3.0 were pretty minimal for the box plot, so a PR against the 2.1 branch is also welcome.

@Zaknarfen, if your figure out how to add a horizontal box plot, that would be really cool!

[Zaknarfen]

@gordonwoodhull do you have any tips on swapping the places for the x and y axis? I think I got @cwolcott d3 part of the code ready for the horizontal boxplot. I tried sorta extending the coordinate-grid-mixin to do my biding and got the chart to render but the x and y were not fully inverted.

[cwolcott]

@Zaknarfen out of curiosity what version of dc.js are you integrating with

[Zaknarfen]

I am using 2.1.10 but there is nothing stopping me from using the latest version really. I am just using that version because I started a project before the current migration so I can't just switch, but I am planning to as soon as I get this to work.

[gordonwoodhull]

@Zaknarfen, I haven't really looked but my intuition is that the actual geometry and drawing will be the easier part - that comes from d3.box.js.

The harder part is the whole framework in coordinate grid assumes X is the dimension that gets filtered and brushed and Y is the dimension that gets aggregated. That's why row chart is not a bar chart and not a coordinate grid chart.

But I have not taken a serious look.

[cwolcott]

@gordonwoodhull would you like me to keep the filename d3.box.js or change it to box-jitter.js or something else?

[gordonwoodhull]

It's originally a copy of

https://github.com/d3/d3-plugins/blob/master/box/box.js

by Mike Bostock and Jason Davies. I don't think it's necessary to rename it - feel free if you want to, but I think what you've done is purely an extension.

But we should probably add some attribution and a link to the license

https://github.com/d3/d3-plugins/blob/master/LICENSE

Since it's BSD it's compatible with our Apache license but we haven't left in the attribution as we were supposed to do.

[cwolcott]

Reminder this is my first time ever doing this, so be gentle.

I forked the repository, created a branch against 2.1.10, made my changes to src/box-plot.js, src/d3.box.js. Had issues not being able to find newer d3 code used in 2.1.10 so kept with older functions.

i.e.;
Line 55 box-plot.js : New bandwidth() vs Old rangeBand()
Line 62 box-plot.js : New d3.scaleBand() vs Old d3.scale.ordinal()
Line 125 box-plot.js : New dc.utils.constant(boxWidth)

• a couple of others

I have not added any new tests to spec/box-plot-spec.js yet, but I will after this first submission.

I have run grunt server and the tests via http://localhost:8888/spec. No issues.
I have run grunt list. The d3.box.js now has a cyclomatic complexity score of 18.
I have run grunt test. No issues.

I have committed only the src/* changes.

Now I am ready to submit my pull request. What base of dc.js am I submitting against?

[gordonwoodhull]

Sounds good! I'm not sure what you mean by "not being able to find newer d3 code" but it should be pretty trivial for us to re-apply any changes we made for 3.0.

The branch 2.1 is a "support branch" - a live branch we will use in case we ever need to release 2.1.11. If you make that the base, then the diff will make sense. 2.1 is almost exactly the same as 2.1.10.

[cwolcott]

The pull request guidelines does not mention that you can touch the style/dc.scss file. and submitted a couple updates to style/dc.scss file for .dc-chart .box

Am I allowed to touch the web/examples directory? Currently there is the box-plot.html and box-plot-time.html. Do you have any thoughts/suggestions what examples to build?

I could leave the current 2 examples and just add an example with the basic attributes and enhanced attributes side by side.

[gordonwoodhull]

Yes, of course, please feel free to add styles and examples. I think it would be helpful to have an example that shows the jitter points changing when the data is filtered.

The examples double as interactive tests people can look at to see if changes break anything.

[cwolcott]

Do you want to take a look at the updates before I close the pull request?

I think that is it. Please look at the 2 new examples:

• boxplot enhancements
• boxplot render data

When running grunt lint --force I still have a cyclomatic complexity of 18 on d3.box.js. I assume you would like to me to see if I can refactor the code.

[gordonwoodhull]

Thanks @cwolcott! I'll close the pull request when I merge it.

Unfortunately I don't have the time to do a thorough review right now - hope to get to it later in the week.

It often takes me a few hours to a day to merge a pull request & I have to keep up with my "day job" atm. (Not that it's all that bad, it's also graphics. ;)

[gordonwoodhull]

Oops, I should move those questions to the PR. Editing...

[gordonwoodhull]

Implemented in #1439, released in 3.0.4