31:T553,## The rest of my d3-force Collection This notebook is one of a few I have put together exploring different elements of d3 force algorithms. So far notebooks include: * **[d3 Force Dissected - Alpha](https://observablehq.com/@osserman/d3-force-dissected-alpha?collection=@osserman/d3-force-simulations)**. How "temperature" is controlled over the source of simulation. * **[d3 Force Dissected - Movement](https://observablehq.com/@osserman/d3-force-dissected-movement?collection=@osserman/d3-force-simulations)**. how node movement is controlled by force strength, simulation temperature (alpha) and simulation friction (velocityDecay). * **[d3 Force Dilemmas - Data Distortion](https://observablehq.com/@osserman/d3-force-dilemmas-data-distortion?collection=@osserman/d3-force-simulations)** - It's too easy to accidentally over-distort data with force-based visualizations like beeswarms. This notebook explores why and offers some tips on addressing the issue. Or visit the **[page for the collection](https://observablehq.com/collection/@osserman/d3-force-simulations)**. **Note:** I've got a running list of potential topics for additional notebooks from talking with fellow data viz developers. If you have a pain-point or a commonly misunderstood part of d3 force simulations, please feel free to leave a comment here and I'll add it to my list! 32:T83e,plotSimulation = function(simData, curSimTick, ticksToChart, addHeaders=false) { const outerContainer = d3.create('div') if(addHeaders) outerContainer.append('h2').text('Node Y Position').style('margin-bottom', '20px') const container = outerContainer.append('div').classed('container', true).classed('sim-viz', true) const leftChart = container.append('div').classed('container', true) if(addHeaders) leftChart.append('h3').text('At tick ' + curSimTick) const svg = addSvg(leftChart, 100 + margin.left + margin.right) const simG = addSimG(svg) const yAxis = drawLeftAxis(simG) const targetLine = drawTargetLine(simG, 15); drawNodes(simG, [simData[curSimTick]]) ; svg.append('text').attr('x',40).attr('y', chartHeight + margin.top + 10) .attr('fill','black').attr('font-size', '14px').attr('dominant-baseline', 'hanging') .html('y position: ' + d3.format('.2f')(simData[curSimTick].y) ) svg.append('text').attr('x',40).attr('y', chartHeight + margin.top + 30) .attr('fill','black').attr('font-size', '14px').attr('dominant-baseline', 'hanging') .html('y velocity: ' + d3.format('.2f')(simData[curSimTick].vy) ) const xScale = d3.scaleLinear().domain([0,ticksToChart]).range([0,400]) const rightChart = container.append('div').classed('container', true) if(addHeaders) rightChart.append('h3').text('Over course of simulation') const rightSvg = addSvg(rightChart, xScale.range()[1] + margin.left + margin.right) const rightSimG = addSimG(rightSvg) const rightYAxis = drawLeftAxis(rightSimG) const xAxis = drawBottomAxis(rightSimG, xScale) const rightTargetLine = drawTargetLine(rightSimG, xScale.range()[1], false); const lines = rightSimG.append('g').selectAll('line').data(simData.slice(0, ticksToChart)).join('line') .attr('x1', d=> xScale(d.i)).attr('x2', d=> xScale(d.i+1)) .attr('y1', d=> yScale(d.y)).attr('y2', d=> yScale(d.y)) .attr('stroke',d => d.i < curSimTick ? 'purple' : d.i == curSimTick ? 'orange' : '#bbb') .attr('stroke-width',d => d.i == curSimTick ? 3 : 2) return outerContainer.node(); }33:T5cf,liveFormulas = function(sim, tick){ const fmt = d3.format('.1f') const fmt2 = d3.format('.2f') const fmt3 = d3.format('.3f') const y = sim.data[tick].y const vy = sim.data[tick].vy const targetY = 0 const veloDecay = sim.params.velocityDecay const forceStrength = sim.params.strength const curAlpha = getCurAlpha(sim.params.alpha, sim.params.alphaDecay, tick) const accel = (targetY - y) * curAlpha * forceStrength; const newVelocity = (vy + accel) * (1 - veloDecay ) return htl.html`

Acceleration

distanceToTarget [target - node.y]
0 - ${fmt(y)} = ${fmt(-y)}

forceStrength
${fmt(forceStrength)}

currentSimTemp
${fmt2(curAlpha)}

${fmt2(accel)}

New Velocity How for the node will move by next tick

(prevVelocity + acceleration)
${fmt2(vy)} + ${fmt2(accel)} = ${fmt2(vy + accel)}

(1 − velocityDecay)
1 - ${veloDecay} = ${1-veloDecay}

${fmt3(newVelocity)}

` } 34:T855,makeTickControls = function(){ { let playing = false; let timerId; const container = d3.create('div') container.node().value = 0 const buttonGroup = container.append('div') .attr('class', 'controls-btn-group') .style('display','flex') .style('gap', '6px') .style('align-items', 'center') const text =buttonGroup.append('span') .style('font-size','24px') .style('font-weight','bold') .style('min-width','100px') .text('Tick ' + container.node().value) buttonGroup.append('button').text('back1').on('click', () => updateDisplay(d3.max([0,container.node().value-1]))) buttonGroup.append('button').style('min-width','70px').text('play').on('click', function() { const btn = d3.select(this) if (playing) { clearInterval(timerId); playing = !playing; btn.text('play') } else { if(container.node().value < 100){ playing = !playing; btn.text('pause') updateDisplay(container.node().value+1) timerId = setInterval( () => { if(container.node().value < 100){ updateDisplay(container.node().value+1) } else { clearInterval(timerId) playing = !playing; btn.text('play') } }, 1000/15 ) } } }) buttonGroup.append('button').text('fwd1').on('click', () => updateDisplay(d3.min([100,container.node().value+1]))) buttonGroup.append('button').text('restart').on('click', () => updateDisplay(0)) const input = buttonGroup.append('input') .attr('value', 0) .attr('type', 'range') .attr('min', '0') .attr('max', '100') .attr('step', '1') .style('margin-right','12px') .style('width','150px') .on('input', function() {updateDisplay(this.value)}) function updateDisplay(value) { container.node().value = +value container.node().dispatchEvent(new Event("input", {bubbles: true})); input.property('value', value) text.text('Tick ' + value) } return container.node() } }35:[] 2f:{"title":"D3 Force Dissected: Movement","cells":[{"id":0,"value":"# D3 Force Dissected: Movement","pinned":false,"hidden":false,"mode":"md"},{"id":371,"value":"In standard d3 force simulations, the there are complex formulas explaining how nodes move. But the basics are comprehensible, and illuminating. This notebook dives into **how node movement is controlled by force strength**, **simulation temperature (alpha)** and **simulation friction (velocityDecay)**. Let's see how it works. ","pinned":false,"hidden":false,"mode":"md"},{"id":606,"value":"## The Simplest Simulation ","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"```js\n const nodes = [ {x: 0, y: 100, r: 5} ] \n const simulation = d3.forceSimulation(nodes)\n .force(\"y\", d3.forceY(0))\n```","pinned":false,"hidden":false,"mode":"md"},{"id":804,"value":"Here we have a **single force acting on a single node**. The node's **starting y position = 100**, and the force (d3.forceY) sets the **target y = 0**. ","pinned":false,"hidden":false,"mode":"md"},{"id":1280,"value":"plotSimulation(defaultSim.data, introSimTick, 100, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":583,"value":"viewof introSimTick= Scrubber(d3.range(100), {delay: 1000/15, autoplay: false, loop: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":662,"value":"## How this Node gets where it's going\nEach tick of the simulation the node velocity tells us how far it has moved since the last tick. **How this velocity changes on each tick** is controlled by just a few parameters and two simple formulas:","pinned":false,"hidden":false,"mode":"md"},{"id":768,"value":"### Step 1: Add Acceleration\n\nOn every tick of this simulation, acceleration is added to the node's previous velocity. With positional forces -- like forceY() in this simulation -- the equation to calculate acceleration is: ","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":" acceleration = distanceToTarget * forceStrength * currentSimulationTemperature","pinned":false,"hidden":false,"mode":"tex"},{"id":827,"value":"

**distanceToTarget**: how far away the node is from the target set with forceY().
\n**forceStrength**: defaults to 0.1 and can be changed with forceY().strength().
**simulationTemperature**: A parameter, alpha, that starts \"hot\" and slowly cools as the simulation progresses. (this notebook has more details) \n

","pinned":false,"hidden":false,"mode":"md"},{"id":790,"value":"### Step 2: Factor in Friction\nAt each tick, once acceleration is calculated and added to the node's previous velocity, the new resulting velocity is slowed based on a constant \"friction\" multiplier, set for the simulation with .velocityDecay().","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"nextVelocity = (prevVelocity + acceleration) * (1 - velocityDecay)","pinned":false,"hidden":false,"mode":"tex"},{"id":711,"value":"## Enough talk... more charts\n\nHere is the same chart as above, but with tick-by-tick formulas/calculation:","pinned":false,"hidden":false,"mode":"md"},{"id":1086,"value":"plotSimulation(defaultSim.data, defaultTick, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1648,"value":"viewof defaultTick = makeTickControls()","pinned":false,"hidden":false,"mode":"ojs"},{"id":905,"value":"liveFormulas(defaultSim, defaultTick)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1406,"value":"Now with a basic understanding of how these parameters interact, lets experiment. ","pinned":false,"hidden":false,"mode":"md"},{"id":962,"value":"## Variation 1: No \"friction.\" \nHere the velocityDecay is set to 0 and the rest of parameters are left alone. ","pinned":false,"hidden":false,"mode":"md"},{"id":988,"value":"```js\n const nodes = [ {x: 0, y: 100, r: 5} ] \n const simulation = d3.forceSimulation(nodes)\n .force(\"y\", d3.forceY(0))\n .velocityDecay(0)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":980,"value":"plotSimulation(frictionlessSim.data, frictionlessTick, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1641,"value":"viewof frictionlessTick = makeTickControls()","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"liveFormulas(frictionlessSim, frictionlessTick)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1019,"value":"Without \"friction\" in the simulation, the simulation \"cooling\" has a different impact than might be expected. It makes the forceY less and less able to change the velocity of the node, leading to oscillation that continually increases in scale and period. ","pinned":false,"hidden":false,"mode":"md"},{"id":958,"value":"## Variation 2: Friction is back in, but \"cooling\" is out.\nHere the \"temperature\" (alpha) starts at its default of 1, but alphaDecay is set at 0, so temperature of simulation stays at 1. This actually works fine in this contrived example - as the friction in the simulation takes care of slowing the node as it approaches its target. \n\n(**Note!** alphaDecay plays an important role in telling the simulation when to end, so be careful turning this down or off!)","pinned":false,"hidden":false,"mode":"md"},{"id":1202,"value":"```js\n const nodes = [ {x: 0, y: 100, r: 5} ] \n const simulation = d3.forceSimulation(nodes)\n .force(\"y\", d3.forceY(0))\n .alphaDecay(0)\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1186,"value":"plotSimulation(noCoolingSim.data, noCoolingTick, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1635,"value":"viewof noCoolingTick = makeTickControls()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1193,"value":"liveFormulas(noCoolingSim, noCoolingTick)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1188,"value":"Below you can adjust most of the parameters we've discussed and see how it impacts this contrived simulation. ","pinned":false,"hidden":false,"mode":"md"},{"id":969,"value":"## Variation 3: Choose your own adventure.\nHere you can toggle all the parameters that control motion in this simulation and see what it looks like.","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"```js\nd3.forceSimulation(nodes)\n .force(\"y\", \n d3.forceY(0) // set the target Y position to 0\n .strength(${interactiveParams.strength}) // set the forceY strength to ${interactiveParams.strength}\n )\n .alpha(${interactiveParams.alpha}) // set the simulation starting \"temp\" to ${interactiveParams.alpha}\n .alphaDecay(${interactiveParams.alphaDecay}) // set the simulation \"cooling\" to ${interactiveParams.alphaDecay}\n .velocityDecay(${interactiveParams.velocityDecay}) // set the \"friction\" to ${interactiveParams.velocityDecay}\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1665,"value":"viewof interactiveParams = {\n resetParams;\n const inputForm = Inputs.form({\n alpha: Inputs.range([0,2], {label: 'alpha (initial temp)', step: 0.1, value: 1}),\n alphaDecay: Inputs.range([0,1], {label: 'alphaDecay (cooling)', step: 0.0001, value: 0.0228}),\n velocityDecay: Inputs.range([0,1], {label: 'velocityDecay (friction)', step: 0.05, value: 0.4}),\n strength: Inputs.range([0,2], {label: 'forceY strength', step: 0.1, value: 0.1}),\n })\n inputForm.classList.add(\"param-form\");\n d3.select(inputForm).selectAll('label').style('width','150px')//.style('text-align','right')\n return inputForm\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"viewof resetParams = Inputs.button('reset parameters to defaults')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1162,"value":"plotSimulation(interactiveSim.data, interactiveTick, 100)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1656,"value":"viewof interactiveTick = makeTickControls()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1195,"value":"liveFormulas(interactiveSim, interactiveTick)","pinned":false,"hidden":false,"mode":"ojs"},{"id":219,"value":"viewof ticksToChart = Inputs.range([10,300], {label: 'number of ticks to show in graph', step: 1, value: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1249,"value":"## Generalizing\nWhile this notebook is hopefully illuminating, it is unfortunately easy to generalizing incorrect learnings from this very simple simulation. \n\nSpecifically it would be wrong to \"learn\" from this, that velocityDecay always has more to do with \"slowing\" nodes as the simulation progresses than alphaDecay. The alpha decay process is based on algorithms used to explore large solution spaces and increase the chances of finding the \"best\" solution, instead of being constrained to the first decent one near where you started. That's not a problem in a simple simulation like this, so while we cover the math of how simulation temperature impacts forces here, we don't cover the rationale. \n\nHere's some review of some of the basics covered here that are safer to generalize: ","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"### Position, Velocity and Acceleration\nThese are the basic elements of force simulations. At each tick (or iteration) of the simulation each node will have: \n* **Position**: The node's position on each axis (stored in node Object as \"x\" and \"y\")\n* **Velocity**: How far along x, y axes the node moved since the last tick (\"vx\" and \"vy\"). Unless specified in nodes array, velocity is treated as starting at 0.\n\nIn order to calculate the node's next move forces and simulation parameters will determine: \n* **Acceleration and subsequent velocity**: The change to each axis' current velocity (\"vx\" and \"vy\") -- which impacts how far it will have moved by the next tick/iteration. Unlike position and velocity, acceleration is not stored in the node Object. \n\nNote: this is all for 2d simulations, for 3d simulations a z axis is added with associated \"z\" position and \"vz\" velocity. ","pinned":false,"hidden":false,"mode":"md"},{"id":668,"value":"### Strength, Temperature and Friction\n\nAt each tick of the simulation **the node's acceleration is scaled by two different multipliers**: \n\n* **Strength of the forces**. Each force in a simulation has it's own strength. In this case forceY is the only force, so we've looked at the forceY strength.\n* **\"Temperature\" of the simulation** Each simulation starts out \"hot\" and then it \"cools\" each tick of the simulation. When it's hot the nodes accelerate and decelerate fairly freely. The cooler it gets the more acceleration/deceleration is constrained.\n\nOnce acceleration calculated is added to each node's previous velocity, each node's **new velocity is then scaled by a third multiplier:**\n* **\"Friction\" of the simulation**, which is (1 - velocityDecay). ","pinned":false,"hidden":false,"mode":"md"},{"id":1818,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":1211,"value":"## Code Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":1267,"value":"### Generate Simulation Results for Different Parameter Sets","pinned":false,"hidden":false,"mode":"md"},{"id":1118,"value":"runSim = function(simParams = {}) {\n const params = {\n strength: simParams.strength != null ? simParams.strength : 0.1, \n alpha: simParams.alpha != null ? simParams.alpha: 1, \n alphaDecay: simParams.alphaDecay != null ? simParams.alphaDecay: 0.0228,\n velocityDecay: simParams.velocityDecay != null ? simParams.velocityDecay : 0.4 \n } \n\n const nodes = [{x: 0, y: 100, r: 5}] \n\n let results = [] \n \n const simulation = d3.forceSimulation(nodes)\n .force(\"y\", d3.forceY(0).strength(params.strength))\n .alpha(params.alpha)\n .alphaDecay(params.alphaDecay)\n .velocityDecay(params.velocityDecay)\n .stop()\n\n let i = 0 \n while( i< 300){\n results.push({i: i, x: nodes[0].x, y: nodes[0].y, vy: nodes[0].vy, r: nodes[0].r})\n simulation.restart()\n .stop()\n .tick(1)\n i++;\n }\n return {data: results, params}\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"defaultSim = runSim()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1134,"value":"frictionlessSim = runSim({velocityDecay: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1138,"value":"noCoolingSim = runSim({alphaDecay: 0})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1122,"value":"interactiveSim = runSim(interactiveParams)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1274,"value":"### Plots, Summary Stat, and Tick Controls","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"margin = ({top: 25, right: 20, bottom: 50, left: 70})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"chartWidth = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"chartHeight = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"yScale = d3.scaleLinear()\n .range([0,chartHeight])\n .domain([chartHeight/2,-chartHeight/2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":1037,"value":"getCurAlpha = function(alpha, alphaDecay, tick) { \n return Math.pow(alpha - alphaDecay, tick+1) \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":976,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1632,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"addSvg = function(element, svgWidth = chartWidth + margin.left + margin.right){\n return element.append('svg')\n .attr('width', svgWidth)\n .attr('height', chartHeight + margin.top + margin.bottom);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"drawNodes = function(element, nodes, color = '#FFB248'){\n return element.append('g').selectAll(\"circle\")\n .data(nodes).enter()\n .append(\"circle\")\n .attr('fill',color)\n .attr('fill-opacity', 0.3)\n .attr('stroke',color)\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => yScale(d.y))\n .attr(\"r\", d => d.r);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"addSimG = function(svg){\n return svg.append('g').attr('transform', 'translate(' + margin.left + ' ' + ( margin.top) + ')')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"drawTargetLine = function(element, tlWidth = chartWidth, appendText = true){\n element.append('line')\n .attr('stroke','#444')\n .attr('stroke-opacity',0.5)\n .attr('stroke-dasharray',2)\n .attr('x1', -20)\n .attr('x2', tlWidth)//tlWidth)\n .attr('y1', yScale(0))\n .attr('y2', yScale(0))\n\n if (appendText) {\n element.append('text')\n .attr('fill','#444')\n .attr('x', 20)\n .attr('y', yScale(0))\n .html('←')\n .attr('font-size', '1.2rem')\n .attr('dominant-baseline', 'middle')\n \n element.append('text')\n .attr('fill','#444')\n .attr('x', 50)\n .attr('y', yScale(0) -2 )\n .html('forceY')\n .attr('font-size', '.8rem')\n .attr('dominant-baseline', 'auto')\n \n element.append('text')\n .attr('fill','#444')\n .attr('x', 50)\n .attr('y', yScale(0) + 2)\n .html('target')\n .attr('font-size', '.8rem')\n .attr('dominant-baseline', 'hanging')\n }\n return element \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"drawLeftAxis = function(element){\n return element.append(\"g\")\n .attr('class','left-axis')\n .attr(\"transform\", `translate(-20,0)`)\n .call(d3.axisLeft(yScale)\n .tickValues([100, 0, -100])\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"drawBottomAxis = function(element, xScale) { \n const bottomAxis = element.append(\"g\").attr('class','bottom-axis')\n\n bottomAxis\n .attr(\"transform\", `translate(0, ${chartHeight + 10})`)\n .call(d3.axisBottom(xScale))\n bottomAxis\n .append(\"text\")\n .text('Simulation Tick Number')\n .attr('fill','black')\n .attr('x',d3.mean(xScale.range()))\n .attr('y',(margin.bottom - 10) + 'px')\n .attr('text-anchor','middle')\n .attr('font-size', '14px')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1759,"value":"### Dependencies","pinned":false,"hidden":false,"mode":"md"},{"id":586,"value":"import {Scrubber} from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1765,"value":"### Styles","pinned":false,"hidden":false,"mode":"md"},{"id":335,"value":"style = \n","pinned":false,"hidden":false,"mode":"html"}],"files":"$W35","stdlib":"1","titling":"auto"}