Divisibility Network In a divisibility network, two numbers are connected if they share a common divisor, i.e., their greatest common divisor .
viewof n = { const form = html`<form> <input name=i type=range min=1 max=100 value=40 step=1 style="width:180px;"> <output style="font-size:smaller;font-style:oblique;" name=o></output> </form>`; form.i.oninput = () => form.o.value = `n = ${form.value = form.i.valueAsNumber}`; form.i.oninput(); return form; }
chart = { const height = 600; const nodes = Array.from({length: n}, (_, i) => ({id: i + 1})); const links = edges.map(([i, j]) => ({source: i, target: j})); const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id)) .force("charge", d3.forceManyBody().strength(-100)) .force("x", d3.forceX()) .force("y", d3.forceY()) .on("tick", ticked); const svg = d3.select(DOM.svg(width, height)) .attr("viewBox", [-width / 2, -height / 2, width, height]); const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-width", 0.5) .selectAll("line") .data(links) .enter().append("line"); const node = svg.append("g") .style("font", "12px sans-serif") .style("user-select", "none") .style("cursor", "move") .attr("text-anchor", "middle") .attr("stroke", "white") .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 3) .selectAll("g") .data(nodes) .enter().append("g") .call(drag(simulation)); node.append("text") .attr("dy", "0.35em") .text(d => d.id) .clone(true) .attr("stroke", "none"); function ticked() { link.attr("x1", d => d.source.x).attr("y1", d => d.source.y) .attr("x2", d => d.target.x).attr("y2", d => d.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); } invalidation.then(() => simulation.stop()); return svg.node(); }
function gcd(a, b) { while (b) [a, b] = [b, a % b]; return a; }
edges = { const edges = []; for (let i = 2; i <= n; ++i) { for (let j = i + 1; j <= n; ++j) { if (gcd(i, j) > 1) { edges.push([i, j]); } } } return edges; }
drag = simulation => { function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); }
d3 = require("d3@5")