Exploratory graphics

Here we have a JavaScript implementation that will draw multiple recursive levels of the Sierpinski triangle. I find I can't go too far before my browser runs out of memory -- maybe eight or nine levels. Of course for good clean fun (and pedagogical potential) I prefer Vi Harts presentations on the topic.

A representation of the Mandelbrot set written using D3. This classic of computer graphics is in fact not terribly well-suited to SVG output (since the image bitmapped, not vector at heart) or to JavaScript (tight loops and high-speed processing would be better). It was a fun exercise on a rainy Sunday afternoon, however, and I present it despite its limitations.

An interactive world map with a locator pin. Place the locator wherever you like on the map and the server will pull back all tweets originating within a specified radius of that location.

A full screen celestial star map, with draggable rotation, color-coded stars, and labels over prominent heavenly bodies. This graphic is based on D3 functionality, and was derived based on code from mastering D3.js, Pablo Castillo's excellent book.

The purpose of this graphic is as follows: put it on screen and then click the randomize button a few times. If you're anything like me you'll start seeing patterns in the ordering of the bars even though the process is driven by add decent pseudorandom generator. That's our brains in action -- we detect patterns whether they exist or not.

This is a D3 force-directed graph. I wanted to use it to represent a nonhierarchical set of network relationships but I couldn't find a way to keep the labels from the steering one another. Once I can get this one working I'll move it into the scientific graphics category, but for now it's just an experiment.

I found the core of this number fountain in the book 'Data Visualization with D3.js Cookbook' by Nick Qi Zhu (who also did the awesome dc.js package. Check out his work here. To me it's kind of a neat demo that could be made into something thoroughly decorative with just a little work.

We are using a data set that can be broken down into a nested set of hierarchies. It was useful to convert into a sunburst.

I put together a simple graphic that tries to explain the challenges of the D3 learning curve.

I gave a talk while back regarding graphics, D3, JavaScript, and some of my notions about relevant best practices. The slides are available here. For the full monty you can also catch the video presentation of the talk on my YouTube channel.

Here's a link to my testing website. Some of the examples I like best already have links that you can find elsewhere on this site, but here's a link to the index page for the complete test harness in case anyone is interested.