Steps of Creating the Treemap Chart « PD4CS - Python programming, common student misconceptions, student projects

Click the titles to hide and show detials.

Step 1: Download Data

Download the dataset from Baby Names from Social Security Card Applications-National Level Data. Once the download completes, you will have one zip file. Unzip the file and you will see many .txt files in the folder. The dataset is organized by years, one file for each year. A line in each file includes name, gender, and the number of newborns given that name in that year.

Step 2: Clean and Prepare the Data

Data cleaning refers to the process of extracting the data needed, correcting data entries, removing corrupt data, modifying the format, and more. After the data cleaning step, one often needs a data preparation step to generate the specific format needed for the visualization, but data cleaning and data preparation can often be done in one step. We next describe how to change the downloaded data into a JavaScript array (cleaning) and how to reformat the JavaScript array into the hierarchical representation needed by by the Treemap visualization (preparing).

In order to use a Treemap, we need to define a hierarchical tree structure. The root of the tree will represent all names. The root will have two children, one called “Female” and one called “Male”. All female names will be children of the node “Female” and all male names will be children of the node “Male”, as shown below:

File yob2014.txt contains the data of 2014. Create a folder called “treemap” and copy the file into the folder. As Google Chart is a JavaScript API, we first transform the .txt file into a JavaScript array. A typical Treemap datatable has three required columns (i.e., entries per data item):

Column 0: A string type ID. This value is displayed on the Treemap rectangle. In our example, the name is the ID in column 0.
Column 1: A string type ID representing the parent node. The root node will be called Names and it has no parent. A female (male) name has node ‘Female’ (‘Male’) as its parent.
Column 2: A positive number representing the size of the node. In our example, it is the number of babies given the name in column 0.

Here is an example of the datatable structure Google Treemap requires.

Our original data source yob2014.txt looks like the following:

Emma,F,20799
Olivia,F,19674
Sophia,F,18490
…
Noah,M,19144
Liam,M,18342
Mason,M,17092
...

The data rows for Google Treemap needs to have the following structure:

var data_rows = [
['Names', null, 0],
['Female', 'Names', null],
['Male', 'Names', null],
['Emma', 'Female', 20799],
['Olivia', 'Female', 19674],
['Sophia', 'Female', 18490],
['Isabella', 'Female', 16950],
…
['Noah', 'Male', 19144],
['Liam', 'Male', 18342],
['Mason', 'Male', 17092],
…
];

To make this transformation, either provide students with a Python program or let them write it. Here is a Python program that transforms the .txt file into the Google Treemap data rows format. In the treemap folder, store the Python program called “txtTojs.py”.

Step 3: Visualize the Data with Google Chart Treemap

When the JavaScript data file is ready, students can start to use HTML and JavaScript to create the Treemap chart. The final script containing both the HTML and the JavaScript we will explain is available here.
3.1 The HTML Part
Google Charts are HTML and JavaScript based. We need to prepare the HTML file with the placeholder for the treemap. Create an HTML file containing:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Treemap</title>
</head>
<body>
  <h2>Treemap of Top 50 Baby Girl Names and Top 50 Baby Boy Names in 2014</h2>
  <div id='map'></div>
</body>
</html>

The HTML file has two tags to the <body> section

<h2>Treemap of Top 50 Baby Girl Names and Top 50 Baby Boy Names in 2014</h2>: The <h2> tag is used to show the title of the Treemap chart.
<div id=’map’></div>: When the Google Charts package is loaded, we need to tell Google Charts where to draw the treemap. Adding the id attribute to the <div> tag achieves this.

3.2 The JavaScript Part
The JavaScript part of the HTML file starts with three script tags:
To include the JavaScript file data2014.js we created during the Data Cleaning Step, we use the <script> tag with the src attribute:

<script type="text/javascript" src="data2014.js"></script>

To include the Google Charts API loader provided by Google:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

For the visualization within the script tag

 <script type="text/javascript"></script>

The next lines load the treemap package from Google Charts API. The function drawChart will be called when the loading is done.

google.charts.load('current', {'packages':['treemap']});
google.charts.setOnLoadCallback(drawChart);

We need to write function drawChart:

function drawChart() {
	//add necessary code here 
}

GoogleChart Treemap requires a specific hierarchical datatable structure and expects three columns per entry: Node ID, Node Parent, and Size of the Node, as described in the data cleaning step. Within the drawChart function, we create a new Google DataTable:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Node ID');
data.addColumn('string', 'Parent');
data.addColumn('number', 'Number of Names');

Next, we add the data rows into the data table:

data.addRows(data_rows);

Now, our datatable for the Treemap is ready. We have to let Google Charts know where to draw the Treemap. As we have created a <div> with the id “map” as the placeholder, we need to tell Google Charts where to create a new treemap:

var tree = new google.visualization.TreeMap(document.getElementById('map'));

Before we draw the treemap, we set the options for the chart. Available are:

minColor: defines the color for a rectangle with the min value.
midColor: defines the color for a rectangle with the value midway between min and max.
maxColor defines the color for a rectangle with the max value.
showScale: whether or not to show a color gradient scale from minColor to maxColor along the top of the chart. Specify true to show the scale.
height: defines the height of the chart.
highlightOnMouseOver: determines if elements should show highlighted effects when moused over.
fontSize: defines the font size for all text, in points.

In our example, we set:

   var options = {
      minColor: '#ffe6e6',
      midColor: '#ff4d4d',
      maxColor: '#b30000',
      showScale: true,
      height: 500,
      highlightOnMouseOver: true,
      fontSize:16
    };

Finally, the script needs to call the draw function of the treemap object with two arguments: the data to visualize and options:

tree.draw(data, options);

Once the drawChart function is done, we save the HTML file and open it with a browser. You will first see two categories: Male and Female. Click either category to see details and right-clicking can navigate back.

Click here to download the completed project. More information about Google Chart Treemap is here.

Step 4: Discuss the visualization and explore extensions

After students complete the visualization, discuss the chart and ask them to identify advantages and disadvantages of the Treemap visualization. There are several possibilities for extensions and modifications:

Why is area of the Male names larger that the area of the Female names? What does it imply?
Do the same visualization for the top 100 names given, independent of gender. What do you expect the Treemap to look like?
Visualize top 100 baby girl names and top 100 baby boy names

In this project, we illustrated a basic process of using Treemaps available in Google Charts for a visualization. We first downloaded data from Data.gov and wrote a program to clean and prepare the data. Finally, we used Google Chart packages to visualize the data. By doing this process, students can gain experience about using other Google Charts features to visualize data. Students also practice their programming skills of different programming languages. After completing the project, give students opportunities to explore other data sets and create visualizations.