Gas & Driving

View full screen.

This visualization is based on the article “Driving Shifts Into Reverse”, published in The New York Times May 2, 2010. It shows the relationship between driving habits (miles driven per capita each year) and gasoline prices (annual average for regular grade, adjusted for inflation). Note that the visualization is oriented such that reading from left-to-right roughly matches chronological order!

Next: Seattle Weather

Source

<html>
  <head>
    <title>Gas &amp; Driving</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="driving.js"></script>
    <style type="text/css">

#fig {
  width: 900px;
  height: 600px;
}

.caption {
  position: absolute;
  font: bold 11px serif;
  line-height: 1em;
  text-align: center;
  background: white;
}

.caption p {
  font: 10px sans-serif;
  line-height: 1.1em;
}

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

var w = 900,
    h = 590,
    x = pv.Scale.linear(3380, 10500).range(0, w),
    y = pv.Scale.linear(1.25, 3.49).range(0, h);

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

vis.add(pv.Rule)
    .data(y.ticks(5))
    .bottom(y)
    .strokeStyle("#ccc")
  .anchor("left").add(pv.Label)
    .font("bold 12px sans-serif")
    .textMargin(6)
    .textAlign("left")
    .textBaseline("bottom")
    .text(function(d) "$" + d.toFixed(2));

vis.add(pv.Rule)
    .data(x.ticks(5))
    .left(x)
    .strokeStyle("#ccc")
  .anchor("top").add(pv.Label)
    .font("bold 12px sans-serif")
    .textMargin(6)
    .textAlign("left")
    .textBaseline("top")
    .text(function(d) pv.Format.number()(d) + " mi");

vis.add(pv.Line)
    .data(driving)
    .interpolate("cardinal")
    .lineWidth(4)
    .strokeStyle("black")
    .left(function(d) x(d.miles))
    .bottom(function(d) y(d.gas))
  .add(pv.Dot)
    .lineWidth(1)
    .fillStyle("white")
  .anchor(function(d) d.side).add(pv.Label)
    .text(function(d) d.year);

vis.render();

    </script>
    <div class="caption" style="top:320px;left:150px;">
      Cheap gas,<br>longer commutes
    </div>
    <div class="caption" style="top:350px;left:350px;">
      The Arab<br>oil embargo
    </div>
    <div class="caption" style="top:100px;left:440px;">
      Energy crisis
    </div>
    <div class="caption" style="top:430px;left:670px;">
      Record low prices
    </div>
    <div class="caption" style="top:86px;left:660px;width:110px;padding:10px;">
      The swing backward
      <p>The average number of miles that Americans drive annually begins to
      fall, so the chart appears to turn around.</p>
    </div>
  </div></div></body>
</html>

Data

/*
 * This data was extracted from the New York Times article "Driving Shifts Into
 * Reverse" by Hannah Fairfield, published on May 2, 2010. The original sources
 * are the Energy Information Administration, the Federal Highway
 * Administration, and the Brookings Institution. Due to error in extraction,
 * these figures may not be accurate.
 *
 * @see http://www.nytimes.com/imagepages/2010/05/02/business/02metrics.html
 */

var driving = [
  {side: "left", year: 1956, miles: 3675, gas: 2.38},
  {side: "right", year: 1957, miles: 3706, gas: 2.40},
  {side: "bottom", year: 1958, miles: 3766, gas: 2.26},
  {side: "top", year: 1959, miles: 3905, gas: 2.31},
  {side: "right", year: 1960, miles: 3935, gas: 2.27},
  {side: "bottom", year: 1961, miles: 3977, gas: 2.25},
  {side: "right", year: 1962, miles: 4085, gas: 2.22},
  {side: "bottom", year: 1963, miles: 4218, gas: 2.12},
  {side: "bottom", year: 1964, miles: 4369, gas: 2.11},
  {side: "bottom", year: 1965, miles: 4538, gas: 2.14},
  {side: "top", year: 1966, miles: 4676, gas: 2.14},
  {side: "bottom", year: 1967, miles: 4827, gas: 2.14},
  {side: "right", year: 1968, miles: 5038, gas: 2.13},
  {side: "right", year: 1969, miles: 5207, gas: 2.07},
  {side: "right", year: 1970, miles: 5376, gas: 2.01},
  {side: "bottom", year: 1971, miles: 5617, gas: 1.93},
  {side: "bottom", year: 1972, miles: 5973, gas: 1.87},
  {side: "right", year: 1973, miles: 6154, gas: 1.90},
  {side: "left", year: 1974, miles: 5943, gas: 2.34},
  {side: "bottom", year: 1975, miles: 6111, gas: 2.31},
  {side: "bottom", year: 1976, miles: 6389, gas: 2.32},
  {side: "right", year: 1977, miles: 6630, gas: 2.36},
  {side: "bottom", year: 1978, miles: 6883, gas: 2.23},
  {side: "left", year: 1979, miles: 6744, gas: 2.68},
  {side: "left", year: 1980, miles: 6672, gas: 3.30},
  {side: "right", year: 1981, miles: 6732, gas: 3.30},
  {side: "right", year: 1982, miles: 6835, gas: 2.92},
  {side: "right", year: 1983, miles: 6943, gas: 2.66},
  {side: "right", year: 1984, miles: 7130, gas: 2.48},
  {side: "right", year: 1985, miles: 7323, gas: 2.36},
  {side: "left", year: 1986, miles: 7558, gas: 1.76},
  {side: "top", year: 1987, miles: 7770, gas: 1.76},
  {side: "bottom", year: 1988, miles: 8089, gas: 1.68},
  {side: "left", year: 1989, miles: 8397, gas: 1.75},
  {side: "top", year: 1990, miles: 8529, gas: 1.88},
  {side: "right", year: 1991, miles: 8535, gas: 1.78},
  {side: "right", year: 1992, miles: 8662, gas: 1.69},
  {side: "left", year: 1993, miles: 8855, gas: 1.60},
  {side: "bottom", year: 1994, miles: 8909, gas: 1.59},
  {side: "bottom", year: 1995, miles: 9150, gas: 1.60},
  {side: "top", year: 1996, miles: 9192, gas: 1.67},
  {side: "right", year: 1997, miles: 9416, gas: 1.65},
  {side: "bottom", year: 1998, miles: 9590, gas: 1.39},
  {side: "right", year: 1999, miles: 9687, gas: 1.50},
  {side: "top", year: 2000, miles: 9717, gas: 1.89},
  {side: "left", year: 2001, miles: 9699, gas: 1.77},
  {side: "bottom", year: 2002, miles: 9814, gas: 1.64},
  {side: "right", year: 2003, miles: 9868, gas: 1.86},
  {side: "left", year: 2004, miles: 9994, gas: 2.14},
  {side: "left", year: 2005, miles: 10067, gas: 2.53},
  {side: "right", year: 2006, miles: 10037, gas: 2.79},
  {side: "right", year: 2007, miles: 10025, gas: 2.95},
  {side: "left", year: 2008, miles: 9880, gas: 3.31},
  {side: "bottom", year: 2009, miles: 9657, gas: 2.38},
  {side: "left", year: 2010, miles: 9596, gas: 2.61}
];