inflation index

_.md

[ Launch: inflation index ] 6787127 by enoex
[ Launch: inflation income ] 6153454 by enjalot
[ Launch: inflation income ] 6152634 by enoex

config.json

{"description":"inflation index","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"raises.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/q2jDcGh.png"}

inlet.js

var raises = tributary.raises.map(function(d) {
  return {
    year: d.Year,
    raise: +d['raise-index'],
    union: +d['union-raise-index'],
    inflation: +d['inflation-index'],
    SF: +d['case-shiller-SF'],
    comp: +d['case-shiller-comp-20'],
    CA: +d['CA-wage-inflation']
  }
})

var currentYear = 2013;

// --------------------------------------
// Viz Setup
// --------------------------------------
var margin = {top: 20, right: 20, bottom: 30, left: 80},
    width = 750 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// Setup scales
// --------------------------------------
var xScale = d3.scale.linear()
    .range([0, width])
    .domain([1997, 2017]);

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

// extent will update based on data
var yExtent = [91,195];
var yExtentHousing = [91, 227];
yScale.domain(yExtent)

var color = d3.scale.category20c();


// Setup axes
// --------------------------------------
var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(raises.length)
    .tickFormat(function(d){ return d + ''; })
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width - (margin.left + margin.right))
    /*.tickFormat(function(d){
        return d3.format('$,')(d);
    })*/
    .orient("left");

// Setup SVG
// --------------------------------------
var svg = d3.select('svg')
    .attr({
        width: width + margin.left + margin.right,
        height: height + margin.top + margin.bottom
    })
    .append("g")
        .attr({
            transform: "translate(" + margin.left + "," + margin.top + ")"
        });

// Setup groups
// --------------------------------------
// Draw initial axes
var axesGroup = svg.append('g').attr({ 'class': 'axes' });

var xAxisGroup = axesGroup.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

var yAxisGroup = axesGroup.append("g")
    .attr("class", "y axis");

yAxisGroup.call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    //.text("Income ($)");

// Income lines
var incomeLines = svg.append('svg:g').attr({ 'class': 'incomeLines' });

// Projected info
// --------------------------------------
// Draw a line representing projected info
svg.append('line')
    .attr({
        x1: xScale(currentYear),
        x2: xScale(currentYear),
        y1: 0,
        y2: height
    }).classed("current-year", true);


// --------------------------------------
// Income Paths
// --------------------------------------
var drawIndexLine = function(field, befaft){
  
  var slice = 14; //this should look up current year
  if(befaft === "before") {
    var data = raises.slice(0, slice)
  } else if(befaft === "after") {
    var data = raises.slice(slice-1)
  } else {
    var data = raises;
  }

  // Udpate y scale
  var extent = d3.extent(data, function(d) { return d[field]; });
  //if(extent[0] < yExtent[0]){ yExtent[0] = extent[0]; }
  //if(extent[1] > yExtent[1]){ yExtent[1] = extent[1]; }
  //yScale.domain(yExtent);

  // Setup line func
  var line = d3.svg.line()
      .x(function(d) { return xScale(d.year); })
      .y(function(d) { return yScale(d[field]); })
      .defined(function(d) { return d[field]; })
  .interpolate("cardinal")

  // Draw a new path for the income line
  var incomeLine = incomeLines.append("path")
      .datum(data)
      .attr({
          'class': "line inflation " + field + " " + befaft,
          d: line
      })
      .style({
          //stroke: color(Math.random() * 100 | 0) ,
          opacity: 1
      });

};

var updateIndexLines = function(){
  incomeLines.selectAll("path").remove()
  drawLines();

    // Update y scale
    yAxisGroup.transition().call(yAxis);
};
 //sue me..
function drawLines() {
drawIndexLine("inflation", "before")
drawIndexLine("inflation", "after")
drawIndexLine("raise", "before")
drawIndexLine("raise", "after")
drawIndexLine("union", "after")

drawIndexLine("comp", "all")
drawIndexLine("SF", "all")
drawIndexLine("CA", "all")
}

var ldata = [
  {name: "Union proposal", "class": "union after"},
  {name: "BART proposal", "class": "raise after"},
  {name: "Raises", "class": "raise before"},
  {name: "Inflation", "class": "inflation before"},
  {name: "Comp", "class": "comp all"},
  {name: "SF Housing", "class": "SF all"}
]

var legendWidth = 29;
var legend = svg.append("g").classed("legend", true)
.attr("transform", "translate(" + [width - legendWidth, 0] + ")")

var legs = legend.selectAll("g")
  .data(ldata)
  .enter()
.append("g")
.attr("transform", function(d,i) { return "translate(" + [10, 22 + i * 24 ] + ")"})
legs.append("text")
.text(function(d) { return d.name })
.attr("class", function(d) { return d['class'] })

legs.append("line")
.attr({
  x1: 10,
  x2: 30,
  y1: 0,
  y2: 0
}).attr("class", function(d) { return d['class'] + " line" });

var housing = false;
function toggleHousing() {
  housing = !housing;
  
  if(housing) {
    yScale.domain(yExtentHousing);
  } else {
    yScale.domain(yExtent);
  }
  updateIndexLines();
  d3.selectAll(".all").classed("hidden", !housing);
}
toggleHousing();
//toggleHousing();

raises.csv

style.css

.line {
    stroke-width: 3px;
}
.inflation {
  stroke: #ff0000;
}
.union {
  stroke: #029202;
}

.raise {
  stroke: #0000ff;
}

.after {
    stroke-dasharray: 5px 2px;
}

.comp {
  stroke: #39A8BD;
  stroke-width: 1px;
}
.SF {
   stroke: #39BD88;
  stroke-width: 1px;
}

.current-year {
    stroke-dasharray: 10px 4px;
}

.y.axis path {
  stroke: none;
}
path, line {
  fill: none;
  stroke: #000;

}

.legend text {
  text-anchor: end;
  font-size: 12px;
  alignment-baseline: middle;
  stroke: none;
}

.projected {
    stroke-dasharray: 2 2;
}
.y.axis .tick line {
    stroke: #d0d0d0;
    opacity: 0.5;
}
.axes .x.axis text {
    font-size: 10px;
}

.hidden {
  display: none;
}