Archive for category datavisualisation tools

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

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

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

Spicing up your Fusion Tables (just a little)

In korte tijd zijn er twee blogs verschenen over het gebruik van Fusion Tables. Zowel Laura Wismans als Jerry Vermanen laten zien hoe je een kaart kunt inzetten om gemeentestatistieken te visualiseren. Beide tutorials zijn hele goede inleidingen. Een kenmerk van kaartvisualisaties die met Fusion Tables zijn gemaakt is dat er vaak een legenda ontbreekt. Volgens de regels van de kunst moet een visualisatie altijd begeleid worden door een legenda en mijn plan was dus ook om een glorieuze blog te schrijven over hoe je dat voor elkaar moet krijgen. Na wat onderzoek ben ik tot de (voorlopige) conclusie gekomen dat legenda’s niet mogelijk zijn bij embedded visualisaties. Je kunt het wel voor elkaar krijgen als je een ge-javascripte applicatie maakt, maar dat sluit niet zo aan bij de tutorials van Laura en Jerry.

Wat ik wel wil laten zien is hoe je het tekstballonnetje dat verschijnt als je in de kaart klikt kunt voorzien van een hele simpele visualisatie. Ik ga verder waar de tutorial van Jerry ophoudt.

Hieronder een screenshot van het resultaat:

Read the rest of this entry »

2 Comments

Salaris wooncorporatiesdirecteuren

Vanochtend las ik een artikel in de Stentor over salarissen van wooncorporatiedirecteuren. Volgens het artikel is er een willekeur in bepaling van het salaris. De krant daagt de lezer uit om een datavisualisatie te maken op basis van de gegevens waarop het artikel is gebaseerd. Die uitdaging heb ik aangenomen en het resultaat is hieronder zichtbaar. Aan de lezer van deze blog de vraag of mijn visualisatie het originele artikel ondersteunt, tegenspreekt of geen van beide.


1 Comment

Dunne beurs, dikke buik

Via Twitter werd er de afgelopen dagen het een en ander gemeld over de op handen zijnde open data wedstrijd ‘Den Haag / Zuid-Holland Open Data’. Nieuwsgierig heb ik alle datasets bekeken die voor de wedstrijd beschikbaar zijn gesteld en, eerlijk gezegd, daar zit voor mij nog weinig inspirerends tussen. Maar binnenkort zullen meer datasets worden gepubliceerd, dus wat niet is kan zeker nog komen.

Een van de weinige datasets die ik wel interessant vind is een enorm Excel-bestand van Jeroen de Wilde. Ik kan op basis van deze dataset niet zo snel een interessante app bedenken, maar het is wel een uitgelezen kans om weer eens wat met Tableau te doen.

De dataset beschrijft o.a. per wijk in Den Haag de BMI van kinderen in verschillende leeftijdscategorie├źn. Nu is het iedereen waarschijnlijk al wel eens opgevallen dat er bij de Lidl en de Aldi meer zwaarlijvige mensen rondlopen dan bij de Albert Heijn en er onstaat dan ook al snel het vooroordeel dat mensen met een dunnere portemonnee net een maatje meer hebben. Daarom heb ik uit de Haagse buurtmonitor inkomenscijfers per wijk opgehaald en deze gekoppeld aan de data uit het eerder genoemde bestand. Hieronder de resultaten, gemaakt met Tableau.

Opvallend is dat vooral onder Nederlandse kinderen in de leeftijdscategorie 13-16 jaar er een sterk verband bestaat tussen het BMI en het gemiddeld besteedbare inkomen.

No Comments

Creating online charts with iCharts

Update:
In the original post I wrote that iCharts doesn’t work on iPad or iPhone. But I was wrong and I should have known better with an iPad and iPhone laying on my desk. I guess iCharts uses the ability within Flex to export bitmaps, but I don’t want to make a false assumption again. So, apologies to the iCharts team and now I’m even more convinced that you have a great product!

I’m preparing a datavisualization workshop for journalists. During the workshop, journalists will get hands-on experience with tools that are freely available on the web. I wanted to find out if iCharts is a tool that meets the criteria of:

  • easy to use
  • giving added value to static charts
  • cross-platform output

Loading data

I was prepared to upload a .csv file to iCharts, but that’s not an option. That’s no big problem, since you can upload Excel files or connect to a Google Spreadsheet. My first attempts to upload an Excel file failed, even after I read the instructions how you should format your data. I almost gave up, until I tried to upload my file to Google Docs. Google Docs was also unable to read the file, so I understood it was a technical problem, rather than a data formatting problem. Google Docs also gave some better hints about the problem. The problem was that I tried to upload an Excel 2004 file. After converting it to the latest format, I was both able to upload the file to Google Docs and to iCharts.

So that’s a first advice: if iCharts doesn’t accept your Excel file, try to upload it to Google Docs and see if you get better hints about the upload failure.

Data format

Of course, I should have studied the data format before attempting to upload it, but that’s just not my way of working.

You need a single column that uniquely identifies each category. You cannot use multiple columns (e.g. ‘Address’ and ‘Country’) to specify your category axis. You should manually merge columns beforehand (e.g. merge ‘Address’ and ‘Country’ to ‘Location’).

iCharts actually has another condition: you should aggregate each category yourself. For example, you cannot have two rows that specify the same value for ‘Location’.

Once I knew how to format the data, I choose a data set from Statistics Netherlands that was (almost) formatted correctly. The dataset describes the number of adoptions by Dutch parents. Each row defines the country of origin and the number of adopted boys and the number of adopted girls.

Editing data

After taking the first hurdle of loading the data, I wanted to visualize the data. Once you have uploaded the data succesfully, you are presented with a pretty good user interface. It doesn’t overwhelm you with options and intimidating terminology.

My first attempt to visualize the data failed. It wouldn’t accept any column as a ‘measure axis’. iCharts defines two kinds of axes (like Tableau) and calls these ‘category axis’ and ‘measure axis’. I wanted to use ‘Geboorteland’ (country of birth) as a category axis and both ‘Geadopteerde jongens’ (adopted boys) and ‘Geadopteerde meisjes’ (adopted girls) as a measure axis. The reason that it wouldn’t accept any column as measure axis was that both columns contained hyphens. Statistics Netherlands uses hyphens to indicate that the value is really small (which is apparently not the same as zero). But I don’t know the exact statistical theory.

It is possible to edit datasets within iCharts. And when I replaced each hyphen with a zero, I could succesfully use the updated columns as measure axis.

Visualizing the data

With the data loaded, formatted and corrected, the rest of the process was really easy and intuitive. You can choose chart types and most charts functionality work as expected:

What is also really good about iCharts is that you can customize the layout. You can drag elements around, resize them using the mouse and change properties.

The only chart that I didn’t get to work was the Area chart. I hoped to be able to visualize a stacked area chart, but that doesn’t seem to be possible.

Some examples of different charts using the same data:


Conclusion

Once you have uploaded your data and restructured it correctly, it is a really nice tool to work with. It’s probably targeted at non-technical people and I expect that if you are able to do some basics with Excel, than your competent enough to work with iCharts.

A disadvantage is that iCharts is Flash based. So your charts won’t be visible on iPhone and iPad. iChart is probably created using Flex 3 and Adobe’s roadmap regarding Flex is not very promissing. So iCharts will probably have to move to an HTML5 solution. The need for that is already actual regarding the presentation of charts, but in a few years time I think that also the editing of charts will have to move from Flex to HTML5.

If you don’t mind that your charts are not visible on iPhone and iPad, you should definitely take a look at iCharts. Especially if you have never visualized data before, this tool may take away your fears of entering this arena.

1 Comment