Archive for September, 2012

Using D3 for Isotype visualizations

I’m working on a number of interactive Isotype visualizations. I built a first prototype using Adobe Flex, which used to be my natural habitat. But since this is no longer a viable technology for main stream productions, I’m looking for alternatives. For the moment, I don’t consider HTML5 or SVG good alternatives, since these are not supported by Internet Explorer 7 and 8. I have made some visualizations that are built upon RaphaelJS and, although the performance in mentioned browsers can be poor when animating more than 100 items, it’s the best thing that I have encountered so far.

So why am I looking into D3, which can be considered an SVG based library ? The focus of D3 is to transform data into a visualization. D3 contains many mechanisms that are based on ‘dealing’ with data, without being specific on SVG as a drawing technology. This is different from RaphaelJS which is only focussed on drawing SVG/VML elements.

I wanted to find out if I can use the SVG agnostic part of D3 and use that to transform data into an Isotype chart. Images are used instead of SVG to display the symbols.

Another goal of this exercise was to get hands on experience with D3. I heard and read about it, but never used it before. The Isotype visualization is the result of one day sweating, swearing and finally cheering.

Click here for the interactive version.

The visualization runs on Internet Explorer 8, using the library Aight. I don’t know if it runs on Internet Explorer 7.

I’m not sure yet if I will use D3 for my Isotype productions. The library is very powerful, but I have to get used to thinking in D3. I seems that the vision of D3 is to have a one-to-one relation between datum (or data point) and a visual element. With Isotype, we have a one-to-many relationship: one number is transformed into multiple symbols. I don’t know if that will cause awkward coding with D3.

Another approach is to forget about D3 and use jQuery to animate images. That means that I have to build many things from scratch, but using jQuery would make it possible to create IE6, 7 and 8 compatible visualizations.

One reason why using D3 is an interesting approach, is that it knows the concept of layouts. Together with MADLab, I’m planning to build an Isotype system that contains layouts and symbols that are built by a community of developers and designers. I will hopefully present this system during PICNIC 2012.

2 Comments