2c:null 2d:["$","title",null,{"children":"Zoomable Voronoi Treemap | Robert Harris | Observable"}] 32:T8ff,# Zoomable Voronoi Treemap A general purpose zoomable [voronoi](https://en.wikipedia.org/wiki/Voronoi_diagram) [treemap](https://en.wikipedia.org/wiki/Treemapping) which uses [d3-voronoi-treemap](https://github.com/Kcnarf/d3-voronoi-treemap) to generate the layout. ### Features - Advanced automatic label placement via [Centerline Labeling Utility](https://observablehq.com/@trebor/centerline-labeling-utility), derived from [Noah Veltman](https://observablehq.com/@veltman)'s [Centerline Labeling](https://observablehq.com/@veltman/centerline-labeling). - Automatic hierarchical color distribution, to highlight tree structure. - Support for images in place of colors. - Node "relatedness" highlighting on hover. - Smooth shape transitions, based on [Noah Veltman](https://observablehq.com/@veltman)'s [Smoother polygon transitions](https://bl.ocks.org/veltman/4d1413aa5fd3bb5af1a806c146870031) algorithm. - Highly customizable ### Interactions - **Click** - zoom in one level - **Hover** - highlight tree structure & update the path - **Click** "**UP**" or **ESC** or **UP-ARROW** - zoom out one level - **Click on path element** - zoom to chosen path element ### Use ~~~js import { renderChart } from "@trebor/zoomable-voronoi-treemap" ~~~ Use [renderChart](#renderChart) to render the treemap and the linked breadcrumb path. Call [renderMap](#renderMap) directly if you want just the map portion. In both cases the **data** parameter must be a tree created with [d3-hierarchy](https://github.com/d3/d3-hierarchy#hierarchy). ### Customization Many many different options can be passed into [renderChart](#renderChart). The options with defaults are all defined in the [establishOptions](#establishOptions) functions. ### Notes - **Error: when linking, twin is null** occurs when any leaf node has a value of 0. Use d3.hierarchy [sum](https://d3js.org/d3-hierarchy/hierarchy#node_sum) to establish node values. - If no values are defined for the tree, **renderChart** will set leaf nodes to a value of 1. This modifies the tree. - In order for the chart to operate properly the **getId** option must return a unique ID for every node. The function defaults to: ```js (d) => d.data.name ``` But if no name exists in the data, you will need to find an alternative.33:T887,function renderChart({ data, ...customOptions }) { const options = establishOptions(customOptions); // if the root node has no value, default leaf values to 1 if (!("value" in data)) { data.sum((d) => (d.children ? 0 : 1)); } const { dispatcher, fontFamily, renderTooltipContent, disableHover, onReady, tooltipOptions } = options; const chartUid = uuid(); const createEventName = (name) => [name, chartUid].join("."); let focus = null; let hover = null; let tooltipCleanup = () => {}; const updateSection = (section, child) => { while (section.firstChild) { section.removeChild(section.firstChild); } section.appendChild(child); }; const mapSection = htl.html`

`; const pathSection = htl.html`

`; const template = html`

${mapSection} ${pathSection}

`; const updatePath = () => { if (!!focus) { const path = renderPath({ focus, hover, showColorBox: options.showColorBoxInPath, showValue: options.showValueInPath, ...options }); updateSection(pathSection, path); } template.value = focus; template.dispatchEvent(new Event("input")); }; dispatcher.on(createEventName(EVENT_TYPE_FOCUS_GAIN), (node) => { focus = node; updatePath(); }); dispatcher.on(createEventName(EVENT_TYPE_HOVER_GAIN), (node) => { hover = node; updatePath(); }); dispatcher.on(createEventName(EVENT_TYPE_HOVER_LOSE), () => { hover = null; _.debounce(updatePath, 100)(); }); const map = renderMap({ data, createEventName, ...options }); if (!disableHover && !!renderTooltipContent) { dispatcher.on(createEventName(EVENT_TYPE_ENTER_TRANSITION_COMPLETE), () => { onReady(); tooltipCleanup(); tooltipCleanup = applyTooltips(map, { tooltipTargetsSelector: (selection) => selection.selectAll("g.node"), renderTooltipContent, ...tooltipOptions }); }); } updateSection(mapSection, map); return template; }34:T1838,renderMap = (options) => { const { data, getId, getName, onLayoutComplete, isEqual, disableHover, onHover, onShiftClick, dispatcher, createBaseShape, margin, size, onFocus, minHeight, upButtonSize, showUpButton, backgroundColor, establishColorWeight, strokeWidth } = options; const [width, height] = [ size.width - (margin.left + margin.right), size.height - (margin.top + margin.bottom) ]; const baseShape = createBaseShape(width, height, upButtonSize, showUpButton); let current = null; const focusParent = () => current.parent ? renderNode(current.parent) : null; dispatcher.on(EVENT_TYPE_FOCUS, renderNode); dispatcher.on(EVENT_TYPE_REFOCUS, (node) => renderNode(node, true)); document.addEventListener("keyup", ({ code, key }) => { if (code === "ArrowUp" || code === "Escape") { focusParent(); } }); const svg = d3.select( DOM.svg( width + margin.left + margin.right, height + margin.top + margin.bottom ) ); svg .append("rect") .attr("width", "100%") .attr("height", "100%") .style("fill", backgroundColor); const voronoi = svg .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); if (showUpButton) { const upButton = svg .append("g") .classed("up-button", true) .attr("cursor", "pointer") .on("click", focusParent); upButton .append("path") .datum([ [0, 0], [0, upButtonSize], [upButtonSize, 0] ]) .attr("d", d3.line()) .attr("cx", upButtonSize / 2) .attr("cy", upButtonSize / 2) .attr("r", upButtonSize / 2) .attr("fill", "white"); upButton .append("text") .attr("fill", backgroundColor) .style("pointer-events", "none") .attr("font-size", "50px") .attr("font-weight", "bold") .attr("dx", "0.1em") .attr("dy", "1.1em") .text("UP"); upButton.append("title"); } establishColor(data, establishColorWeight); strokeWidth.domain(d3.extent(data.descendants(), (d) => d.depth)); const computeRelatedness = (node, score = 1, map = { dummy: 0 }) => { if (!map[getId(node)] && !isEqual(node, current)) { map[getId(node)] = score; computeRelatedness(node.parent, score / 2, map); (node.children || []).forEach((child) => computeRelatedness(child, score / 2, map) ); } return map; }; const opacityFactory = (node) => { const relatednessMap = computeRelatedness(node); const opacityScale = d3 .scalePow() .exponent(0.5) .domain(d3.extent(Object.values(relatednessMap))) .range([0.3, 1]); return (d) => { const relatedness = relatednessMap[getId(d)]; return relatedness ? opacityScale(relatedness) : 0.2; }; }; const handleHoverEnter = (node, event) => { if (disableHover) return; dispatcher.call(EVENT_TYPE_HOVER_GAIN, this, node); if (!isEqual(node, current)) { onHover(node, event, true); const nodeOpacity = opacityFactory(node); voronoi .selectAll(".node") .filter((d) => d.height === 0) .attr("opacity", nodeOpacity); } }; const handleHoverExit = (node, event) => { if (disableHover) return; onHover(node, event, false); dispatcher.call(EVENT_TYPE_HOVER_LOSE, this); voronoi .selectAll(".node") .filter((d) => d.height === 0) .attr("opacity", 1); }; const handleNodeClick = (node, event) => { if (event.shiftKey) { onShiftClick(event, node); return; } const target = node !== current ? node.ancestors().find((d) => d.depth === current.depth + 1) : node.parent; if (target.height >= minHeight) { renderNode(target); } }; function renderNode(node, force = false) { if (current && isEqual(node, current) && !force) return; dispatcher.call(EVENT_TYPE_FOCUS_GAIN, this, node); if (current) { dispatcher.call(EVENT_TYPE_FOCUS_LOSE, this, current); } onFocus(node); node.each((node) => (node.oldPolygon = node.polygon)); if (showUpButton) { const upButton = svg .select(".up-button") .attr("cursor", node.depth === 0 ? "not-allowed" : "pointer"); upButton.select("text").attr("opacity", node.depth === 0 ? 0.5 : 1); upButton .select("title") .text( node.depth === 0 ? "" : `Click to select ${getName(node.parent, CONTEXT_TITLE)}` ); } const voronoiTreeMap = d3 .voronoiTreemap() .prng(new Math.seedrandom("a seed")) .clip(baseShape); voronoiTreeMap(node); node.each((node) => { const [x0, x1] = d3.extent(node.polygon, (d) => d[0]); const [y0, y1] = d3.extent(node.polygon, (d) => d[1]); node.simplePolygon = node.polygon; const width = x1 - x0; const height = y1 - y0; node.polyProps = { centroid: d3.polygonCentroid(node.simplePolygon), bounds: [ [x0, y0], [x1, y1] ], width, height, aspect: height / width, max: d3.max([width, height]), min: d3.min([width, height]) }; node.polygon = coordinatePolygons(node.oldPolygon, node.polygon); }); let nodes = node.descendants().sort((a, b) => b.depth - a.depth); const nodeExit = (selection) => { selection.remove(); }; voronoi .selectAll(".node") .data(nodes, getId) .join( (selection) => nodeEnter({ selection, current: node, handleNodeClick, handleHoverEnter, handleHoverExit, previous: current, ...options }), (selection) => nodeUpdate({ selection, current: node, handleHoverEnter, handleHoverExit, ...options }), nodeExit ); current = node; } renderNode(data); onLayoutComplete(svg.node()); return svg.node(); }35:T622,renderPath = ({ colorScale, dispatcher, focus, formatNumber, getImage, getName, getValue, showColorBox = true, showValue = true, hover } = {}) => { const hoverPath = hover ? hover .ancestors() .reverse() .filter((d) => d.depth > focus.depth) : []; const focusPath = focus.ancestors().reverse(); const path = [...focusPath, ...hoverPath]; const renderElement = (node) => { const element = html`

${ getImage ? html`

` : showColorBox ? renderColorRamp({ colorScale, colorDomain: node.colorDomain, width: 20, height: 20 }) : "" } ${getName( node, CONTEXT_PATH )} ${ showValue ? `${formatNumber( getValue(node) )}` : "" }

`; element.addEventListener("click", () => dispatcher.call(EVENT_TYPE_FOCUS, this, node) ); return element; }; return html`

${path.map( renderElement )}

`; }36:Ta21,establishOptions = (customeOptions = {}) => { const options1 = { // IMPORTANT: getId() - must return a unique node id getId: (d) => d.data.name, getName: (d) => titelize(d?.data?.name ?? "No Name"), dispatcher: createDispatcher(), colorScale: d3.scaleSequential(d3.interpolateTurbo), formatNumber: d3.format(",.0f"), getImage: null, fontFamily: "Arial, Helvetica, sans-serif", getValue: (d) => d.value, getLabelColor: (datum, getColor) => computeContrastColor(getColor(datum), { threshold: 0.45 }), getOutlineLabelColor: (datum, getColor) => computeContrastColor(getColor(datum), { light: "black", dark: "white", threshold: 0.45 }), showValueInPath: null, showColorBoxInPath: null, disableHover: false, onReady: () => {}, tooltipOptions: {}, createBaseShape: (width, height, upButtonSize, showUpButton) => showUpButton ? [ [0, upButtonSize], [upButtonSize, 0], [width - 1, 0], [width - 1, height - 1], [0, height - 1] ] : [ [0, 0], [width - 1, 0], [width - 1, height - 1], [0, height - 1] ], backgroundColor: "#666", formatNumber: d3.format(",.0f"), getName: (d) => titelize(d.data.name), getValue: (d) => d.value, margin: { top: 0, right: 0, bottom: 0, left: 0 }, onFocus: () => {}, onHover: () => {}, onShiftClick: () => {}, onLayoutComplete: () => {}, phase1Duration: 1200, phase2Duration: 500, showUpButton: true, size: { width, height: 600 }, strokeWidthRange: [15, 0.5], upButtonSize: 130, minHeight: 0, establishColorWeight: undefined }; const combined1 = {...options1, ...customeOptions }; const options2 = { getColor: (d) => combined1.colorScale(d.colorValue), strokeWidth: d3.scalePow().exponent(1.2).range(combined1.strokeWidthRange), isEqual: (a, b) => combined1.getId(a) === combined1.getId(b), renderTooltipContent: ({ datum }) => combined1.getName(datum, CONTEXT_TOOLTIP) }; const combined2 = {...options2, ...customeOptions }; const options3 = { getLabelColor: (datum) => computeContrastColor(combined2.getColor(datum), { threshold: 0.45 }), getOutlineLabelColor: (datum) => computeContrastColor(combined2.getColor(datum), { light: "black", dark: "white", threshold: 0.45 }) }; return { ...options1, ...options2, ...options3, ...customeOptions }; }37:T7b6,nodeEnter = ({ backgroundColor, selection, current, getColor, getId, getImage, getName, getLabelColor, getOutlineLabelColor, handleNodeClick, handleHoverEnter, handleHoverExit, phase1Duration, phase2Duration, previous, strokeWidth, dispatcher, createEventName }) => { Promises.delay(previous === null ? 0 : phase1Duration).then( () => { const all = selection.append("g").classed("node", true); const t = new d3.transition().duration(phase2Duration); const applyLabels = () => { all .filter((d) => showLabel(d, current)) .each(function (datum, index) { appendLabel(d3.select(this), datum, index, getName, current, getLabelColor, getColor, getOutlineLabelColor); }); all .filter((d) => !showLabel(d, current)) .select(".label") .remove(); dispatcher.call(EVENT_TYPE_ENTER_TRANSITION_COMPLETE, this); }; t.end().then(applyLabels, applyLabels); all .append("polygon") .classed("body", true) .attr("points", (d) => d.polygon) .attr("fill", (d) => ( //getImage || d.height > 0 ? "none" : getColor(d))) .attr("stroke", backgroundColor) .attr("stroke-opacity", 1) .attr("stroke-width", 0) .attr("stroke-linejoin", "round") .attr("pointer-events", (d) => (d.height === 0 ? "fill" : "none")) .attr("stroke-width", (d) => strokeWidth(d.depth)); if (getImage) appendImages(all, getId, getImage); all .filter((d) => d.height === 0) .on(createEventName("click"), (event, node) => handleNodeClick(node, event) ) .on(createEventName("mouseenter"), (event, node) => handleHoverEnter(node, event) ) .on(createEventName("mouseleave"), (event, node) => handleHoverExit(node, event) ); }, (reject) => {} ); }38:T579,appendLabel = ( selection, datum, i, getName, current, getLabelColor, getColor, getOutlineLabelColor ) => { const { id, href } = DOM.uid("centerline"); // necessary for Firefox if (!datum.label) { datum.lable = computeCenterlineLabel({ label: getName(datum, CONTEXT_VORONOI, current), polygon: datum.simplePolygon, numPerimeterPoints: 10, simplification: 20, strategy: "high" }); } const { centerline, offset, label, maxFontSize } = datum.lable; const labelG = selection .append("g") .classed("label", true) .style( "font-family", "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;" ) .style("font-size", `${maxFontSize * 0.9}px`) .style("font-weight", 500) .style("user-select", "none") .style("letter-spacing", "0em") .style("text-transform", "uppercase") .style("text-shadow", `0 0 4px ${getOutlineLabelColor(datum, getColor)}`) .attr("fill", () => getLabelColor(datum, getColor)) .attr("pointer-events", "none"); labelG .append("path") .attr("id", id) .attr("d", centerline) .attr("visibility", "hidden"); labelG .append("text") .attr("dy", "0.35em") .append("textPath") .attr("xlink:href", href) .attr("startOffset", `${100 * offset}%`) .attr("text-anchor", "middle") .text(label); }39:T559,appendImages = (selection, getId, getImage) => { const image = selection.filter((d) => d.height === 0); const clipUuid = uuid(); const getClipId = (d) => `${normalizeId(getId(d))}-${clipUuid}`; const imageG = image.append("g").classed("image", true); imageG .append("clipPath") .attr("id", getClipId) .attr("pointer-events", "none") .attr( "transform", (d) => `translate(${d.polyProps.bounds[0].map((d) => d * -1)})` ) .append("polygon") .attr("points", (d) => d.polygon); imageG .append("image") .attr("onload", function (d, i) { const image = new Image(); image.onload = () => { d.imageProps = { width: image.width, height: image.height, aspect: image.height / image.width }; const { x, y, width, height } = computeImagePosition( d.imageProps, d.polyProps ); const imageSelect = d3 .select(this) .attr("x", x) .attr("y", y) .attr("width", width) .attr("height", height) .attr("visibility", "visible"); }; image.src = getImage(d, i); }) .attr("clip-path", (d) => `url(#${getClipId(d)})`) .attr("transform", (d) => `translate(${d.polyProps.bounds[0]})`) .attr("visibility", "hidden") .attr("href", getImage); }3a:T70b,nodeUpdate = ({ selection, current, getColor, getImage, getName, getLabelColor, getOutlineLabelColor, handleHoverEnter, handleHoverExit, phase1Duration, phase2Duration, strokeWidth, dispatcher, createEventName }) => { const branches = selection .filter((d) => d.height > 0) .attr("visibility", "hidden"); const leaves = selection.filter((d) => d.height === 0); const t = d3.transition("update-phase-1").duration(phase1Duration); selection.selectAll(".label").remove(); t.end().then( () => { branches .attr("visibility", "visible") .select("polygon") .attr("points", (d) => d.polygon) .transition() .duration(phase2Duration) .attr("stroke-width", (d) => strokeWidth(d.depth)); selection .filter((d) => showLabel(d, current)) .each(function (datum, index) { appendLabel(d3.select(this), datum, index, getName, current, getLabelColor, getColor, getOutlineLabelColor); }); selection .selectAll(".label") .filter((d) => !showLabel(d, current)) .remove(); leaves .on(createEventName("mouseenter"), (event, node) => handleHoverEnter(node, event) ) .on(createEventName("mouseleave"), (event, node) => handleHoverExit(node, event) ); dispatcher.call(EVENT_TYPE_UPDATE_TRANSITION_COMPLETE, this); }, (reject) => {} //console.error("reject baz", reject) ); leaves .on(createEventName("mouseenter"), null) .on(createEventName("mouseleave"), null) .attr("opacity", 1) .select(".body") .attr("stroke-width", (d) => strokeWidth(d.depth)) .transition(t) .attr("points", (d) => d.polygon); if (getImage) updateImages(selection, t); }3b:[] 30:{"id":"9aada2731a2a6539","slug":"zoomable-voronoi-treemap","title":"Zoomable Voronoi Treemap","thumbnail":"33792e81a9bc680b42ec3cf1ffe8fabb88c785541a49e5a6ee4a42fe0e8c6e31","access_level":"public","create_time":"$D2020-04-18T22:06:09.197Z","update_time":"$D2025-05-09T03:25:55.494Z","view_time":null,"first_public_time":"$D2020-04-18T22:30:30.908Z","has_unpublished_edits":null,"fork":true,"stars":32,"starred":false,"owner":{"type":"team","id":"ee5a008260fc7c56","login":"trebor","name":"Robert Harris","avatar_url":"https://avatars-next.observableusercontent.com/936178c81d52f4a3b97d8b2ff7e401b2903b30c97bb5cf5f409e37128137a067","tier":"starter_2024"},"version":2614,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d504d175c0c36f4b","login":"trebor","name":"Robert Harris","avatar_url":"https://avatars-next.observableusercontent.com/936178c81d52f4a3b97d8b2ff7e401b2903b30c97bb5cf5f409e37128137a067","tier":null}],"members":[{"type":"individual","id":"d504d175c0c36f4b","login":"trebor","name":"Robert Harris","avatar_url":"https://avatars-next.observableusercontent.com/936178c81d52f4a3b97d8b2ff7e401b2903b30c97bb5cf5f409e37128137a067","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zoomable Voronoi Treemap","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"md`## Examples\n\nThese use the bog standard flare data set with random values asigned to leaf nodes.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"flare = {\n const flare = await d3.json(\n \"https://raw.githubusercontent.com/d3/d3-hierarchy/master/test/data/flare.json\"\n );\n return d3.hierarchy(flare).sum((d) => (d.children ? 0 : d.value));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1864,"value":"md`### Example - with default colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"__exampleChart = {\n return renderChart({\n data: flare,\n showColorBoxInPath: true,\n showValueInPath: true,\n size: { width, height: 400 }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1862,"value":"md`### Example - with images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1861,"value":"viewof __exampleChartWithImages = {\n const tallImageUrl = sampleImages.dog;\n const wideImageUrl = sampleImages.mountain;\n return renderChart({\n data: flare,\n getImage: (d, i) => (i % 2 === 0 ? wideImageUrl : tallImageUrl),\n size: { width, height: 400 },\n showValueInPath: false,\n onShiftClick: (...args) => console.log({ args })\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1860,"value":"sampleImages = ({\n dog: \"https://fastly.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U\",\n mountain: \"https://fastly.picsum.photos/id/866/200/300.jpg?hmac=rcadCENKh4rD6MAp6V_ma-AyWv641M4iiOpe1RyFHeI\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1303,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"md`### Renderers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1155,"value":"renderColorRamp = ({\n colorScale,\n colorDomain = [0, 1],\n n = 200,\n height = 20,\n width = 300\n}) => {\n const canvas = DOM.canvas(n, 1);\n const context = canvas.getContext(\"2d\");\n canvas.style.width = `${width}px`;\n canvas.style.height = `${height}px`;\n canvas.style.imageRendering = \"-moz-crisp-edges\";\n canvas.style.imageRendering = \"pixelated\";\n const ab = d3\n .scaleLinear()\n .domain([0, n - 1])\n .range(colorDomain);\n\n for (let i = 0; i < n; ++i) {\n context.fillStyle = colorScale(ab(i));\n context.fillRect(i, 0, 1, 1);\n }\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2591,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"md`### D3 Join`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1401,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"normalizeId = (id) => {\n return id.replaceAll(\" \", \"_\").replaceAll(\"/\", \"_\").replaceAll(\"-\", \"_\")\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2005,"value":"uuid = () =>\n ([1e7] + 1e3 + 4e3 + 8e3 + 1e11).replace(/[018]/g, (c) =>\n (\n c ^\n (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))\n ).toString(16)\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1850,"value":"updateImages = (selection, t) => {\n const imageG = selection\n .filter(d => d.height === 0 && !!d.imageProps)\n .selectAll(\".image\");\n\n imageG\n .select(\"clipPath\")\n .transition(t)\n .attr(\n \"transform\",\n d => `translate(${d.polyProps.bounds[0].map(d => d * -1)})`\n )\n .select(\"polygon\")\n .attr(\"points\", d => d.polygon);\n\n imageG\n .select(\"image\")\n .transition(t)\n .attr(\"transform\", d => `translate(${d.polyProps.bounds[0]})`)\n .each(function(d) {\n const { x, y, width, height } = computeImagePosition(\n d.imageProps,\n d.polyProps\n );\n\n d3.select(this)\n .transition(t)\n\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"width\", width)\n .attr(\"height\", height);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"showLabel = (node, current) => {\n return (\n node.depth === current.depth + 1 ||\n (node.height === 0 && current.height === 0)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"md`### Smooth Shape Transition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1849,"value":"computeImagePosition = (imageProps, polyProps) => {\n const { aspect: iAspect, width: iWidth, height: iHeight } = imageProps;\n const { aspect: pAspect, width: pWidth, height: pHeight } = polyProps;\n const [x, y, width, height] =\n pAspect < iAspect\n ? [\n 0,\n ((iAspect / pAspect) * pHeight - pHeight) / -2,\n pWidth,\n iHeight * (pWidth / iWidth)\n ]\n : [\n ((pAspect / iAspect) * pWidth - pWidth) / -2,\n 0,\n iWidth * (pHeight / iHeight),\n pHeight\n ];\n\n return {\n x,\n y,\n width,\n height\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"coordinatePolygons = (source, target, pointCount = 20) => {\n const expandedPolygon = fixedPointCount(target, pointCount);\n\n if (!source || source.length === 0) return expandedPolygon;\n\n const sourceCentroid = computeCentroid(source);\n const targetCentroid = computeCentroid(expandedPolygon);\n\n const startTheta = computeAngle(sourceCentroid, source[0]);\n\n const pointWidthClosestTheta = expandedPolygon\n .map((point, i) => ({\n theta: Math.abs(computeAngle(targetCentroid, point)),\n index: i\n }))\n .sort((a, b) => a.theta - b.theta)[0].index;\n\n const coordinatedPolygon = [\n ...expandedPolygon.slice(pointWidthClosestTheta),\n ...expandedPolygon.slice(0, pointWidthClosestTheta)\n ];\n\n return d3.polygonArea(source) * d3.polygonArea(coordinatedPolygon) < 0\n ? coordinatedPolygon.reverse()\n : coordinatedPolygon;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":775,"value":"computeCentroid = shape =>\n shape\n .reduce(([xSum, ySum], [x, y]) => [xSum + x, ySum + y], [0, 0])\n .map(d => d / shape.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":780,"value":"computeAngle = ([x0, y0], [x1, y1]) => Math.atan2(y1 - y0, x1 - x0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"establishColor = (root, getWeight = (d) => d.value, domain = [0, 1]) => {\n const _establishColor = (node, domain) => {\n node.colorDomain = domain;\n node.colorValue = d3.sum(domain) / 2;\n if (node.children) {\n const sum = d3.sum(node.children.map(getWeight));\n const scale = d3.scaleLinear().domain([0, sum]).range(domain);\n\n (node.children || [])\n //.sort((a, b) => getWeight(a) - getWeight(b))\n .reduce((sum, child) => {\n const progress = sum + getWeight(child);\n _establishColor(child, [sum, progress].map(scale));\n return progress;\n }, 0);\n }\n };\n\n _establishColor(root, domain);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"createMeasurablePath = points =>\n d3\n .select(DOM.svg(1, 1))\n .append(\"path\")\n .datum(points)\n .attr(\"d\", d3.line())\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"fixedPointCount = (shape, count) => {\n const measurablePath = createMeasurablePath(shape);\n\n const newPointCount = count - shape.length + 1;\n\n if (count < 1) return shape;\n\n const distances = computeDistances(shape);\n const length = distances[distances.length - 1];\n\n const distancePoints = distances.map((distance, i) => ({\n distance,\n point: shape[i]\n }));\n\n const positionScale = d3\n .scaleLinear()\n .domain([0, newPointCount - 1])\n .range([0.001, length]);\n\n return d3.range(newPointCount).reduce((points, index) => {\n const position = positionScale(index);\n while (distancePoints.length > 0 && position > distancePoints[0].distance) {\n points.push(distancePoints[0].point);\n distancePoints.shift();\n }\n const { x, y } = measurablePath.getPointAtLength(position);\n points.push([x, y]);\n return points;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"computeDistance = (coord1, coord2) => {\n var distX = coord2[0] - coord1[0];\n var distY = coord2[1] - coord1[1];\n return Math.sqrt(distX * distX + distY * distY);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":672,"value":"computeDistances = coordinates => {\n return coordinates.reduce((distances, coordinate, i) => {\n const value =\n i === 0\n ? 0\n : distances[i - 1] + computeDistance(coordinates[i - 1], coordinate);\n distances.push(value);\n return distances;\n }, []);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1091,"value":"createDispatcher = () => new d3.dispatch(...EVENT_TYPES)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2503,"value":"## Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2375,"value":"CONTEXT_PATH = \"path\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2377,"value":"CONTEXT_VORONOI = \"voronoi\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"CONTEXT_TITLE = \"title\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2385,"value":"CONTEXT_TOOLTIP = \"title\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"EVENT_TYPES = [\n EVENT_TYPE_FOCUS,\n EVENT_TYPE_REFOCUS,\n EVENT_TYPE_FOCUS_GAIN,\n EVENT_TYPE_FOCUS_LOSE,\n EVENT_TYPE_HOVER_GAIN,\n EVENT_TYPE_HOVER_LOSE,\n EVENT_TYPE_ENTER_TRANSITION_COMPLETE,\n EVENT_TYPE_UPDATE_TRANSITION_COMPLETE\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2204,"value":"EVENT_TYPE_HOVER_GAIN = \"hover-gain\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2203,"value":"EVENT_TYPE_HOVER_LOSE = \"hover-lose\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2202,"value":"EVENT_TYPE_FOCUS = \"focus\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2535,"value":"EVENT_TYPE_REFOCUS = \"refocus\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2201,"value":"EVENT_TYPE_FOCUS_GAIN = \"focus-gain\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2200,"value":"EVENT_TYPE_FOCUS_LOSE = \"focus-lose\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2199,"value":"EVENT_TYPE_ENTER_TRANSITION_COMPLETE = \"enter-transition-complete\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2198,"value":"EVENT_TYPE_UPDATE_TRANSITION_COMPLETE = \"update-transition-complete\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1247,"value":"import { titelize } from \"@trebor/utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2197,"value":"import { applyTooltips } from \"@trebor/tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2546,"value":"import {computeContrastColor} from \"@trebor/text-contrast-color\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1573,"value":"import {\n computeCenterlineLabel,\n css\n} from \"@trebor/centerline-labeling-utility\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@7\", \"d3-voronoi-treemap\", \"seedrandom@2.4.3/seedrandom.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 31:"$30:body"