line

forked from erpatterson11's block: fresh block

<!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 = 'New York'
    var width = 900
    var height = 300
    var margin = {
        left: 80,
        right: 10,
        top: 10,
        bottom: 10
      }
    
    // function to use .tsv file. all of our d3 manipulation will be done within the callback function
  d3.tsv('data.tsv', (err, data) => {
 
    // make date human readable & convert temp data from string to number
      data = data.slice(0,10)
        data.forEach(d => {
        		d.date = d3.timeParse('%Y%m%d')(d.date)
            d.date = new Date(d.date)
            ++d[city] // y
      })
      
      
      // X AXIS
      
      // get min and max from dataset (return array)
      var xExtent = d3.extent(data, d => d.date )       
      
      // creates a scale from time data
      var xScale = d3.scaleTime()
      // min and max of scale
      												.domain(xExtent) 
      // left and right positions of scale
      												.range([margin.left,width - margin.right])

// Y AXIS
      
      var yExtent = d3.extent(data, d => d[city])
      var yScale = d3.scaleLinear()
                              .domain(yExtent) // min and max datapoints to include on axis
                              .range([height-margin.bottom, margin.bottom]) // pixel size of axis?

// preparing to do stuff with svg tab
   		var svg = d3.select('svg')
   
  		var line = d3.line()
      										.x(d => xScale( d.date ) )
      										.y(d => yScale( d[city] ) )
      										.curve(d3.curveStepBefore)
      
      svg.append('path')
      			.attr('d', line(data))
      			.attr('stroke', 'blue')
      			.attr('fill', 'none')
      
      
			// makes the axis
      var xAxis = d3.axisBottom()
                            .scale(xScale)
      // change tick formatting
                            .tickFormat(d3.timeFormat( '%b %Y' ))
           
      var yAxis = d3.axisLeft()
    												.scale(yScale)
            
       // appends axis to svg   
   		var axisGroup = svg.append('g')
        	.attr('transform', `translate(${margin.left}, ${margin.top} )`)
          .call(yAxis)
        
      svg.append('g')
          .attr('transform', `translate(${0},${height})` )
          .call(xAxis)
   
   
      })
    	
 
 
    
    
  </script>
</body>

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