France Population Heat Map

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/PUG10N1W

Show only small cities (up to people)

<!doctype html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    .zc-body {
      background: #fff;
    }

    .chart--container {
      height: 100%;
      width: 100%;
      min-height: 530px;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>


<body class="zc-body">
  
  <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
      <option value="100000">100.000</option>
      <option value="50000">50.000</option>
      <option value="10000">10.000</option>
      <option value="5000">5.000</option>
      <option value="1000">1.000</option>
      <option value="500">500</option>
      </select> people)

  <div id="myChart" class="chart--container">
    <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
  </div>

  <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    let chartConfig = {
      type: 'null',
      backgroundColor: '#fff',
      flat: true,
      heatmap: {
        tooltip: {
          text: '~ %value people',
          thousandsSeparator: '.',
          decimals: 0
        },
        alpha: 1,
        sortData: true,
        async: true,
        brushType: 'square',
        size: 3,
        blur: 1,
      },
      tooltip: {
        padding: '5 10',
        fontSize: '11px',
        callout: true,
        calloutWidth: '10px',
        calloutHeight: '6px',
        calloutPosition: 'bottom',
      },
      colorScale: {
        aspect: 'gradient',
        gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
        gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
        backgroundColor: null,
        alpha: 0.8,
      },
      shapes: [{
        type: 'zingchart.maps',
        options: {
          id: 'mapmain',
          name: 'fra',
          scale: true,
          zooming: false,
          panning: false,
          scrolling: false,
          style: {
            flat: true,
            controls: {
              visible: false,
            },
            borderAlpha: 0.1,
            borderColor: '#fff',
            label: {
              overlap: false,
              text: '%long-text',
            },
            hoverState: {
              visible: false,
              backgroundColor: 'none',
              shadowAlpha: 0.2,
              shadowDistance: 2,
              shadow: true,
              shadowColor: '#333',
            },
          },
        },
      }, ],
    };

    zingchart.bind('myChart', 'load', function() {
      paintHeatmap();
    });

    window.paintHeatmap = function(iMax, bSmallBrush) {
      let aData = [];
      let iMaxPop = 0;
      for (let i = 0; i < FR_POP_2010.length; i++) {
        if (iMax && FR_POP_2010[i][2] > iMax) {
          continue;
        }
        let fLon = FR_POP_2010[i][0],
          fLat = FR_POP_2010[i][1],
          iPop = FR_POP_2010[i][2];
        let aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
        aData.push([aXY[0], aXY[1], iPop]);
        iMaxPop = Math.max(iMaxPop, iPop);
      }
      zingchart.exec('myChart', 'colorscale.update', {
        data: {
          maxValue: iMaxPop,
        },
      });
      let oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
      zingchart.exec('myChart', 'heatmap.setdata', {
        minValue: 0,
        maxValue: oCSInfo.max,
        data: aData,
        size: bSmallBrush ? 4 : 12,
        blur: bSmallBrush ? 0 : 6,
      });
    };

    zingchart.bind('myChart', 'heatmap.mousemove', function(oInfo) {
      if (oInfo.value !== null) {
        zingchart.exec(oInfo.id, 'colorscale.setvalue', {
          graphid: oInfo.graphid,
          value: oInfo.value,
        });
      } else {
        zingchart.exec(oInfo.id, 'colorscale.clear', {
          graphid: oInfo.graphid,
        });
      }
    });

    document.querySelector('#sc').addEventListener('click', function() {
      if (this.checked) {
        paintHeatmap(100000, true);
        let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.value = 100000;
        maxpopRef.removeAttribute('disabled');
      } else {
        paintHeatmap();
        let maxpopRef = document.querySelector('#maxpop');
        maxpopRef.setAttribute('disabled', 'disabled');
      }
    });

    document.querySelector('#maxpop').addEventListener('change', function() {
      paintHeatmap(this.value, true);
    });

    zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
      zingchart.render({
        id: 'myChart',
        width: '600px',
        height: '600px',
        output: 'canvas',
        data: chartConfig,
        modules: 'heatmap,color-scale',
      });
    });
  </script>
</body>

</html>

<!doctype html>
<html class="zc-html">
  <head>
    <meta charset="utf-8">
    <title>ZingSoft Demo</title>
    <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  </head>
  
  <body class="zc-body">
  
    <input id="sc" type="checkbox" /><label for="sc">Show only small cities</label> (up to <select id="maxpop" disabled="disabled">
      <option value="100000">100.000</option>
      <option value="50000">50.000</option>
      <option value="10000">10.000</option>
      <option value="5000">5.000</option>
      <option value="1000">1.000</option>
      <option value="500">500</option>
      </select> people)

    <div id="myChart" class="chart--container">
      <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
    </div>

    <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script>

  </body>
</html>

let chartConfig = {
  type: 'null',
  backgroundColor: '#fff',
  flat: true,
  heatmap: {
    tooltip: {
      text: '~ %value people',
      thousandsSeparator: '.',
      decimals: 0
    },
    alpha: 1,
    sortData: true,
    async: true,
    brushType: 'square',
    size: 3,
    blur: 1,
  },
  tooltip: {
    padding: '5 10',
    fontSize: '11px',
    callout: true,
    calloutWidth: '10px',
    calloutHeight: '6px',
    calloutPosition: 'bottom',
  },
  colorScale: {
    aspect: 'gradient',
    gradientStops: '0.0 0.4 0.6 0.7 0.8 1.0',
    gradientColors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
    backgroundColor: null,
    alpha: 0.8,
  },
  shapes: [
    {
      type: 'zingchart.maps',
      options: {
        id: 'mapmain',
        name: 'fra',
        scale: true,
        zooming: false,
        panning: false,
        scrolling: false,
        style: {
          flat: true,
          controls: {
            visible: false,
          },
          borderAlpha: 0.1,
          borderColor: '#fff',
          label: {
            overlap: false,
            text: '%long-text',
          },
          hoverState: {
            visible: false,
            backgroundColor: 'none',
            shadowAlpha: 0.2,
            shadowDistance: 2,
            shadow: true,
            shadowColor: '#333',
          },
        },
      },
    },
  ],
};

zingchart.bind('myChart', 'load', function () {
  paintHeatmap();
});

window.paintHeatmap = function (iMax, bSmallBrush) {
  let aData = [];
  let iMaxPop = 0;
  for (let i = 0; i < FR_POP_2010.length; i++) {
    if (iMax && FR_POP_2010[i][2] > iMax) {
      continue;
    }
    let fLon = FR_POP_2010[i][0],
      fLat = FR_POP_2010[i][1],
      iPop = FR_POP_2010[i][2];
    let aXY = zingchart.maps.getXY('mapmain', [fLon, fLat]);
    aData.push([aXY[0], aXY[1], iPop]);
    iMaxPop = Math.max(iMaxPop, iPop);
  }
  zingchart.exec('myChart', 'colorscale.update', {
    data: {
      maxValue: iMaxPop,
    },
  });
  let oCSInfo = zingchart.exec('myChart', 'colorscale.getinfo');
  zingchart.exec('myChart', 'heatmap.setdata', {
    minValue: 0,
    maxValue: oCSInfo.max,
    data: aData,
    size: bSmallBrush ? 4 : 12,
    blur: bSmallBrush ? 0 : 6,
  });
};

zingchart.bind('myChart', 'heatmap.mousemove', function (oInfo) {
  if (oInfo.value !== null) {
    zingchart.exec(oInfo.id, 'colorscale.setvalue', {
      graphid: oInfo.graphid,
      value: oInfo.value,
    });
  } else {
    zingchart.exec(oInfo.id, 'colorscale.clear', {
      graphid: oInfo.graphid,
    });
  }
});

document.querySelector('#sc').addEventListener('click', function () {
  if (this.checked) {
    paintHeatmap(100000, true);
    let maxpopRef = document.querySelector('#maxpop');
    maxpopRef.value = 100000;
    maxpopRef.removeAttribute('disabled');
  } else {
    paintHeatmap();
    let maxpopRef = document.querySelector('#maxpop');
    maxpopRef.setAttribute('disabled', 'disabled');
  }
});

document.querySelector('#maxpop').addEventListener('change', function () {
  paintHeatmap(this.value, true);
});

zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function () {
  zingchart.render({
    id: 'myChart',
    width: '600px',
    height: '600px',
    output: 'canvas',
    data: chartConfig,
    modules: 'heatmap,color-scale',
  });
});

.zc-body { background:#fff; }

.chart--container {
  height: 100%;
  width: 100%;
  min-height: 530px;
}

.zc-ref {
  display: none;
}

Mixed Chart Dashboard 62/270 Water Quality Heat Map Chart

France Population Heat Map

Related Documentation: