Alignment and Colors of Data Point Outliers of Box Plot

Question

Is it possible to align the data points and outliers of box plot in one straight line like in center of box plot?

Additionally, can I color the data points?

The current and the desired screen shot are attached with it.

Answer 1

You can use

.dataWidthPortion(0)

to not spread the points out at all. Documentation.

General advice on changing the color or style of anything, if there is no accessor for it:

1. Look for the chart in the chart selectors wiki, or if it's not there, inspect the item you want to change in the developer tools and find out what SVG tag and CSS class the item has. In this case, it's circle.data

2. Add a pretransition handler which selects the items you want, and changes them:

   var cc = d3.scaleOrdinal().range(d3.schemeDark2);
   bp02.on('pretransition', chart => {
       chart.selectAll('circle.data').attr('fill', function(d) {
           const boxDatum = d3.select(this.parentNode).datum();
           return cc(boxDatum.value[d]);
       })
   });
   

   In this case, we're creating an ordinal scale to map the available data to the colors in a color scheme.

The interesting question is here is what data to bind to the color of the dots, and how to get that data.

A box plot's data consists of an array of key/value pairs where each value is a Y value. When the box plot draws it will bind each circle.dot element to the index of the data in the array.

So we need to get the array that is bound to the box. Luckily d3.select(this.parentNode).datum() will give us the key/value pair for the box.

For this example, we are encoding the color based on the Y value, which we get by looking inside boxDatum.value. You don't specify how you want the dots colored but this shows the data that is available.