Censible Line Graph (run npm install)

SETUP

$ npm install ./node_modules/.bin/browser-sync start --proxy="localhost:3000" --files="index.html"

<html>

<body>

var x = d3.time.scale().range([0, width])
  , y = d3.scale.linear().range([height, 0])

, xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(18)

, yAxis = d3.svg.axis().scale(y).orient("left").ticks(18)

, line = d3.svg.line()
      .x(function(d) { console.log(d.foo); return x(d.foo); })
      .y(function(d) { return y(d.cumulative_returns); })

// Adds the svg canvas
var svg = d3.select("div#chart")
  .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 + ")");

var format = function(row) {
  return {
    foo: new Date(row.year),
    cumulative_returns: parseFloat(row.composite_average_cum_returns),
    composite_cumulative_returns: parseFloat(row.composite_cum_returns),
    index_cumulative_returns: parseFloat(row.index_cum_returns)
  }
}

var plot = function(error, rows) {
  x.domain(d3.extent(rows, function(d) { return d.foo; }))
  y.domain([0, d3.max(rows, function(d) { return d.cumulative_returns; })])

var path = svg.append("path");
    path
      .attr("class", "line")
      .attr("d", line(rows));

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

// Add the Y Axis
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);
}

d3.csv("data.csv", format, plot)
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js