31:T780,md`
### 2. The box plot:
We must first calculate a series of statistics to be able to draw a box plot because there isn't a native D3 function to draw it. I originally used [this really good article](https://blog.datasyndrome.com/a-simple-box-plot-in-d3-dot-js-44e7083c9a9e) as a reference, but the one here is slightly different. A box plot visually represents the [median](https://en.wikipedia.org/wiki/Median) of a distribution, as well as the quartiles, and sometimes the outliers of a sample. [See this image](https://en.wikipedia.org/wiki/Quartile#/media/File:Boxplot_vs_PDF.svg) for reference.
To draw the "box" we need to calculate: - The 1st and third quartiles Q1 and Q3 (the distance between Q1 and Q3 is known as the interquartile range or IQR) - The median.
To draw the "whiskers" we need to calculate: - Q1 - 1.5 * IQR - Q3 + 1.5 * IQR.
D3 provides [handy functions to calculate all these values](https://github.com/d3/d3-array#statistics). I've created a master function that returns all the stats we need:
\`\`\`javascript function getStats(data) { return { median: d3.median(data), quartile: boxQuartiles(data), whiskers: boxWhiskers(data) } }\`\`\` And here are the specific functions for the quartile and the whiskers: \`\`\`javascript function boxQuartiles(data) { let sortedData = data.sort() return [ d3.quantile(sortedData, .25), d3.quantile(sortedData, .5), d3.quantile(sortedData, .75) ]; } function boxWhiskers(data) { const minimum = d3.min(data) const q1 = d3.quantile(data, .25) const q3 = d3.quantile(data, .75) const iqr = (q3 - q1) return [ q1 - 1.5*iqr <= minimum ? minimum : q1 - 1.5*iqr, q3 + 1.5*iqr ]; } \`\`\` **Note that the data must be sorted** so that the quantile functions works properly. In this case the sorting is pretty simple, just use array.sort(). Here's the resulting statistics:`32:T88f,boxplot = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, contextHeight + margin.top + margin.bottom)); const boxplot = svg.append('g').attr('class', 'box-container') .attr('transform', `translate(${margin.left}, ${margin.top})`); boxplot.append('g').attr('class', 'box-whisker-ends').selectAll('.line') .data(boxVals.whiskers) .enter().append('line') .attr('x1', (d, i) => x(d)) .attr('y1', (contextHeight-boxHeight)/2) .attr('x2', (d, i) => x(d)) .attr('y2', (contextHeight-boxHeight)/2 + boxHeight) .attr('stroke', 'steelblue') .style('stroke-width', 1); boxplot.selectAll('.box-horizontal-line') .data([boxVals]).enter().append('line') .attr('class', 'box-horizontal-line') .attr('x1', d => x(d.whiskers[0])) .attr('y1',contextHeight/2) .attr('x2', d => x(d.whiskers[1])) .attr('y2',contextHeight/2) .attr('stroke', 'steelblue') .attr('stroke-width', 1) boxplot.selectAll('.box-rectangle') .data([boxVals]).enter().append('rect') .attr('class', 'box-rectangle') .attr('height', boxHeight) .attr('width', d => x(d.quartile[2]) - x(d.quartile[0]) ) .attr('y',(contextHeight-boxHeight)/2) .attr('x', d => x(d.quartile[0])) .attr('stroke', 'none') .attr('fill', 'steelblue') boxplot.selectAll('.box-median') .data([boxVals.median]).enter().append('line') .attr('x1', d => x(d)) .attr('y1',boxHeight) .attr('x2', d => x(d)) .attr('y2', 3 * boxHeight) .style('stroke-width', 2) .style('stroke', 'white'); boxplot.append('g').attr('class', 'box-outlier-lines').selectAll('.line') .data(boxVals.whiskers).enter().append('line') .attr('x1', (d, i) => i === 0 ? x(d3.min(data)) : x(d)) .attr('y1',contextHeight/2) .attr('x2', (d, i) => i === 0 ? x(d) : x(d3.max(data))) .attr('y2',contextHeight/2) .style('stroke-width', 1) .attr('stroke', 'steelblue') .attr('stroke-dasharray', 6) boxplot.append("g") .call(xAxis) .attr('transform', `translate(0,${contextHeight})`); return svg.node(); }33:T8e7,md`
So to create the chart we need to append (take a look at the reference image if you have issues understanding any of the values):
#### A. The square box: \`\`\`javascript boxplot.selectAll('.box-rectangle') .data([boxVals]).enter().append('rect') .attr('class', 'box-rectangle') .attr('height', boxHeight) .attr('width', d => x(d.quartile[2]) - x(d.quartile[0]) ) .attr('y',(contextHeight-boxHeight)/2) .attr('x', d => x(d.quartile[0])) .attr('stroke', 'none') .attr('fill', 'steelblue'); \`\`\` #### B. The whiskers: \`\`\`javascript \\\\The horizontal line boxplot.selectAll('.box-horizontal-line') .data([boxVals]).enter().append('line') .attr('class', 'box-horizontal-line') .attr('x1', d => x(d.whiskers[0])) .attr('y1',contextHeight/2) .attr('x2', d => x(d.whiskers[1])) .attr('y2',contextHeight/2) .attr('stroke', 'steelblue') .attr('stroke-width', 1); \\\\The little vertical lines at each end boxplot.append('g').attr('class', 'box-whisker-ends').selectAll('.line') .data(boxVals.whiskers) .enter().append('line') .attr('x1', (d, i) => x(d)) .attr('y1', (contextHeight-boxHeight)/2) .attr('x2', (d, i) => x(d)) .attr('y2', (contextHeight-boxHeight)/2 + boxHeight) .attr('stroke', 'steelblue') .style('stroke-width', 1); \`\`\` #### C. The median: \`\`\`javascript boxplot.selectAll('.box-median') .data([boxVals.median]).enter().append('line') .attr('x1', d => x(d)) .attr('y1',boxHeight) .attr('x2', d => x(d)) .attr('y2', 3 * boxHeight) .style('stroke-width', 2) .style('stroke', 'white'); \`\`\` #### D. The outliers: (these are usually represented by dots, but I've chosen an alternative representation, as these could be hundreds or thousands, and I don't want to overload the DOM) \`\`\`javascript boxplot.append('g').attr('class', 'box-outlier-lines').selectAll('.line') .data(boxVals.whiskers).enter().append('line') .attr('x1', (d, i) => i === 0 ? x(d3.min(data)) : x(d)) .attr('y1',contextHeight/2) .attr('x2', (d, i) => i === 0 ? x(d) : x(d3.max(data))) .attr('y2',contextHeight/2) .style('stroke-width', 1) .attr('stroke', 'steelblue') .attr('stroke-dasharray', 6) \`\`\` `34:T958,boxplotBrush = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, contextHeight + margin.top + margin.bottom)); const boxplot = svg.append('g').attr('class', 'box-container') .attr('transform', `translate(${margin.left}, ${margin.top})`); boxplot.append('g').attr('class', 'box-whisker-ends').selectAll('.line') .data(boxVals.whiskers) .enter().append('line') .attr('x1', (d, i) => x(d)) .attr('y1', (contextHeight-boxHeight)/2) .attr('x2', (d, i) => x(d)) .attr('y2', (contextHeight-boxHeight)/2 + boxHeight) .attr('stroke', 'steelblue') .style('stroke-width', 1); boxplot.selectAll('.box-horizontal-line') .data([boxVals]).enter().append('line') .attr('class', 'box-horizontal-line') .attr('x1', d => x(d.whiskers[0])) .attr('y1',contextHeight/2) .attr('x2', d => x(d.whiskers[1])) .attr('y2',contextHeight/2) .attr('stroke', 'steelblue') .attr('stroke-width', 1) boxplot.selectAll('.box-rectangle') .data([boxVals]).enter().append('rect') .attr('class', 'box-rectangle') .attr('height', boxHeight) .attr('width', d => x(d.quartile[2]) - x(d.quartile[0]) ) .attr('y',(contextHeight-boxHeight)/2) .attr('x', d => x(d.quartile[0])) .attr('stroke', 'none') .attr('fill', 'steelblue') boxplot.selectAll('.box-median') .data([boxVals.median]).enter().append('line') .attr('x1', d => x(d)) .attr('y1', (contextHeight-boxHeight)/2) .attr('x2', d => x(d)) .attr('y2', (contextHeight-boxHeight)/2 + boxHeight) .style('stroke-width', 1) .style('stroke', 'white'); boxplot.append('g').attr('class', 'box-outlier-lines').selectAll('.line') .data(boxVals.whiskers).enter().append('line') .attr('x1', (d, i) => i === 0 ? x(d3.min(data)) : x(d)) .attr('y1',contextHeight/2) .attr('x2', (d, i) => i === 0 ? x(d) : x(d3.max(data))) .attr('y2',contextHeight/2) .style('stroke-width', 1) .attr('stroke', 'steelblue') .attr('stroke-dasharray', 6) boxplot.append("g") .call(xAxis) .attr('transform', `translate(0,${contextHeight})`); boxplot.append('g') .attr('class', 'brush') .attr('id', 'brushTest') .call(testBrush) .call(testBrush.move, [0, width]); return svg.node(); }35:T1055,brushableHistogram = { brush .on('brush', brushing) .on('end', d => updateYAxis(bins)) const totalHeight = height + contextHeight + margin.top + margin.bottom + 20; const svg = d3.select(DOM.svg(width + margin.left + margin.right, totalHeight)); //TODO add the clip svg.append("defs") .append("clipPath") .attr("id", "clip") .append('rect') .attr('transform', `translate(${0}, ${margin.top})`) .attr("width", width) .attr("height", height); const histogram = svg.append('g') .attr('id', 'histogram-demo') .attr('class', 'histogram-demo') .attr('transform', `translate(${margin.left}, ${margin.top})`) .attr('clip-path', 'url(#clip)') // .data([0]) // .append('g').attr('class', 'histogram-demo'); function updateFocus(data){ // NOTE: this function must end before the bars are drawn updateYAxis(data) // JOIN operation const focusEnter = histogram.selectAll('.bar').data(data).join( enter => enter.append('rect') // .merge(focusEnter) .attr('class', 'bar') .attr('x', d => xDemo(d.x0) + 1) .attr('width', d => Math.max(0, xDemo(d.x1) - xDemo(d.x0) - 1)) .attr('y', d => yDemo(-d.length)) .attr('height', 0) .attr('fill', 'steelblue') .attr('y', d => yDemo(d.length)) .attr('height', d => yDemo(0) - yDemo(d.length)), update => update.attr('y', d => yDemo(d.length)) .attr('height', d => yDemo(0) - yDemo(d.length)) ) } //updateFocus const boxplot = svg.append('g').attr('class', 'box-container') .attr('transform', `translate(${margin.left}, ${height + margin.top + 20})`); boxplot.append('g').attr('class', 'box-whisker-ends').selectAll('.line') .data(boxVals.whiskers) .enter().append('line') .attr('x1', (d, i) => xDemo(d)) .attr('y1', (contextHeight-boxHeight)/2) .attr('x2', (d, i) => xDemo(d)) .attr('y2', (contextHeight-boxHeight)/2 + boxHeight) .attr('stroke', 'steelblue') .style('stroke-width', 1); boxplot.selectAll('.box-horizontal-line') .data([boxVals]).enter().append('line') .attr('class', 'box-horizontal-line') .attr('x1', d => xDemo(d.whiskers[0])) .attr('y1',contextHeight/2) .attr('x2', d => xDemo(d.whiskers[1])) .attr('y2',contextHeight/2) .attr('stroke', 'steelblue') .attr('stroke-width', 1) boxplot.selectAll('.box-rectangle') .data([boxVals]).enter().append('rect') .attr('class', 'box-rectangle') .attr('height', boxHeight) .attr('width', d => xDemo(d.quartile[2]) - xDemo(d.quartile[0]) ) .attr('y',(contextHeight-boxHeight)/2) .attr('x', d => xDemo(d.quartile[0])) .attr('stroke', 'none') .attr('fill', 'steelblue') boxplot.selectAll('.box-median') .data([boxVals.median]).enter().append('line') .attr('x1', d => xDemo(d)) .attr('y1', (contextHeight-boxHeight)/2) .attr('x2', d => xDemo(d)) .attr('y2', (contextHeight-boxHeight)/2 + boxHeight) .style('stroke-width', 1) .style('stroke', 'white'); boxplot.append('g').attr('class', 'box-outlier-lines').selectAll('.line') .data(boxVals.whiskers).enter().append('line') .attr('x1', (d, i) => i === 0 ? xDemo(d3.min(data)) : xDemo(d)) .attr('y1',contextHeight/2) .attr('x2', (d, i) => i === 0 ? xDemo(d) : xDemo(d3.max(data))) .attr('y2',contextHeight/2) .style('stroke-width', 1) .attr('stroke', 'steelblue') .attr('stroke-dasharray', 6) boxplot.append("g") .call(xAxis) .attr('class', 'axis') .attr('transform', `translate(0,${contextHeight})`); boxplot.append('g') .attr('class', 'brush') .attr('id', 'brush-demo') .call(brush) .call(brush.move, [0, width]); updateFocus(bins); histogram.append("g") .attr('transform', `translate(0, 0)`) .call(yAxis); histogram.append("g") .call(xAxisFocus) .attr('transform', `translate(0, ${height})`); brushing(); return svg.node(); }36:T570,function updateYAxis(data){ if (!d3.select('#brush-demo').node()) return; let s = d3.brushSelection(d3.select('#brush-demo').node()); let filteredBins = []; const binVals = []; let goalMin = s.map(xDemo.invert, xDemo)[0]; let goalMax = s.map(xDemo.invert, xDemo)[1]; for (var i of data) { binVals.push(i.x0, i.x1) } const uniqueBins = [...new Set(binVals)]; function evalBounds(array, goal, min) { for (var i = 1; i < array.length; i++) { if (goal >= array[i-1] && goal <= array[i]) { if (min) {return array[i-1]} else return array[i] } } } let range = { lower: evalBounds(uniqueBins, goalMin, true), upper: evalBounds(uniqueBins, goalMax, false) } function checkRange(datum) { return datum >= this.lower && datum <= this.upper; } for (var i of data) { const filteredBars = i.filter(checkRange, range) filteredBins.push(filteredBars) } yDemo.domain([0, d3.max(filteredBins, d => d.length)]); d3.select('#histogram-demo').selectAll('.bar') .transition().duration(300) .attr('height', d => yDemo(0) - yDemo(d.length)) .attr('y', d => yDemo(d.length)) // d3.select('.axis-y-focus').transition().duration(300).call(yAxis) }37:[] 2f:{"title":"Brushable histogram with box plot","cells":[{"id":991,"value":"md`# Brushable histogram with box plot\n\nSometimes visualizing distributions only using [histograms](https://en.wikipedia.org/wiki/Histogram) is not enough. [Box plots](https://en.wikipedia.org/wiki/Box_plot) are another way to visualize a distribution that easily shows the [quartiles](https://en.wikipedia.org/wiki/Quartile) of the sample. However, they do not allow us to visually see the shape of the distribution or binned counts. Combining a histogram and a box plot can provide two different views of a distribution, which may help understand the data better.
\n\nAdditionally, using a brush allows the user to focus on the tails of the histogram, where values are oftentimes too small to be visible in a static view.\n\n
\n## The final result:\nIf you're already familiar with D3 and just want to get down to the code **scroll down to the bottom**. Otherwise, feel free to follow the step by step tutorial below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`
\n## Setting up the chart\n
\n**Note: I will try to describe how to do this in logical, sequential steps, even though that's not required in Observable**. First lets get some data from Observable's sample datasets.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"data = {\n const data = (await require(\"@observablehq/unemployment\")).map(d => d.rate);\n data.y = \"Counties\";\n data.x = \"Unemployment (%)\";\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"md`
\n### 1. The histogram\n\nI'm modifying [this histogram originally posted by Mike Bostock](https://beta.observablehq.com/@mbostock/d3-histogram). First we define the [margins](https://bl.ocks.org/mbostock/3019563) of our chart, as well as the X and Y scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data)).nice()\n .range([0, width])","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(bins, d => d.length)]).nice()\n .range([height, 0])","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`
D3 provides the [d3.histogram() function](https://github.com/d3/d3-array/blob/master/README.md#histogram), which takes an array of data and \"bins\" it according to a given criteria using the [.thresholds() method](https://github.com/d3/d3-array/blob/master/README.md#histogram-thresholds). In this case we're simply asking the function to bin the data in as close to 40 bins as possible using the [axis.ticks() method](https://github.com/d3/d3-axis#axis_ticks). You could also pass a number to the thresholds argument, or an array of values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"binsGenerator = d3.histogram()\n .domain(x.domain())\n .thresholds(x.ticks(40))","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`
... if we pass data as the argument of \\`binsGenerator()\\` we get an array of 57 elements that we're calling \\`bins\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"bins = binsGenerator(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`
Each of the arrays inside \\`bins\\` contains the binned datapoints. The height of the bar effectively corresponds to the lenght of each of the arrays. For instance, the 6th bar will represent a height of \\`bins[5].length = \\` ${bins[5].length}. Below you can see the value for every bar that we will be plotting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"bins.map(d => d.length)","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"md`This is all we need to plot the histogram. Open the cell below to see the code, which is quite short and straightforward.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"chart = {\n const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom));\n \n const histogramContainer = svg.append('g')\n .attr('transform', `translate(${margin.left}, ${margin.top})`);\n \n const bar = histogramContainer.append(\"g\")\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(bins)\n .enter().append(\"rect\")\n .attr(\"x\", d => x(d.x0) + 1)\n .attr(\"width\", d => Math.max(0, x(d.x1) - x(d.x0) - 1))\n .attr(\"y\", d => y(d.length))\n .attr(\"height\", d => y(0) - y(d.length));\n\n histogramContainer.append(\"g\")\n .call(xAxis)\n .attr('transform', `translate(0, ${height})`);\n \n histogramContainer.append(\"g\")\n .call(yAxis);\n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"md`The only possibly obscure parameter, especially if you're new to D3 is the \\`width\\` attribute. If you look at data again, you'll find that every array contains all the datapoints, and two extra values: \\`x0\\` and \\`x1\\`. The width of the bars is simply the difference between the two distances or 0, whichever is a larger number: \n\n\\`\\`\\`javascript\nMath.max(0, x(d.x1) - x(d.x0) - 1)\n\\`\\`\\`\nfor instance, the array for the first bar we see has values of \\`x0: 1.5, x1: 2\\`, so the calculation is:\n\n\\`\\`\\`javascript\nMath.max(0, x(2) - x(1.5) - 1)\\`.\n\\`\\`\\`\n\nThe \\`-1\\` at the end is simply used to draw that thin white line between every bar.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"boxVals = getStats(sortedData)","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"md`
\nYou can see the resulting box plot below. Either open the cell or scroll down to look at the code for each of the parts:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"md`
\n### 3. The Brush:\n
Adding a brush is very simple! We just create a [D3 Brush](https://github.com/d3/d3-brush) and append it to the existing code for the box plot like so:\n\n\\`\\`\\`javascript\nconst brush = d3.brushX()\n .extent([ [0, 0], [width, contextHeight] ])\n\nboxplot.append('g')\n .attr('class', 'brush')\n .attr('id', 'brush')\n .call(brush)\n .call(brush.move, [0, width]);\n\\`\\`\\`\n\nTry clicking and dragging the edges of the brush:\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"testBrush = d3.brushX()\n .extent([ [0, 0], [width, contextHeight] ])\n .on('brush', testingBrush)","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"md`
... okay, so we have a gray box that changes size. So what?
\n\nWell, we can dynamically get the values of the edges of the brush, and use those to update our histogram. You can see that the values below change when playing with the brush:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":900,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":943,"value":"md`
\nTo do this, a little function:\n\n\\`\\`\\`javascript\nfunction brushing() {\n if (!d3.brushSelection(d3.select('#brushTest').node())) return;\n let s = d3.brushSelection(d3.select('#brushTest').node());\n let newRange = s.map(x.invert, x);\n}\n\\`\\`\\`\n\nThe first line is to prevent an error in case the brush node doesn't exist in the DOM. s corresponds to the selection, which is in pixels, but we can turn it back to values using x.invert\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"md`
\n### 3. Tying it all together:\n
So now we just need to use the brush as a \"zooming\" tool for the histogram. When I move the brush, I want the histogram to update its view, to only see the values within the range of my brush selection. Additionally, I also want to update the Y axis so that the small values in the tail of the histogram can be easier to see.
\n\nThere are many ways to control these events, a good approach is to have two separate \\`