Fire Reports by devgru

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 = "https://d3.devg.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
      })
      
      // Шкала цветов получает domain — границы значений
      // от 0 до максимального числа вызовов
      color.domain([0, maxCalls])

      // Создаём SVG-элемент
      var svg = d3.select('body')
        .append('svg')

      // Создаём плавающую подсказку
      var tooltip = svg
        .append('text')
        .attr('y', 10 * 20)
        .attr('x', 0)

      // Создаём квадраты для отображения данных
      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)
        })
        // Обработка событий мыши
        .on('mouseover', function (d) {
          tooltip.text(d.area + ': ' + d.calls + ' вызовов за ' + d.month + '.' + d.year)
        })
        .on('mouseout', function (d) {
          tooltip.text('')
        })
    })
  </script>
</body>