D3 Examples - South Napa Earthquake

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
        const width = 960;
    const height = 500;
    var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height)
    
    d3.json('data.json', function(err, data){
      const pixelsPerBar = 2;
      
      const rawDataPoints = data.acceleration.length;
      const barCount = width / pixelsPerBar;
      const pointsPerBin = rawDataPoints / barCount;
      
      // Hack: just take averages in the meantime
      const binnedAcceleration = data.acceleration
        .reduce(createBins, [[]])
        .map((bin) => d3.mean(bin));
​
      const max = d3.max(binnedAcceleration);
      const min = d3.min(binnedAcceleration);
      const greatest = Math.max(max, Math.abs(min));
      const colorScale = d3.scaleSequential(d3.interpolateReds)
        // .domain([greatest, 0])
        .domain([0, greatest])
​
      svg.selectAll('.bars')
        .data(binnedAcceleration).enter()
        .append('rect')
          .attr('width', pixelsPerBar)
          .attr('height', height)
          .attr('x', (d, i) => i * pixelsPerBar)
          .attr('y', 0)
          .attr('fill', (d) => colorScale(Math.abs(d)))
​
      function createBins(bins, currentValue, currentIndex) {
        const lastBin = bins[bins.length - 1];
        const binFilledUp = lastBin.length >= pointsPerBin;
        binFilledUp ? bins.push([currentValue]) : lastBin.push(currentValue);
        return bins;
      }
    })
​
  </script>
</body>
​
    