31:T7a8,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 barGroup = svg.append("g") .attr("fill", "steelblue") .call(g => bars(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]); barGroup.selectAll("rect").attr("fill", (d, i) => (i0 <= i) && (i < i1) ? "orange" : null); // set the brushed bar indices as the value of the 'focus' view svg.property("value", x.domain().slice(i0, i1)) .dispatch("input"); } else { barGroup.selectAll("rect") .attr("fill", "steelblue"); 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":"fb28c599c869c0945de691321c5996bf5d493702fd2e73046b7af8f63f176788c208bbaf39aafe7941186aa6e3a106a2eba7417f30f02caac756120026fae7ea","href":"https://static.observableusercontent.com/files/fb28c599c869c0945de691321c5996bf5d493702fd2e73046b7af8f63f176788c208bbaf39aafe7941186aa6e3a106a2eba7417f30f02caac756120026fae7ea","name":"bevolking.csv","type":"text/csv","lastModified":1603227955665.696,"size":5997}] 2f:{"title":"Most Populous Dutch Municipalities Brushable Bar Chart","cells":[{"id":0,"value":"md`# Most Populous Dutch Municipalities Brushable Bar Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":534,"value":"percentage = {\n if (!focus.length) {\n return md`## Select some bars man` \n }\n \n const [minIndex, maxIndex] = d3.extent(focus)\n const focusPopulation = d3.sum(data.slice(minIndex, maxIndex+1), d => d.population)\n const people = `${format(focusPopulation)} people`\n const percentage = d3.format(\".1%\")(focusPopulation/totalPopulation)\n \n if (minIndex === 0) {\n return md`### ${percentage} of the Dutch population (${people}) lives in the in the ${maxIndex+1} most populous municipalities`\n } \n \n if (maxIndex+1 === data.length) {\n return md`### ${percentage} of the Dutch population (${people}) lives in the in the ${data.length - minIndex} least populous municipalities`\n }\n return md`### ${percentage} of the Dutch population lives (${people}) in the in the ${ordinalSuffix(minIndex+1)} to ${ordinalSuffix(maxIndex+1)} most populous municipalities`\n}","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 => bars(g, x, y, data))\n\n return Object.assign(svg.node(), {\n update(focusX, focusY, focusData) {\n barGroup.call(g => bars(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":false,"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.population : NaN);\n const focusData = data.slice(minIndex, maxIndex+1) // relies on array sort 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":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.population)]).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].municipality : 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([\"Pop\"]).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":116,"value":"bars = (g, x, y, data) => g\n .attr(\"fill\", \"steelblue\")\n .selectAll(\"rect\")\n .data(data, d => d.municipality)\n .join(\"rect\")\n .attr(\"x\", (d) => x(d.rank))\n .attr(\"y\", (d) => y(d.population))\n .attr(\"height\", d => y(0) - y(d.population))\n .attr(\"width\", x.bandwidth())\n .append(\"title\")\n .text(d => `${d.municipality}: Population ${format(d.population)}`) ","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":6,"value":"data = Object.assign(\n d3.csvParse(\n await FileAttachment(\"bevolking.csv\").text(), ({regios, aantal}) => ({ municipality: regios, population: +aantal })).sort((a, b) => d3.descending(a.population, b.population)).map((d,i) => {d.rank = i; return d}), {format: \",\", y: \"↑ Population\"})","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":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":2,"value":"d3 = import(\"d3@v6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}