23:null 24:["$","title",null,{"children":"22 June 2020: D3 Bar Chart Brush (Work In Progress) | Di | Observable"}] 29:T8b9,chart = { const zoomer = d3.zoom() .on("zoom", null); const svg = d3.create("svg") .attr("title", data.barChartSVGTitle) .attr("class", "svgWrapper") .attr("width", width) .attr("height", height) .call(zoomer) .on("wheel.zoom", scroll) .on("mousedown.zoom", null) .on("touchstart.zoom", null) .on("touchmove.zoom", null) .on("touchend.zoom", null); const defs = svg.append("defs"); defs.append("clipPath") .attr("id", "clip") .call(clip); svg.append("g") .attr("class", "chart-title") .call(chartTitle); const mainGroup = svg.append("g") .attr("class", "mainGroup"); const mainBarsGroup = mainGroup.append("g") .attr("clip-path", "url(#clip)") .attr("class", "mainBarsGroup"); const miniGroup = svg.append("g") .attr("class", "miniGroup") .attr("transform", "translate(" + minimapPositionTranslate + ")"); const brushGroup = svg.append("g") .attr("class", "brushGroup") .attr("transform", "translate(" + minimapPositionTranslate + ")") .append("g") .attr("class", "brush") .call(brush); brushGroup.selectAll("rect") .attr("width", miniWidth); brushGroup.call(brush.move, initialBrushXSelection); const miniBars = miniGroup.selectAll(".bar") .data(data, d => d.dayCount); miniBars.enter().append("rect") .attr("class", "bar") .attr("x", d => miniXScale(d.x)) .attr("y", d => miniHeight - miniYScale(d.y)) .attr("width", miniXScale.bandwidth()) .attr("height", d => miniYScale(d.y)) .style("fill", barColor); mainGroup.append("g") .attr("class", "x-axis") .call(mainXAxis); const mainBars = mainBarsGroup.append("g") .attr("class", "bars") .selectAll("rect") .data(data); mainBars.join("rect") .attr("role", "presentation") .attr("class", "bar") .attr("fill", barColor) .attr("x", d => mainXScale(d.x)) .attr("y", d => mainHeight - mainYScale(d.y)) .attr("width", mainXScale.bandwidth()) .attr("height", d => mainYScale(d.y)); svg.append("g") .call(chartBy) return svg.node(); }2a:T41f,render_data_table = (data, options = {}) => { let caption = ""; let ariaLabelledbyCaption = ""; if (options.caption) { caption = `${options.caption}`; ariaLabelledbyCaption = `aria-labelledby="caption"`; } let theadRowHeaderCells; if (options.columns) { theadRowHeaderCells = options.columns.map((d) => { return `${d}` }); } else { theadRowHeaderCells = Object.keys(data[0]).map((d, i) => { return `${d}` }); } let focusable = 'tabindex="0"'; if (options.focusable === false) { focusable = ''; } return html`

${caption} ${theadRowHeaderCells} ${data.map(row => { return html`${Object.values(row).map(col => { return ``; })}`; })}

${col}

`}2b:T640,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 21 Jun 2020.csv").text(); const rowConversionFunction = ({ "Day": dayCount, "Title": title, "URL": url, "Number of cells": y, "Date": x }) => ({ dayCount, title, url, x: timeParser(x), dayOfWeek: d3.timeFormat("%a")(timeParser(x)), weekOfYear: d3.timeFormat("%W")(timeParser(x)), y: +y }); let dataObjectTarget = d3.csvParse(csvString, rowConversionFunction); let minWeek = d3.min(dataObjectTarget, d => d.weekOfYear); dataObjectTarget = dataObjectTarget.map(d => ({...d, weekOfYear: "Week " + (d.weekOfYear - minWeek + 1)})); // dataObjectTarget = d3.rollups(dataObjectTarget, v => d3.format("d")(d3.mean(v, d => d.y)), d => d3.timeFormat("%a")(d.dayOfWeek)) // .map(d => ({x: d[0], y: d[1] })); const extraPropertiesSource = { xAxisLabel: "Day of the week", yAxisLabel: "Cells", barChartSVGTitle: "This bar chart shows cells written each day of the week", barChartTitle: "Cells written 25 April – 11 June 2020", barChartCaption: "This chart shows cells written each day of the week across notebooks in the “Journal: Getting Started with Data Viz” collection, 25 April – 16 June 2020.", tableCaption: "This table shows cells written each day of the week across notebooks 25 April – 16 June 2020."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }2c:[{"id":"3e7cf67cbb037bd7af02f9e45471244357a9b6cf07f0b96e1b9048191f5d7dd131dea646e72f1af17751d5dc355c386e3f71302c9e296b47c777d577308de68b","href":"https://static.observableusercontent.com/files/3e7cf67cbb037bd7af02f9e45471244357a9b6cf07f0b96e1b9048191f5d7dd131dea646e72f1af17751d5dc355c386e3f71302c9e296b47c777d577308de68b","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 21 Jun 2020.csv","type":"text/csv","lastModified":1592725154796.765,"size":12743}] 27:{"id":"2b18d76a032e7730","slug":"22-june-2020-d3-bar-chart-brush-work-in-progress","title":"22 June 2020: D3 Bar Chart Brush (Work In Progress)","thumbnail":"36425acb8cb7a38acece8eee395bd7842eba0b4bed6872f75a7551170ce5148c","access_level":"public","create_time":"$D2020-06-21T07:39:14.796Z","update_time":"$D2020-06-26T11:18:45.976Z","view_time":null,"first_public_time":"$D2020-06-22T10:23:14.122Z","has_unpublished_edits":null,"fork":{"id":"7b5cec81a18ed03b","slug":"21-june-2020-brushing-to-filter-and-zoom-using-d3-brush","title":"21 June 2020: Brushing to Filter and Zoom Using D3 Brush","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"stars":8,"starred":false,"owner":{"type":"team","id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":"starter_2024","bio":"Data Viz Engineer. Author of Practical UI Patterns for Design Systems. Creator of Typey Type for Stenographers."},"version":10587,"publish_version":10587,"role":null,"authored":false,"authors":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null,"bio":"Data Viz Engineer. Author of Practical UI Patterns for Design Systems. Creator of Typey Type for Stenographers."}],"members":[{"type":"individual","id":"32668205beaa5e0d","login":"didoesdigital","name":"Di","avatar_url":"https://avatars-next.observableusercontent.com/0a9ca38d905225337455dc1f1fb979c788c1d0d904071dd82624a90edf934c53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"2646dc1fd46613a4","slug":"journal-getting-started-with-data-viz-collection","title":"Journal: Getting Started with Data Viz","owner":{"id":"a2b4f87238ecc18c","login":"didoesdigital","name":"Di"}},"type":"notebook","body":{"titling":"auto","title":"22 June 2020: D3 Bar Chart Brush (Work In Progress)","cells":[{"id":0,"value":"md`# 22 June 2020: D3 Bar Chart Brush (Work In Progress)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`After [21 June 2020: Brushing to Filter and Zoom Using D3 Brush](https://observablehq.com/@didoesdigital/21-june-2020-brushing-to-filter-and-zoom-using-d3-brush), I wanted to have another go at building a bar chart with brushing.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9610,"value":"md`## Bar chart brush`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10575,"value":"md`**❗️ UPDATE:** I finished the chart in [26 June 2020: D3 Bar Chart Brush](https://observablehq.com/@didoesdigital/26-june-2020-d3-bar-chart-brush?collection=@didoesdigital/journal-getting-started-with-data-viz-collection) ✨`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10121,"value":"md`As it turns out, hardly anyone ever uses brushing on a bar chart, which uses a band scale, or on any chart with an ordinal scale. It certainly complicates the matter.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9837,"value":"md`I'm continuing to chart the cells I've written across notebooks in Observable in: [Journal: Getting Started with Data Viz](https://observablehq.com/collection/@didoesdigital/journal-getting-started-with-data-viz-collection).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10561,"value":"md`This is a work in progress, and has many flaws, which I hope to tackle another day, including (but not limited to):\n\n- Minimap bars don't show both active and inactive colors on first page load.\n- No bar labels or Y Axis.\n- If you shake the brush too much, the X Axis gets out of sync with the bars… 😳\n- No \"click to re-center\" on brush overlay.\n- Sometimes scrolling causes an error: \"Cannot read property '1' of null\".\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10564,"value":"md`Still, after struggling with brushing the last few days, I'm stoked to see it starting to take shape.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9076,"value":"$29","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9775,"value":"function update() {\n const bar = d3.select(\".mainBarsGroup\").selectAll(\".bar\")\n .data(data, d => d.dayCount);\n\n bar\n .attr(\"x\", d => mainXScale(d.x))\n .attr(\"y\", d => mainHeight - mainYScale(d.y))\n .attr(\"width\", mainXScale.bandwidth()) \n .attr(\"height\", d => mainYScale(d.y));\n\n bar.exit()\n .remove();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10141,"value":"brush = d3.brushX()\n .extent([[0, 0], [miniWidth, miniHeight]])\n .on(\"brush\", brushmove);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9765,"value":"function brushmove() {\n const extentX = d3.event.selection;\n const selected = miniXScale\n .domain()\n .filter(d => (extentX[0] - miniXScale.bandwidth() + 1e-2 <= miniXScale(d)) && (miniXScale(d) <= extentX[1] - 1e-2));\n \n d3.select(\".miniGroup\").selectAll(\".bar\")\n .style(\"fill\", d => selected.indexOf(d.x) > -1 ? barColor : inactiveColor);\n \n d3.select(\".mainGroup\").select(\".x-axis\")\n .call(mainXAxis);\n \n let originalRange = mainXZoom.range();\n mainXZoom.domain(extentX);\n\n mainXScale.domain(data.map(d => d.x));\n mainXScale.range([mainXZoom(originalRange[0]), mainXZoom(originalRange[1])]).paddingInner(0.4);\n\n update();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9793,"value":"function scroll() {\n const gBrush = d3.select(\".brush\");\n\n let selection = d3.brushSelection(gBrush.node());\n\n let size = selection[1] - selection[0],\n range = miniXScale.range(),\n x0 = d3.min(range),\n x1 = d3.max(range) + miniXScale.bandwidth(),\n dx = -d3.event.deltaX,\n topSection;\n\n if (selection[0] - dx < x0) {\n topSection = x0;\n } else if (selection[1] - dx > x1) {\n topSection = x1 - size;\n } else {\n topSection = selection[0] - dx;\n }\n\n d3.event.stopPropagation();\n d3.event.preventDefault();\n\n gBrush.call(brush.move, [topSection, topSection + size]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10136,"value":"minimapPositionTranslate = \"\" + miniMargin.left + \",\" + parseFloat(mainMargin.top + mainHeight + mainMargin.bottom + miniMargin.top);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10145,"value":"clip = clipPath => clipPath.append(\"rect\")\n .attr(\"x\", mainMargin.left)\n .attr(\"y\", mainMargin.top)\n .attr(\"width\", mainWidth + mainMargin.left)\n .attr(\"height\", mainHeight);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9062,"value":"x = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([mainMargin.left, width - mainMargin.right])\n .padding(0.1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9066,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([mainMargin.top + mainHeight, mainMargin.top]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9695,"value":"mainXScale = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([mainMargin.left, width - mainMargin.right])\n .paddingInner(0.4);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9697,"value":"miniXScale = d3.scaleBand()\n .domain(data.map(d => d.x))\n .range([0, miniWidth])\n .paddingInner(0.4);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9692,"value":"mainYScale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([0, mainHeight]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9693,"value":"miniYScale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([0, miniHeight]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9711,"value":"mainXZoom = d3.scaleLinear()\n .range([0, mainWidth])\n .domain([0, mainWidth]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9712,"value":"mainXAxis = g => g\n .attr(\"transform\", `translate(0,${mainHeight})`)\n .call(d3.axisBottom(mainXScale)\n .tickSizeOuter(0)\n .tickFormat(d => d3.timeFormat(\"%a\")(d).substring(0, 1))\n );","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10177,"value":"initialBrushXSelection = [0, 200]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10061,"value":"chartTitle = g => g\n .append(\"text\")\n .attr(\"id\", \"chart-title\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \"1em\")\n .style(\"font-weight\", \"800\")\n .style(\"font-size\", \"clamp(.7rem, 2.5vw, 1.2rem)\") // minimum, preferred, maximum\n .text(data.barChartTitle);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10071,"value":"chartBy = g => g\n .attr(\"transform\", `translate(${width}, ${height})`)\n .append(\"text\")\n .attr(\"id\", \"source\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"dy\", \"-0.5em\")\n .attr(\"text-anchor\", \"end\")\n .text('@DiDoesDigital');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9059,"value":"height = mainHeight + mainMargin.top + mainMargin.bottom + miniHeight + miniMargin.top + miniMargin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9662,"value":"mainMargin = ({top: 48, right: 0, bottom: 24, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9674,"value":"mainWidth = width - mainMargin.left - mainMargin.right;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9677,"value":"mainHeight = 450;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9667,"value":"miniMargin = ({top: 12, right: 0, bottom: 48, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9681,"value":"miniHeight = 100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9683,"value":"miniWidth = width - miniMargin.left - miniMargin.right;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9078,"value":"barChartStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10329,"value":"barColor = \"#766FAE\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10346,"value":"inactiveColor = \"#E6E5F0\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10328,"value":"activeColor = \"#534e7a\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9082,"value":"dataTableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9049,"value":"typographyStyles = html`