31:T7c5,viewof focus = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, focusHeight]) .style("display", "block"); const brush = d3.brushX() .extent([[margin.left, 0.5], [width - margin.right, focusHeight - 10]]) .on("brush", brushed) .on("end", brushended); const initialBrushMax = 10; const stackedBarGroup = svg.append("g") .call(g => stackedBars(g, x, y.copy().range([focusHeight - marginFocus.bottom, 4]), data)) const dx = (x.bandwidth() * x.paddingInner())/2; const defaultSelection = [x.range()[0] + dx, x.range()[0] + x.bandwidth() * initialBrushMax + dx] const gb = svg.append("g") .call(brush) .call(brush.move, defaultSelection); function brushed({selection}) { if (selection) { const range = x.domain().map(x); const i0 = d3.bisectRight(range, selection[0]); const i1 = d3.bisectRight(range, selection[1]); stackedBarGroup.selectAll("g").selectAll("rect").attr("filter", (d, i) => (i0 <= i) && (i < i1) ? "invert(100%)" : "none"); // set the brushed bar indices as the value of the 'focus' view svg.property("value", x.domain().slice(i0, i1)) .dispatch("input"); } else { stackedBarGroup.selectAselectAll("rect") .attr("filter", "none"); svg.property("value", []).dispatch("input"); } } function brushended({selection, sourceEvent}) { if (!sourceEvent) { return }; if (!selection) { d3.select(this).transition().call(brush.move, defaultSelection); } const range = x.domain().map(x); const x0 = range[d3.bisectRight(range, selection[0])] - dx; const x1 = range[d3.bisectRight(range, selection[1]) -1 ] + x.bandwidth() + dx; if (x0 === x1) { d3.select(this).transition().call(brush.move, defaultSelection); } d3.select(this) .transition() .call(brush.move, x1 > x0 ? [x0, x1] : null); } return svg.node(); }32:[{"id":"d1f6412a35b70a7bd2489031adbf8768190a21c3ea407f85ca64d17858aec93c8884a42635413aa3132076c829d41d2eca7bb4f3b770245f92b6e277196f5a61","href":"https://static.observableusercontent.com/files/d1f6412a35b70a7bd2489031adbf8768190a21c3ea407f85ca64d17858aec93c8884a42635413aa3132076c829d41d2eca7bb4f3b770245f92b6e277196f5a61","name":"regiokerncijfers@1.csv","type":"text/csv","lastModified":1603804733761.636,"size":18121}] 2f:{"title":"Dutch Municipalities Population Brushable Stacked Bar Chart","cells":[{"id":0,"value":"# Dutch Municipalities Population Brushable Stacked Bar Chart","pinned":false,"hidden":false,"mode":"md"},{"id":953,"value":"freelanceBanner","pinned":false,"hidden":false,"mode":"ojs"},{"id":951,"value":"This one includes data on urbanity (🇳🇱: *stedelijkheid*) as well.\n\n

Performance Note

\nHere d3.stack() is called on every brush event, which is probably not an efficient approach and causes lag when dragging the brush too quickly. I have a feeling that is unnecessary if the xScale is updated properly. I'm curious to hear about better solutions.\n

","pinned":false,"hidden":false,"mode":"md"},{"id":887,"value":"key = legend({ color, title: \"Stedelijkheid\", width: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"chart = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n \n const gx = svg.append(\"g\");\n\n const gy = svg.append(\"g\");\n \n const barGroup = svg.append(\"g\")\n .call(g => stackedBars(g, x, y, data))\n\n return Object.assign(svg.node(), {\n update(focusX, focusY, focusData) {\n barGroup.call(g => stackedBars(g, focusX, focusY, focusData))\n gy.call(yAxis, focusY, height);\n gx.call(xAxis, focusX, height);\n if (focusData.length < 85) {\n console.log(focusData.length)\n \n } \n }\n });\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"// this 'update' block uses the value of the 'focus' viewof. The input event (.dispatch(\"input\")) is used to tell Observable that the view's value has changed. https://observablehq.com/@observablehq/introduction-to-views\n// (From: https://observablehq.com/@d3/focus-context?collection=@d3/d3-brush)\nupdate = {\n const [minIndex, maxIndex] = d3.extent(focus);\n const maxY = d3.max(data, (d, i) => (minIndex <= i) && (i <= maxIndex) ? d.bevolking : NaN);\n const focusData = data.slice(minIndex, maxIndex+1) // relies on array order\n const focusX = x.copy().domain(focus)\n const focusY = y.copy().domain([0, maxY])\n \n chart.update(focusX, focusY, focusData);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":931,"value":"d3.interpolateOrRd()","pinned":true,"hidden":false,"mode":"ojs"},{"id":933,"value":"d3.range(32)","pinned":true,"hidden":false,"mode":"ojs"},{"id":935,"value":"d3.scaleOrdinal(\n [\"<10\", \"10-19\", \"20-29\", \"30-39\", \"40-49\", \"50-59\", \"60-69\", \"70-79\", \"≥80\"],\n d3.interpolateOrRd[10]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length))\n .range([margin.left, width - margin.right])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.bevolking)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"xAxis = (g, x, height) => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call( d3.axisBottom(x)\n .tickFormat(i => x.domain().length < 90 ? data[i].regio : null) // hide labels when x domain becomes too wide\n .tickSizeOuter(0)\n )\n .call(g => {\n return g\n .selectAll(\"text\")\n .attr(\"text-anchor\", \"end\")\n .attr(\"font-size\", \"0.8em\")\n .attr(\"dx\", \"-.8em\")\n .attr(\"dy\", \".15em\")\n .attr(\"transform\", \"rotate(-45)\")}\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"yAxis = (g, y, title) => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".title\").data([]).join(\"text\")\n .attr(\"class\", \"title\")\n .attr(\"x\", -margin.left)\n .attr(\"y\", 10)\n .attr(\"fill\", \"currentColor\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(data.y))","pinned":true,"hidden":false,"mode":"ojs"},{"id":848,"value":"stackedBars = (g, x, y, data) => g\n .selectAll(\"g\")\n .data(seriesFunc(data))\n .join(\"g\")\n .attr(\"fill\", d => color(d.key))\n .selectAll(\"rect\")\n .data(d => d)\n .join(\"rect\")\n .attr(\"x\", (d, i) => x(d.data.rank))\n .attr(\"y\", d => y(d[1]))\n .attr(\"height\", d => y(d[0]) - y(d[1]))\n .attr(\"width\", x.bandwidth())\n// .join(\"title\")\n// .text(d => `${d.data.regio} ${d.key}\n// ${format(d.data[d.key])}`);","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"stackKeys = data.columns.slice(3,-1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"seriesFunc = (data) => d3.stack()\n .keys(stackKeys)(data)\n .map(d => (d.forEach(v => v.key = d.key), d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":909,"value":"series = seriesFunc(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":852,"value":"color = d3.scaleOrdinal()\n .domain(stackKeys)\n .range(d3.schemeSpectral[series.length])\n .unknown(\"#ccc\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"focusHeight = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"margin = ({top: 30, right: 0, bottom: 80, left: 50})","pinned":true,"hidden":false,"mode":"ojs"},{"id":684,"value":"marginFocus = ({ bottom: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":774,"value":"unRankedData = \n d3.csvParse(await FileAttachment(\"regiokerncijfers@1.csv\").text(), d3.autoType )\n .sort( (a, b) => d3.descending(a.bevolking, b.bevolking))\n // .map((d,i) => {d.rank = i; return d})","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"data = {\n const data = unRankedData.map((d,i) => {d.rank = i; return d})\n data.columns = unRankedData.columns; // removed by .map()\n return Object.assign(data, {format: \",\", y: \"↑ Population\"})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"format = d3.format(data.format)","pinned":true,"hidden":false,"mode":"ojs"},{"id":555,"value":"totalPopulation = d3.sum(data, d => d.population)","pinned":true,"hidden":false,"mode":"ojs"},{"id":691,"value":"function ordinalSuffix(i) {\n const remainder = i % 10,\n k = i % 100;\n \n if (remainder == 1 && k != 11) {\n return i + \"st\";\n }\n if (remainder == 2 && k != 12) {\n return i + \"nd\";\n }\n if (remainder == 3 && k != 13) {\n return i + \"rd\";\n }\n return i + \"th\";\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@v6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":771,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"md`## Make\nUsing [xsv](https://github.com/BurntSushi/xsv) and data downloaded from the [CBS Open Data Portal](https://opendata.cbs.nl/statline/)\n\n~~~bash\nregiokerncijfersclean.csv : Regionale_kerncijfers_Nederland.csv\n\txsv fmt -d \";\" Regionale_kerncijfers_Nederland.csv | \\\n xsv search -s \"Totale bevolking\" \"[0-9]\" -o regiokerncijfersclean.csv \n\ttouch regiokerncijfersclean.csv\n~~~\n\nOr as a oneliner\n\n\\`\nxsv fmt -d \";\" Regionale_kerncijfers_Nederland.csv | xsv search -s \"Totale bevolking\" \"[0-9]\" -o regiokerncijfersclean.csv \\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`\n\n### Credits\n* [Focus + Context](https://observablehq.com/@d3/focus-context?collection=@d3/d3-brush)\n* [Ordinal Brushing](https://observablehq.com/@d3/ordinal-brushing)\n\n

To Do

X-axis labels should rotate more, become smaller then hide on large domains
CBS data on stedelijkheid & migratieachtergrond
Prevent empty selection on empty brush

\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":955,"value":"import { freelanceBanner } from \"@julesblm/freelance-banner\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}