Here we redevelop Spray Dots technique using fabricated data and step by step
commits of the d3 code necessary to render well behaved dots.
github
We maintain a working program at each step. We'll encourage viewing and experimenting with each of these. The curious can preview them in their browser.
See spray dots commits. pages
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 * add cluster left/right * try changing cluster at random * try less alpha * move spray to separate file (1 of 2) * move spray to separate file (2 of 2)
With data generation and rendering refactored to their own files, we return to index.html where we've kept our interactive controls.
* add lean radio buttons * add value function to bias change * add value function to bias mobility * move random selection to fabricate file * move leaning weights to fabricate file * prefabricate dataset choices * copy data from prefabricated choices * try more friction * fabricate monthly leaning data * fabricate record of dots who's leaning swings * move choices to separate file (1 of 2) * move choices to separate file (2 of 2)
We're at the end of this beginning. We've developed a continuously working graphical application using three power tools, the chrome developer tools, the git source code manager and the d3 javascript library.
From one html file we've spawned three javascript libraries of our own that are ready to be used in larger projects.
More importantly, we've never lost control of the program. There has always been a next step. Never a blank screen. Always a way forward even if that is to back up one step and try another path.
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 <>'
Like the github repo, we've developed this page as our end goal has become more clear. It has been our planning and that too has been recorded in the journal below.