31:T1193,makeChart = (root) => { let isClicked = false; const descendants = root.descendants(); // no more swapped x, y confusion root.each((d) => { d.minX = d.y0; d.minY = d.x0; d.maxX = d.y1; d.maxY = d.x1; }); // container for canvas and svg overlay const container = d3.create("div"); // create a canvas const canvas = container .append("canvas") .style("width", `${halfWidth}px`) .style("height", `${scale(1)}px`) //height .attr("width", halfWidth * dpi) .attr("height", scale(1) * dpi) .on("pointermove", pointermoved) .on("click", clicked); const context = canvas.node().getContext("2d"); const overlay = container .append("svg") .style("position", "absolute") .style("pointer-events", "none") .style("top", 0) .style("left", 0) .attr("width", halfWidth) .attr("height", scale(1)); overlay.append("rect").attr("fill", "none").attr("stroke", "none"); d3.namespace("custom"); const customElement = DOM.element("custom"); const virtualContainer = d3.select(customElement); const virtualSvg = virtualContainer .append("svg") .attr("viewBox", [0, 0, halfWidth, height]); const cell = virtualSvg.selectAll("g").data(descendants).join("g"); const rect = cell .append("rect") .attr("x", (d) => d.minX) .attr("y", (d) => d.minY) .attr("width", (d) => d.maxX - d.minX) .attr("height", (d) => d.maxY - d.minY) .attr("fill-opacity", 0.6) .attr("fill", (d) => "#ccc") .style("cursor", "pointer") .on("click", clicked); // const text = cell.append("text").attr("x", 4).attr("y", 13); context.setTransform(dpi, 0, 0, dpi, 0, 0); context.clearRect(0, 0, halfWidth, height); const tree = new RBush(descendants.length); tree.load(descendants); // https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver const config = { attributes: true, childList: true, subtree: true }; const observer = new MutationObserver((mutationsList, observer) => { context.clearRect(0, 0, halfWidth, height); for (const mutation of mutationsList) { if (!mutation.target) return; // mutable debugA = { // mutation: [...mutation.target.attributes].map((a) => ({ // [a.name]: a.value // })) // }; const width = mutation.target.getAttribute("width") - 2; const height = mutation.target.getAttribute("height") - 1; const y = mutation.target.getAttribute("y"); const x = mutation.target.getAttribute("x"); const d = { width, height, x, y }; context.fillStyle = "black"; context.fillRect(x, y, width, height); } }); observer.observe(customElement, config); function drawInitialCanvas() { root.each((d) => { drawRect(context, d); drawText(context, d, d.data.name); }); } drawInitialCanvas(); function findNode(x, y) { // search for our feature in the RBush tree const foundNodes = tree.search({ minX: x, minY: y, maxX: x + 0.01, maxY: y + 0.01 }); // can return multiple so is an array if (foundNodes.length === 0) return null; // get our feature const node = foundNodes[0]; return node; } function clicked(e) { const [x, y] = d3.pointer(e); isClicked = true; const node = findNode(x, y); if (!node) return; const nodeWidth = node.x1 - node.x0; root.each((d) => { d.minY = ((d.x0 - node.x0) / nodeWidth) * scale(1); d.maxY = ((d.x1 - node.x0) / nodeWidth) * scale(1); // d.maxX = d.y0; // - node.y0, // d.maxY = d.y1; // - node.y0 }); const t = cell.transition().duration(750); cell .select("rect") .transition(t) .attr("y", (d) => d.minY) .attr("height", (d) => d.maxY - d.minY); tree.clear(); tree.load(descendants); } function pointermoved(e) { const [x, y] = d3.pointer(e); // reset hover styles canvas.style("cursor", null); const node = findNode(x, y); if (!node) return; // node.value = { }; // node.dispatchEvent(new CustomEvent("input"), { bubbles: true }); canvas.style("cursor", "pointer"); const rect = overlay .select("rect") .datum(node) .attr("fill", "hotpink") .attr("opacity", 0.8) .attr("x", (d) => d.minX) .attr("y", (d) => d.minY) .attr("width", (d) => d.maxX - d.minX - 1) .attr("height", (d) => d.maxY - d.minY); } return container.node(); }32:[{"id":"cf83334956dd0dae422dec8c0ff6a322472c813ae4899533524bfe7eeb92ffe410ffb96ffbcf5692f43504678844488c007675d60b99c688bb1a6961fc6f3ff6","href":"https://static.observableusercontent.com/files/cf83334956dd0dae422dec8c0ff6a322472c813ae4899533524bfe7eeb92ffe410ffb96ffbcf5692f43504678844488c007675d60b99c688bb1a6961fc6f3ff6","name":"english_lengths.png","type":"image/png","lastModified":1632860741759.097,"size":90106}] 2f:{"title":"Metric & Imperial Lengths","cells":[{"id":0,"value":"# Metric & Imperial Lengths\n\n

A work in progress!

\nRunning into performance issues that I don't know how to solve yet\n

\n\n\nMetric is better, saner, easier, more sensible, even elegant and everyone knows it, save a few American holdouts. I hope to 'hit that message home' with this visualization/by showing how one kilometer is composed vs how one mile is composed.","pinned":false,"hidden":false,"mode":"md"},{"id":410,"value":"## Metric\n\nIn metric it's easy, 10 of each unit compose the next larger unit, all the way down and all the up, from yotta to yocto. \n","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"html`

\n ${makeChart(metricRoot)}\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"## Imperial\n\nImperial is bonkers, it's a more typical human contraption. Like English spelling or the Gregorian calendar, it is irregular. One mile consists of 1760 \nyards, which is subdivided into 3 feet. In turn, a foot is composed of 12 inches.","pinned":false,"hidden":false,"mode":"md"},{"id":1150,"value":"makeChart(imperialRoot)","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"## Implementation Notes\n\nBecause there to many nodes here for SVG to be performant, we resort to canvas. With this move, we lose the convenient interactivity and transitions SVG provides.\n\nBecause a partition is all rectangles, we can use [RBush](https://github.com/mourner/rbush), a high-performance R-tree-based 2D spatial index, to find the selected node.","pinned":false,"hidden":false,"mode":"md"},{"id":533,"value":"

Look at this silly diagram

\n\n

\"A — English units of length [by 42CrMo4, Christoph Päper](https://en.wikipedia.org/wiki/Imperial_units#/media/File:English_Length_Units_Graph.svg) [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0/)\n

","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"## Todo\n\n* Show labels after click\n * Make function for label y? So no nodes without text\n* Ticks\n* Interaction\n * Always show 3 columns just like Zoomable Icicle\n * Generate data lazily, only surrounding levels of focused levels \n","pinned":false,"hidden":false,"mode":"md"},{"id":342,"value":"## Credits\n\n* [d3-path notebook](/@d3/d3-path) by Fik\n* [Zoomable Icicle](https://observablehq.com/@d3/zoomable-icicle) by Mike Bostock\n* [DOM-to-Canvas using D3 block](https://bl.ocks.org/mbostock/1276463) by Mike Bostock","pinned":false,"hidden":false,"mode":"md"},{"id":288,"value":"mutable debugA = {\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"### Imperial","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"imperial = [\n { name: \"mile\", childLength: 1760 },\n // { name: \"furlong\", value: 3, childLength: 220 },\n { name: \"yard\", value: 3, childLength: 3 },\n { name: \"foot\", value: 1, childLength: 12 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"// lowest level imperial node\ninch = ({ name: \"inch\", value: 1 / 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"imperialReducer = (currentValue, currentElement) => {\n const parent = {\n name: currentElement.name,\n children: new Array(currentElement.childLength).fill(currentValue)\n // value: currentElement.value\n };\n\n return parent;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"imperialData = imperial.reduceRight(imperialReducer, inch)","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"imperialRoot = partition(imperialData, mile)","pinned":true,"hidden":false,"mode":"ojs"},{"id":325,"value":"### Metric","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"si = [\n // { prefix: \"mega\", value: 10 ** 4 },\n { prefix: \"kilo\", value: 10 ** 3 },\n { prefix: \"hecto\", value: 10 ** 2 },\n { prefix: \"deca\", value: 10 ** 1 },\n { prefix: \"\", value: 10 ** 0 },\n // { prefix: \"deci\", value: 10 ** -1 },\n // { prefix: \"centi\", value: 10 ** -2 }\n // { prefix: \"milli\", value: 10 ** -3 }\n // { prefix: \"micro\", value: 0.0001 } // 10 ** -4 gives rounding error\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"// lowest level SI node\n// millimeter = ({\n// name: \"millimeter\",\n// value: 0.001\n// })","pinned":true,"hidden":false,"mode":"ojs"},{"id":744,"value":"// lowest level SI node\ndecimeter = ({\n name: \"decimeter\",\n value: 0.1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"metricReducer = (currentValue, currentElement) => {\n const parent = {\n name: currentElement.prefix + \"meter\",\n children: new Array(10).fill(currentValue)\n };\n\n return parent;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"metricData = si.reduceRight(metricReducer, decimeter)","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"metricRoot = partition(metricData, 1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"img = FileAttachment(\"english_lengths.png\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md"},{"id":347,"value":"function drawRect(context, { minX, maxX, minY, maxY }) {\n context.fillStyle = \"black\";\n\n const x = minX;\n const y = minY;\n const width = maxX - minX - 2;\n const height = maxY - minY - 1;\n\n context.fillRect(x, y, width, height);\n\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1045,"value":"function labelVisible(d) {\n return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 16;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":474,"value":"function drawText(context, { minX, maxX, minY, maxY }, name) {\n if (maxX - minX < 16) return;\n\n context.fillStyle = \"white\";\n\n const x = minX + 5;\n const y = minY + 13;\n\n context.fillText(name, x, y);\n\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":390,"value":"scale = d3.scaleLinear().domain([0, mile]).range([0, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"mile = 1.609344 // in km's","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"partition = (data, km) => {\n const root = d3.hierarchy(data).sum((d) => d.value);\n // .size([height, (root.height + 1) * width / 3])\n return d3.partition().size([scale(km), partitionWidth])(root);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":496,"value":"partitionWidth = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":371,"value":"## Dimensions","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"dpi = window.devicePixelRatio || 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"halfWidth = width / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"horizontalPadding = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"height = 10000","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"margins = ({ bottom: 60 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":560,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":762,"value":"RBush = require(\"rbush@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"d3 = import(\"d3@v7\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}