D3 Examples - City Bar Graph

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>
    // Feel free to change or delete any of the code you see in this editor!
    
   var city = 'New York'
   var width = 800
   var height = 300
   var margin = {top: 20, bottom: 20, left: 50, right: 20};
   
   d3.tsv('data.tsv', (err, data) => {
    data.map( d => {
       d.date = d3.timeParse('%Y%m%d')(d.date)
       d.date = new Date(d.date)
       ++d[city]
     })
     
    const rectWidth = width / data.length
     // date var contains parsed data from tsv file 
​
   // create the extents for either axis
   var xExtent = d3.extent( data, d => d.date)
   var xScale = d3.scaleTime()
     .domain(xExtent)
     .range([margin.left, width - margin.right])
   
   var yMax = d3.max(data, d => d[city])
   var yScale = d3.scaleLinear()
     .domain([0, yMax])
     .range([height - margin.bottom, margin.top]);
​
   var heightScale = d3.scaleLinear()
      .domain([0, yMax])
      .range([0, height - margin.top - margin.bottom]);
      
   // draw the axis on the left
   
   var yAxis = d3.axisLeft()
     .scale(yScale)
   
   var xAxis = d3.axisBottom()
     .scale(xScale)
   
   
   // draw the axis on the left
   
   var svg =d3.select('svg')
​
   svg.append('g')
     .attr('transform', 'translate(' + [margin.left, 0] + ')')
     .call(yAxis)
   
   svg
     .append('g')
     .attr('transform', `translate(0, ${height - margin.bottom})`)
     .call(xAxis)
    
   const rects = svg
     .append('g')
   .attr('transform', `translate(0, ${height - margin.bottom})`)
     .selectAll('circle')
     .data(data)
     .enter().append('cricle')
     .attr('r', 4)
     .attr('cx', d => xScale(d.date) )
     .attr('cy', d => yScale(d[city]))
     .attr('fill', 'blue')
    
   })
   
  </script>
</body>
​
    