Archive for category datavisualization

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.

Approach

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

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

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