block by devgru 0b769be298c3c28d8e6eb9e4184d40e2

Fire Reports — bare

Full Screen

Built with blockbuilder.org

forked from devgru‘s block: Fire Reports — bare

index.html

<!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; }
    svg {
      width: 600px;
      height: 450px;
    }
  </style>
</head>

<body>
  <script>
    var url = "//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>