2b:null 2c:["$","title",null,{"children":"Zoomable Voronoi Treemap | lazyTsunday's Workspace | Observable"}] 31:T760,md`# 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) which will then be passed through into [renderMap](#renderMap). Have a look at the paramaters and their default values in [renderMap](#renderMap) to get a sense of how you can customise the chart. ### NOTE - Be sure getId works! `32:T6d9,sampleImages = ({ yellowCedder: "https://lh3.googleusercontent.com/vY5Qk4QoIO5xWgWz68Cdabgjp_M6UsXC4xWkVui7RBQZrS3FGl3mMt52EOQ8qD_QOEhuc6-VGEJj7gHq65dz78FWvH_StR7aBi0_Y4enravD4zXDmjRQkFBMlSvszhfRLJjytD0C2AnH-8r-GWvnnNceskDebnu8yiEn2x5iTzJnDzGrdax-hoycGeDa3AeDQShuUDwbzBuqSy9aM5Au3oufu6UZgcu82Jfx50bd_x_tXOcFo7pWTAi38MGP_vHeHbtzH0q-mbVxqgLWSEYiLmq2j3fX6_TfR22dE_TKf-gWgwZ-t2VLWA3Z9qDwvRl8dM75Jkw8ZHVhM73fZEKEe_nuIbCIB-FjtVDU31UBpf66u9d6MDC54aTQcizdoNysk0Afm9Y-2Yq4EKyWnwoROyadkilxhGdn9Fym7jFbrwFCuihDM6c_x6y4jCcPpOudC_6EoRGBUsZMO5SN2AUthUWthsZHkXDJoQBXjq8acX8lTltZU3tVCVTY6xi_qSOBvO2JnH8cY9K9fdXi2v2_1WRGttcFzs0ry5Q3zr2zyYFAEUaxa05Sjn5LACbJ5IJQkonYFxNQ2pBZOoca50mcBvCQNcqnezwopQi6IJbwHAKk7t_txa3SbAuyEDpNWN8vWKQcReG2j1sm1-JHVicA8-BlIFuaK7EwxIbue3zJ3lb8RI9PvZdYutGRwHKdxcU=s400-no", japaneseFlag: "https://img5.goodfon.com/wallpaper/nbig/b/e8/japan-flag-flag-of-japan-japanese-flag-japan-large-flag.jpg", testPattern: "https://i.ytimg.com/vi/S7SLep244ss/maxresdefault.jpg", lifeLogo: "https://lh3.googleusercontent.com/cSL7pXlnwqN2DouIEGKkBjHswHtmboVNibJqq9q27C0_Xfylp0o7ERbMO-Thn8PFYTwSJ933vCZ7_k_WiP4lGdHbTlga-UZLvDU-0Lwp1M-BiccKM-9cJBJ5VJWuM24hUQBZXKDO7CgqO-TSxnDcKH6Qyqjnaua8EKW570RP9LlxyS0jJ9J49vXfUqL2X1Fv-MunG3UDBZ_i8o4Ao_Ak50C3GVp3Wfr9Dqrew_fCQlbuzZuvhrcTlunYpmf4hhpVxugVoliN_zM490HoIk9RcJNlQ_xyo6nT9Ao6xr0LqyjysJAcrNrivyf1NMB2NrQ9lSyi2DUwRXcirVzMMrRc9NSQtYe2LpdpwkADYZ8g7K0Yaad9dF1cbRDXJ9Gxl0TvNBP3YDc3yDwG_j44YORbTE3WFiIGuGltrA7x9dUsku1PQVI1PaE4mEmsjnErlphHSlBq4xddsLCpjZJOtEMiUZmvmUSmx73ty51zAIMYK9BVTtAqDLw8HlsrseRwWJnPSL9WKfzQghQ_jMG1doYKn-Ebe7D53WbZArKiqA-Vy8OqNYJXhXKVize-xgmxHuap04Pttf26D4j76B6gAHPqKOcKxrhor-B5FqehCrqVkUgc8QmSni54p7a-NY8QRm80hBDw7TpfjUadBUi5n6CiPI4tKvxaqdNSq2RRHYt0fLfolbjBi6D1MZNxLDVDIAw=s200-no" })33:T9ab,function renderChart({ data, dispatcher = createDispatcher(), colorScale = d3.scaleSequential(d3.interpolateTurbo), formatNumber = d3.format(",.0f"), getImage, getName = (d) => titelize(d.data.name), fontFamily = "Arial, Helvetica, sans-serif", getValue = (d) => d.value, showValueInPath, showColorBoxInPath, renderTooltipContent = ({ datum }) => getName(datum, CONTEXT_TOOLTIP), disableHover = false, onReady = () => {}, tooltipOptions = {}, ...rest }) { 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({ colorScale, dispatcher, focus, formatNumber, getImage, getName, getValue, hover, showColorBox: showColorBoxInPath, showValue: showValueInPath }); 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({ colorScale, data, dispatcher, getImage, getName, getValue, createEventName, disableHover, ...rest }); 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:T1d08,renderMap = ({ colorScale = d3.scaleSequential(d3.interpolateTurbo), 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 = "black", data, dispatcher = createDispatcher(), disableHover, formatNumber = d3.format(",.0f"), getColor = (d) => colorScale(d.colorValue), getId = (d) => d.data.name, getImage = null, getName = (d) => titelize(d.data.name), getValue = (d) => d.value, isEqual = (a, b) => getId(a) === getId(b), 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], strokeWidth = d3.scalePow().exponent(1.2).range(strokeWidthRange), upButtonSize = 100, minHeight = 0, createEventName, establishColorWeight = undefined }) => { 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 ) ); // .attr("viewBox", ); 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) .attr("font-size", "40px") .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, backgroundColor, current: node, getColor, getId, getImage, getName, handleNodeClick, handleHoverEnter, handleHoverExit, phase1Duration, phase2Duration, previous: current, strokeWidth, dispatcher, createEventName }), (selection) => nodeUpdate({ selection, current: node, getImage, getName, handleHoverEnter, handleHoverExit, phase1Duration, phase2Duration, strokeWidth, dispatcher, createEventName }), nodeExit ); current = node; } renderNode(data); onLayoutComplete(svg.node()); return svg.node(); }35:T656,renderPath = ({ colorScale, dispatcher = createDispatcher(), focus, formatNumber, getImage, getName = (d) => titelize(d.data.name), 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:T77f,nodeEnter = ({ backgroundColor, selection, current, getColor, getId, getImage, getName, 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); }); all .filter((d) => !showLabel(d, current)) .select(".label") .remove(); dispatcher.call(EVENT_TYPE_ENTER_TRANSITION_COMPLETE, this); }; t.end().then(applyLabels, applyLabels); if (getImage) appendImages(all, getId, getImage, createEventName); 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)); 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) => {} // console.error("reject bar", reject) ); }37:T513,appendLabel = (selection, datum, i, getName, current) => { 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 2px black") .attr("fill", "white") .attr("pointer-events", "none"); labelG .append("path") .attr("id", id) .attr("d", centerline) .attr("visibility", "hidden"); labelG .append("text") .attr("dy", "0.35em") .attr("opacity", 0.85) .append("textPath") .attr("xlink:href", href) .attr("startOffset", `${100 * offset}%`) .attr("text-anchor", "middle") .text(label); }38:T55a,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); }39:T6a7,nodeUpdate = ({ selection, current, getImage, getName, 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); }); 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); }3a:[] 2f:{"id":"3e8bff1ce8d2424f","slug":null,"title":"Zoomable Voronoi Treemap","thumbnail":"747cbeca95842c572093e662a71569379b53a83fab485ff765e1be42a40fd362","access_level":"public","create_time":"$D2023-09-27T09:30:55.310Z","update_time":"$D2023-09-27T09:30:55.310Z","view_time":null,"first_public_time":"$D2023-09-27T09:30:55.310Z","has_unpublished_edits":null,"fork":{"id":"9aada2731a2a6539","slug":"zoomable-voronoi-treemap","title":"Zoomable Voronoi Treemap","owner":{"id":"ee5a008260fc7c56","login":"trebor","name":"Robert Harris"}},"stars":0,"starred":false,"owner":{"type":"team","id":"35064f1f895f02be","login":"lazytsunday-ws","name":"lazyTsunday's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/fbe879bc229f98e89bb08f328c24ede7467e5305900c8211b70d85097af0bc59","tier":"starter_2024"},"version":2545,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"31750da39446aea6","login":"lazytsunday","name":"lazyTsunday","avatar_url":"https://avatars-next.observableusercontent.com/17550ca905941dc09cb9786af45c346b43376504e403d96244ed70f80c73d733","tier":null}],"members":[{"type":"individual","id":"31750da39446aea6","login":"lazytsunday","name":"lazyTsunday","avatar_url":"https://avatars-next.observableusercontent.com/17550ca905941dc09cb9786af45c346b43376504e403d96244ed70f80c73d733","tier":null,"role":"editor"},{"type":"team","id":"35064f1f895f02be","login":"lazytsunday-ws","name":"lazyTsunday's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/fbe879bc229f98e89bb08f328c24ede7467e5305900c8211b70d85097af0bc59","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zoomable Voronoi Treemap","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","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":"data = {\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 : Math.random()));\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,\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":1860,"value":"$32","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.yellowCedder;\n const wideImageUrl = sampleImages.japaneseFlag;\n return renderChart({\n data,\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":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":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":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"normalizeId = (id) =>\n id.replaceAll(\" \", \"_\").replaceAll(\"/\", \"_\").replaceAll(\"-\", \"_\")","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":"$39","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":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"},{"id":2181,"value":"d = require(\"d3-voronoi-treemap\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1366,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3a","stdlib":"1"}} 30:"$2f:body"