champagne anarchist | armchair activist

Twitter discovers Steven Kruijswijk

Tweets mentioning names of riders, as percentage of all tweets with hashtag #giro, per day (smoothing applied). Data updated every hour (to update chart, clear browers history or click here to view the chart). Chart:

If all goes well, Steven Kruijswijk might just be the first Dutch rider in ages to conquer the podium in a large race, journalist Thijs Zonneveld wrote on Friday 20 May. At that point, Twitter hadn’t really discovered Kruijswijk yet. That changed on Saturday, when Kruijswijk won the pink jersey.


Strava wants my commute data

Dutch tv recently aired a fascinating documentary on the «smart city» phenomenon. Companies like Google are teaming up with local governments to further expand their already huge datasets on human behaviour, raising the spectre of total control and absence of privacy (someone used the word panoptical).

Proponents claim the smart city will make cities more efficient and perhaps even sustainable. But judging by the examples given by Amsterdam’s smart city czar (he was quoted in the same documentary), the main beneficients may well be motorists. Big data is used to help them navigate their car through the city and find a place to park it. In fact, only one out of Amsterdam’s ~100 smart city projects even mentions the word fiets (bicycle).

And now Strava wants my commute data. They’ve proclaimed tomorrow, the 10th of May, Bike to Work Day. If you’ll upload your ride to work, they promise to make your commutes count:

With data like this, cities can better understand how people choose to interact with the network of roads, bike paths and intersections. The result is improved decision-making, smarter planning, safer streets and more people biking, running and walking. Better data is a catalyst for change.

Bringing a bit more balance to the smart city phenomenon by adding lots of cycling data sounds like a good idea. But will it work? When a very similar initiative was run by Dutch cyclists’ organisation Fietsersbond, Bicycle Count Week, a critic argued that some of the worst bicycle infrastructure in Amsterdam can easily be identified without recording any rides. These problems remain unsolved not for lack of data, but for lack of political will.

Personally, I’d argue that data can be useful, if used critically. But I’m not sure the interpretation of data should be left to the smart city alliance of local governments and corporations.

So will I upload my ride to work tomorrow? To be honest, I’ll probably forget to record it in the first place.

The smart city documentary, part of VPRO’s Tegenlicht series, can be seen in Dutch here. The VPRO has translated some of its Tegenlicht (Backlight) documentaries, but I don’t think this one is available in English yet.


Embedding D3.js charts in a responsive website

For a number of reasons, I like to use D3.js for my charts. However, I’ve been struggling for a while to get them to behave properly on my blog which has a responsive theme. I’ve tried quite a few solutions from Stack Overflow and elsewhere but none seemed to work.

I want to embed the chart using an iframe. The width of the iframe should adapt to the column width and the height to the width of the iframe, maintaining the aspect ratio of the chart. The chart itself should fill up the iframe. Preferably, when people rotate their phone, the size of the iframe and its contents should update without the need to reload the entire page.

Styling the iframe

Smashing Magazine has described a solution for embedding videos. You enclose the iframe in a div and use css to add a padding of, say, 40% to that div (the percentage depending on the aspect ratio you want). You can then set both width and height of the iframe itself to 100%. Here’s an adapted version of the code:

.container_chart_1 {
    position: relative;
    padding-bottom: 40%;
    height: 0;
    overflow: hidden;

.container_chart_1 iframe {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;

<div class ='container_chart_1'>
<iframe src='' frameborder='0' scrolling = 'no' id = 'iframe_chart_1'>

Making the chart adapt to the iframe size

The next question is how to make the D3 chart adapt to the dimensions of the iframe. Here’s what I thought might work but didn’t: in the chart, obtain the dimensions of the iframe using window.innerWidth and window.innerHeight (minus 16px - something to do with scrollbars apparently?) and use those to define the size of your chart.

Using innerWidth and innerHeight seemed to work - until I tested it on my iPhone. Upon loading a page it starts out OK, but then the update function increases the size of the chart until only a small detail is visible in the iframe (rotate your phone to replicate this). Apparently, iOS returns not the dimensions of the iframe but something else when innerWidth and innerHeight are used. I didn’t have that problem when I tested on an Android phone.

Adapt to the iframe size: Alternative solution

Here’s an alternative approach for making the D3 chart adapt to the dimensions of the iframe. Set width to the width of the div that the chart is appended to (or to the width of the body) and set height to width * aspect ratio. Here’s the relevant code:

var aspect_ratio = 0.4;
var frame_width = $('#chart_2').width();
var frame_height = aspect_ratio * frame_width;

The disadvantage of this approach is that you’ll have to set the aspect ratio in two places: both in the css for the div containing the iframe and in the html-page that is loaded in the iframe. So if you decide to change the aspect ratio, you’ll have to change it in both places. Other than that, it appears to work.

Reloading the chart upon window resize

Then write a function that reloads the iframe content upon window resize, so as to adapt the size of the chart when people rotate their phone. Note that on mobile devices, scrolling may trigger the window resize. You don’t want to reload the contents of the iframe each time someone scrolls the page. To prevent this, you may add a check whether the window width has changed (a trick I picked up here). Also note that with Drupal, you need to use jQuery instead of $.

width = jQuery(window).width;
    if(jQuery(window).width() != width){
        document.getElementById('iframe_chart_1').src = document.getElementById('iframe_chart_1').src;
        width = jQuery(window).width;

In case you know a better way - do let me know!

FYI, here’s the chart used as illustration in its original context.


‘Open company data played role in downfall of Spanish minister’

How transparent are countries when it regards company data? Score of the Netherlands on Open Corporates’ Open Company Data Index, compared to other EU countries. Ordered by score and alphabetically on English name. Source Open Corporates, chart

«There is a delicious irony in Soria being brought down in part by open data», Open Corporates wrote on their blog a week ago. By Soria they refer to former minister José Manuel Soria of the right-wing Partido Popular, who had just stepped down. The story, as summarised by Open Corporates:

Soria was discovered in the Panama Papers, but denied any connection to the Bahamas company referenced in them. It turns out that a company of the same name, UK Lines Limited, had been incorporated in the UK, with officerships linked to him and his family. Further investigation into this company and another UK one, Oceanic Lines Limited, used company filings and shareholder documents to show that these were indeed connected with Soria and his family. Yesterday, newspaper El Mundo nailed the case showing Soria was also director of a Jersey company when he was already a politician.

Information about the UK connection was obtained from Open Corporates. Journalists in other countries - from Nigeria to Argentina - have similarly used data from Open Corporates to make sense of the Panama Papers.

The information they used may well have been available from official databases as well. However, the fact that countries like the UK have opened up company data, and that Open Corporates serves as a portal to such information, makes it much easier to investigate abuses compared to a situation in which you have to buy each document you want to take a look at.

So what about the ‘delicious irony’ mentioned at the beginning of this article? Spain happens to be one of the most secretive countries in the world when it comes to company data, according Open Corporates:

you can’t even search to see if a company exists without giving your credit card, and they have been adamant that they will not open up the register, still less make it available as open data.

This earns Spain a score of 0/100 on the Open Company Data Index, which is even worse than the embarrassingly low score of 20/100 for the Netherlands. The good news here is that the Dutch Lower House has passed a motion asking the government to see whether it can open up the company register (KvK) as open data, and to report to Parliament this spring.


My entry for the Best Worst Viz competition

Number of tweets with hashtag #BestWorstViz, per date of the month April 2016 and time of the day. Times are UTC, 18 April is the deadline. Data updates every hour; clear browser history to refresh. Entry for Best Worst Viz competition, created by dirkmjk.

I love to hate bad graphs (who doesn’t), and I think Andy Kirk’s idea to organise a Best Worst Viz competition is quite brilliant. As he explains, there’s something fair about creating your own bad graph rather than criticising somebody else’s:

[..] picking on bad visualisation involves work by other people who we might never meet or have a chance to learn about what the true circumstances and intent of a project were. The essence of this challenge is based on your best worst visualisation - the best worst visualisation you can possibly make.

I had to give it a try. But how? An exploding 3D pie chart, truncated y-axis, out-of-control spaghetti chart - it all seemed a bit too obvious. I aimed for something different, drawing inspiration from the blink element of the early days of web design. The shifting colours of the stacked bar chart pointlessly illustrate the direction of time - or whatever. I think it’s pretty bad.

Standalone version of graph here.