dribnet

.

dribnet

This example uses d3.geom.hull to compute the 2D convex hull of a set of points. An outer stroke is used to pad the hull. Click to add a new point.

A fork and port of mike's js version, programmed in clojurescript atop the fledgling strokes library.

(Merge request? Use the repo version)

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

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!

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

(Merge request? Use the repo version.)

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

Mario Klingemann has made some beautiful Voronoi diagrams. This is my attempt to recreate them using D3. To achieve the curved cells, each side of the Voronoi polygon is subdivided into three equal-length segments and then joined using the "basis-closed" line interpolator. There are some discontinuities in the animation when the sides of a polygon approach zero which could likely be avoided by adding a minimum-length threshold to the subdivision.

If you’d like to see other instances of this pattern, Mario describes the algorithm on Flickr.

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).

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

A minimalist example of a strokes program: 3 circles. This example highlights the succinctness of clojure maps when setting attributes. In addition to d3's selection.attr maps can be used on selection.style, selection.classed, selection.property, selection.on, transition.attr and transition.style.

Inspired by Mike's #1067616, but with using d3 multi-value maps for attributes as in #3305515 and with the styling moved into the css.