natureofCode1 © 2012 mg. All rights reserved.

Nature of code midterm

For my Nature of Code class I’m going to work in part of my thesis project. The idea is to raise awareness about well-being and development by visualizing data from the UN’s Human Development Report. The visualizations will be presented in a collection of books integrated with a website, where the data visualizations can be explored to show multiple perspectives and provide deeper understanding about the countries and its data. 

The information visualized was taken from the 2011 United Nations Human Development Report. For academic purposes, its content has been curated and consolidated into 15 indicators organized by categories such as Education, Economy, Health, Environment, Gender, and People’s Perceptions on quality-of-life issues. On the other hand the indicators were also divided into indicators that represent positive achievements in human development and negatives issues which do not contribute to enhancing people’s well-being.

Therefore, the idea is to have all of this indicators visualized for each of the 187 countries that are part of the report. You can see an example of a country visualization, as follow.

For this class I’ll be building the website. In the following images you can see the first wireframes of this project. I think this will be changing while I will be building and testing it.

For this midterm I decided to work in the first part of the website; how to visualize the countries in the map. Here you can see what I got so far.

The next steps are:
- Work on all the transitions; who to zoom in and out in a more smooth way, who to make the countries appear, growing from the center?

- Displaying the information contained en each indicator.

- Design a way to selected a number of countries allowing a more specific comparison.

- Build the second option of visualization; The Rank.

Leave a Reply

Your email address will not be published.
Required fields are marked:*

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>