ix4

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 y

A version of this strip map with some labeled features.

Labels are a bit trickier than background features because you don't want to clip them to the zones, but you can't just create one copy per zone of each, or you'll get a bunch of identical labels approximately on top of each other and it will look weird. This uses a point-in-polygon test to assign each labeled point to its proper zone at the start. Once that assignment is done, you could put the labels in their own top layer if you had to worry about other features overlapping (not really an issue in this case).

D3 Inflation Explorer

bl.ocks.org link

![image-inflation][]

Explores inflation by visualizing relative prices in two different years.

Mouseover to view details on relative CPI and prices. Click on a tile to freeze details. 2015 years are highlighted in gold.

The project is created using D3.js.

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="initial-scale=1">

	<style type="text/css">
	body {
	background: black;

	<!DOCTYPE html>
	<head>

	<meta charset="utf-8">
	<script src = "https://feyderm.github.io/d3/d3.js"></script>
	<script src = "https://feyderm.github.io/d3/hexbin/hexbin.js"></script>
	<script src = "https://feyderm.github.io/d3/d3-legend-master/d3-legend.js"></script>
	<script src = "https://feyderm.github.io/js/viridis_colors.js"></script>

	</head>