Session 10

Now we are going to tie everything together by making a program from scratch. We are going to use the Google Chart API to create maps that are colored based on some data. I'll provide some examples but you are going to do most of the work yourself.

First, read up on the Google Chart API. It will show you how to construct a URL, or web address, where you can point your browser to download your chart. We will need to write a program to read some data file and use that data to build the URL.

Next, find some data to plot. Find some data online for each of the fifty states in the US. There's all kinds of data out there, use Google and try to find something that interests you. Make sure you have numeric data. You don't need data for all of the states either.

Since Google Charts expects the two-letter state codes, you may need to match state names to their codes. This is an excellent opportunity to use a hash.

Since we are going to be coloring the states based on your numeric data, you will need to normalize the data to values between 0-100. You can do this using the following formula where max is the largest value, min is the smallest and x is the value you want to plot.

(1)
\begin{equation} (x - min)/(max - min) * 100 \end{equation}

You will specify a default color (for states with no data) and a range of colors. This is called a heatmap. If you specify a low value color and a high value color, Google will convert your numeric data into the proper color in between the two values. But you need to specify color using a six-letter hexadecimal notation. This notation is typical on the web and you can learn more about it by googling it.

Now look at the map example on the Google Chart site. See if you can figure out how to plot your data. Feel free to ask me or your fellow classmates for help.

Here's an example URL:

http://chart.apis.google.com/chart?chf=bg,s,EAF7FE&chs=440x220&cht=t&chco=FFFFFF,00FF00,FFFF00,FF0000&chld=INCONCKYWY&chtm=usa&chd=t:0.0,25.0,50.0,75.0,100

Here's a hash mapping state names to their two-letter codes

state_abbr = {
'New Hampshire' => 'NH',
'Arizona' => 'AZ',
'Illinois' => 'IL',
'Puerto Rico' => 'PR',
'Minnesota' => 'MN',
'Massachusetts' => 'MA',
'Micronesia1' => 'FM',
'Montana' => 'MT',
'Wisconsin' => 'WI',
'Arkansas' => 'AR',
'Michigan' => 'MI',
'Oklahoma' => 'OK',
'Islands1' => 'MH',
'South Carolina' => 'SC',
'Georgia' => 'GA',
'Maine' => 'ME',
'Delaware' => 'DE',
'California' => 'CA',
'Kansas' => 'KS',
'Mississippi' => 'MS',
'Ohio' => 'OH',
'District of Columbia' => 'DC',
'West Virginia' => 'WV',
'Vermont' => 'VT',
'Palau' => 'PW',
'Guam' => 'GU',
'New York' => 'NY',
'New Jersey' => 'NJ',
'South Dakota' => 'SD',
'Iowa' => 'IA',
'Virginia' => 'VA',
'North Carolina' => 'NC',
'Idaho' => 'ID',
'Kentucky' => 'KY',
'Wyoming' => 'WY',
'Louisiana' => 'LA',
'Connecticut' => 'CT',
'Florida' => 'FL',
'Texas' => 'TX',
'Missouri' => 'MO',
'Hawaii' => 'HI',
'Alaska' => 'AK',
'Virgin Island' => 'VI',
'Oregon' => 'OR',
'Nebraska' => 'NE',
'Washington' => 'WA',
'Nevada' => 'NV',
'America Samoa' => 'AS',
'Tennessee' => 'TN',
'Colorado' => 'CO',
'Rhode Island' => 'RI',
'Alabama' => 'AL',
'North Dakota' => 'ND',
'New Mexico' => 'NM',
'Utah' => 'UT',
'Pennsylvania' => 'PA',
'Indiana' => 'IN',
'Maryland' => 'MD',
}

Sample code to read a file and grab the state code and value

file = File.open("smoking.csv")
file.each do |line|
  state,value = line.chomp.split(',')
  code = state_abbr[state]
  puts code + " " + value
end

Final Program

BASE_URL = 'http://chart.apis.google.com/chart?'
HEIGHT   = '220'    # max allowed by Google
WIDTH    = '440'    # max allowed by Google
RED      = 'FF0000'
GREEN    = '00FF00'
YELLOW   = 'FFFF00'
WHITE    = 'FFFFFF'
LT_BLUE  = 'EAF7FE'
BLUE     = '0000FF'
BLACK    = '000000'
 
parameters = {}
 
def normalize(value, min, max)
  (value - min) / (max - min) * 100
end
 
state_abbr = {
'New Hampshire' => 'NH',
'Arizona' => 'AZ',
'Illinois' => 'IL',
'Puerto Rico' => 'PR',
'Minnesota' => 'MN',
'Massachusetts' => 'MA',
'Micronesia1' => 'FM',
'Montana' => 'MT',
'Wisconsin' => 'WI',
'Arkansas' => 'AR',
'Michigan' => 'MI',
'Oklahoma' => 'OK',
'Islands1' => 'MH',
'South Carolina' => 'SC',
'Georgia' => 'GA',
'Maine' => 'ME',
'Delaware' => 'DE',
'California' => 'CA',
'Kansas' => 'KS',
'Mississippi' => 'MS',
'Ohio' => 'OH',
'District of Columbia' => 'DC',
'West Virginia' => 'WV',
'Vermont' => 'VT',
'Palau' => 'PW',
'Guam' => 'GU',
'New York' => 'NY',
'New Jersey' => 'NJ',
'South Dakota' => 'SD',
'Iowa' => 'IA',
'Virginia' => 'VA',
'North Carolina' => 'NC',
'Idaho' => 'ID',
'Kentucky' => 'KY',
'Wyoming' => 'WY',
'Louisiana' => 'LA',
'Connecticut' => 'CT',
'Florida' => 'FL',
'Texas' => 'TX',
'Missouri' => 'MO',
'Hawaii' => 'HI',
'Alaska' => 'AK',
'Virgin Island' => 'VI',
'Oregon' => 'OR',
'Nebraska' => 'NE',
'Washington' => 'WA',
'Nevada' => 'NV',
'America Samoa' => 'AS',
'Tennessee' => 'TN',
'Colorado' => 'CO',
'Rhode Island' => 'RI',
'Alabama' => 'AL',
'North Dakota' => 'ND',
'New Mexico' => 'NM',
'Utah' => 'UT',
'Pennsylvania' => 'PA',
'Indiana' => 'IN',
'Maryland' => 'MD',
}
 
states = []
values = []
file = File.open("smoking.csv")
file.each do |line|
  state,value = line.chomp.split(',')
  code = state_abbr[state]
  states << code
  values << value
end
 
parameters['cht']  = 't' # map type
parameters['chtm'] = 'usa'
parameters['chs'] = WIDTH + 'x' + HEIGHT # size in pixels
parameters['chd'] = 't:' + values.join(',')
parameters['chld'] = states.join()
parameters['chco'] = [WHITE, GREEN, YELLOW, RED].join(',') # color range
parameters['chf'] = 'bg,s,' + LT_BLUE # chart fill
 
parameter_string = parameters.map {|k,v| "#{k}=#{v}"}.join('&')
 
puts BASE_URL + parameter_string
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License