Chart.js Geo Plugin - Choropleth USA

chart-js-geo-plugin-choropleth-usa.markdown

Chart.js Geo Plugin - Choropleth USA

A Pen by Martial Jefferson on CodePen.

License.

index.html

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

script.babel

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.scss

body {
  width: 100vw;
  height: 100vh;
}