World Population

Using Google's Data Visualization to see a map of the world population

by Suvi Vignarajah

HTML

<script src="https://www.google.com/jsapi"></script>
<div id="locations">
  <ul>
    <li class="continent"><a id="002" href="#">Africa</a>
      <ul class="areas">
        <li><a id="015" href="#">Northern Africa</a></li>
        <li><a id="011" href="#">Western Africa</a></li>
        <li><a id="017" href="#">Middle Africa</a></li>
        <li><a id="014" href="#">Eastern Africa</a></li>
        <li><a id="018" href="#">Southern Africa</a></li>
      </ul>
    </li>
    <li class="continent"><a id="150" href="#">Europe</a>
      <ul class="areas">
        <li><a id="154" href="#">Northern Europe</a></li>
        <li><a id="155" href="#">Western Europe</a></li>
        <li><a id="151" href="#">Eastern Europe</a></li>
        <li><a id="039" href="#">Southern Europe</a></li>
      </ul>
    </li>
    <li class="continent"><a id="021" href="#">North America</a></li>
    <li class="continent"><a id="005" href="#">South America</a></li>
    <li class="continent"><a id="013" href="#">Central America</a></li>
    <li class="continent"><a id="029" href="#">Caribbeans</a></li>
    <li class="continent"><a id="142" href="#">Asia</a>
      <ul class="areas">
        <li><a id="143" href="#">Central Asia</a></li>
        <li><a id="030" href="#">Eastern Asia</a></li>
        <li><a id="034" href="#">Southern Asia</a></li>
        <li><a id="035" href="#">South-Eastern Asia</a></li>
        <li><a id="145" href="#">Western Asia</a></li>
      </ul>
    </li>
    <li class="continent"><a id="009" href="#">Oceania</a>
      <ul class="areas">
        <li><a id="053" href="#">Australasia</a></li>
        <li><a id="054" href="#">Melanesia</a></li>
        <li><a id="057" href="#">Micronesia</a></li>
        <li><a id="061" href="#">Polynesia</a></li>
      </ul>
    </li>
    <li class="continent selected"><a id="world" href="#">World</a></li>
  </ul>
</div>
<div id="chart_div"></div>
<div id="credits">
  <p>Population Data Obtained from Wikipedia's <a...

CSS

a {
  text-decoration: none;
  color: blue;
}

a:hover {
  text-decoration: underline;
}

#locations ul,
#locations li.continent {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-table;
  color: white;
}

#locations ul {
  min-width: 986px;
}

#locations li.continent {
  padding: 5px 23px;
  background-color: black;
  position: relative;
}

#locations ul.areas {
  display: none;
  position: absolute;
  left: 0;
  z-index: 100;
}

#locations ul.areas li {
  padding: 5px 23px;
  background-color: black;
  width: 100%;
}

#locations ul.areas.on {
  display: block;
}

#locations a {
  text-decoration: none;
  color: white;
}

#locations li:hover {
  background-color: grey;
}

#locations ul.areas li:hover {
  background-color: grey;
}

#locations li.selected,
#locations ul.areas li.selected {
  background-color: #CCCCCC;
}

#credits {
  font-size: 12px;
  margin-top: 25px;
}

#credits p {
  margin: 0;
}

JavaScript

var countryPopulations = [
  ['China', 1347350000],
  ['India', 1210193422],
  ['United States', 315028000],
  ['Indonesia', 237641326],
  ['Brazil', 193946886],
  ['Pakistan', 181637000],
  ['Nigeria', 166629000],
  ['Bangladesh', 152518015],
  ['Russia', 143300000],
  ['Japan', 127520000],
  ['Mexico', 112336538],
  ['Philippines', 92337852],
  ['Vietnam', 87840000],
  ['Ethiopia', 84320987],
  ['Egypt', 83671000],
  ['Germany', 81903000],
  ['Iran', 77024000],
  ['Turkey', 74724269],
  ['Democratic Republic of the Congo', 69575000],
  ['Thailand', 65926261],
  ['France', 65635000],
  ['United Kingdom', 63181775],
  ['Italy', 60870745],
  ['South Africa', 51770560],
  ['South Korea', 50004441],
  ['Myanmar', 48724000],
  ['Colombia', 46853000],
  ['Spain', 46815916],
  ['Ukraine', 45560255],
  ['Tanzania', 43188000],
  ['Argentina', 40117096],
  ['Kenya', 38610097],
  ['Poland', 38538447],
  ['Algeria', 37800000],
  ['Canada', 35002447],
  ['Uganda', 34131400],
  ['Iraq', 33330000],
  ['Morocco', 32773000],
  ['Sudan', 30894000],
  ['Peru', 30135875],
  ['Malaysia', 29575000],
  ['Uzbekistan', 29559100],
  ['Venezuela', 28946101],
  ['Saudi Arabia', 28376355],
  ['Nepal', 26494504],
  ['Afghanistan', 25500100],
  ['Ghana', 24658823],
  ['North Korea', 24554000],
  ['Yemen', 24527000],
  ['Mozambique', 23700715],
  ['Taiwan', 23305021],
  ['Australia', 22857100],
  ['Syria', 21901000],
  ['Ivory Coast', 21395000],
  ['Madagascar', 20696070],
  ['Angola', 20609300],
  ['Sri Lanka', 20277597],
  ['Cameroon', 19406100],
  ['Romania', 19043767],
  ['Kazakhstan', 16878000],
  ['Netherlands', 16775273],
  ['Chile', 16572475],
  ['Niger', 16274738],
  ['Malawi', 15883000],
  ['Burkina Faso', 15730977],
  ['Ecuador', 15647500],
  ['Guatemala', 14713763],
  ['Mali', 14528662],
  ['Cambodia', 14478000],
  ['Zambia', 13092666],
  ['Zimbabwe', 12973808],
  ['Senegal', 12855153],
  ['Chad', 11274106],
  ['Cuba', 11163934],
  ['Belgium', 11139292],
  ['Guinea', 10824200],
 ...