Proposal for a new logo for Apache Flex
This evening I read that the Apache Flex project needs a new logo. Flex is originally an Adobe product, but Adobe no longer wants to be the owner of the product and it has moved Flex development towards a community based model. The goal is that Flex will be part of the Apache foundation. One of my logos visualizes this by declaring Flex using an xml tag with Apache as a namespace instead of the mxml (Macromedia xml). I think that this explains exactly the situation.
Spicing up your Fusion Tables (just a little)
Posted by admin in datavisualisation tools on January 8th, 2012
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:
Salaris wooncorporatiesdirecteuren
Posted by admin in datavisualisation tools on December 31st, 2011
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.
Geo-informatie van Den Haag open data
Posted by admin in Uncategorized on December 19th, 2011
Onder de databronnen van Den Haag Open Data bevinden zich enkele geobestanden. Het is niet voor iedereen evident hoe je de inhoud hiervan kunt bekijken. Gelukkig hoef je geen geo-wizard te zijn om deze data te visualiseren. Je hoeft er geen programma voor te downloaden en je hoeft er ook geen code voor te kloppen. Je hoeft zelfs geen account aan te maken, tenzij je je data wilt bewaren.
Dunne beurs, dikke buik
Posted by admin in datavisualisation tools on December 16th, 2011
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.
NIOD teksten gevisualiseerd
Posted by admin in Uncategorized on December 12th, 2011
Het NIOD heeft gisteren het omvangrijke werk van Dr. L de Jong ‘Het Koninkrijk der Nederlanden in de Tweede Wereldoorlog’ online gezet. Met behulp van Many Eyes heb ik een aantal visualisaties gemaakt aan de hand van het hoofdstuk ‘De strategische verrassing’ uit Deel 3. Dit hoofdstuk gaat over de dag dat Nederland werd binnengevallen door Duitse troepen.
Zie hieronder het resultaat. Dit is een aardig beginnetje. Als ik meer tijd heb zal ik binnenkort een aantal andere visualisaties maken.
Creating online charts with iCharts
Posted by admin in datavisualisation tools on November 18th, 2011
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.
Accessing accelerometer data with HTML5
Posted by admin in html5/css3 on November 17th, 2011
I really like the concept of mobile web applications, i.e. applications that are meant to be run within the browser of mobile devices. I like this idea because I don’t fancy making the same application multiple times using different coding environments for each platform (iOS, Android, Blackberry etc.). Writing applications in HTML5, CSS3 and javascript can be a way to write a single application that can run on different platforms.
Yesterday, I wondered if a web application can access accelerometer data, i.e. the rotation of the phone relative to the ground. With some Googling if found this blog:
http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5
And indeed, I wrote a small script and verified that it is very easy to access accelerometer data. At least when your are using an iPhone4 and I’m not sure about other iPhone versions or Android.
Now I needed a quick way to do something with this data and I thought of using the accelerometer as a 3D remote control. Not very original, but a nice challenge.
Another google-search led to an article by Paul Hayes.
This brilliant blog describes how you can do 3D transformations using CSS3. Paul Hayes’ demo let’s you rotate the cube using the keyboard and touch gestures.
I wondered if I could add accelerometer control to it as well. And, indeed, using a few lines of code this was possible.
window.ondevicemotion = function(event) {
var xVal = event.accelerationIncludingGravity.x;
var yVal = event.accelerationIncludingGravity.y;
viewport.move({x: viewport.x - yVal});
viewport.move({y: viewport.y - xVal});
The result works on iPhone4. I have no ideas if it works on other devices as well. Unfortunately, if you rotate the phone to much, the view changes between portrait and landscape mode.
View it here.
CBS webservices ‘uncovered’
Ik had het al een paar dagen op mijn ‘to-do’ lijstje staan om, op uitnodiging van Jerry Vermanen, een blogje te schrijven voor de RegioHack. Jerry kwam zelf met een aantal voorstellen waarover ik zou kunnen schrijven en ik was dan ook van plan om braaf een onderwerp uit het lijstje te kiezen en daarover te schrijven.
Toen ik een uur geleden het interview met Jelle Kamsma had bekeken, wist ik ineens wat ik beter zou kunnen doen. De quote die bij het interview staat luidt: ‘De echt interessante datasets, daar is moeilijk aan te komen’. Nu wil het geval dat ik een paar weken terug een presentatie gaf bij Nerds Unite in Utrecht en daar verkondigde dat het CBS geen webservices ondersteunt om de statistieken toegankelijk te maken. Een webservice is een manier om gegevens opvraagbaar te maken en beschikbaar te stellen in een formaat dat is gericht op het automatische verwerking. Webservices zijn gericht op de communicatie tussen computers. Dit in tegenstelling tot bijvoorbeeld een website die gericht is op de communicatie met een mens.
Het CBS stelt haar gegevens o.a. beschikbaar via StatLine. Dit is een website waarbij je handmatig kunt zoeken naar statistieken. Resultaten kun je downloaden in de vorm van een Excel-bestand. Dit maakt het lastig om zelf-gefabriceerde applicaties actueel te houden. Je zult altijd in de gaten moeten houden wanneer nieuwe cijfers worden gepubliceerd en vervolgens een aantal handmatige acties moeten uitvoeren om recente data in je applicatie te voeren.
Tijdens de presentatie bij Nerds Unite bedacht ik me ineens dat het CBS vorig jaar een iPhone app heeft uitgebracht. En omdat deze app actuele statistieken toont, zou het dus mogelijk kunnen zijn dat er speciaal voor de app een webservice in het leven is geroepen. Hoe deze webservice eruit ziet en wat je ermee kan doen was ik ooit van plan om uit te zoeken. Door hier nu over te bloggen haal ik in een keer twee taken van mijn to-do lijst.
Mocht deze blog voor jouw een te hoog nerdy-gehalte hebben, dan kun je meteen de demo-visualisatie bekijken. Dan hoef je verder alleen nog te weten dat de data automatisch wordt verkregen en dat er geen handmatige handelingen nodig zijn om de data te verversen.
Deze blog schrijf ik terwijl ik het ‘project’ aan het uitvoeren ben. Ik wil dit nu als volgt aanpakken.
Stappenplan:
1. Uitzoeken of het CBS inderdaad een webservice heeft ontwikkeld voor de app.
2. Uitzoeken op welke manier je gegevens kan opvragen.
3. Uitzoeken in welk formaat gegevens worden teruggestuurd
4. Zoeken naar een geschikte demo-dataset
5. Een simpele datavisualisatie maken op basis van deze demo-dataset
Stap 1:
Door met Google te zoeken op ‘cbs iphone app’ kom je via het eerste zoekresultaat uit op een pagina waar staat:
‘Met CBS-StatLine, de iPhone-app van het CBS, zijn de ruim 8 miljard cijfers uit de CBS-databank StatLine altijd en overal te bekijken. ‘
Daarmee wordt het vermoeden bevestigd dat er een webservice bestaat. Je gaat namelijk niet 8 miljard cijfers in tekstbestandjes opslaan. Nu is het dus zaak om erachter te komen hoe de app de gegevens ophaalt. Zover ik weet is het niet mogelijk om via een menuutje in je iPhone een log op te vragen van al het internetverkeer dat via je telefoon heeft plaatsgevonden. Op de desktop kan dat wel. Je kunt namelijk gebruik maken van een zogenaamde debugging proxy. Dit is een programmaatje dat tussen je browser en het internet in zit. Het kan al het internetverkeer monitoren en dat is heel handig als je bezig bent met het testen van bijvoorbeeld een webapplicatie.
Nu heeft een slimmerik uitgezocht hoe je je iPhone via je Mac en de debugging proxy (in dit geval Charles) aan het internet kunt koppelen. Zie:
http://www.ravelrumba.com/blog/ipad-http-debugging/
Voor Windows gebruikers zal er ongetwijfeld een soortgelijke oplossing bestaan.
Ik heb inmiddels het recept dat via bovenstaande link wordt beschreven uitgevoerd. En, hoera, elke keer wanneer mijn iPhone contact heeft met het internet, zie ik op mijn laptop precies wat wordt opgevraagd en wordt teruggestuurd.
Bij het opstarten van de CBS app zie ik het volgende verschijnen op mijn laptop:
En zie hier, de daadwerkelijke bevestiging van het bestaan van een webservice! Leuk detail, het lijkt er op dat de app het wachtwoord ‘godin’ gebruikt.
Stap 2 & 3:
Nu begint het grasduinen in de data. Het liefste wil ik een overzicht zien van wat er aan data te verkrijgen is. Het meest logische is om op de iPhone “Thema’s” te kiezen en te kijken wat er gebeurt. Via de iPhone zie je dit. Overigens zie ik in werkelijkheid alles in het Engels. Ik weet niet waarom, maar ik kan de app niet in het Nederlands zetten. Onderstaand screenshot heb ik uit de App store gekopieerd:
En via de proxy zie ik het onderstaande.
Aan de linkerkant zie je hoe de thema’s worden opgevraagd. Simpelweg via een url. Kun je zelf ook intikken in een browser:
http://statlinemservices.cbs.nl/ThemaServices.asmx/GetTopLevelThemas?taalCode=EN&pwd=godin
En aan de rechterkant zie je hoe de gegevens worden teruggestuurd, namelijk in XML. Elk thema heeft een referentiecode (bijv. 5350 in het geval van Agriculture).
Daarmee zijn de vragen van zowel stap 2 als stap 3 beantwoord.
Stap 4
Nu wil ik een ‘leuke’ dataset kiezen en die gebruiken voor een visualisatie. Ik heb op het forum al iets voorbij zien komen over vergrijzing, dus misschien is het leuk om demografiegegevens te bekijken.
Na wat proberen kom ik uit op het thema ‘Population’ en daarbinnen de tabel ‘Population dynamics; region’ en daaronder weer de topics:
- ‘Population on 1 January’
- ‘Natural increase’ (dwz het verschil tussen aantal geboortes en aantal sterfgevallen)
Het blijkt dat je het aantal inwoners in Twente op de volgende manier kunt opvragen:
http://statlinemservices.cbs.nl/PublicatieServices.asmx/GetPublicatieMetSelectie?publicatieKey=37259ENG&selectionQuery=D1%3D22%26D2%3D0%26D3%3D28%26D4%3Da&lijstStart=0&lijstEind=99&taalCode=EN&pwd=godin
Dit is uiteraard een onleesbare rij karakters, maar uiteindelijk draait het om de parameter ‘selectionQuery’. Je kunt hiermee 3 relevante parameter opgeven:
D1: gevraagde dataset (bijv. inwonersaantallen, migratiecijfers, sterfgevallen, geboortes etc.)
D2: verfijning van de dataset, door te zoeken op mannen en/of vrouwen
D3: regio (bijv. Twente=28, Veluwe=29)
Hiermee heb ik een demo-visualisatie gemaakt, die aantoont dat je de CBS webservices kunt gebruiken voor je eigen apps. En ik weet het, de grafieken voldoen vast niet aan alle eisen zoals beschrijving van de assen etc.
Wil je zelf ook gebruik maken van de CBS webservices, dan is het het beste om de iPhone app te bekijken en te zoeken naar interessante data. Zodra je dat hebt gevonden kun je bijvoorbeeld te werk gaan zoals ik heb gedaan.
Dynamically changing the series of a Flex chart may fail
Posted by admin in Uncategorized on August 12th, 2011
I think I found a bug, but I’m too lazy to file it right now.
I’m using a Flex LineChart that has to display a variable amount of LineSeries instances. Each LineSeries is assigned a datafunction to display its data. Now the strange thing is, that if you change the series of the LineChart, the removed LineSeries still evaluate their datafunction. This may not be a problem since it won’t display the removed LineSeries anyway, but I had a rather complex datafunction that ran into a run time error.
If you don’t want the removed LineSeries to evaluate their datafunction, just set the datafunction property to null.
for each (var lineSeries:LineSeries in chart.series) {
lineSeries.dataFunction = null;
}
var newSeries:Array;
// Create new series here ....
chart.series = newSeries;