31:T663,## Before we begin... Histograms Use [*d3.bin()*](https://github.com/d3/d3-array/blob/main/README.md#bin) ([explanation in Observable](https://observablehq.com/@d3/d3-bin)) to generate the histogram data. We specify the `value()` and `domain()`. We can also specify the `thresholds()` which figures out how many bins to create, but by default, this is calculated for us. Typically, you setup your bin generator as a function: ``` histogram = d3.bin().value(d => d.column).domain(x.domain); ``` `domain()` specifies the x-axis domain (range of values), so it's best to specify the x-axis scale first and just use the same domain. Then you call the function with your data: ``` bins = histogram(data) ``` In this example, `bins` is a special array where `x0` represents the starting value of the bin, `x1` is the ending value of the bin, and `length` is how many elements are in that bin. The data structure also contains an array of all of the elements that are contained in the bin. Here's an example: ``` Array(5) 0: Array(4) 0: {Name: 'mazda rx2 coupe', Miles_per_Gallon: 19, Cylinders: 3, …} 1: {Name: 'maxda rx3', Miles_per_Gallon: 18, Cylinders: 3, …} 2: {Name: 'mazda rx-4', Miles_per_Gallon: 21.5, Cylinders: 3, …} 3: {Name: 'mazda rx-7 gs', Miles_per_Gallon: 23.7, Cylinders: 3, …} x0: 3 x1: 3.5 length: 4 1: Array(0) x0: 3.5 x1: 4 length: 0 2: Array(199) [0 … 99] // elements 0-99 [100 … 198] // elements 100-199 x0: 4 x1: 4.5 length: 199 3: [x0: 4.5, x1: 5] 4: (3) [{…}, {…}, {…}, x0: 5, x1: 5.5] 5: [x0: 5.5, x1: 6] ... length: 10 ```32:T8d2,// pass in the column name to create the histogram function baseHisto(col) { // set up const histoWidth = width * 0.33; const num_hist = 4; const histoHeight = (scatter_sq/num_hist)-(6*num_hist); const svg = d3.create('svg') .attr('width', histoWidth + margin.left + margin.right) .attr('height', histoHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create x scale const x = d3.scaleLinear() .range([0, histoWidth]) .domain(d3.extent(carData, d => d[col])).nice(); // NEW: compute bins for histogram // https://www.d3-graph-gallery.com/graph/histogram_basic.html // https://observablehq.com/@d3/d3-bin const histogram = d3.bin() .value(d => d[col]) // specify the values used for the histogram .domain(x.domain()); // domain is same as x-axis const bins = histogram(carData); console.log(bins); // create y scale const y = d3.scaleLinear() .range([histoHeight, 0]) .domain([0, d3.max(bins, d => d.length)]).nice(); // need to know bins first // create and add axes const xAxis = d3.axisBottom(x); const xAxisGroup = g.append("g") .attr("transform", `translate(0, ${histoHeight})`); xAxisGroup.append("text") .attr("x", 0) .attr("y", 33) .attr("fill", "black") .attr("font-weight", "bold") .attr("text-anchor", "start") .text(col); xAxisGroup.call(xAxis); const yAxis = d3.axisLeft(y).ticks(3); const yAxisGroup = g.append("g").call(yAxis) // add grid lines .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', histoWidth)) // https://observablehq.com/@ehs219/d3-histogram // draw bars const spacing = 1 g.append("g") .selectAll("rect") .data(bins) .join("rect") .attr("fill", "steelblue") .attr("x", d => x(d.x0) + spacing) // spacing allows for some space between the bars .attr("width", d => x(d.x1) - x(d.x0) - spacing*2) // spacing adds space between the bars .attr("y", d => y(d.length)) .attr("height", d => histoHeight - y(d.length)); return svg.node(); }33:Tb70,// pass in the column name to create the histogram function filteredHisto(col) { // set up const histoWidth = width * 0.33; const num_hist = 4; const histoHeight = (scatter_sq/num_hist)-(6*num_hist); const svg = d3.create('svg') .attr('width', histoWidth + margin.left + margin.right) .attr('height', histoHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create x scale const x = d3.scaleLinear() .range([0, histoWidth]) .domain(d3.extent(carData, d => d[col])).nice(); // https://www.d3-graph-gallery.com/graph/histogram_basic.html // https://observablehq.com/@d3/d3-bin const histogram = d3.bin() .value(d => d[col]) // specify the values used for the histogram .domain(x.domain()); // domain is same as x-axis const bins = histogram(carData); // create y scale const y = d3.scaleLinear() .range([histoHeight, 0]) .domain([0, d3.max(bins, d => d.length)]).nice(); // need to know bins first // create and add axes const xAxis = d3.axisBottom(x); const xAxisGroup = g.append("g") .attr("transform", `translate(0, ${histoHeight})`); xAxisGroup.append("text") .attr("x", 0) .attr("y", 33) .attr("fill", "black") .attr("font-weight", "bold") .attr("text-anchor", "start") .text(col); xAxisGroup.call(xAxis); const yAxis = d3.axisLeft(y).ticks(3); const yAxisGroup = g.append("g").call(yAxis) // add grid lines .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', histoWidth)) // NEW: draw background gray bars g.append("g").selectAll("rect") .data(bins) .join("rect") .attr("fill", "lightgray") .attr("x", d => x(d.x0) + 1) .attr("width", d => x(d.x1) - x(d.x0)-1) .attr("y", d => y(d.length)) .attr("height", d => histoHeight - y(d.length)); let barsGroup = g.append("g"); // NEW: added update() that updates bins and redraws bars function update(data) { // update bins const histogram = d3.bin() .value(d => d[col]) // specify the values used for the histogram .domain(x.domain()); // domain is same as x-axis const bins = histogram(data); // setup transition const t = svg.transition() .ease(d3.easeLinear) // easing examples at https://observablehq.com/@d3/easing-animations .duration(200); // draw bars barsGroup.selectAll("rect") .data(bins) .join("rect") .attr("fill", "steelblue") .attr("x", d => x(d.x0) + 1) .attr("width", d => x(d.x1) - x(d.x0) - 1) .transition(t) .attr("y", d => y(d.length)) .attr("height", d => histoHeight - y(d.length)); } return Object.assign(svg.node(), { update }); }34:T857,function barChart() { // set up const barWidth = scatter_sq; const barHeight = 50; const svg = d3.create('svg') .attr('width', barWidth + margin.left + margin.right) .attr('height', barHeight + margin.top + margin.bottom); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // create scales const x = d3.scaleLinear() .range([0, barWidth]) .domain([0, d3.max(originCounts.values())]).nice(); // keep scale the same const y = d3.scaleBand() .domain(origins) .range([0, barHeight]) .padding(0.2); // create and add axes const xAxis = d3.axisBottom(x); const xAxisGroup = g.append("g") .attr("transform", `translate(0, ${barHeight})`); // draw grid lines xAxisGroup.call(xAxis) .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -barHeight) .attr('y2', 0)); const yAxis = d3.axisLeft(y); const yAxisGroup = g.append("g").call(yAxis); yAxisGroup.append("text") .attr("transform", "rotate(-90)") // now x, y flipped in terms of positioning .attr("x", -1 * (barHeight / 2)) .attr("y", -50) .attr("fill", "black") .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .attr("font-weight", "bold") .text("Origin"); let barsGroup = g.append("g"); function update(data) { // update the number of cars for each origin const originCounts = d3.rollup( data, group => group.length, d => d.Origin ); // update bars const t = svg.transition() .ease(d3.easeLinear) .duration(200); // draw bars barsGroup.selectAll("rect") .data(originCounts, ([origin, count]) => origin) .join("rect") .attr("fill", ([origin, count]) => carColor(origin)) .attr("height", y.bandwidth()) .attr("x", 0) .attr("y", ([origin, count]) => y(origin)) .transition(t) .attr("width", ([origin, count]) => x(count)) } return Object.assign(svg.node(), { update }); }35:Te8d,function brushableScatterplot() { const visWidth = 400, visHeight = 400; // set up const xCol = "Weight_in_lbs", xLabel = "Weight (lbs)"; const yCol = "Miles_per_Gallon", yLabel = "MPG"; // the value for when there is no brush const initialValue = carData; const svg = d3.create('svg') .attr('width', visWidth + margin.left + margin.right) .attr('height', visHeight + margin.top + margin.bottom) .property('value', initialValue); const g = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`); // set up scales const x = d3.scaleLinear() .domain([0, d3.max(carData, d => d[xCol])]).nice() .range([0, visWidth]); const y = d3.scaleLinear() .domain([0, d3.max(carData, d => d[yCol])]).nice() .range([visHeight, 0]); // set up axes const xAxis = d3.axisBottom(x); const xAxisGroup = g.append('g') .attr('transform', `translate(0, ${visHeight})`); xAxisGroup.call(xAxis) // add grid lines // references https://observablehq.com/@d3/connected-scatterplot .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('y1', -visHeight) .attr('y2', 0)) // add label .append('text') .attr('x', visWidth / 2) .attr('y', 40) .attr('fill', 'black') .attr('text-anchor', 'middle') .attr('font-weight', 'bold') .text(xLabel); const yAxis = d3.axisLeft(y); const yAxisGroup = g.append('g'); // add grid lines // refernces https://observablehq.com/@d3/connected-scatterplot yAxisGroup.call(yAxis) .call(g => g.selectAll('.tick line') .clone() .attr('stroke', '#d3d3d3') .attr('x1', 0) .attr('x2', visWidth)) // add label .append('text') .attr("transform", "rotate(-90)") // now x, y flipped in terms of positioning .attr("x", -1 * (visHeight / 2)) .attr("y", -50) .attr('fill', 'black') .attr('dominant-baseline', 'middle') .attr('font-weight', 'bold') .text(yLabel); // draw points const radius = 3; const dots = g.selectAll('circle') .data(carData) .join('circle') .attr('cx', d => x(d[xCol])) .attr('cy', d => y(d[yCol])) .attr('r', radius) // make dots look like Vega-Lite dots .attr('opacity', 0.8) .attr('stroke', d => carColor(d.Origin)) .attr('fill', 'none') .attr('stroke-width', 2); // ********** new stuff starts here ********** const brush = d3.brush() // set the space that the brush can take up .extent([[0, 0], [visWidth, visHeight]]) // handle events .on('brush', onBrush) .on('end', onEnd); g.append('g') .call(brush); function onBrush(event) { // event.selection gives us the coordinates of the // top left and bottom right of the brush box const [[x1, y1], [x2, y2]] = event.selection; // return true if the dot is in the brush box, false otherwise function isBrushed(d) { const cx = x(d[xCol]); const cy = y(d[yCol]) return cx >= x1 && cx <= x2 && cy >= y1 && cy <= y2; } // style the dots dots.attr('stroke', d => isBrushed(d) ? carColor(d.Origin) : 'gray'); // update the data that appears in the cars variable svg.property('value', cars.filter(isBrushed)).dispatch('input'); } function onEnd(event) { // if the brush is cleared if (event.selection === null) { // reset the color of all of the dots dots.attr('stroke', d => carColor(d.Origin)); svg.property('value', initialValue).dispatch('input'); } } return svg.node(); }36:[] 2f:{"title":"CS725, D3 Dashboard with Brushing and Linking","cells":[{"id":0,"value":"# CS725, D3 Dashboard with Brushing and Linking\n*Based on https://observablehq.com/@nyuvis/interaction. Histogram based on https://observablehq.com/@d3/d3-bin and https://observablehq.com/@d3/histogram*","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"cars = require('@observablehq/cars')","pinned":false,"hidden":false,"mode":"ojs"},{"id":910,"value":"Keep only rows with `Miles_per_Gallon != null` and `Horsepower != null`","pinned":false,"hidden":false,"mode":"md"},{"id":914,"value":"carData = cars.filter(d => d.Miles_per_Gallon != null).filter(d => d.Horsepower != null)","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"originCounts = d3.rollup(carData, group => group.length, d => d.Origin);","pinned":true,"hidden":false,"mode":"ojs"},{"id":998,"value":"origins = Array.from(originCounts.keys()).sort()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1128,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1408,"value":"baseHisto(\"Miles_per_Gallon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1087,"value":"baseHisto(\"Horsepower\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1211,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":825,"value":"## Dashboard","pinned":false,"hidden":false,"mode":"md"},{"id":839,"value":"{\n const scatter = brushableScatterplot();\n const bar = barChart();\n const histo_cyl = filteredHisto(\"Cylinders\");\n const histo_displ = filteredHisto(\"Displacement\");\n const histo_hp = filteredHisto(\"Horsepower\");\n const histo_acc = filteredHisto(\"Acceleration\");\n\n // update the bar chart and histograms when the selection changes\n d3.select(scatter).on('input', () => {\n bar.update(scatter.value);\n histo_cyl.update(scatter.value);\n histo_displ.update(scatter.value);\n histo_hp.update(scatter.value);\n histo_acc.update(scatter.value);\n });\n \n // intial state of bar chart and histograms\n bar.update(scatter.value);\n histo_cyl.update(scatter.value);\n histo_displ.update(scatter.value);\n histo_hp.update(scatter.value);\n histo_acc.update(scatter.value);\n\n // build HTML table to place charts in\n let table = html`

${bar}
${scatter}

${histo_cyl}
${histo_displ}
${histo_hp}
${histo_acc}

`;\n return table;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1034,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":827,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":847,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":1148,"value":"## Definitions","pinned":false,"hidden":false,"mode":"md"},{"id":854,"value":"margin = ({top: 10, right: 20, bottom: 50, left: 80})","pinned":true,"hidden":false,"mode":"ojs"},{"id":934,"value":"scatter_sq = width * 0.45; ","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"carColor = d3.scaleOrdinal()\n .domain(origins)\n .range(d3.schemeTableau10);","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"d3 = require('d3@7')","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"import {aq, op} from \"@uwdata/arquero\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":837,"value":"import {Swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":877,"value":"import {visualizeTicks} from \"@d3/continuous-scales\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}