nitaku

Forked from a Mike Bostock example.

Click and drag above to paint hexagons. Whenever you release the button, a new color is selected. A black outline will appear around contiguous clusters of hexagons filled with the same color.

As the original, this example uses topojson.mesh, part of the TopoJSON client API. The filter is modified to take multiple colors into consideration.

Again, as the original, integer coordinates are used to leverage TopoJSON functions, and a custom projection is used to make the hexagons regular in the representation.

Source code is both in Coffeescript+SASS, and in Javascript+CSS compiled form.

nitaku

Forked from another example, that was in turn forked from one by Mike Bostock.

Click and drag above to increase hexagons' height, forming hills and mountains. 10 is the maximum height. Press shift when clicking to decrease it. You can even create lakes and coastlines. 10 is the maximum depth.

Contour lines are computed automatically, by leveraging TopoJSON's mesh function.

nitaku

Forked from Mike Bostock's example.

For each hex, its hexagonal coordinates are drawn.

This kind of coordinate system makes it possible to interpret the position vectors of the six hexes around the origin as direction vectors. Therefore, it is possible to sum one of them to the position vector of an hex to "move" to an adjacent one. These are the values for the six directions:

E   (+1,-1,0)
SE  (+1,0,-1)
SW (0,+1,-1)

nitaku

An experiment that shows a possible way to visually encode link directionality in node-link diagrams as animation: Some kind of "flow" moves according to the direction.

More or less related to a Mike Bostock example.

For a comparison of different methods for representing link directionality (including animated dashed lines), see Holten et al. 2010

nitaku

An example of a picture cloud layout, derived from the beautiful word cloud layout by Jason Davies. Follow the links for more details.

nitaku

A Javascript+SVG implementation of a Gosper space-filling curve. See Akiyama et al. 2007 for reference.

The code is really messy, with too few comments and not optimized. :D

nitaku

A Hilbert space-filling curve drawn with an implementation of an L-system renderer.

The drawing of the line is animated using Mike Bostock's stroke dash interpolation.

nitaku

A Gosper space-filling curve drawn with an implementation of an L-system renderer.

The drawing of the line is animated using Mike Bostock's stroke dash interpolation.

nitaku

A Moore space-filling looping curve drawn with an implementation of an L-system renderer.

The Moore curve is a looping variation of a Hilbert curve, obtained by justaxposing 4 Hilbert curves. The last and the first point could be connected in order to draw a closed line.

The L-system rules are the same defined for the Hilbert curve, but the axiom is different.

The drawing of the line is animated using Mike Bostock's stroke dash interpolation.

nitaku

A Peano (?) space-filling curve drawn with an implementation of an L-system renderer. I found the name on this page, but from Wikipedia I got another curve as Peano.

The drawing of the line is animated using Mike Bostock's stroke dash interpolation.