Fractal Ferns in D3 by Steve Hall.
From the post:
This week I have been busy exploring the generation of fractals using D3. The image above is a “fractal fern” composed of 150,000 tiny SVG circles generated using some surprisingly simple JavaScript. Fractals are everywhere in the nature world and can be stunningly beautiful, but they are also useful for efficiently generating complex graphics in games and mapping applications. In my own work I like to cast a wide net and checkout new data visualization tools and techniques – you never know when it may come in handy. Some knowledge of fractals is definitely a good thing to have in your toolbox.
There are three parts to this post. The first part will be light introduction to fractals in general with a few links that I found useful. Next, I put together three examples that explore generating fractal ferns using JavaScript and provide some insight into how a simple algorithm repeated many times can produce such a stunning final result.
The last part deals with scaling an SVG to fit the browser window which often comes up in doing responsive design work with D3 visualizations. The solution presented here can really be applied to any data visualization project. If you look closely at the examples, they are being generated to an SVG element that is initially 2px high by 2px wide, yet scale to a large size in the browser window without the need to re-generate the graphic using code as the window size changes.
If you are interested in fractals after reading Steve’s post, Fractal over at Wikipedia has enough links to give you a good start.
Fractals are a reminder that observed smoothness is an artifact of the limitations of our measurements/observations.
The observed smoothness of subject identity in most ontologies is a self-imposed limitation.