A graphical toolkit for visualization
Protovis
Overview
Examples
Documentation
Download
Index
« Previous / Next »

Dymaxion Map

View full screen.

The Dymaxion map, designed by Buckminster Fuller, projects the world onto the surface of an icosahedron. This polyhedron is then unfolded to form a two-dimension image with less distortion than conventional projections. Unusually, the icosahedron can be oriented and unfolded in different ways to maintain contiguity in different regions (e.g., land masses or oceans).

Next: Q-Q Plots

Source

<html>
  <head>
    <title>Dymaxion map</title>
    <link type="text/css" rel="stylesheet" href="ex.css?3.2"/>
    <script type="text/javascript" src="../protovis-r3.2.js"></script>
    <script type="text/javascript" src="dymax.js"></script>
    <script type="text/javascript" src="countries.js"></script>
    <style type="text/css">

#fig {
  width: 860px;
  height: 400px;
}

    </style>
  </head>
  <body><div id="center"><div id="fig">
    <script type="text/javascript+protovis">

var xMap = function(lon, lat) {
  return convert_s_t_p_cache(lon, lat).x * 150;
};
var yMap = function(lon, lat) {
  return convert_s_t_p_cache(lon, lat).y * 150;
};

var xMapI = function(i, t) {
  return convert_i_t_p(i, t).x * 150;
};
var yMapI = function(i, t) {
  return convert_i_t_p(i, t).y * 150;
};

// Generate a random value to visualize (for now).
countries.forEach(function(c, i) c.value = Math.random());

var w = 860, h = 400;

var vis = new pv.Panel()
    .width(w)
    .height(h);

var country = vis.add(pv.Panel)
    .data(countries);

country.add(pv.Panel)
    .data(function(c) c.borders)
  .add(pv.Line)
    .data(function(l) l)
    .left(function(d) xMap(d.lng, d.lat))
    .bottom(function(d) yMap(d.lng, d.lat))
    .antialias(false)
    .lineWidth(1)
    .strokeStyle("#fff")
    .fillStyle(pv.ramp("steelblue", "lightgreen").by(function(d,l,c) c.value))
    .title(function(d,l,c) c.name)
    .event("mousedown", function(d,l,c) onGameClick(c));

vis.add(pv.Panel)
    .data([
      [1,2,3,1],[1,3,4,1],[1,4,5,1],[1,5,6,1],[1,2,6,1],
      [2,3,8,2],[8,3,9,8],[9,3,4,9],[10,9,4,10],[5,10,4,5],
      [5,11,10,5],[5,6,11,5],[11,6,7,11],[7,6,2,7],[8,7,2,8],
      [12,9,10,12],[12,11,10,12],[12,11,7,12],[12,8,7,12]
    ]) // exclude [12,9,8,12] - the cut away triangle
  .add(pv.Line)
    .data(function(f) f)
    .left(function(f, t) xMapI(f, t))
    .bottom(function(f, t) yMapI(f, t))
    .strokeStyle("#ccc")
    .lineWidth(1)
    .antialias(false);

vis.render();

    </script>
  </div></div></body>
</html>

Data

Due to size, the data file is omitted from this example. See countries.js.
Copyright 2010 Stanford Visualization Group