dribnet

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; Ant sim ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;   Copyright (c) Rich Hickey. All rights reserved.
;   The use and distribution terms for this software are covered by the
;   Common Public License 1.0 (http://opensource.org/licenses/cpl.php)
;   which can be found in the file CPL.TXT at the root of this distribution.
;   By using this software in any fashion, you are agreeing to be bound by
;   the terms of this license.
;   You must not remove this notice, or any other, from this software.

; Note: This code cannot run for very long on clojure 1.3 because

dribnet

This example demonstrates accelerated two-dimensional filtering enabled by d3.geom.quadtree. A quadtree recursively subdivides square cells into four equal-sized subcells. Each leaf node of the quadtree contains a single point. If a given quadtree cell does not intersect the brush extent, then none of the points contained in that subtree can be selected, and thus do not need to be scanned. Above, orange indicates points that are scanned but not selected. Without a quadtree, all points would need to be scanned!

dribnet

So we can still embed code in the prose, and it will be syntax-highlighted. Super! So let's test sytax highlighting in other languages. Like maybe clojure(script)?

; this is a snippet of the strokes quadtree gist (4409139)

; Check it out clojurists - here we generate a lazy-seq of maps
(defn gen-data []
  (for [x (range 2500)]
    {:x (rand width), :y (rand height)}))

dribnet

Collections

each(array)

Underscore example:

_.each([1, 2, 3], function(num) { alert(num); });

dribnet

Enclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

A fork and port of mike's js version (gist/block), programmed in clojurescript atop the maturing strokes library.

This is running atop the first version of strokes that is able to repair a persistent data structure that has been mutated by javascript as the d3 layouts do - effectively trying to add new fields to the clojure maps. In this example the mrhyde function repersist reconstructs a persistent view of each node.

(Merge request? Use the repo version.)

dribnet

Looking for a small and easy to follow strokes example? You've found it.

A fork and port of mike's js version (gist/block), for the strokes examples repo.

(merge requests should go to the example in the repo).

---

The Voronoi layout, d3.geom.voronoi, does not provide clipping by default; the returned diagram spans ±1e6. This example demonstrates how to clip the diagram to known dimensions.

dribnet

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

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

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

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