Create a gist now

Instantly share code, notes, and snippets.

@veltman /README.md
Last active Jul 3, 2016

What would you like to do?
Gas prices per gallon vs. per mile

A variation on Hannah Fairfield's classic connected scatterplot on gas prices. Shows the different trends for cost as "dollars per gallon" and cost as "dollars per mile." The peaks and valleys are similar, but factoring in steadily increasing fuel efficiency makes recent gas price increases look less extreme relative to to the 1979 energy crisis and earlier years.

Miles per capita computed from US Census population estimates and FWHA's Vehicle Miles Traveled. Fuel prices per gallon from Table 9.4 of the EIA's Energy Review. Prices look a little different than the NYT chart because it uses the average regular grade price throughout (presumably leaded for earlier years and unleaded for later years), whereas this uses the broadest average available for a year: regular leaded through 1975, regular unleaded for 1976-77, and all grades for 1978-2013. Fuel prices per mile computed as price per gallon divided by overall fleet efficiency, which is calculated using miles driven and EIA data on barrels of finished motor fuel supplied per day. All prices in 2014 dollars.

year population milesDriven gallonsUsed gasPriceUnadjusted gasPriceType cpiMultiplier milesPerCapita fuelEfficiency gasPriceAdjusted dollarsPerMile
1949 149188130 424461000000 36945300000 0.268 Leaded Regular 9.945378151260503 2845.139221196753 11.48890386598566 2.665361344537815 0.23199439873711114
1950 152271417 458246000000 40103280000 0.268 Leaded Regular 9.821576763485476 3009.402611653637 11.426646398997788 2.632182572614108 0.23035477608241842
1951 154877889 491093000000 45760050000 0.272 Leaded Regular 9.103846153846153 3170.83996412167 10.731915721245933 2.4762461538461538 0.23073663809565134
1952 157552740 513581000000 45284820000 0.274 Leaded Regular 8.898496240601503 3259.7401987423386 11.341129323247834 2.438187969924812 0.21498634751715998
1953 160184192 544433000000 47676300000 0.287 Leaded Regular 8.832089552238806 3398.7935588550463 11.419363499264835 2.534809701492537 0.22197469251729532
1954 163025854 561963000000 48964020000 0.29 Leaded Regular 8.799256505576208 3447.0790136146134 11.47706009433049 2.5517843866171 0.22233780825785227
1955 165931202 605646000000 53087790000 0.291 Leaded Regular 8.832089552238806 3649.982599414907 11.408385996101929 2.5701380597014922 0.22528498427206697
1956 168903031 627843000000 54390840000 0.299 Leaded Regular 8.70220588235294 3717.180184883716 11.543175284661903 2.601959558823529 0.22541107577920141
1957 171984130 645004000000 55417950000 0.31 Leaded Regular 8.423487544483985 3750.3692927946317 11.63890039238189 2.6112811387900354 0.22435806225296162
1958 174881904 664653000000 56889630000 0.304 Leaded Regular 8.190311418685122 3800.5819058328643 11.683201314545375 2.489854671280277 0.2131140775756772
1959 177829628 700480000000 59173800000 0.305 Leaded Regular 8.106164383561644 3939.05114619033 11.837671401870422 2.4723801369863017 0.20885696629454092
1960 180671158 718762000000 60844770000 0.311 Leaded Regular 7.996621621621621 3978.2885545018758 11.813044900983273 2.486949324324324 0.21052568115755826
1961 183691481 737421000000 61979190000 0.308 Leaded Regular 7.916387959866221 4014.4539963723196 11.897880562814713 2.438247491638796 0.20493124626408027
1962 186537737 766734000000 64370670000 0.306 Leaded Regular 7.811881188118812 4110.342563017155 11.911232242883289 2.3904356435643566 0.2006875187067729
1963 189241798 805249000000 66440220000 0.304 Leaded Regular 7.735294117647058 4255.132896169164 12.119902673410774 2.3515294117647056 0.19402213657405057
1964 191888791 846298000000 67497990000 0.304 Leaded Regular 7.635483870967741 4410.356621612151 12.53812150554409 2.321187096774193 0.18513037186214967
1965 194302963 887812000000 70410690000 0.312 Leaded Regular 7.514285714285714 4569.214932661629 12.60905126764132 2.344457142857143 0.18593446034070277
1966 196560338 925899000000 73706640000 0.321 Leaded Regular 7.283076923076923 4710.507772936369 12.561948285798946 2.337867692307692 0.18610709414801596
1967 198712056 964005000000 76006140000 0.332 Leaded Regular 7.086826347305389 4851.2657933547825 12.683251642564667 2.352826347305389 0.18550655727821125
1968 200706052 1015869000000 80651130000 0.337 Leaded Regular 6.801724137931035 5061.476671366143 12.595843356441502 2.2921810344827587 0.1819791632539269
1969 202676946 1061791000000 84713580000 0.348 Leaded Regular 6.44959128065395 5238.834613187826 12.533893621306053 2.2444577656675744 0.17907107188561713
1970 205052174 1109724000000 88684050000 0.357 Leaded Regular 6.100515463917526 5411.910434073233 12.513230958667314 2.177884020618557 0.17404649748832782
1971 207660677 1178811000000 92194620000 0.364 Leaded Regular 5.844444444444444 5676.6211929473775 12.786114851387207 2.127377777777778 0.16638187616052671
1972 209896021 1259786000000 97744080000 0.361 Leaded Regular 5.662679425837321 6001.952747832223 12.888616886055912 2.0442272727272726 0.15860718731882745
1973 211908788 1313110000000 102312420000 0.388 Leaded Regular 5.331081081081081 6196.581144147736 12.83431669390676 2.068459459459459 0.16116630972971738
1974 213853928 1280544000000 100212210000 0.532 Leaded Regular 4.801217038539554 5987.937710454399 12.778323120505974 2.554247464503043 0.1998890965907821
1975 215973199 1327664000000 102327750000 0.567 Leaded Regular 4.399628252788104 6147.3553484754375 12.974623208269506 2.4945892193308548 0.19226679490321563
1976 218035164 1402380000000 106972740000 0.614 Unleaded Regular 4.1599297012302285 6431.898296918748 13.109695049411654 2.5541968365553602 0.19483266597188997
1977 220239425 1467027000000 110023410000 0.656 Unleaded Regular 3.905940594059406 6661.055349195541 13.3337714219183 2.5622970297029704 0.19216596329910224
1978 222584545 1544704000000 113625960000 0.652 All grades 3.630368098159509 6939.852899490394 13.594639816464477 2.367 0.17411274090052203
1979 225055487 1529133000000 107831220000 0.882 All grades 3.260330578512397 6794.471089700648 14.180800328513394 2.875611570247934 0.2027820365304721
1980 226542250 1527295000000 100856070000 1.221 All grades 2.8725728155339803 6741.766712390294 15.143312643453191 3.5074114077669902 0.23161454104187212
1981 229465744 1555308000000 100994040000 1.353 All grades 2.6039603960396036 6777.95287823005 15.399997861259932 3.523158415841584 0.2287765522815041
1982 231664432 1595010000000 100242870000 1.281 All grades 2.4528497409326424 6885.001664821814 15.911455847183944 3.142100518134715 0.19747410597194429
1983 233792014 1652788000000 101515260000 1.225 All grades 2.376506024096386 7069.480140583416 16.281177824890563 2.9112198795180726 0.17880892345929775
1984 235824908 1720269000000 102603690000 1.198 All grades 2.278152069297401 7294.687463632977 16.766151392800786 2.7292261790182866 0.16278191190556637
1985 237923734 1774826000000 104719230000 1.196 All grades 2.199814126394052 7459.642508804944 16.948424849953536 2.630977695167286 0.15523434882354267
1986 240132831 1834872000000 107831220000 0.931 All grades 2.1596715328467155 7641.070953767251 17.016148013534483 2.0106541970802922 0.11816153664631014
1987 242288936 1921204000000 110467980000 0.957 All grades 2.0836267605633805 7929.392203034809 17.391501139063102 1.994030809859155 0.1146554741833272
1988 244499004 2025962000000 112460880000 0.964 All grades 2.0008453085376163 8286.176904017164 18.014815462941424 1.928814877430262 0.10706825620268268
1989 246819222 2096487000000 112338240000 1.06 All grades 1.9088709677419353 8494.018346755829 18.662273861509668 2.0234032258064514 0.10842211623416666
1990 249622814 2144362000000 110912550000 1.217 All grades 1.8110175975516452 8590.408727625352 19.33380848244856 2.2040084162203524 0.11399763363856505
1991 252980941 2172050000000 110192040000 1.196 All grades 1.7378854625550662 8585.824653091158 19.711496402099463 2.078511013215859 0.10544663737424205
1992 256514224 2247151000000 111418440000 1.19 All grades 1.6870990734141125 8760.336814694534 20.168573532352454 2.007647897362794 0.09954337594289062
1993 259918588 2296378000000 114607080000 1.173 All grades 1.6380622837370242 8834.989516024918 20.0369645575125 1.9214470588235295 0.09589511691296161
1994 263125821 2357588000000 116523330000 1.174 All grades 1.597165991902834 8959.926437626204 20.232755105780104 1.8750728744939271 0.0926751134331802
1995 266278393 2422823000000 119405370000 1.205 All grades 1.5531496062992125 9098.834391718745 20.290737342885 1.8715452755905513 0.0922364349783875
1996 269394284 2499779000000 120969030000 1.288 All grades 1.508604206500956 9279.257758861728 20.664619696462804 1.9430822179732312 0.09402942064817345
1997 272646925 2568404000000 122900610000 1.291 All grades 1.4747663551401868 9420.256619435557 20.89822011461131 1.903923364485981 0.0911045703435205
1998 275854104 2644672000000 126518490000 1.115 All grades 1.4521472392638035 9587.21281159551 20.90344265095165 1.6191441717791408 0.07745825406923713
1999 279040168 2707236000000 129247230000 1.221 All grades 1.4207683073229291 9701.95803494499 20.94618198007029 1.7347581032412966 0.08281977617170856
2000 282162411 2764484000000 129875760000 1.563 All grades 1.3745644599303135 9797.492125909004 21.285604026494244 2.14844425087108 0.10093414535931919
2001 284968955 2813416000000 131991300000 1.531 All grades 1.336533032185206 9872.710520344224 21.315162438736493 2.0462320722755503 0.09599889647366185
2002 287625193 2873612000000 135639840000 1.441 All grades 1.3157309616453585 9990.821631539071 21.185604465472682 1.8959683157309617 0.0894932367316176
2003 290107933 2908778000000 136973550000 1.638 All grades 1.2864130434782608 10026.537261219948 21.236056158287493 2.107144565217391 0.09922485368805477
2004 292805298 2982017000000 139579650000 1.923 All grades 1.2530439385918475 10184.300012221773 21.364267642167036 2.409603493912123 0.11278661802365018
2005 295516599 3009218000000 140407470000 2.338 All grades 1.2119815668202765 10182.906849168226 21.432036343935263 2.8336129032258066 0.13221389035333775
2006 298379912 3033753000000 141848490000 2.635 All grades 1.1741071428571428 10167.417034428243 21.38727736897305 3.093772321428571 0.14465479958270744
2007 301231207 3049027000000 142354380000 2.849 All grades 1.1418234442836468 10121.882889776423 21.418568223893075 3.25305499276411 0.15188013310503298
2008 304093966 2992705000000 137801370000 3.317 All grades 1.0993961913608916 9841.38238375963 21.71752719149309 3.6466971667440777 0.1679149350010951
2009 306771529 2975804000000 137924010000 2.401 All grades 1.1034965034965034 9700.391720510674 21.575677795330922 2.6494951048951045 0.12280008674714579
2010 309349689 2985094506000 137862690000 2.836 All grades 1.0852819807427785 9649.57978671186 21.65266400938499 3.0778596973865198 0.1421469291747414
2011 311721632 2964720000000 134183490000 3.577 All grades 1.0524677634504223 9510.793270837232 22.09452146460045 3.7646771898621605 0.17038962332331462
2012 314112078 2968815000000 133095060000 3.695 All grades 1.030923344947735 9451.451274662542 22.305974391536395 3.8092617595818807 0.17077316115933663
2013 316497531 2988322739000 135563190000 3.584 All grades 1.0158798283261803 9441.851661711698 22.043762314828975 3.64091330472103 0.1651675087365538
<!DOCTYPE html>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
font: 14px Helvetica, Arial, sans-serif;
}
path,
line {
fill: none;
stroke: #000;
}
.axis path,
.axis line {
shape-rendering: crispEdges;
stroke: #ccc;
}
.axis path {
display: none;
}
.connection {
stroke-width: 2px;
}
circle {
fill: #fff;
stroke: #000;
stroke-width: 1px;
}
div.controls {
padding-top: 0.5em;
text-align: center;
}
div.button {
background-color: #fff;
border: 1px solid #ccc;
color: #333;
padding: 0.5em 1em;
line-height: 140%;
vertical-align: middle;
cursor: pointer;
text-align: center;
display: inline-block;
}
g.year text {
font-size: 12px;
letter-spacing: 0.03em;
}
div.button:hover,
div.button:focus,
div.button:active,
div.button.active {
background-color: #ebebeb;
border-color: #adadad;
}
div.button:active,
div.button.active {
color: #000;
outline: 0;
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
div.outer {
width: 960px;
margin: 0 auto;
}
</style>
<body>
<div class="outer">
<div class="controls">
<div class="button active">Cost per gallon</div><div class="button">Cost per mile</div>
</div>
<div class="chart"></div>
</div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = { top: 10, right: 110, bottom: 40, left: 10 },
width = 960 - margin.left - margin.right,
height = 440 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var highlight = [1949,1974,1980,1990,2000,2008,2013];
var yTicks = {
gasPriceAdjusted: {
ticks: d3.range(1.5, 4.5, 0.5),
domain: [1.07715, 4.41543],
suffix: "per gallon"
},
dollarsPerMile: {
ticks: d3.range(0.09, 0.27, 0.03),
domain: [0.06463, 0.26492],
suffix: "per mile"
}
};
var xAxis = d3.svg.axis()
.scale(x)
.tickSize(-height)
.tickFormat(function(d) {
return d3.format(",.2")(d) + " mi.";
})
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.tickSize(-width)
.tickValues(yTicks.gasPriceAdjusted.ticks)
.tickFormat(yFormat("gasPriceAdjusted"))
.orient("right");
var line = d3.svg.line()
.x(get("milesPerCapita", x));
var point = function(d) {
return "translate(" + line.x()(d) + " " + line.y()(d) + ")";
};
var svg = d3.select(".chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("gas-prices.csv",function(error, data) {
data.forEach(function(d) {
for (var key in d) {
d[key] = +d[key];
}
});
x.domain([2500, 10500]);
y.domain(yTicks.gasPriceAdjusted.domain);
line.y(get("gasPriceAdjusted", y));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.text("Miles driven per capita")
.attr("transform", "translate(" + width + ")")
.attr("dy", "2.5em")
.attr("text-anchor", "end");
var yg = svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ")")
.call(yAxis);
yg.append("text")
.text("Avg. gas price")
.attr("dy", "2.5em");
var path = svg.append("path")
.attr("class", "connection")
.datum(data)
.attr("d", line);
var circles = svg.selectAll("g.year")
.data(data)
.enter()
.append("g")
.attr("class", "year")
.attr("transform", point);
circles.append("circle")
.attr("r", 5);
circles.filter(function(d) {
return highlight.indexOf(d.year) !== -1;
})
.append("text")
.text(get("year"))
.attr("dy","-0.6em")
.attr("dx",function(d) {
return (d.year === 2008 ? "0.45em" : "-0.6em");
})
.attr("text-anchor",function(d) {
return (d.year === 2008 ? "start" : "end");
});
var buttons = d3.selectAll(".button")
.data(["gasPriceAdjusted", "dollarsPerMile"])
.on("click", update);
function update(yVar) {
buttons.classed("active",function(d) {
return d === yVar;
});
y.domain(yTicks[yVar].domain);
yAxis.tickValues(yTicks[yVar].ticks)
.tickFormat(yFormat(yVar));
line.y(get(yVar, y));
yg.transition()
.duration(250)
.call(yAxis);
path.transition()
.duration(250)
.attr("d", line);
circles.transition()
.duration(250)
.attr("transform", point);
}
});
function yFormat(key) {
return function(d, i) {
var isLast = (i === yTicks[key].ticks.length - 1);
return d3.format("$.2f")(d) + (isLast ? " " + yTicks[key].suffix : "");
};
}
function get(p, f) {
if (f) {
return function(d) {
return f(d[p]);
};
}
return function(d) {
return d[p];
};
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment