The Lumen route network: 25 stations, 60 routes, 300 fixed ticks
Five stations have no route among the top 60 and float at the edges, held in view by forceX and forceY. The picture is the same on every run because the ticks are run by the code.
A network is things (nodes) joined by connections (links). A force simulation places the nodes by pretending they are charged balls joined by springs, and lets them settle. You decide how many steps to run, and how to keep it readable when there are too many links.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Add a slider-free version of the threshold: a function strongest(links, min) that keeps links with at least min trips and returns the nodes they use. Then run the simulation on that part only.
Make nodes draggable: add d3.drag() to the node groups so that dragging sets fx and fy, and release clears them.
Explain it without notes
What does each of forceLink, forceManyBody, forceCenter and forceCollide do?
What is alpha, and when does a simulation stop?
Why would you call stop() and tick() yourself?
What can you do when a network is a hairball?
Preview
Console
Nothing logged yet.Expected console output
before: a link's source is string S03
after: a link's source is object S03 | alpha 1.00
ticks until it cools: 300 | alpha now 0.0010 | 1 - alphaDecay = 0.9772
Quay | 18 routes | x,y 242.7, 161.3
Lantern | 13 routes | x,y 277.1, 127.0
Library | 13 routes | x,y 234.3, 221.5
inside the box: true | x from 4 to 516