481e72e6df4e3227f4c0 by davo

index.html

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

.axis path {
  display: none;
}

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

.group-label {
  font-weight: bold;
  text-anchor: end;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<form>
  <label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
  <label><input type="radio" name="mode" value="stacked"> Stacked</label>
</form>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var parseDate = d3.time.format("%e/%Y").parse;

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

var y0 = d3.scale.ordinal()
    .rangeRoundBands([height, 0], .2);

var y1 = d3.scale.linear();

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 0);

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

var nest = d3.nest()
    .key(function(d) { return d.group; });

var stack = d3.layout.stack()
    .values(function(d) { return d.values; })
    .x(function(d) { return d.date; })
    .y(function(d) { return d.value; })
    .out(function(d, y0) { d.valueOffset = y0; });

var color = d3.scale.category10();

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 + ")");

d3.csv("data.csv", function(error, data) {

  /*

  ,  function(d) {
    return {
      date: parseDate(d['Date']),
      di: +d['Disability Insurance'],
      li: +d['Life Insurance'],
      retirement: +d['Retirement'],
      family: +d['Grow their family'],
      cc: +d['Credit Card'],
      emergency: +d['Emergency Fund'],
      education: +d['Education'],
      od: +d['Other Debt'],
      house: +d['Buy a house'],
      starting_business: +d['Starting a Business'],
      total: +d['Total Contribution']
    };
  }

  */

  var labelVar = 'Date';
  var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});
  // color.domain(varNames);

  data.forEach(function (d) {
   var y0 = 0;
   d.mapping = varNames.map(function (name) {
     return {
       name: name,
       label: d[labelVar],
       y0: y0,
       y1: y0 += +d[name]
     };
   });
   d.total = d.mapping[d.mapping.length - 1].y1;
  });

  console.log(data)

  x.domain(data.map(function (d) { return d.quarter; }));
  y.domain([0, d3.max(data, function (d) { return d.total; })]);


  // data.forEach(function(d) {
  //   d['Date'] += parseDate(d['Date']);
  //   d['Disability Insurance'] += d['Disability Insurance'];
  //   d['Life Insurance'] += d['Life Insurance'];
  //   d['Retirement'] += d['Retirement'];
  //   d['Grow their family'] += d['Grow their family'];
  //   d['Credit Card'] += d['Credit Card'];
  //   d['Emergency Fund'] += d['Emergency Fund'];
  //   d['Education'] += d['Education'];
  //   d['Other Debt'] += d['Other Debt'];
  //   d['Buy a house'] += d['Buy a house'];
  //   d['Starting a Business'] += d['Starting a Business'];
  //   d['Total Contribution'] += d['Total Contribution'];
  // });

  console.log(data[0]);

  // var dataByGroup = nest.entries(data);

  // console.log(dataByGroup);

  // stack(dataByGroup);
  x.domain(dataByGroup[0].values.map(function(d) { return d.date; }));
  // y0.domain(dataByGroup.map(function(d) { return d.key; }));
  y1.domain([0, d3.max(data, function(d) { return d.total; })]).range([y0.rangeBand(), 0]);

  var group = svg.selectAll(".group")
      .data(dataByGroup)
    .enter().append("g")
      .attr("class", "group")
      .attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });

  group.append("text")
      .attr("class", "group-label")
      .attr("x", -6)
      .attr("y", function(d) { return y1(d.values[0].value / 2); })
      .attr("dy", ".35em")
      .text(function(d) { return "Group " + d.key; });

  group.selectAll("rect")
      .data(function(d) { return d.values; })
    .enter().append("rect")
      .style("fill", function(d) { return color(d.group); })
      .attr("x", function(d) { return x(d.date); })
      .attr("y", function(d) { return y1(d.value); })
      .attr("width", x.rangeBand())
      .attr("height", function(d) { return y0.rangeBand() - y1(d.value); });

  group.filter(function(d, i) { return !i; }).append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + y0.rangeBand() + ")")
      .call(xAxis);

  d3.selectAll("input").on("change", change);

  var timeout = setTimeout(function() {
    d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
  }, 2000);

  function change() {
    clearTimeout(timeout);
    if (this.value === "multiples") transitionMultiples();
    else transitionStacked();
  }

  function transitionMultiples() {
    var t = svg.transition().duration(750),
        g = t.selectAll(".group").attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
    g.selectAll("rect").attr("y", function(d) { return y1(d.value); });
    g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); })
  }

  function transitionStacked() {
    var t = svg.transition().duration(750),
        g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")");
    g.selectAll("rect").attr("y", function(d) { return y1(d.value + d.valueOffset); });
    g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2 + d.values[0].valueOffset); })
  }
});

</script>

data.csv

Date,Disability Insurance,Life Insurance,Retirement,Grow their family,Credit Card,Emergency Fund,Education,Other Debt,Buy a house,Starting a Business,Total Contribution
5/2017,20,93.39,399.32,0,457.00,0,0,500.49,0,0,1470.20
6/2017,20,93.39,399.32,2.13,449.65,1.98,0,500.49,0,0,1466.96
7/2017,20,93.39,399.32,374.95,732.78,349.76,0,500.49,0,0,2470.69
8/2017,20,93.39,399.32,378.27,726.36,352.86,0,500.49,0,0,2470.69
9/2017,20,93.39,399.32,380.85,721.37,355.27,0,500.49,0,0,2470.69
10/2017,20,93.39,598.97,1158.55,1318.55,1080.73,0,500.49,0,0,4770.69
11/2017,20,93.39,399.32,386.39,710.67,360.43,0,500.49,0,0,2470.69
12/2017,20,93.39,399.32,388.97,705.68,362.84,0,500.49,0,0,2470.69
1/2018,20,93.39,991.30,150.66,606.10,108.75,0,500.49,0,0,2470.69
2/2018,20,93.39,991.30,152.90,602.23,110.37,0,500.49,0,0,2470.69
3/2018,20,93.39,991.30,155.15,598.36,111.99,0,500.49,0,0,2470.69
4/2018,20,93.39,1486.96,2982.45,4535.10,2152.78,0,500.49,0,0,11771.18
5/2018,20,93.39,991.30,159.32,591.18,115.00,0,500.49,0,0,2470.69
6/2018,20,93.39,991.30,161.25,587.86,116.39,0,500.49,0,0,2470.69
7/2018,20,93.39,991.30,163.17,584.55,117.78,0,500.49,0,0,2470.69
8/2018,20,93.39,991.30,165.10,581.23,119.17,0,500.49,0,0,2470.69
9/2018,20,93.39,1486.96,745.70,1385.89,538.26,0,500.49,0,0,4770.69
10/2018,20,93.39,991.30,168.63,575.15,121.72,0,500.49,0,0,2470.69
11/2018,20,93.39,991.30,170.23,572.39,122.88,0,500.49,0,0,2470.69
12/2018,20,93.39,991.30,171.84,569.63,124.03,0,500.49,0,0,2470.69
1/2019,20.60,93.39,1283.04,152.76,470.26,74.76,0,500.49,0,0,2595.30
2/2019,20.60,93.39,1283.04,154.81,467.21,75.76,0,500.49,0,0,2595.30
3/2019,20.60,93.39,1924.56,862.88,1140.13,422.25,0,500.49,0,0,4964.30
4/2019,20.60,93.39,1283.04,3525.00,3219.03,1164.26,0,500.49,0,0,9805.80
5/2019,20.60,93.39,1283.04,697.78,0,0,0,500.49,0,0,2595.30
6/2019,20.60,93.39,1283.04,697.78,0,0,0,500.49,0,0,2595.30
7/2019,20.60,93.39,1283.04,697.78,0,0,0,500.49,0,0,2595.30
8/2019,20.60,93.39,1283.04,697.78,0,0,0,500.49,0,0,2595.30
9/2019,20.60,93.39,1924.56,2425.26,0,0,0,500.49,0,0,4964.30
10/2019,20.60,93.39,1283.04,697.78,0,0,0,500.49,0,0,2595.30
11/2019,20.60,93.39,1283.04,697.78,0,0,0,500.49,0,0,2595.30
12/2019,20.60,93.39,1283.04,697.78,0,0,0,500.49,0,0,2595.30
1/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
2/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
3/2020,21.22,93.39,2340.25,2208.37,0,0,0,500.49,0,0,5163.71
4/2020,21.22,93.39,1590.25,7945.12,0,0,0,500.49,0,0,10150.46
5/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
6/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
7/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
8/2020,21.22,93.39,2340.25,2208.37,0,0,0,500.49,0,0,5163.71
9/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
10/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
11/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
12/2020,21.22,93.39,1590.25,518.30,0,0,0,500.49,0,0,2723.64
1/2021,21.85,93.39,2682.86,2070.52,0,0,0,500.49,0,0,5369.12
2/2021,21.85,93.39,1913.63,326.48,0,0,0,500.49,0,0,2855.84
3/2021,21.85,93.39,1913.63,326.48,0,0,0,500.49,0,0,2855.84
4/2021,21.85,93.39,1913.63,7976.11,0,0,0,500.49,0,0,10505.47
5/2021,21.85,93.39,1913.63,326.48,0,0,0,500.49,0,0,2855.84
6/2021,21.85,93.39,1913.63,326.48,0,0,0,500.49,0,0,2855.84
7/2021,21.85,93.39,1913.63,326.48,0,0,0,500.49,0,0,2855.84
8/2021,21.85,93.39,2682.86,372.79,0,0,524.16,1095.67,506.73,71.67,5369.12
9/2021,21.85,93.39,1913.63,0,0,0,100.80,614.94,97.45,13.78,2855.84
10/2021,21.85,93.39,1913.63,0,0,0,100.80,614.94,97.45,13.78,2855.84
11/2021,21.85,93.39,1913.63,0,0,0,100.80,614.94,97.45,13.78,2855.84
12/2021,21.85,93.39,1913.63,0,0,0,100.80,614.94,97.45,13.78,2855.84
1/2022,22.51,93.39,3000.08,0,0,0,248.49,1931.02,235.54,49.65,5580.68
2/2022,22.51,93.39,2211.62,0,0,0,20.75,619.93,19.67,4.15,2992.01
3/2022,22.51,93.39,2211.62,0,0,0,20.75,619.93,19.67,4.15,2992.01
4/2022,22.51,93.39,2211.62,0,0,0,1017.52,6358.28,964.52,203.29,10871.12
5/2022,22.51,93.39,2211.62,0,0,0,20.75,619.93,19.67,4.15,2992.01
6/2022,22.51,93.39,2211.62,0,0,0,20.75,619.93,19.67,4.15,2992.01
7/2022,22.51,93.39,3000.08,0,0,0,838.45,715.13,779.86,131.26,5580.68
8/2022,22.51,93.39,2211.62,0,0,0,322.42,0,297.47,44.60,2992.01
9/2022,22.51,93.39,2211.62,0,0,0,322.42,0,297.47,44.60,2992.01
10/2022,22.51,93.39,2211.62,0,0,0,322.42,0,297.47,44.60,2992.01
11/2022,22.51,93.39,2211.62,0,0,0,322.42,0,297.47,44.60,2992.01
12/2022,22.51,93.39,2211.62,0,0,0,322.42,0,297.47,44.60,2992.01
1/2023,23.19,93.39,3181.97,0,0,0,1134.46,0,1015.32,350.26,5798.59
2/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
3/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
4/2023,23.19,93.39,2404.19,0,0,0,3960.08,0,3544.21,1222.68,11247.74
5/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
6/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
7/2023,23.19,93.39,3181.97,0,0,0,1134.46,0,1015.32,350.26,5798.59
8/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
9/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
10/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
11/2023,23.19,93.39,2404.19,0,0,0,277.48,0,248.34,85.67,3132.26
12/2023,23.19,93.39,3181.97,0,0,0,1134.46,0,1015.32,350.26,5798.59
1/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
2/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
3/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
4/2024,23.88,93.39,2570.95,0,0,0,4132.94,0,3453.47,1361.03,11635.67
5/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
6/2024,23.88,93.39,3417.11,0,0,0,1149.54,0,960.55,378.56,6023.04
7/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
8/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
9/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
10/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
11/2024,23.88,93.39,2570.95,0,0,0,271.83,0,227.14,89.52,3276.72
12/2024,23.88,93.39,3417.11,0,0,0,1149.54,0,960.55,378.56,6023.04
1/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
2/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
3/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
4/2025,24.60,93.39,3237.52,0,0,0,4247.27,0,3417.70,1014.75,12035.23
5/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
6/2025,24.60,93.39,4102.90,0,0,0,994.97,0,800.64,237.72,6254.22
7/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
8/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
9/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
10/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
11/2025,24.60,93.39,4102.90,0,0,0,994.97,0,800.64,237.72,6254.22
12/2025,24.60,93.39,3237.52,0,0,0,34.25,0,27.56,8.18,3425.51
1/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
2/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
3/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
4/2026,25.34,93.39,3404.03,0,0,0,4412.43,0,3480.85,1030.73,12446.77
5/2026,25.34,93.39,4288.65,0,0,0,1030.89,0,813.25,240.81,6492.33
6/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
7/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
8/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
9/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
10/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
11/2026,25.34,93.39,4288.65,0,0,0,1030.89,0,813.25,240.81,6492.33
12/2026,25.34,93.39,3404.03,0,0,0,27.69,0,21.84,6.47,3578.76
1/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
2/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
3/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
4/2027,26.10,93.39,3572.13,0,0,0,4553.28,0,3588.44,1037.32,12870.66
5/2027,26.10,93.39,4495.20,0,0,0,1053.07,0,829.92,239.91,6737.59
6/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
7/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
8/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
9/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
10/2027,26.10,93.39,4495.20,0,0,0,1053.07,0,829.92,239.91,6737.59
11/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
12/2027,26.10,93.39,3572.13,0,0,0,22.32,0,17.59,5.09,3736.61
1/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
2/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
3/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
4/2028,26.88,93.39,4686.24,0,0,0,5714.34,0,4601.25,1276.19,16398.28
5/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
6/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
7/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
8/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
9/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
10/2028,26.88,93.39,4686.24,0,0,0,1076.49,0,866.80,240.41,6990.21
11/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
12/2028,26.88,93.39,3743.93,0,0,0,17.25,0,13.89,3.85,3899.20
1/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
2/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
3/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
4/2029,27.68,93.39,4898.36,0,0,0,5771.29,0,4879.69,1270.31,16940.72
5/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
6/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
7/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
8/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
9/2029,27.68,93.39,4898.36,0,0,0,1080.05,0,913.19,237.73,7250.40
10/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
11/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
12/2029,27.68,93.39,3917.59,0,0,0,13.56,0,11.46,2.98,4066.67
1/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
2/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
3/2030,28.52,93.39,5419.17,0,0,0,928.73,0,852.91,195.69,7518.41
4/2030,28.52,93.39,4092.25,0,0,0,4699.71,0,4316.05,990.26,14220.18
5/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
6/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
7/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
8/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
9/2030,28.52,93.39,5419.17,0,0,0,928.73,0,852.91,195.69,7518.41
10/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
11/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
12/2030,28.52,93.39,4092.25,0,0,0,11.74,0,10.78,2.47,4239.16
1/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
2/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
3/2031,29.37,93.39,5653.67,0,0,0,896.37,0,929.21,192.43,7794.45
4/2031,29.37,93.39,4269.06,0,0,0,4577.54,0,4745.21,982.71,14697.28
5/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
6/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
7/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
8/2031,29.37,93.39,5653.67,0,0,0,896.37,0,929.21,192.43,7794.45
9/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
10/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
11/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
12/2031,29.37,93.39,4269.06,0,0,0,11.10,0,11.51,2.38,4416.82
1/2032,30.25,93.39,4451.17,0,0,0,9.24,0,11.42,4.34,4599.81
2/2032,30.25,93.39,5874.25,0,0,0,768.90,0,950.43,361.55,8078.77
3/2032,30.25,93.39,4451.17,0,0,0,9.24,0,11.42,4.34,4599.81
4/2032,30.25,93.39,4451.17,0,0,0,4045.47,0,5000.58,1902.22,15523.08
5/2032,30.25,93.39,4451.17,0,0,0,748.43,0,925.13,351.92,6600.30
6/2032,30.25,93.39,4451.17,0,0,0,850.40,0,1015.97,159.12,6600.30
7/2032,30.25,93.39,4451.17,0,0,0,1071.19,0,954.30,0,6600.30
8/2032,30.25,93.39,5874.25,0,0,0,2158.46,0,1922.91,0,10079.26
9/2032,30.25,93.39,4451.17,0,0,0,1071.19,0,954.30,0,6600.30
10/2032,30.25,93.39,4451.17,0,0,0,1071.19,0,954.30,0,6600.30
11/2032,30.25,93.39,4451.17,0,0,0,1071.19,0,954.30,0,6600.30
12/2032,30.25,93.39,4451.17,0,0,0,1071.19,0,954.30,0,6600.30
1/2033,31.16,93.39,7637.29,0,0,0,835.95,0,1774.33,0,10372.11
2/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
3/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
4/2033,31.16,93.39,6175.75,0,0,0,3649.28,0,7745.74,0,17695.32
5/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
6/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
7/2033,31.16,93.39,7637.29,0,0,0,835.95,0,1774.33,0,10372.11
8/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
9/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
10/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
11/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
12/2033,31.16,93.39,6175.75,0,0,0,156.44,0,332.05,0,6788.79
1/2034,32.09,93.39,7795.95,0,0,0,585.62,0,2166.70,0,10673.75
2/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
3/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
4/2034,32.09,93.39,6351.50,0,0,0,2497.88,0,9241.79,0,18216.66
5/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
6/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
7/2034,32.09,93.39,7795.95,0,0,0,585.62,0,2166.70,0,10673.75
8/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
9/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
10/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
11/2034,32.09,93.39,6351.50,0,0,0,107.65,0,398.29,0,6982.93
12/2034,32.09,93.39,7795.95,0,0,0,585.62,0,2166.70,0,10673.75
1/2035,33.06,93.39,6532.53,0,0,0,90.04,0,433.86,0,7182.89
2/2035,33.06,93.39,6532.53,0,0,0,90.04,0,433.86,0,7182.89
3/2035,33.06,93.39,6532.53,0,0,0,90.04,0,433.86,0,7182.89
4/2035,33.06,93.39,6532.53,0,0,0,499.09,0,11595.56,0,18753.63
5/2035,33.06,93.39,6532.53,0,0,0,0,0,523.91,0,7182.89
6/2035,33.06,93.39,6532.53,0,0,0,0,0,523.91,0,7182.89
7/2035,33.06,93.39,8090.23,0,0,0,0,0,2767.76,0,10984.44
8/2035,33.06,93.39,6532.53,0,0,0,0,0,523.91,0,7182.89
9/2035,33.06,93.39,6532.53,0,0,0,0,0,523.91,0,7182.89
10/2035,33.06,93.39,6532.53,0,0,0,0,0,523.91,0,7182.89
11/2035,33.06,93.39,6532.53,0,0,0,0,0,523.91,0,7182.89
12/2035,33.06,93.39,8090.23,0,0,0,0,0,2767.76,0,10984.44
1/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
2/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
3/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
4/2036,34.05,93.39,6718.99,0,0,0,0,0,12460.28,0,19306.72
5/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
6/2036,34.05,93.39,8334.38,0,0,0,0,0,2842.63,0,11304.45
7/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
8/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
9/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
10/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
11/2036,34.05,93.39,8334.38,0,0,0,0,0,2842.63,0,11304.45
12/2036,34.05,93.39,6718.99,0,0,0,0,0,542.42,0,7388.85
1/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
2/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
3/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
4/2037,35.07,93.39,6911.04,0,0,0,0,0,12836.89,0,19876.39
5/2037,35.07,93.39,8564.89,0,0,0,0,0,2940.70,0,11634.05
6/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
7/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
8/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
9/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
10/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
11/2037,35.07,93.39,8564.89,0,0,0,0,0,2940.70,0,11634.05
12/2037,35.07,93.39,6911.04,0,0,0,0,0,561.48,0,7600.99
1/2038,36.12,93.39,7108.86,0,0,0,0,0,581.12,0,7819.49
2/2038,36.12,93.39,7108.86,0,0,0,0,0,581.12,0,7819.49
3/2038,36.12,93.39,7108.86,0,0,0,0,0,581.12,0,7819.49
4/2038,36.12,93.39,7108.86,0,0,0,0,0,13224.79,0,20463.16
5/2038,36.12,93.39,8801.17,0,0,0,0,0,3042.87,0,11973.55
6/2038,36.12,93.39,7108.86,0,0,0,0,0,581.12,0,7819.49
7/2038,36.12,93.39,7108.86,0,0,0,0,0,581.12,0,7819.49
8/2038,36.12,93.39,7108.86,0,0,0,0,0,581.12,0,7819.49
9/2038,36.12,93.39,7108.86,0,0,0,0,0,581.12,0,7819.49
10/2038,36.12,93.39,8801.17,0,0,0,0,0,3042.87,0,11973.55
11/2038,36.12,93.39,7108.86,0,0,0,0,0,755.83,0,7994.20
12/2038,36.12,93.39,7108.86,0,0,0,0,0,1081.12,0,8319.49
1/2039,37.21,93.39,7312.61,0,0,0,0,0,1101.35,0,8544.55
2/2039,37.21,93.39,7312.61,0,0,0,0,0,1101.35,0,8544.55
3/2039,37.21,93.39,7312.61,0,0,0,0,0,1101.35,0,8544.55
4/2039,37.21,93.39,7312.61,0,0,0,0,0,14124.32,0,21567.53
5/2039,37.21,93.39,9043.38,0,0,0,0,0,3649.26,0,12823.23
6/2039,37.21,93.39,7312.61,0,0,0,0,0,1101.35,0,8544.55
7/2039,37.21,93.39,7312.61,0,0,0,0,0,1101.35,0,8544.55
8/2039,37.21,93.39,7312.61,0,0,0,0,0,1101.35,0,8544.55
9/2039,37.21,93.39,7312.61,0,0,0,0,0,1101.35,0,8544.55
10/2039,37.21,93.39,9043.38,0,0,0,0,0,x,0,9173.97
11/2039,37.21,93.39,7312.61,0,0,0,0,0,0,0,7443.20
12/2039,37.21,93.39,7312.61,0,0,0,0,0,0,0,7443.20
1/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
2/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
3/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
4/2040,38.32,93.39,9330.16,0,0,0,0,0,0,0,9461.87
5/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
6/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
7/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
8/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
9/2040,38.32,93.39,9330.16,0,0,0,0,0,0,0,9461.87
10/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
11/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
12/2040,38.32,93.39,7522.47,0,0,0,0,0,0,0,7654.18
1/2041,39.47,93.39,0,0,0,0,0,0,0,0,132.86

index-alt.html

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

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

.axis path {
  display: none;
}

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

.group-label {
  font-weight: bold;
  text-anchor: end;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<svg width="960" height="500"></svg>

<script src="//d3js.org/d3.v4.min.js"></script>
<script>

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

var parseDate = d3.timeParse("%e/%Y");

// var color = d3.scale.category10();


var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var retirementLine = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.retirement); });

var z = d3.scaleOrdinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

d3.csv("data.csv", function(d) {
    return {
      date: parseDate(d['Date']),
      di: +d['Disability Insurance'],
      li: +d['Life Insurance'],
      retirement: +d['Retirement'],
      family: +d['Grow their family'],
      cc: +d['Credit Card'],
      emergency: +d['Emergency Fund'],
      education: +d['Education'],
      od: +d['Other Debt'],
      house: +d['Buy a house'],
      starting_business: +d['Starting a Business'],
      total: +d['Total Contribution']
    };
  }, function(error, data) {

  // console.log(data)

  // data.forEach(function(d) {
  //   d.date = parseDate(d['Date']),
  //   d.di = +d['Disability Insurance'],
  //   d.li = +d['Life Insurance'],
  //   d.retirement = +d['Retirement'],
  //   d.family = +d['Grow their family'],
  //   d.cc = +d['Credit Card'],
  //   d.emergency = +d['Emergency Fund'],
  //   d.education = +d['Education'],
  //   d.od = +d['Other Debt'],
  //   d.house = +d['Buy a house'],
  //   d.starting_business = +d['Starting a Business'],
  //   d.total = +d['Total Contribution']
  // });

  if (error) throw error;

  // var keys = data.slice(1);

  x.domain(data.map(function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.retirement; })]).nice();

var goalsByMonth = d3.nest()
  .key(function(d) { return d.date; })
  .entries(data);

  // z.domain(keys);

  // var labelVar = 'date';
  // var varNames = d3.keys(data[0]).filter(function (key) { return key !== labelVar;});

  // // valuesByGoal = d3.nest()
  // //   .key(function(d) { return d.key})
  // //   .entries(data);

  // data.forEach(function (d) {
  //  var y0 = 0;
  //  d.mapping = varNames.map(function (name) {
  //    return {
  //      name: name,
  //      label: d[labelVar],
  //      y0: y0,
  //      y1: y0 += +d[name]
  //    };
  //  });
  // });

  console.debug(goalsByMonth[0]);


});
</script>