FEM: Exercise 2 Line Chart

Built with blockbuilder.org

forked from sxywu's block: Selections: Data example

forked from sxywu's block: Selections: Enter example

forked from sxywu's block: Selections: Scale example

forked from sxywu's block: FEM: Exercise 1

forked from sxywu's block: FEM: Exercise 1 starter

forked from mars009's block: FEM: Exercise 1 starter

forked from mars009's block: FEM: Exercise 1 Solution

<!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>

https://d3js.org/d3.v4.min.js