Vienna districts in numbers

Vienna districts in numbers is an data visualization application, written in JavaScript, based on the open data. Here’s a bit about how this came to be.

Data visualization

app4at-light

I am very much fascinated by the various ways we can represent data.

Looking at the raw data offers some insight, but often the relationship and ratio remains abstract.

The visualization makes it much more present and alive. Especially when it’s possible to interact with it.

The apps4austria contest organized by the Austrian state was a chance to try out some representation and interaction ideas based on data about Vienna.

Vienna districts

Different parts of any other big city have different offerings, and often you can feel as in a completely different city or country.

I feel that districts have a special role in Vienna – the inner city is a part of UNESCO World Heritage, the districts are separated by the Danube river, the Danube channel, big road rings, and so on. Every street sign has a number of the district in front of the street name.

Since the city of Vienna is the part of Austria I know best, I decided to explore this data and learn something more about the city I live in.

apps4austria contest entry

app4at-darkVienna districts in numbers is a web-based application, running in the browser. Tested in Google Chrome (version 23), Firefox (version 19), and Internet Explorer (version 9).

It is written in JavaScript, together with HTML5 for markup and CSS3 for styling.

The excellent D3 library is used for representation and manipulation. The imagery is rendered in the SVG open format.

Austria has various public data available on the Offene Daten Österreich website, and city of Vienna has a subset on the Open Government Data (Offene Daten für Wien) website. I used data sets on income, population, and the district borders. These had to be processed a bit to confirm with number formats and data format standards.

About the data

Income

Here is the information page for the income dataset: Lohnsteuerstatistik für Wien: Zeitreihe

Based on the downloaded file, w09-incometax-vie-dis.csv I have produced w09-incometax-vie-dis-fixed.csv with the following changes:

  • removed header
  • removed thousand delimiters (“.”)
  • date formatting
  • replaced semicolon “;” with a comma “,” so the library can load Comma Separated Values

Population

Here is the information page for the population dataset: Bevölkerung in Wien: Bezirk – Geschlecht

The provided file, w09-incometax-vie-dis.csv had to be changed in the following way:

  • removed header
  • date formatting
  • date rewriting (01.01.2003 = 31.12.2002, data is for the previous year)
  • replaced semicolon “;” with a comma “,” so the library can load Comma Separated Values

Map

The map data is provided here: Bezirksgrenzen

It’s already in the JSON format, but it wouldn’t render properly unless the polygons ordered clockwise, so I’ve converted the data to TopoJSON.

Tools

D3 – Visualisation, data loading. d3js.org, GitHub (source code)

TopoJSON – Data conversion, data loading. GitHub (source code)

Google Docs – Documentation, data overview. Google Drive

Outcome

The contest results will be published in the second quarter this year.

Regardless of how it does in the contest, I’m very satisfied how it turned out and with what I have learned through the process.

The visualization is available in English and German.

Hope you like it, and I would be very interested to hear your comments.


Comments

6 responses to “Vienna districts in numbers”

  1. Very good approach, works like a charm on GalaxyS2.

    1. Glad you like it and thanks for the info!

  2. Hi Bojan. It looks great overall and is very smooth. Nice colour choices and I like that colour isn’t overused. Here are a few quick critical things that came to mind when I looked at it:

    – I was puzzled for a bit when I saw number labels on the donut chart until I figured out that they are district numbers rather than values of some kind. Perhaps using Roman numerals as you do in the popups would be prevent this confusion and be more consistent.

    – for the various drop-downs it be better to directly show what is being visualized at that time rather than the generic label. ie ‘Population Density’ rather than ‘Population’

    – maybe add a colour legend for map so we can more directly see values and ranges of values and which is more dense/populous

    – linking the 3 views is nice but it might be better to combine the 2 non-map views into one form. I think 2 sets of horizontal bar charts would be better with the district names in between. Let the user sort on either measure. This way the two values for a district are always side-by-side. It also lets you use district names directly and avoids the district number/value confusion I mentioned above.

    1. Thanks for the input – the app is already submitted to the contest, but perhaps the improvements you suggest go into a version 2.0. ;)

      1. Christine Zimmermann Avatar
        Christine Zimmermann

        Hi Bojan,

        I am sorry, but where do I have to click to use this app? I want to have a look at two districts of Vienna, but I can’t see in all the information you posted here, where I can use it.

        Thank you
        Christine

        1. Hi Christine, sorry for a late reply – the link appears a couple of times in the post, but here it is again: http://www.bjelic.net/app4at/en.html
          Hope you find it useful.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.