Here we redevelop the technique using fabricated data and step by step
commits of the d3 code necessary to render well behaved dots.
github ![]()
Our first commits build an interactive development and visual testing environment from bare files.
* add title and explaination * add d3 * add svg element * add blue dot * add data for two dots * add favor radio buttons * add dots function to adjust circles * add radius function to size circles * add click handler to show favored dot * add readme explaining our approach * replace dots with clusters * move data fabrication to separate file * add favicon
We bring in the power tools of the force layout working in the smallest steps possible. Each step introduces new parameters that deserve to be explored.
* add force layout * try more gravity * try more friction * try more charge * add mouse dragging for dots * add nudge left/right each tick * add gravity left/right each tick * add collision detection each tick * resume motion when favor changes
Many small commits makes for a unique kind of source code documentation exposed through the git blame command. See the repo readme for several ways to navigate this resource.
Aside: we generate a markdown list of commits with a pipeline of unix commands.
git log | \ perl -ne 'print "* $1\n" if /^\s+([\w].*)$/' | \ perl -e 'print reverse <>'