examples/census/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <!-- <meta http-equiv="X-UA-Compatible" content="ie=edge" /> -->
    <title>Example</title>
  </head>

  <body
    style="
      display: flex;
      align-items: center;
      justify-content: center;
      margin: auto;
      vertical-align: middle;
      height: 100vh;
      width: 100vw;
    "
  >
    <div id="container">
      <!-- <canvas id="reglCanvas"></canvas> -->
    </div>
    <script src="../../build/reglmapanimation.js"></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"
      integrity="sha256-m0QmIsBXcOMiETRmpT3qg2IQ/i0qazJA2miCHzOmS1Y="
      crossorigin="anonymous"
    ></script>
    <script>
      d3.csv("../../assets/csv/2021/pop_5000m.csv", (d) => {
        return {
          value: d.pop,
          y: +d.y,
          x: +d.x,
        };
      }).then((pointData) => {
        d3.csv("../../assets/csv/logo.csv", (d, i) => {
          return {
            value: i,
            y: +d.y,
            x: +d.x,
          };
        }).then((logoData) => {
          // order by Y
          let sortedPointData = pointData.sort((a, b) => a.y - b.y); // b - a for reverse sort

          //make container fill screen
          let width = Math.min(window.innerWidth, 800);
          let height = Math.min(window.innerHeight, 600);
          let container = document.getElementById("container");
          container.style.height = height + "px";
          container.style.width = width + "px";

          //animation
          ReglMapAnimation.animation()
            .container(container)
            .pointData(sortedPointData)
            .logoData(logoData)
            .centerLogo(true)
            .logoWidth(300)
            .logoHeight(40)
            .pointWidth(0.6)
            .pointMargin(0)
            .mapPadding(0)
            .width(width)
            .height(height)
            .colors([
              "#ffffb2",
              "#fed976",
              "#feb24c",
              "#fd8d3c",
              "#f03b20",
              "#bd0026",
            ])
            .thresholds([0, 1, 500, 2500, 12500, 62500])
            .duration(1000)
            .delayAtEnd([500, 4000, 6000]) // for each transition (logo > map > chart), specify the delay at the end
            .xAxisTitle("Population (number of inhabitants per 25 km²)")
            .xAxisTitleOffsetX(-150)
            .yAxisTitleOffsetX(10)
            .yAxisTitle("Area (in km²)")
            .binLabels(true)
            .binMargin(0.001)
            .binYLabelFunction(function (bin) {
              let count = bin.binCount * 25;
              let str = count.toLocaleString("en").replace(/,/gi, " ");
              return str + " km²";
            })
            //.initialAnimation("rollout")
            .binLabelOffsetX(0)
            .chartOffsetY(-70)
            .legend(true)
            .legendTitle("Population per 25 km²")
            .legendHeight(200)
            .legendFontSize(16)
            .animate();
        });
      });
    </script>
  </body>
</html>