Using webcomponents in D3.js

This post describes a prototype that uses Polymer webcomponents in D3.js.

Appending a single element, like a ‘rect’ to a D3 selection is straightforward. But when you want to append a more complex, nested structure to a selection, it would be nice if you could append a renderer or template. And I would find it even more comfortable if you could specify this in a structured language like xml/html. Furthermore, I would like to specify the behaviour of this renderer within the renderer itself.

I first encountered this desire when I tried to use D3 for visualizing Isotype charts. D3 maps data points to dom elements in a one-to-one relation, while Isotype maps data points to dom elements in a one-to-many relation. You can solve this by converting data points to arrays, but that feels a bit hackish.


I decided to use webcomponents.

I created one webcomponent (‘isotype-element’) that displays a number of icons based on an input value. That component is used to show, for example, one row of olympic gold medals.

I created another webcomponent (‘country-element’) that combines three isotype-element components to display the number of medals for one country.

D3 is still used for binding data to elements, but the exact visual representation is left to the components. And, although I haven’t tried it, I don’t see any reason why you couldn’t use D3 to write components.

Best viewed in the latest version of Firefox, Safari and Chrome. Perhaps also with IE10+, but I cannot verify that.

Go to the prototype >

No Comments

Digital Boogie Woogie – Mondriaan generator

SETUP challenged developers to generate Victory Boogie Woogie-like graphics using code. Victory Boogie Woogie is an unfinished work by the Dutch graphic artist Piet Mondriaan. When I heard of this challenge, I had just attended a workshop ‘Generative art and introduction to Processing’ by Marius Watz. So I decided to put my new skills into practice and pick up the challenge.

Check out my submission HERE.

Read the rest of this entry »

No Comments

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.


Visualisatie van bewoonde gebieden in Nederland

Welke plekken in Nederland zijn bewoond en waar wonen de meeste mensen? Deze vragen probeer ik te beantwoorden met een aantal visualisaties die gebaseerd zijn op data van het Centraal Bureau voor de Statistiek (CBS).

Het CBS heeft de oppervlakte van Nederland verdeeld in een grid van vlakken van elk 100 m x 100 m. Vervolgens is per vlakje vastgelegd hoeveel mensen daar wonen. Deze data visualiseer ik eenvoudig door elk vlak te representeren met een vierkantje op het scherm en deze afhankelijk van de statistische waarde te kleuren. In totaal beschrijft de data van ongeveer 4 miljoen vlakjes het aantal inwoners. De visualisaties die op deze data zijn gebaseerd zijn behoorlijk groot, ongeveer 30 MB. De volledige versies kun je via deze post downloaden, maar ik heb ook verkleinde versies tussen de teksten door staan. De volledige versies zijn, wat mij betreft, echt de moeite waard om te bekijken en vertellen veel meer dan de verkleinde versies die je in de post ziet.

Read the rest of this entry »

1 Comment

Fusion Tables: lijnen tekenen (2)

In de vorige post ‘lijnen tekenen (1)’ heb ik laten zien hoe je met handmatig geocoderen een lijn kunt specificeren in KML en vervolgens kunt weergeven via Google Fusion Tables.

In deze post beschrijf ik hoe je lijnen kunt tekenen met ArcGIS Explorer Desktop en het resultaat hiervan in Fusion Tables kunt laden.

ArcGIS Explorer Desktop is een gratis stuk gereedschap van Esri. Met ArcGIS Explorer kun je niet alleen verschillende layers bekijken, maar ook objecten aanmaken. Het is bijvoorbeeld heel eenvoudig om met de ‘Line’ tool een aaneengesloten lijn te tekenen die uit meerdere lijnstukken bestaat.

Read the rest of this entry »

1 Comment

Fusion Tables: lijnen tekenen (1)

Onlangs publiceerde Bart Vuijk van het Noordhollands Dagblad een artikel over de kosten van wegenonderhoud in Beverwijk. In het artikel is een Fusion Tables kaartje opgenomen die de plekken in de stad aangeeft waar dringend onderhoud nodig is. De wegen worden in het kaartje aangeduid met de bekende markers (omgekeerde ‘druppeltjes’). Een alternatief is om de wegen aan te duiden met lijnen, of een combinatie van lijnen en markers. Deze post doet geen poging om te beschrijven wat de beste manier is om de data te visualiseren. Echter, het genoemde artikel is voor mij een reden geweest om een tutorial te schrijven die uitlegt hoe je lijnen op een kaart kunt tekenen met behulp van Fusion Tables.

Read the rest of this entry »

1 Comment

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

Fusion Tables: Wat kan ik met een Network Graph?

Ik heb al eerder gepost over Google Fusion Tables. (artikel 1, artikel 2).

Fusion Tables beschikt sinds kort over een aantal experimentele tabelfuncties. Althans, zo worden ze door Google genoemd. Tabelfuncties zijn al jaren ‘in Beta’, maar deze functies zijn dus nog iets experimenteler dan de rest.

In deze post bespreek ik mijn ervaringen met de Network Graph. De tutorial van Google begint veelbelovend:

The Network Graph visualization supports undirected and directed graph structures. This type of graph is particularly useful in illuminating relationships between entities.

Read the rest of this entry »

No Comments

Comparing segments of a stacked bar chart

When one chooses to use a stacked bar chart, it is seldom because it is the perfect visualization of your data. It is usually the result of some kind of compromise.

While it is possible to compare the totals, it is hard to compare the different segments. At least, that is true in case of static charts. When using interactivity and animation, one can overcome that problem.

Maybe this is a known solution, but I have never seen it before and therefore I decided to make the prototype. Hovering the mouse over the legend works better than hovering the mouse over the bars. Finding a good solution for interaction with the bars is not trivial. I may work that out when the situation arises that I’m actually going to use this functionality.

So far it’s only tested on Firefox, Safari and Chrome.

A possible solution to compare the segments within the same bar: rotate all segments 90 degrees.

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