D3 Examples - FEM: Exercise 2 Line Chart

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
​
<body>
  <svg></svg>
  <script>
    var city = 'San Francisco';
    var width = 800;
    var height = 300;
    // In d3 there is a convention where a margin is defined to help us align our data
    var margin = {top: 20, bottom: 20, left: 20, right: 20};
    
    // dataset of city temperatures across time
    d3.tsv('data.tsv', (err, data) => {
      
      // clean the data
      data.forEach(d => {
        // Using d3.timeParse to get the correct format 
        d.date = d3.timeParse("%Y%m%d")(d.date);
        d.date = new Date(d.date); // x (date)
        // This is to convert the loaded value into a float in case it was loaded as a string
        ++d[city]; //y (temperature of one of the cities)
      });
      
      // Create the x scale, since we are using dates we need to use 'scaleTime'
      var xScale = d3.scaleTime()
        // We create our domain by using 'd3.extent' to get the min/max 
        // based on the dates, which are the x axis of this graph
        .domain(d3.extent(data, d => d.date))
        // We are starting the range from 'margin.left' so it displays 20px within the page (meaning the range starts from 20 rather than 0); otherwise it shows all the way to the left. We set the right to the width of the svg minus 20 px from the margin.right
        .range([margin.left, width - margin.right]);
      
      // Create the x axes, which will be used for our axes and to calculate the x axes of the rectangles
      var xAxis = d3.axisBottom()
        .scale(xScale)
        // Set the format for our ticks
          .tickFormat(d3.timeFormat('%b %Y'));
      
      // Append the x axes to the svg
      d3.select('svg')
        // Create a group of element that we can translate
        // so that the axis will be visible in the SVG
        .append('g')
        // We need to apply a transformation to the group so it displays correctly. In this case we set 
        .attr('transform', 'translate(' + [0, height - margin.bottom] + ')')
        // selection.call(xAxis) is the same as xAxis(selection)
        // and an axis will be created within the selection
        .call(xAxis);
      
      // Create the y scale, which will be used for our axes and to calculate the y axes of the rectangles
      var yScale = d3.scaleLinear()
        // We use extend based on the city's temp
        .domain(d3.extent(data, d => d[city]))
          // We do the range backwards due to how the y axis works in SVG
                .range([height - margin.bottom, margin.top]);
      
      // Create the y axes
      var yAxis = d3.axisLeft()
        .scale(yScale);
      
      // Append the y axes to the svg
      d3.select('svg')
        .append('g')
        .attr('transform', 'translate(' + [margin.left, 0] +')')
        .call(yAxis);           
      
      // Now create the line graph using d3 shapes
      // 1) Create the line
      var line = d3.line()
        .x(d => xScale(d.date))
        .y(d => yScale(d[city]));
      
      // 2) Append the path to the svg
            var svg = d3.select('svg')
        // We don't need to use 'enter/append' since we only have 1 path
                .append('path')
        .attr('d', line(data))
        // You have to remove the fill otherwise you won't see just the path
        .attr('fill', 'none')
          // And you have to set the stroke in order to see the path after removing the fill
        .attr('stroke', 'blue')
        .attr('curve', d3.curveCatmullRom());
      
                
      
    })
  </script>
</body>
​
    