31:Tab4,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"); // // This will come in handy if I want to add a Y Axis // defs.append("clipPath") // .attr("id", "clip") // .call(clip); svg.append("g") .attr("class", "chart-title") .call(chartTitle); const wrapperGroup = svg.append("g") .attr("class", "wrapperGroup"); const mainBarsGroup = wrapperGroup.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", "brushWrapper") .attr("transform", "translate(" + minimapPositionTranslate + ")") .append("g") .attr("class", "brush") .call(brush); brushGroup.selectAll("rect") .attr("width", miniWidth); brushGroup.select(".overlay") .each(d => d.type = "selection") .on("mousedown touchstart", function () { brushcenter(this) }); function brushcenter(self) { let selection = d3.brushSelection(brushGroup.node()), size = selection[1] - selection[0], range = miniXScale.range(), cx = d3.mouse(self)[0], x0 = cx - size / 2, x1 = cx + size / 2, y1 = d3.max(range) + miniXScale.bandwidth(), pos = x1 > y1 ? [y1 - size, y1] : x0 < 0 ? [0, size] : [x0, x1]; brushGroup.call(brush.move, pos); } const miniBars = miniGroup.selectAll(".bar") .data(data, d => d.dayCount) .join("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); wrapperGroup.append("g") .attr("class", "x-axis") .call(mainXAxis); const mainBars = mainBarsGroup.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("role", "presentation") .attr("class", "bar") .attr("fill", barColor); svg.append("g") .call(chartBy); yield svg.node(); brushGroup.call(brush.move, initialBrushXSelection); // return svg.node(); }32:T41d,renderDataTable = (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}

`}33:T63d,data = { const timeParser = d3.timeParse("%d %b %Y"); const csvString = await FileAttachment("Cells in Journal_ Getting Started with Data Viz - Journal cells - 26 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 – 25 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 – 25 June 2020.", tableCaption: "This table shows cells written each day of the week across notebooks 25 April – 25 June 2020."}; return Object.assign(dataObjectTarget, extraPropertiesSource); }34:[{"id":"19919244c560097fbf7d82c976e3288a7964da6086eae7b65080838ae3c7e5ead331c817b0a2c21d7c22d80aefa73a656d593922da95e3e45d2a95d88f91ddd0","href":"https://static.observableusercontent.com/files/19919244c560097fbf7d82c976e3288a7964da6086eae7b65080838ae3c7e5ead331c817b0a2c21d7c22d80aefa73a656d593922da95e3e45d2a95d88f91ddd0","name":"Cells in Journal_ Getting Started with Data Viz - Journal cells - 26 Jun 2020.csv","type":"text/csv","lastModified":1593169680708.165,"size":13890},{"id":"b87cc77119ea1fb1082ff70c156b1b644da6bb04b9c50a1f767b593ee8fe53dfa84e14c55c8e367f899143ad4e25379e6341ed781ddb9eb0ae770d6d4abd2ddf","href":"https://static.observableusercontent.com/files/b87cc77119ea1fb1082ff70c156b1b644da6bb04b9c50a1f767b593ee8fe53dfa84e14c55c8e367f899143ad4e25379e6341ed781ddb9eb0ae770d6d4abd2ddf","name":"Viz.png","type":"image/png","lastModified":1593168452781.171,"size":33002},{"id":"8cc4ba8012e4bd1699d140c3fc35b24c2cfc3c7c21330df788b391b14260d2b07a4b8e194a12ffcf5a7564cf4f4a2b5aad8cfaa6458b838ed413feaf0c6ccebb","href":"https://static.observableusercontent.com/files/8cc4ba8012e4bd1699d140c3fc35b24c2cfc3c7c21330df788b391b14260d2b07a4b8e194a12ffcf5a7564cf4f4a2b5aad8cfaa6458b838ed413feaf0c6ccebb","name":"Main.png","type":"image/png","lastModified":1593168833892.331,"size":39014},{"id":"2b4c1d9edffce4e6fe7a852f47d32636438c6d74b1c9d99b8f11bdc5f56b2a73dbe0809245941c5e9ce0794eb2db263d32903318244aacb13f88ded31b5f8ca7","href":"https://static.observableusercontent.com/files/2b4c1d9edffce4e6fe7a852f47d32636438c6d74b1c9d99b8f11bdc5f56b2a73dbe0809245941c5e9ce0794eb2db263d32903318244aacb13f88ded31b5f8ca7","name":"Minimap.png","type":"image/png","lastModified":1593168862512.594,"size":38229},{"id":"93859f2c21ed0b18a6ed03993e754eb18b0729e3e925f3ac27f73aeb48c3870e3fb760c3636adb4f4dbe67ace28a06df1b000aefdb10018b58e63eb1a42ed85b","href":"https://static.observableusercontent.com/files/93859f2c21ed0b18a6ed03993e754eb18b0729e3e925f3ac27f73aeb48c3870e3fb760c3636adb4f4dbe67ace28a06df1b000aefdb10018b58e63eb1a42ed85b","name":"Brush.png","type":"image/png","lastModified":1593168883374.072,"size":58491},{"id":"80dd0364a13e673b264c97f70fb43d52a78377f17d8687464f1d42591f0225ea1ab35c1dfdfc014be8ef12aea97e346a8ddafb35a3d87d9daa42d83ee1fe4d31","href":"https://static.observableusercontent.com/files/80dd0364a13e673b264c97f70fb43d52a78377f17d8687464f1d42591f0225ea1ab35c1dfdfc014be8ef12aea97e346a8ddafb35a3d87d9daa42d83ee1fe4d31","name":"mainMargin.bottom.png","type":"image/png","lastModified":1593168908423.864,"size":38549},{"id":"417cb457752aece91bfd09de9494e5bd90d59c17fb70d6c10da4a29cce0e783c48f02135c4927ae5a61031da87aa80c5c69fa1475c1f58f3e2fa4f323748e56b","href":"https://static.observableusercontent.com/files/417cb457752aece91bfd09de9494e5bd90d59c17fb70d6c10da4a29cce0e783c48f02135c4927ae5a61031da87aa80c5c69fa1475c1f58f3e2fa4f323748e56b","name":"mainHeight.png","type":"image/png","lastModified":1593168927359.112,"size":37300},{"id":"72e269be2f65ac48d13e922a4393c2adc0e46a029be4496b3b8be5b0f7a625c0b3ac0723b206e6c097712097b9bb9e73000cb86c520befe9e40253ced93f76db","href":"https://static.observableusercontent.com/files/72e269be2f65ac48d13e922a4393c2adc0e46a029be4496b3b8be5b0f7a625c0b3ac0723b206e6c097712097b9bb9e73000cb86c520befe9e40253ced93f76db","name":"miniHeight.png","type":"image/png","lastModified":1593168948750.28,"size":37356},{"id":"16e0d7477cff3b31c95c863d3dcc9509f236feb39449d263f35fe0a90feced5992edc9b082323931e3b87ffed3829298265c76ff71ea16c80034439422f33ee0","href":"https://static.observableusercontent.com/files/16e0d7477cff3b31c95c863d3dcc9509f236feb39449d263f35fe0a90feced5992edc9b082323931e3b87ffed3829298265c76ff71ea16c80034439422f33ee0","name":"miniTranslate and miniMargin.top.png","type":"image/png","lastModified":1593168976976.933,"size":47844},{"id":"8ba9dd2b9983e37167b4e783805879c4cba3bb198a28037fb2ee8803fdf7f22970df7d1522657c74964629acece7f12f1c02114f3bb8f76c8cca3bf7fd4b4bae","href":"https://static.observableusercontent.com/files/8ba9dd2b9983e37167b4e783805879c4cba3bb198a28037fb2ee8803fdf7f22970df7d1522657c74964629acece7f12f1c02114f3bb8f76c8cca3bf7fd4b4bae","name":"Clip.png","type":"image/png","lastModified":1593169003720.996,"size":35011},{"id":"89e9b61a2e8b0dce1a198592d8619429549c97df0d91edcb1d0fc1fd47c4f92e84fa09d48930543fe57d685a5c85b73815a7c82cdb301747f499266a10d3a035","href":"https://static.observableusercontent.com/files/89e9b61a2e8b0dce1a198592d8619429549c97df0d91edcb1d0fc1fd47c4f92e84fa09d48930543fe57d685a5c85b73815a7c82cdb301747f499266a10d3a035","name":"Clipped areas.png","type":"image/png","lastModified":1593169025405.108,"size":54223}] 2f:{"title":"26 June 2020: D3 Bar Chart Brush","cells":[{"id":0,"value":"md`# 26 June 2020: D3 Bar Chart Brush`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`After [25 June 2020: Checkerboard Fill Effect Bar Chart](https://observablehq.com/@didoesdigital/25-june-2020-checkerboard-fill-effect-bar-chart), I wanted to return to extending [22 June 2020: D3 Bar Chart Brush (Work In Progress)](https://observablehq.com/@didoesdigital/22-june-2020-d3-bar-chart-brush-work-in-progress?collection=@didoesdigital/journal-getting-started-with-data-viz-collection).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11465,"value":"md`I covered brushing in general in [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?collection=@didoesdigital/journal-getting-started-with-data-viz-collection), which is a useful overview for this.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11231,"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"},{"id":9076,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":11238,"value":"function update() {\n const bar = d3.select(\".mainBarsGroup\").selectAll(\".bar\")\n .data(data, d => d.dayCount)\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}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11240,"value":"brush = d3.brushX()\n .extent([[0, 0], [miniWidth, miniHeight]])\n .on(\"brush\", brushmove);","pinned":false,"hidden":false,"mode":"ojs"},{"id":11242,"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 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 d3.select(\".wrapperGroup\").select(\".x-axis\")\n .call(mainXAxis);\n \n update();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11244,"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":false,"hidden":false,"mode":"ojs"},{"id":11450,"value":"md`## Anatomy of a brushable chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11500,"value":"md`To make plan out my viz, I made some wireframes to make sense of where margins and transforms should live:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11457,"value":"{\n const img = await FileAttachment(\"Viz.png\").image();\n img.alt = \"Wireframe of chart\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11471,"value":"{\n const img = await FileAttachment(\"Main.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11473,"value":"{\n const img = await FileAttachment(\"Minimap.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11476,"value":"{\n const img = await FileAttachment(\"Brush.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11479,"value":"{\n const img = await FileAttachment(\"mainMargin.bottom.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11482,"value":"{\n const img = await FileAttachment(\"mainHeight.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11484,"value":"{\n const img = await FileAttachment(\"miniHeight.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11487,"value":"{\n const img = await FileAttachment(\"miniTranslate and miniMargin.top.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11491,"value":"{\n const img = await FileAttachment(\"Clip.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11497,"value":"md`Taking a step back:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11494,"value":"{\n const img = await FileAttachment(\"Clipped areas.png\").image();\n img.alt = \"\";\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11093,"value":"md`## Today I Learned`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11234,"value":"md`Changes I made to fix previous issues:\n\n- Minimap bars now show both active and inactive colors on first page load, thanks to [Fil](https://observablehq.com/@fil) helping me make sense of this and suggesting I \\`yield\\` the SVG node before calling \\`brush.move\\`. Read more about using \\`yield\\` in [Introduction to Generators by Mike Bostock](https://observablehq.com/@observablehq/introduction-to-generators).\n- Previously, if you shook the brush too much, the X Axis got out of sync with the bars!\n- Now you can \"click to re-center\" on brush overlay.\n- No more console errors.\n\nStill haven't done:\n\n- Adding bar labels or Y Axis.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7321,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11250,"value":"minimapPositionTranslate = \"\" + miniMargin.left + \",\" + parseFloat(mainMargin.top + mainHeight + mainMargin.bottom + miniMargin.top);","pinned":true,"hidden":false,"mode":"ojs"},{"id":11252,"value":"// clip = clipPath => clipPath.append(\"rect\")\n// .attr(\"x\", mainMargin.left)\n// .attr(\"y\", 0)\n// .attr(\"width\", mainWidth + mainMargin.left)\n// .attr(\"height\", mainHeight);","pinned":true,"hidden":false,"mode":"ojs"},{"id":11258,"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"},{"id":11260,"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"},{"id":11262,"value":"mainYScale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([mainMargin.top, mainHeight - mainMargin.bottom]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":11264,"value":"miniYScale = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.y)]).nice()\n .range([0, miniHeight]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":11266,"value":"mainXZoom = d3.scaleLinear()\n .range([0, mainWidth])\n .domain([0, mainWidth]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":11268,"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"},{"id":11270,"value":"initialBrushXSelection = [0, 200]","pinned":true,"hidden":false,"mode":"ojs"},{"id":11272,"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"},{"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"},{"id":9059,"value":"height = mainHeight + mainMargin.top + mainMargin.bottom + miniHeight + miniMargin.top + miniMargin.bottom;","pinned":false,"hidden":false,"mode":"ojs"},{"id":9662,"value":"mainMargin = ({top: 48, right: 0, bottom: 24, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11276,"value":"mainWidth = width - mainMargin.left - mainMargin.right;","pinned":true,"hidden":false,"mode":"ojs"},{"id":11278,"value":"mainHeight = 450;","pinned":true,"hidden":false,"mode":"ojs"},{"id":11280,"value":"miniMargin = ({top: 12, right: 0, bottom: 48, left: 0})","pinned":true,"hidden":false,"mode":"ojs"},{"id":11282,"value":"miniHeight = 100;","pinned":true,"hidden":false,"mode":"ojs"},{"id":11284,"value":"miniWidth = width - miniMargin.left - miniMargin.right;","pinned":true,"hidden":false,"mode":"ojs"},{"id":11290,"value":"barColor = \"#766FAE\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11292,"value":"inactiveColor = \"#E6E5F0\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11294,"value":"activeColor = \"#534e7a\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":11287,"value":"barChartStyles = html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":11296,"value":"dataTableStyles = html`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9049,"value":"typographyStyles = html`