2a:null 2b:["$","title",null,{"children":"d3-force implementation | brickmaker | Observable"}] 31:T4be,chart = { const links = data.links.map(d => Object.create(d)); const nodes = data.nodes.map(d => Object.create(d)); const simulation = new ForceSimulation(nodes, links, true); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const link = svg.append("g") .attr('transform', `translate(${width / 2}, ${height / 2})`) .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .attr('transform', `translate(${width / 2}, ${height / 2})`) .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 5) .attr("fill", color); node.append("title") .text(d => d.id); simulation.onTick(() => { 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("cx", d => d.x) .attr("cy", d => d.y); }); simulation.start(); invalidation.then(() => simulation.stop()); return svg.node(); }32:T12ed,class ForceSimulation { constructor(nodes, links, enableWeightLink) { this.nodes = nodes; this.links = links; this.tickFunc = () => { }; this.hasWeightLink = enableWeightLink; this._init(); } onTick(callback) { this.tickFunc = callback; } start() { this.timer = setInterval(() => { this.step(); }, TIME_INTERVAL); } stop() { // TODO: to be implemented clearInterval(this.timer); } step() { this._computeVelocities(); this._computePositions(); this.tickFunc(); } _init() { const id2Node = new Map(); this.nodes.forEach(node => { node.x = this._randomRange(-INIT_RADIUS, INIT_RADIUS); node.y = this._randomRange(-INIT_RADIUS, INIT_RADIUS); node.vx = 0; node.vy = 0; id2Node[node.id] = node; }); this.links.forEach(link => { link.source = id2Node[link.source]; link.target = id2Node[link.target]; }); } _randomRange(x, y) { return Math.random() * (y - x) + x; } _lenTwoNodes(source, target) { return Math.sqrt((source.x - target.x) ** 2 + (source.y - target.y) ** 2); } _normalTwoNodes(source, target) { const len = this._lenTwoNodes(source, target); return { x: (target.x - source.x) / len, y: (target.y - source.y) / len, }; } _lenLink(link) { return this._lenTwoNodes(link.source, link.target); } _normalLink(link) { return this._normalTwoNodes(link.source, link.target); } _computeSpring(link, hasWeight = false) { const len = this._lenLink(link); const normal = this._normalLink(link); const f = (len - DEFALUT_EDGE_LEN) * SPRING_K; // NOTE: weight method, linear or log // const weightFactor = hasWeight ? 1 + Math.log(link.value) : 1; const weightFactor = hasWeight ? link.value : 1; return { x: f * normal.x * weightFactor, y: f * normal.y * weightFactor, } } _computeRepulse(center) { const f = { x: 0, y: 0 }; this.nodes.forEach(node => { if (node !== center) { const fv = REPULSE_K * MASS * MASS / this._lenTwoNodes(center, node) ** 2; const normal = this._normalTwoNodes(node, center); f.x += fv * normal.x; f.y += fv * normal.y; } }) return f; } _computeCentripetal(node) { const f = { x: 0, y: 0 }; const center = { x: 0, y: 0 }; // TODO: default center is zero const fv = CENTRIPETAL_K * this._lenTwoNodes(node, center); const normal = this._normalTwoNodes(node, center); f.x += fv * normal.x; f.y += fv * normal.y; return f; } _computeVelocities() { const repulseForceList = {} this.nodes.forEach( node => { repulseForceList[node.id] = this._computeRepulse(node) }); const centripetalForceList = {} this.nodes.forEach( node => { centripetalForceList[node.id] = this._computeCentripetal(node) }); this.links.forEach(link => { const springForce = this._computeSpring(link, this.hasWeightLink); const repulseForceSource = repulseForceList[link.source.id]; const repulseForceTarget = repulseForceList[link.target.id]; const centripetalForceSource = centripetalForceList[link.source.id]; const centripetalForceTarget = centripetalForceList[link.target.id]; const fSource = { x: springForce.x + repulseForceSource.x + centripetalForceSource.x, y: springForce.y + repulseForceSource.y + centripetalForceSource.y, }; const fTarget = { x: -springForce.x + repulseForceTarget.x + centripetalForceTarget.x, y: -springForce.y + repulseForceTarget.y + centripetalForceTarget.y, }; // force to velocity, explicit Euler method link.source.vx += fSource.x / MASS * D_T; link.source.vy += fSource.y / MASS * D_T; link.target.vx += fTarget.x / MASS * D_T; link.target.vy += fTarget.y / MASS * D_T; // NOTE: speed decay, maybe not proper link.source.vx *= VELOCITY_DECAY; link.source.vy *= VELOCITY_DECAY; link.target.vx *= VELOCITY_DECAY; link.target.vy *= VELOCITY_DECAY; }); } _computePositions() { this.nodes.forEach(node => { node.x += node.vx * D_T; node.y += node.vy * D_T; }); } }33:[] 2e:{"id":"cea8c61a092ba12d","slug":"d3-force-effect","title":"d3-force implementation","thumbnail":"1d7ac3e8db653814470441e01eb5d7ed1f4d9af0b8d5a1379850c19a46e29af1","access_level":"public","create_time":"$D2019-08-07T01:58:34.184Z","update_time":"$D2019-11-29T02:59:10.618Z","view_time":null,"first_public_time":"$D2019-08-07T02:36:42.196Z","fork":{"id":"a6c00de7c09bdfa1","slug":"force-directed-graph-component","title":"Force-directed graph component","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"087d5aa443c1f865","login":"brickmaker","name":"brickmaker","avatar_url":"https://avatars-next.observableusercontent.com/0ac8b7df3c9c34e950c7bebfed32d6e6fe8300fc0cdfc4b7cea154fc6a39f347","tier":"starter_2024"},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"88d9ad367b3c7225","login":"brickmaker","name":"brickmaker","avatar_url":"https://avatars-next.observableusercontent.com/0ac8b7df3c9c34e950c7bebfed32d6e6fe8300fc0cdfc4b7cea154fc6a39f347","tier":null}],"members":[{"type":"individual","id":"88d9ad367b3c7225","login":"brickmaker","name":"brickmaker","avatar_url":"https://avatars-next.observableusercontent.com/0ac8b7df3c9c34e950c7bebfed32d6e6fe8300fc0cdfc4b7cea154fc6a39f347","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"d3-force implementation","cells":[{"id":1,"value":"md`# d3-force implementation\nSelf implementation of core functions of d3-force.\nsee: https://github.com/brickmaker/d3-force-effect\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"params = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"SPRING_K = Generators.input(params.SPRING_K); // spring stiffness factor","pinned":true,"hidden":false,"mode":"ojs"},{"id":160,"value":"REPULSE_K = Generators.input(params.REPULSE_K); // repulse force factor","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"CENTRIPETAL_K = Generators.input(params.CENTRIPETAL_K); // centripetal force factor","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"INIT_RADIUS = 100;","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"TIME_INTERVAL = 1; // time interval of tick","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"DEFALUT_EDGE_LEN = 0; // rest length of spring","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"D_T = 0.001; // delta time","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"MASS = 10; // mass value of nodes","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"VELOCITY_DECAY = 0.99; // decay of velocity of each iteration","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = d3.json(\"https://gist.githubusercontent.com/mbostock/4062045/raw/5916d145c8c048a6e3086915a6be464467391c62/miserables.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"