2b:null 2c:["$","title",null,{"children":"Zoomable Voronoi Treemap | yuechn | Observable"}] 31:T73e,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. `32:T8fd,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, renderTooltipContent = ({ datum }) => getName(datum), 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, showValue: showValueInPath }); updateSection(pathSection, path); } }; 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, ...rest }); if (!!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; }33:T1c07,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 = "white", data, dispatcher = createDispatcher(), 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 = () => {}, 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 }) => { 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); 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", "red"); 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); 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; }; }; console.log(data) const handleHoverEnter = (node, event) => { 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", 1); } }; const handleHoverExit = (node, event) => { 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) => { const target = node !== current ? node.ancestors().find((d) => d.depth === current.depth + 1) : node.parent; if (target.height >= minHeight) { renderNode(target); } }; function renderNode(node) { if (current && isEqual(node, current)) 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)}` ); } 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, prevouse: current, strokeWidth, dispatcher, createEventName }), (selection) => nodeUpdate({ selection, current: node, getImage, getName, handleHoverEnter, handleHoverExit, phase1Duration, phase2Duration, strokeWidth, dispatcher, createEventName }), nodeExit ); if(node.data.name =='AgglomerativeCluster') { console.log(node) } console.log(node) current = node; } renderNode(data); onLayoutComplete(svg.node()); return svg.node(); }34:T60c,renderPath = ({ colorScale, dispatcher = createDispatcher(), focus, formatNumber, getImage, getName = (d) => titelize(d.data.name), getValue, 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`

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

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

${path.map( renderElement )}

`; }35:T7e6,function nodeEnter({ backgroundColor, selection, current, getColor, getId, getImage, getName, handleNodeClick, handleHoverEnter, handleHoverExit, phase1Duration, phase2Duration, previouse, strokeWidth, dispatcher, createEventName }){ delay(previouse === null ? 0 : phase1Duration).then(()=>{ const all = selection.append("g").classed("node", true).attr("id", d => d.data.id) 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); // }); // 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", d => d.name) .attr("pointer-events", (d) => (d.height === 0 ? "fill" : "none")) .attr("stroke-width", (d) => strokeWidth(d.depth)); all.append("circle") .attr('cx', d => d.polyProps.centroid[0]) .attr('cy', d => d.polyProps.centroid[1]) .attr('r', 5) .attr('fill', 'black') 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) ); }) }36:T52a,appendLabel = (selection, datum, i, getName) => { const { id, href } = DOM.uid("centerline"); // necessary for Firefox // if (!datum.label) { // datum.lable = computeCenterlineLabel({ // label: getName(datum), // 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 5px 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.75) .append("textPath") .attr("xlink:href", href) .attr("startOffset", `${100 * offset}%`) .attr("text-anchor", "middle") .text(d =>d.value.toString().split(".")[1]); }37: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); }38:T680,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); // }); 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); }39:[] 2f:{"id":"80b38ddfd1f121ea","slug":null,"title":"Zoomable Voronoi Treemap","thumbnail":"04f68452235f9bffa81cf32291c5ac85de2730602b4252c34b25665e9aec4fd0","access_level":"public","create_time":"$D2023-01-04T13:12:20.417Z","update_time":"$D2023-01-10T06:32:41.451Z","view_time":null,"first_public_time":"$D2023-01-04T13:12:20.417Z","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":"32863b98d954c9df","login":"yuechn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/46b8215c6025b9ac7335f49a70838e57ad7b9d88ed6fcafb091df57b69990eda","tier":"starter_2024"},"version":2414,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a66641874e5afdc4","login":"yuechn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/46b8215c6025b9ac7335f49a70838e57ad7b9d88ed6fcafb091df57b69990eda","tier":null}],"members":[{"type":"individual","id":"a66641874e5afdc4","login":"yuechn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/46b8215c6025b9ac7335f49a70838e57ad7b9d88ed6fcafb091df57b69990eda","tier":null,"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 let dd = {\n \"id\": \"flare\",\n \"children\": [\n {\n \"id\": \"analytics\",\n \"value\": 7074\n },\n {\n \"id\": \"analytics2\",\n \"value\": 3938\n },\n {\n \"id\": \"analytics3\",\n \"value\": 7576840\n },\n {\n \"id\": \"analytics4\",\n \"value\": 212\n },\n {\n \"id\": \"wew\",\n \"value\": 7074\n },\n {\n \"id\": \"th\",\n \"value\": 3938\n },\n {\n \"id\": \"h\",\n \"value\": 7576840\n },\n {\n \"id\": \"j\",\n \"value\": 212\n },\n {\n \"id\": \"jyj\",\n \"value\": 7074\n },\n {\n \"id\": \"ku\",\n \"value\": 3938\n },\n {\n \"id\": \"dg\",\n \"value\": 7576840\n },\n {\n \"id\": \"llj\",\n \"value\": 212\n }\n ]\n}\n\n\n return d3.hierarchy(dd).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":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":2364,"value":"delay = (ms) => {\n return new Promise(resolve=> setTimeout(resolve,ms));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1080,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"$34","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":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1853,"value":"$37","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":"$38","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]) => {\n return Math.atan2(y1 - y0, x1 - x0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"establishColor = (root, domain = [0, 1], getWeight = d => d.value) => {\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\n .scaleLinear()\n .domain([0, sum])\n .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 return d3\n .select(DOM.svg(1, 1))\n .append(\"path\")\n .datum(points)\n .attr(\"name\", 'hjshfiw')\n .attr(\"d\", d3.line())\n .node()\n}","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":2205,"value":"EVENT_TYPES = [\n EVENT_TYPE_FOCUS,\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":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":"$W39","stdlib":"1"}} 30:"$2f:body"