Skip to content

Instantly share code, notes, and snippets.

View dribnet's full-sized avatar

tom white dribnet

View GitHub Profile
.
@dribnet
dribnet / README.md
Last active December 14, 2015 04:19 — forked from mbostock/.block
strokes - General Update Pattern, I

strokes fork and port of mike's general update pattern tutorial, I.

merge requests should go to the example in the repo


This example demonstrates the general update pattern in D3, where a data-join is followed by operations on the enter, update and exit selections. Entering elements are shown in green, while updating elements are shown in black. Exiting elements are removed immediately, so they're invisible.

This example does not use a key function for the data-join, so entering elements are always added to the end: when the new data has more letters than the old data, new elements are entered to display the new letters. Likewise, exiting letters are always removed from the end when the new data has fewer letters than the old data.

@dribnet
dribnet / README.md
Last active December 14, 2015 04:19 — forked from mbostock/.block
strokes - General Update Pattern, II

strokes fork and port of mike's general update pattern tutorial, II.

merge requests should go to the example in the repo


By adding a key to the data-join, letters that are already displayed are put in the update selection. Now updates can occur anywhere in the array, depending on the overlap between the old letters and the new letters. The text content only needs updating on enter because the mapping from letter to element never changes; however, the x-position of the text element must now be recomputed on update as well as enter.

It'll be easier to see what's going on when we add animated transitions next!

@dribnet
dribnet / README.md
Last active December 14, 2015 04:19 — forked from mbostock/.block
strokes - General Update Pattern, III

strokes fork and port of mike's general update pattern tutorial, III.

merge requests should go to the example in the repo


By adding transitions, we can more easily follow the elements as they are entered, updated and exited. Separate transitions are defined for each of the three states.

Note that no transition is applied to the merged enter + update selection; this is because it would supersede the transition already scheduled on entering and updating elements. It's possible to schedule concurrent elements by using transition.transition or by setting transition.id, but it's simpler here to only transition the x-position on update; for entering elements, the x-position is assigned statically.

@dribnet
dribnet / README.md
Last active December 14, 2015 06:59
zip-recode
@dribnet
dribnet / README.md
Last active December 14, 2015 09:18
histo-grow

Summing uniform random numbers approximates a gaussian. Keep summing and it gets ever smoother, right? Wrong.

@dribnet
dribnet / README.md
Last active December 15, 2015 04:39 — forked from lennyjpg/_.md
lennyjpg's Hi

A fork of @lennyjpg's tributary inlet only lightly adapted for s.trokes.org.

@dribnet
dribnet / index.html
Last active December 20, 2015 09:40
strokes issue #8
<!DOCTYPE html>
<meta charset="utf-8">
<title>testmatrix</title>
<style>
td { font-family: Courier }
table { margin-left: 250px }
</style>
(ns d3-layout-example
(:require [strokes :refer [d3]]))
(strokes/bootstrap)
(def width 960)
(def height 500)
(defn dprint [x]
(.log js/console (pr-str x)))
@dribnet
dribnet / README.md
Last active December 20, 2015 22:59
wheelbarrow / rickshaw