Fire Reports — bare

forked from devgru's block: Fire Reports — bare

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

<body>
  <script>
    var url = "https://d3-js.ru/data/fire-calls.json"

d3.json(url, function (data) {
      var ordinal = d3.scaleOrdinal()
        .range(d3.range(9))

var color = d3.scaleSequential(d3.interpolateYlOrRd)

var minYear = d3.min(data, function (d) {
        return d.year
      })
      
      var maxCalls = d3.max(data, function (d) {
        return d.calls
      })
      
      color.domain([0, maxCalls])

d3.select('body')
        .append('svg')
        .selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr('x', function (d) {
           return ((d.year - minYear) * 12 + d.month - 1) * 20
        })
        .attr('y', function (d) {
          return ordinal(d.area) * 20
        })
        .attr('width', 20)
        .attr('height', 20)
        .style('fill', function (d) {
          return color(d.calls)
        })
    })
  </script>
</body>

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

https://d3js.org/d3-scale-chromatic.v1.min.js