30:T96c,contours = { const res = [] const levels = [0.8, 0.6, 0.4, 0.2] const pattern = [ [], [[0, 2], [1, 2]], [[1, 2], [0, 1]], [[0, 2], [0, 1]], [[0, 1], [0, 2]], [[0, 1], [1, 2]], [[1, 2], [0, 2]], [] ] levels.forEach(level => { // Meandering triangles const vertices = [] triangles.forEach(tri => { const pn = tri.map(t => t.weight >= level).reduce((ac, x) => ac << 1 | x) if (pn < 1 || pn > 6) return null const v = pattern[pn].map((t, i) => { const n1 = tri[t[0]] const n2 = tri[t[1]] const x = d3.scaleLinear() .domain([n1.weight, n2.weight]) .range([n1.x, n2.x]) const y = d3.scaleLinear() .domain([n1.weight, n2.weight]) .range([n1.y, n2.y]) const verID = n1.id < n2.id ? `${n1.id}_${n2.id}` : `${n2.id}_${n1.id}` return [verID, x(level), y(level)] }) const f1 = vertices.find(e => e.verID === v[0][0]) if (f1) { f1.succ = v[1][0] } else { vertices.push({ verID: v[0][0], x: v[0][1], y: v[0][2], succ: v[1][0] }) } const f2 = vertices.find(e => e.verID === v[1][0]) if (f2) { f2.pred = v[0][0] } else { vertices.push({ verID: v[1][0], x: v[1][1], y: v[1][2], pred: v[0][0] }) } }) // Contour path generation const graph = {} vertices.forEach(v => { graph[v.verID] = [] }) vertices.forEach(v => { if (v.hasOwnProperty('succ')) { graph[v.verID].push(v.succ) } if (v.hasOwnProperty('pred')) { graph[v.verID].push(v.pred) } }) const paths = [] let vs = vertices.map(e => e.verID) while (vs.length) { const path = [] const stack = [vs.pop()] const visited = [] while (stack.length) { const p = stack.pop() visited.push(p) const rcd = vertices.find(e => e.verID === p) const coords = {x: rcd.x, y: rcd.y} stack.length === 1 ? path.push(coords) : path.unshift(coords) const nbrs = graph[p] nbrs.forEach(nbr => { if (visited.includes(nbr)) return stack.push(nbr) }) } paths.push({path: path, level: level}) // Remove visited vs = vs.filter(e => !visited.includes(e)) } paths.forEach(e => res.push(e)) }) return res }31:T4ec,draw = { const links = d3.select(".edges") .selectAll("line") .data(vor.links()) links.exit().remove() links.enter().append("line") .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }) .attr("fill", "none") .attr("stroke", "#000") .attr("stroke-width", 0.1) const nodes = d3.select(".nodes") .selectAll("circle") .data(data) nodes.exit().remove() nodes.enter().append("circle") .attr("r", 2) .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) .attr("fill", function(d) { return d3.interpolateGreens(d.weight) }); const contourLine = d3.line() .x(function(d) { return d.x; }) .y(function(d) { return d.y; }) .curve(d3.curveCatmullRom.alpha(0.5)) // .curve(d3.curveCatmullRomClosed.alpha(0.5)) const cont = d3.select(".contours") .selectAll("path") .data(contours) cont.exit().remove() cont.enter().append("path") .attr("d", d => contourLine(d.path)) .attr("fill", "none") .attr("stroke", function(d) { return d3.interpolateOranges(d.level); }) } 32:[] 2e:{"title":"Tricontour","cells":[{"id":0,"value":"md`# Tricontour`","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"data = {\n const points = [\n {id: 1, x: 12, y: 17, weight: 0.12},\n {id: 2, x: 24, y: 63, weight: 0.53},\n {id: 3, x: 39, y: 82, weight: 0.91},\n {id: 4, x: 40, y: 10, weight: 0.22},\n {id: 5, x: 52, y: 33, weight: 0.58},\n {id: 6, x: 61, y: 68, weight: 0.36},\n {id: 7, x: 68, y: 31, weight: 0.71},\n {id: 8, x: 72, y: 82, weight: 0.32},\n {id: 9, x: 85, y: 23, weight: 0.5},\n {id: 10, x: 90, y: 12, weight: 0.19},\n {id: 11, x: 92, y: 89, weight: 0.08},\n {id: 12, x: 95, y: 45, weight: 0.98}\n ]\n const boundary = []\n let n = 13\n const grid = [0, 2, 4, 6, 8, 10]\n grid.forEach(i => {\n grid.forEach(j => {\n if ((i === 0 || i === 10) || (j === 0 || j === 10)) {\n boundary.push({id: n, x: i * 10, y: j * 10, weight: 0})\n n++\n }\n })\n })\n return points.concat(boundary)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"vor = d3.voronoi().x(d => d.x).y(d => d.y)(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"triangles = vor.triangles()","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}