Random thoughts on information visualization, data journalism and interactive graphics by Gregor Aisch. Find more about my data visualization work at driven-by-data.net

Date Archives
→
August 2010

I’m not quite sure about the real practical use of stream graph visualizations, but I admit that they look very nice. In the last week I experimented a little with stream graphs and created a tool which helps finding nice color scales for stream graphs. It allows to define three different scales for each component of the HSL color space. The displayed data set is taken from Piwik Analytics and shows the evolution of visitor countries over the last 16 weeks. Click on the image to enter the live version.

Below you find a small introduction to the different toolbar controls.

Update: I added the possibility to copy the URL of the current settings, which allows to permamently store and share a color scale.

The map has altogether four views: world, continent1 and two new country views for provinces and cities.

In both country views there is one active country. All other countries are displayed in gray like the empty countries in world and continent view (the inactive country borders are missing in the following images, just imagine them for now).

Since we now have three different zoom levels it is not as easy to provide simple navigation through the views. Starting from the world view, the user can click on active regions to zoom into it2. At every time, clicking at the “sea” (the white space) leads to a zoom out to the previous level. After selecting a country the user can switch between province and city view using the icons in the bottom icon bar.

To improve the navigation between different countries, all inactive countries are labeled with their iso-code (or maybe the full country name). This way the user can easily jump between adjacent countries. Empty countries (= countries with no visitors coming from) are not clickable. The other country labels could be sized relativly to the number of visitors, but this may be to distractive.

On top of the map the user can see the total number of visits for the active country.

Province view

Now we come to the first new country mode, which displays all sub-regions or provinces of a country. Since maintaining all provinces for nearly 300 countries means a lot of work, this feature may be limited to some countries at first. The tooltip displays the name (again a lot of work for the translators) and the selected metrics. I’m not quite sure about the percentage value, but I tend to relate it to the countries total value (and not the overall total value as in world view), which would mean “4% of the all site visitors of France came from Burgundy”.

City view

The second country view displays all visitors city in the selected country. The concept should be familiar to most web analytics users, so I think it’s a good idea to adapt the bubble layout from GA. Note the change in the icon bar in the following mockup:

If you have any comments or suggestions for the further development of the map widget, feel free to join the discussion in the comment section.

Some continents are divided into serveral regions for better zooming performance ↩

This is the first difficult point since the world map already provides tooltips for individual countries. Some users might get annoyed when they have to find and click their preferred country twice. On the other hand are users which might get confused when jumping from the world view to a (possibly wrong selected) country. ↩

After writing down my latest ideas for better Piwik visualizations, I just couldn’t wait to see them in action. Since the Open Flash Chart library doesn’t support multi-level pie charts I decided to create the visualization from scratch. The initial version (0.1) took me about two hours coding.

In the following image you can compare the hierarchical pie visualization (top) with the current pie visualization (bottom).

I named the plugin UserSettingsExt as it extends the current UserSettings plugin. You can download it from the Piwik Developer Zone to test it on your own Piwik installation.

Changelog

0.1 – basic pie chart drawing, label placement.

0.2 – added standard piwik tooltips

0.3 – added automatic resizing

If you don’t want to miss any updates, you can subscribe to the plugins rss-feed at the Piwik Developer Zone.

Feedback welcome.

href="http://vis4.net/blog/de/2010/08/piwik-browser-stats-visualization/">After writing down my latest ideas for better Piwik visualizations, I just couldn’t wait to see them in action. Since the Open Flash Chart library doesn’t support multi-level pie charts I decided to create the visualization from scratch. The initial version (0.1) took me about two hours coding.

In the following image you can compare the hierarchical pie visualization (top) with the current pie visualization (bottom).

I named the plugin UserSettingsExt as it extends the current UserSettings plugin. You can download it from the Piwik Developer Zone to test it on your own Piwik installation.

Changelog

0.1 – basic pie chart drawing, label placement.

0.2 – added standard piwik tooltips

0.3 – added automatic resizing

If you don’t want to miss any updates, you can subscribe to the plugins rss-feed at the Piwik Developer Zone.

In this post I want to present two ideas for improvements to the current Piwik visualizations.

Screen resolution stats

The first idea is about improving the screen resolution charts. Here is an example for the current available visualizations in Piwik:

The current charts (pie,bar) aren’t quite applicable to get an useful overview about the visitors screen resolutions. Both charts are limited to a few big values and combine all other values in the “others” element. This can lead to wrong interpretation of the data, since there might be many different screen sizes. In the example nearly the half of the sites visitors have screen resolutions that arent’ displayed in the charts.

The obvious reason is that pie and bar charts are made for simple, one-dimensional data sets but the number of visits per screen resolution is a perfect representative of two-dimensional data sets. The two dimensions are obviously the screen width and the screen height. One of the simplest yet best visualization type to display two-dimensional data sets is the scatter plot. You can see the difference in no time by looking at the following prototype. In my opinion, this is the only way to make the screen resolution stats usable.

Browser statistics

My second idea is about the browser statistic charts. Again, there is only limited use to the currently provided charts.

The chart shows data of multiple browsers in multiple versions. Each combination of browser and value is treated as a distinct value and hence is shown in a unique color. The main problem of the current visualizations is (again) that the data is treated as one-dimensional. The data is in fact a hierarchical data set: the first layer is the browser layer which contains the sub-layer browser versions. One way of making a visualization more useable is to decrease the complexity, which can be done by only showing the browser level.

The visualization now clearly shows the information that is asked by most of the Piwik users: Which browsers are used by the visitors of my website? Some users might also want to know more details about the different browser versions, so there is a link to an second view that shows all browser versions.

Feedback welcome..

About vis4.net

Hello and welcome, you landed at vis4.net, the personal blog of Gregor Aisch, a graphics editor at The New York Times, who is fascinated by information visualization, dry color theory and map projections.