Archive for November, 2011

Creating online charts with iCharts

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:


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

Accessing accelerometer data with HTML5

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:

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.