31:T411,viewof carousel = CarouselInput([ html`

*Corylus avellana, 10x* by Eckhard Völcker

`, html`

*Spruce needle cross section, 200x* by Robert Berdan

`, html`

*Chestnut (Aesculus hippocastanum) sprout* by Eckhard Völcker

`, ], { style: "figure { margin-bottom: 0.5rem; }" })32:Teb1,chartCanvas = { const context = DOM.context2d(width, height); const canvas = context.canvas; context.globalCompositeOperation = "multiply"; // TODO some forces should only apply for initial layout, we should remove them after simulation finishes const simulation = d3.forceSimulation() .nodes(data.nodes) .force("limit", d3.forceLimit().radius(d => d.r) .x0(0).x1(width) .y0(0).y1(height) .cushionWidth(0) .cushionStrength(0)) .force("link", d3.forceLink(data.links) .id(d => d.id) .strength(options.forceLinkStrength) .distance(options.forceLinkDistance)) .force("charge", d3.forceManyBody().strength(options.forceChargeStrength)) .force("cluster", forceCluster().strength(options.forceClusterStrength)); let voronoi = d3.Delaunay .from(data.nodes, d => d.x, d => d.y) .voronoi([0, 0, width, height]); const drag = d3.drag() .subject(({x, y}, d) => { const i = voronoi.delaunay.find(x, y); return data.nodes[i]; }) .on("start", (event) => { if (!event.active) simulation.alphaTarget(0); event.subject.fx = event.subject.x; event.subject.fy = event.subject.y; }) .on("drag", (event) => { event.subject.fx = event.x; event.subject.fy = event.y; }) .on("end", (event) => { if (!event.active) simulation.alphaTarget(0.01).restart(); event.subject.fx = null; event.subject.fy = null; }) .on("start.update drag.update end.update", (event) => { // const {x, y, fx, fy} = event.subject; // console.log("drag update", event.type, x, y, fx, fy) update(); render(); }); function cellPath(_d, index) { const polygon = voronoi.cellPolygon(index); if (!polygon) return; return smoothCell(polygon.slice(0, -1), options.cellSmoothRadius); } const fill = (d) => { if (d.opacity && d.opacity !== 1) { return d3.color(d.color).copy({opacity: d.opacity}).toString() } else { return d.color; } }; const stroke = (d) => d3.color(d.color).darker(0.1).toString(); const curve = d3.curveBasisClosed(context); function render() { const debugDelaunay = options.debug.includes("Delaunay"); const debugPoints = options.debug.includes("Points"); context.clearRect(0, 0, width, height); for (let i = 0; i < data.nodes.length; i++) { const d = data.nodes[i]; const path = cellPath(d, i); if (!path) continue; context.beginPath(); curve.lineStart(); for (const [x, y] of path) curve.point(x, y); curve.lineEnd(); context.fillStyle = fill(d); context.fill(); context.strokeStyle = stroke(d); context.lineWidth = 3; context.stroke(); // debug delaunay if (debugDelaunay) { context.globalCompositeOperation = "source-over"; context.beginPath(); voronoi.delaunay.render(context); context.strokeStyle = "yellow"; context.lineWidth = 1; context.stroke(); context.globalCompositeOperation = "multiply"; } // debug points if (debugPoints) { context.beginPath() context.arc(d.x, d.y, d.r * 2, 0, 2 * Math.PI); context.fillStyle = "black"; context.fill(); } } canvas.dispatchEvent(new CustomEvent("input")); } function update() { voronoi = d3.Delaunay .from(data.nodes, d => d.x, d => d.y) .voronoi([0, 0, width, height]); } // TODO drag bundles? simulation.on("tick", () => { update(); render(); }); invalidation.then(() => simulation.stop()); render(); return d3.select(context.canvas).call(drag).node(); }33:T640,debug = { const shape2path = await require("shape2path@3"); const svg = d3.create("svg").attr("width", width).attr("height", height); const fill = (type) => { switch (type) { case "bundle": return "red"; case "free": return "blue"; case "edge": return "magenta"; } } svg.append("g") .selectAll("path") .data(polygon) .join("path") .attr("d", shape2path.polygon().attr("points", d => d)) .attr("fill", "none") .attr("stroke", "black"); svg.append("g") .selectAll("circle") .data(data.nodes) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", d => fill(d.type)); svg.append("g") .selectAll("line") .data(outerRingLinks) .join("line") .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y) .attr("stroke", "magenta"); const button = html`