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 <>'