inflation income

_.md

[ Launch: inflation income ] 6152634 by enoex

config.json

{"description":"inflation income","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}},"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/fRvU3yD.png"}

inlet.js

// --------------------------------------
// Utility Stuff
// --------------------------------------
var CPI = {
    1997 : 1.44651713395639,
    1998 : 1.42433128834356,
    1999 : 1.39355342136855,
    2000 : 1.34823461091754,
    2001 : 1.31093167701863,
    2002 : 1.29052807115064,
    2003 : 1.26177173913043,
    2004 : 1.22904182106935,
    2005 : 1.18876600102407,
    2006 : 1.15161706349206,
    2007 : 1.11972489895921,
    
    // Start here for average of last 6 years
    2008 : 1.07832217851121,
    2009 : 1.08217230594256,
    2010 : 1.06470814836556,
    2011 : 1.03212871045039,
    2012 : 1.01120238333754,
    2013 : 1,

    // PROJECTIONS
    // based on average change since 1997, average diff is -0.027907320872274377
    2014: 0.9720926791277256, 
    2015: 0.9441853582554511,
    2016: 0.9162780373831767,
    2017: 0.8883707165109023
};

var calculateInflated = function(amount, startYear, endYear) {
    var newAmount = (amount * (CPI[endYear] / CPI[startYear]));
    return newAmount;
};

var currentYear = 2013;
var spliceIndex = _.keys(CPI).indexOf(currentYear + '');


// Utility functions - data generation
// --------------------------------------
var generateInflatedData = function(amount){
    // Generates an array of values representing money affected by inflation
    // from a passed in amount
    var newData = []; 
    _.each(CPI, function(value, key){
        newData.push({
            year: key,
            value: calculateInflated(amount, currentYear, key)
        });
    });

    return _.sortBy(newData, function(d){ return d.year; });
};

// --------------------------------------
// Viz Setup
// --------------------------------------
var margin = {top: 20, right: 20, bottom: 30, left: 80},
    width = 840 - 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 = [0,0];

var color = d3.scale.category20c();


// Setup axes
// --------------------------------------
var xAxis = d3.svg.axis()
    .scale(xScale)
    .ticks(_.keys(CPI).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
    });


// --------------------------------------
// Income Paths
// --------------------------------------
var drawIncomeLine = function(income){
    // Draws a new income line 
    var allData = generateInflatedData(income);

    // get a copy of the data, we'll want to splice it on the projected data
    var data = _.clone(allData);
    var dataProjected = [data[spliceIndex]].concat(
        data.splice(spliceIndex + 1)
    );

    // Udpate y scale
    var extent = d3.extent(allData, function(d) { return d.value; });
    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.value); });

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

    // Draw projected line after the current year (2013)
    var projectedIncomeLine = incomeLines.append("path")
        .datum(dataProjected)
        .attr({
            'class': "line inflation projected",
            d: line
        })
        .style({
            stroke: color(Math.random() * 100 | 0) ,
            opacity: 1
        });

    // Update the existing lines
    updateIncomeLines();

};

var updateIncomeLines = function(){
    var line = d3.svg.line()
        .x(function(d) { return xScale(d.year); })
        .y(function(d) { return yScale(d.value); });

    // Updates all the income lines
    incomeLines.selectAll('path')
        .transition()
        .attr({ d: line });

    // Update y scale
    yAxisGroup.transition().call(yAxis);
};

// Draw income lines
// --------------------------------------
drawIncomeLine( 68000 );

style.css

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

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