D3 Examples - Censible Line Graph (run npm install)

xxxxxxxxxx
 
<html>
​
<style>
body { font: 12px Arial;}
path { stroke: steelblue; stroke-width: 2; fill: none; }
.axis path, .axis line { fill: none; stroke: grey; stroke-width: 1; shape-rendering: crispEdges; }
</style>
​
<body>
​
<div id='chart'></div>
​
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.js'></script>
​
<script id='settings' type='text/javascript'>
// Set the dimensions of the canvas / graph
var margin = { top: 30, right: 20, bottom: 30, left: 50 }
  , width  = 600 - margin.left - margin.right
  , height = 270 - margin.top - margin.bottom
​
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>
​
    