Skip to content

Instantly share code, notes, and snippets.

View nitaku's full-sized avatar

Matteo Abrate nitaku

  • Pisa, Italy
View GitHub Profile
nitaku /
Last active December 20, 2015 14:49 — forked from mbostock/.block
Colored hex regions

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 /
Last active December 20, 2015 17:09
Hex landscape

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 /
Last active December 20, 2015 18:09
Hex coordinates

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 /
Last active December 21, 2015 19:29

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 /
Last active December 22, 2015 11:09
Picture cloud layout
nitaku /
Last active December 22, 2015 14:38
Gosper space-filling curve
nitaku /
Last active November 27, 2016 10:50
Hilbert curve (L-system)
nitaku /
Last active December 15, 2018 18:22
Gosper curve (L-system)
nitaku /
Last active December 22, 2015 20:29
Moore curve (L-system)

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 /
Last active December 22, 2015 21:09
Peano (?) curve (L-system)