sxv

An exploration of color generation based on the golden ratio (phi). Generating colors according to this ratio allows any arbitrary number of new values to be added, while maximizing the separation between nearest values.

This example uses D3's HCL color space, designed for maximum (perceived) hue separation. Because HCL is based upon three distinct variables, this algorithm optimizes variation of the hue (H) variable first, then chroma (C) and luminance (L). In other words, hue values are generated strictly according to the golden ratio, while chroma and luminance are "staggered" to avoid multiple variables moving together along the Fibonacci spiral "period". I suspect there are more elegant solutions to this problem but have not found any yet.

Both chroma and luminance are restricted to values between 15 and 100.

Inspired by Vi Hart.

sxv

Another take on the SVG + Canvas Plot, but this time includes a third group of nodes: divs. Black nodes are drawn with HTML5 Canvas, blue nodes in SVG, and red nodes as divs. Zoomable and pannable.

sxv

A D3 demonstration of SVG and Canvas intermingling. Blue circles are plotted in SVG, black circles in canvas. One force to rule them all. The plot is zoomable and pannable.

Inspired by M. Bostock's Canvas / SVG zoom comparison series and collision detection examples [1] [2] .