Archive for category isotype

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.


Dedicated site to interactive isotype productions

Today, 1st of June 2012, I have set up a website dedicated to my interactive isotype project:

No Comments

Animated ISOTYPE: Population Density

This is the first publication of my Isotype project. I spent about 2-3 days on this datavisualization. I used the website ‘het Geheugen van Nederland‘ to browse through the great collection of Isotype publications by Gerd Arntz. Many of these publications can be modernized (i.e. updated with current statistics and be made interactive), but it was more difficult than I expected to provide interactivity such that it is interesting and provides added value to the original static production.

I chose the population density illustration for my first publication. This is a fairly simple illustration with only two different icons (country and inhabitant). Below you see the original image, which can also be found here.

Read the rest of this entry »

No Comments

Modernising static ISOTYPE productions

In this post I would like to announce a private project that I will start very soon. Every month I will publish a modernized version of an illustration that was made originally by the late Gerd Arntz. Gerd Arntz has created many statistical datavisualizations, starting from around 1930. In each publication, I will take an original production and update it with current statistics and modernize it so it will become an interactive visualization. My project has received approval by the Gerd Arntz Estate, which consists of Gerd Arntz’ heirs (‘erven Gerd Arntz’), to whom I’m very grateful.

Read the rest of this entry »