Choropleth - Chart.js

choropleth-chart-js.markdown

Choropleth - Chart.js

A Pen by Martial Jefferson on CodePen.

License.

index.html

<canvas id="canvas"></canvas>

script.js

fetch("https://unpkg.com/us-atlas/states-10m.json")
  .then((r) => r.json())
  .then((us) => {
    const nation = ChartGeo.topojson.feature(us, us.objects.nation).features[0];
    const states = ChartGeo.topojson.feature(us, us.objects.states).features;

    console.debug(states.map((s) => s.properties));

    const stateData = states.map((d) => ({
      feature: d,
      value: Math.random() * 10
    }));

    console.dir(stateData);

    const chart = new Chart(
      document.getElementById("canvas").getContext("2d"),
      {
        type: "choropleth",
        data: {
          labels: states.map((d) => d.properties.name),
          datasets: [
            {
              label: "States",
              outline: nation,
              data: stateData
            }
          ]
        },
        options: {
          legend: {
            display: true
          },
          scale: {
            projection: "albersUsa"
          },
          geo: {
            colorScale: {
              display: true,
              position: "bottom",
              quantize: 5,
              legend: {
                position: "bottom-right"
              }
            }
          }
        }
      }
    );
  });

scripts

<script src="https://unpkg.com/chart.js"></script>
<script src="https://unpkg.com/chartjs-chart-geo"></script>

style.css

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
}