Chapter 10 — Overlaying Statistical Data 189
Now the population data can be extracted from the XML. A separate associative array is also
populated with a list of the years. Because the year is used as the text reference (instead of a
numerical reference), you should end up with a unique list of the available years.
var poplist = markerlist[i].getElementsByTagName(“pop”);
for (var j=0;j<poplist.length;j++) {
popdata[i][poplist[j].getAttribute(“year”)]
= parseInt(poplist[j].getAttribute(“value”));
years[poplist[j].getAttribute(“year”)] = 0;
}
}Finally, for convenience, you create a list of the available years (using the year associative array)
as links so that the user can pick the year of population data to be displayed:
for (var i in years) {
yearpanel.innerHTML = yearpanel.innerHTML +
‘<a href=”#” onClick=”addgraph(‘ + i + ‘)”>’ + i + ‘<br/’;
}
recenterandzoom(points);
}
The preceding will create a structure like the following one:
popdata[0][‘2004’] = 8104079
popdata[0][‘2000’] = 8008278
popdata[0][‘1990’] = 7322564
popdata[14][‘2004’] = 730008
popdata[14][‘2000’] = 711470
popdata[14][‘1990’] = 632910
To select the population data for a city, you need only know the city reference (as embedded
into the list of cities shown in the information panel on the right). To pick out the population
for a specific year, you need the city reference and year string. To show the population data for
all cities for a given year, you need to iterate through the list and then extract the population for
a given year from a particular index. An example of this is the creation of a bar graph of that
information on the map.
Adding a Bar Graph
To draw a bar graph of the population against each city, a starting point for the base of each
graph must be determined. The location of the city is a good starting point. Then the height of
the bar graph should also be determined. The height should be consistent across different val-
ues. For example, if New York had a population of 500,000 and Los Angeles a population of
250,000, the height of the bar for L.A. should be half that of New York.
With a Google Map there is no flexibility to draw arbitrary lines. The line must be drawn
based on the longitude and latitude of the start and end points. To draw a vertical bar, the lon-
gitude remains the same; only the latitude changes according to a value. To calculate that value,
obtain the height of the map in latitude and then use a factor of that for each increment of the
bar. The value will be consistent irrespective of the size of the actual map.