D3 Examples - Line Chart

Line Chart

This simple line chart is constructed from a TSV file storing the closing value of AAPL stock over the last few years. The chart employs conventional margins and a number of D3 features:

d3-dsv - parse tab-separated values

d3-time-format - date parsing and formatting

d3-scale - position encodings

d3-array - data processing

d3-axis - axes

d3-shape - lines

xxxxxxxxxx
 
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
  
  d3.json("data.json", function(data) {
   var canvas = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .attr("border", "black")
​
     var svg = d3.select("svg"),
      margin = {top: 20, right: 20, bottom: 30, left: 50},
      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 group = canvas.append("g")
        .attr("transform", "translate(100,10)")
​
   var line = d3.svg.line()
        .x(function(d, i) {
            return d.x;
        })
        .y(function(d, i) {
            return d.y;
        }); 
​
   group.selectAll("path")
        .data(data).enter()
        .append("path")
        .attr("d", function(d){ return line(d) })
        .attr("fill", "none")
        .attr("stroke", "green")
        .attr("stroke-width", 3);
});
  
</script>
​
    