D3 Examples

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 = '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>
​
    