Inflation adjuster

On blur, bar heights represent nominal dollars, and bar areas represent real dollars. Mousemoves along the date axis normalizes width, forcing height to represent real dollars.

Bar chart based on mbostock/3885304. Box office data from boxofficemojo.com. CPI from inflationdata.com.

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  overflow: visible;
}

g {
  pointer-events: all;
  font: 10px sans-serif;
}

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

</style>
<body>

var margin = {top: 20, right: 20, bottom: 30, left: 85},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10, "$,");

var svg = d3.select("body").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 + ")");

svg.append("rect")
  .attr('class', 'click-capture')
  .style('visibility', 'hidden')
  .attr('x', -margin.left)
  .attr('y', -margin.top)
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom);

var title = svg.append("text")
  .attr("dx", "1em")
  .attr("dy", "1em")
  .text("Hollywood annual box office grosses, nominal USD");

queue()
    .defer(d3.tsv, "boxoffice.tsv", dataType)
    .defer(d3.tsv, "cpi.tsv", indexType)
    .await(render);

function render(error, data, index) {
  if (error) throw error;

data.sort(function(a,b) { return a.year - b.year; });

x.domain(d3.extent(data, function(d) { return d.year; }));
  y.domain([0, d3.max(data, function(d) { return d.totalgross; })]);

index = indexer(index);

var maxRatio = d3.max(index.domain().map(function(year) { 
    var extent = d3.extent(data, ƒ('year'));
    return year >= extent[0] && year <= extent[1] ? 1 / index(year) : false; 
  }));

var inflation = d3.scale.linear()
    .range([0, width / data.length])
    .domain([0, maxRatio]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.year); })
      .attr("width", function(d) { return inflation(1 / index(d.year)); })
      .attr("y", function(d) { return y(d.totalgross); })
      .attr("height", function(d) { return height - y(d.totalgross); });

svg
    .on("mousemove", scrub)
    .on("touchmove", scrub)
    .on("mouseleave", reset)
    .on("touchend", reset);

function scrub() {
    var date = d3.touch(this) 
      ? x.invert(d3.touch(this))[0] 
      : x.invert(d3.mouse(this)[0]);

svg.selectAll(".bar")
      .transition()
      .ease("linear")
      .duration(100)
      .attr("width", function(d) { return inflation(1 / index(date)); })
      .attr("y", function(d) { return y(d.totalgross * (index(date) / index(d.year))); })
      .attr("height", function(d) { return height - y(d.totalgross * (index(date) / index(d.year))); })

title.text("Hollywood annual box office grosses, real " + date.getFullYear() + " USD");
  }

}

function dataType(d) {
  d.year = new Date(d.year);
  d.totalgross = +d.totalgross;
  return d;
}

function indexType(d) {
  d.date = new Date(d.year)
  d.average = +d.average;
  return d;
}

function indexer(index) {
  return d3.scale.linear()
    .domain(index.map(ƒ('date')))
    .range(index.map(ƒ('average')));
}

</script>

Modified http://d3js.org/queue.v1.min.js to a secure url

https://d3js.org/queue.v1.min.js