viewof sim = { const { nodes, links, origLinks } = simdata; const f = d3.format(".1f"); const D = 40; const err = links => { var current = links.map(({ source, target }) => Math.sqrt(sdist(source, target))/D); var target = links.map(link => link.len); var off = d3.mean(target) - d3.mean(current); return target.map((t, i) => Math.abs(t - current[i])).reduce((a,b) => a+b, 0); }; const simulation = d3_3d_force.forceSimulation(nodes, 3).velocityDecay(.9).alpha(1.5).alphaDecay(0.01) .force("link", d3_3d_force.forceLink(links).distance(o => D * o.len).iterations(20).strength(.6)); const cats = [['h', 'v'], ['push'], ['h', 'v', 'push'], ['h'], ['v']]; function lines (links, cats = ['h', 'v']) { return links.map((link, i) => { if (cats.indexOf(link.cat) < 0) return false; var a = link.source; var b = link.target; var line = [[a.x, a.y, a.z], [b.x, b.y, b.z]]; var off = link.len - Math.sqrt(sdist(a, b))/D; // +- (-1 .. 1) line.stroke = d3.interpolateViridis((off+1)/2); return line; }).filter(line => !!line); } const svg = draw(lines(links), { S: 440 }); const svg2 = draw(lines(origLinks), { S: 440 }); const Espan = DOM.element('span'); const root = html`

Simulated (E: ${Espan})

${svg}

Unsimulated (E: ${f(err(origLinks))})

${svg2}

`; { var ci = 0; function alternate2 () { draw(lines(origLinks, cats[ci++ % cats.length]), { svg: svg2 }); } svg2.onclick = alternate2; } var it = 0; function manualtick () { simulation.tick(); draw(lines(links), { svg }); root.dispatchEvent(new CustomEvent('input')); Espan.innerHTML = f(err(links)); svg.style.background = simulation.alpha() < simulation.alphaMin() ? '#fff' : '#dbddf9'; if (simulation.alpha() < simulation.alphaMin() || it++ > 1000) { var ci = 0; function alternate () { draw(lines(links, cats[ci++ % cats.length]), { svg }); } svg.onclick = alternate; alternate(); } else { requestAnimationFrame(manualtick); } } setTimeout(manualtick, 50); root.value = simulation; return root; }