Monthly Archives: October 2013

Permalink to single post

Visualizing data using a tree map

A tree map is a way of visualizing data using nested rectangles to represent hierarchical (tree-structured) data that is part of a whole. Each rectangle has an area proportional to a specific dimension of data. Different colors are often used to represent different dimensions of the data. Tree maps also make good use of space as many items can be displayed on the screen at a glance. Google Charts enables users to build tree map charts without any coding required. For our tutorial, we will use a sample data set which was obtained from the Kenya Economic Survey 2013. You can download the data set from Google Drive.

Tree map data format

For Google Drive to generate a tree map chart, your dataset must be in a particular format. Here are some guidelines:

  • The first column must be the name of an object in the hierarchy.
  • The second column must contain the name of the object’s parent. Each parent name must appear in the first column.
  • The third column must be numerical as this is what determines the size of the rectangle. It must be a positive value.
  • The optional fourth column must be numerical. It controls the color of the box.

Go to to upload the dataset. Click on the upload icon then from the popup menu and select Files.

Upload Data

From the File selection window that appears, browse and select the Excel file. When the file is selected, an Upload Settings dialog box appears. Ensure that the “Convert documents, presentations, spreadsheets and drawings to the corresponding Google Docs format” checkbox is selected.

Upload Settings

You can choose to select the” confirm settings” checkbox so that Google Drive will prompt you for Upload settings before each upload. Click on the Start Upload button. Google Drive will upload your file and if successful, you should be able to see your file in the list of uploaded files. See diagram below:


File Uploaded

Next, click on the uploaded dataset. The spreadsheet will open in Google Spreadsheet format like in the diagram below;

Open XLS File

You will notice that “All deaths” appears in the first and the second columns. The way tree maps work is that a row has to have a parent. The first row has to be the parent name. That way, all the children can be assigned portions (Nested rectangles) based on the values. The rectangles are constructed based on the first column with numbers.

Next we need to select only the data that we want to visualize. Click on row A3 (All deaths) then do not release the mouse button. Drag the mouse all the way to cell D14. Your worksheet should now look like the diagram below. Only the data that we are interested in is highlighted.

Selected Data

Click on the Insert menu then select chart.

Insert Chart

Google will automatically detect the hierarchy in your data set. By default, it will suggest a Tree map for you. It will also list for you the possible charts as per your data set structure.

Chart Types

Select the tree map chart then click on Insert. The tree map will be inserted into your spreadsheet as in the diagram below.

Chart Inserted

To further customize your chart, double click on the white space above the chart then click on the drop down arrow and select advanced edit as shown below:

Edit Chart

A dialogue box opens up where you can customize your chart. From here you can change the chart title, enable or disable scale, select levels of data, font style and customize the header and scale.

Customize Chart

More customization can be achieved by coding your tree map. A good example can be found at

For more information on how to customize your chart, please visit Google Drive Help

You can also watch a video on tree maps at Youtube

Permalink to single post

Data graphics: visualizing stories

Media organizations across the world such as The New York Times, Washington Post, and the Guardian – regularly incorporate dynamic graphics into their journalism. Other than using static visuals to support stories in form of diagrams and charts, especially for print media, the internet has provided lots of space that journalist can use to visualize data in telling long-form stories.

DataWrapper is one of the available tools that aid journalists, designers and developers to integrate visuals into online stories. Visuals have become an important way of telling stories.

Guided by the basic elements of story telling – who, what, where, when, why, and how – visuals need to evoke the ‘so what’? There is no need to use visuals that confuse the reader instead their use is guided by simplifying data for consumption and revealing stories hidden in data.

Since DataWrapper is an Open Source tool, users are able to upload data and create simple, embeddable data visualizations in telling stories. Data journalism has facilitated the quick utilization of visuals to enhance stories with the aid of designers and developers.

In the example below, the readers are able to see the number of times Kenya Rugby has won, lost, or drawn, with clear reference to the number of matches Kenya has played with other countries. The simplicity of using DataWrapper makes it easy for a far broader population to both produce and consume visuals.

pic e
For starters, it is important to source, clean, and analyze a data set that best illustrates the story using available tools such as Excel, Google spreadsheets, or web table.

pic f
Once done, copy the text and paste the contents into DataWrapper’s first screen.
pic g
Choose upload and continue for DataWrapper to check and describe the data. There is an option to link the data to its source and the name of the organization that produced the data
pic h
Follow the next step to construct and customize the visuals that best illustrate the story. A choice is available from the select chart option.
pic i
The chart can be refined further by customizing the colours to best suit the visuals, as well as including a headline and short brief for the story before publishing.
pic j
After done with editing, publish and embed option, provides a link to the visual as well as embed code that can be pasted on another site.
pic k
DataWrapper currently offers five kinds of visualizations – line, bar, pie, table, and stream graph – but it is still undergoing a cycle of development aimed at enhancing and refining it application. Interactive and static data graphics have enriched websites, blogs, videos, and print visuals enabling designers and developers to package long-form stories for easier consumption.

Permalink to single post

Google Fusion Tables: Adding a chart to map information window

Once data has been cleaned and uploaded to Google Fusion Tables, it is important that readers comprehend both the map and the data displayed about each geographical region when selected. A chart is one of the ways used to represent this region-by-region data for the readers. Google Charts make it possible to create interactive dynamic charts for the readers. » Read more