Water Quality Heat Map Chart

<!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">
  
  <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 MAX = [20, 10, 20, 150];
    let GRAD = [{
        stops: '0 0.4 0.6 0.7 0.8 1.0',
        colors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
      },
      {
        stops: '0 0.25 0.5 0.75 1',
        colors: '#B4E89F #A4E38A #8ADB69 #70D448 #5CAE3B',
      },
      {
        stops: '0 0.25 0.5 0.75 1',
        colors: '#75C3E5 #0E6BA8 #0A2472 #001C55 #00072D',
      },
      {
        stops: '0 0.4 0.5 0.6 0.7 1',
        colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A',
      },
    ];

    let gdata = function(idx, title) {
      return {
        flat: true,
        type: 'null',
        backgroundColor: '#fff',
        title: {
          text: title,
          fontSize: '11px',
        },
        plotarea: {
          margin: '25 10 10 10',
        },
        shapes: [{
          type: 'zingchart.maps',
          options: {
            id: 'mapmain' + idx,
            name: 'fra',
            scale: true,
            zooming: false,
            panning: false,
            scrolling: false,
            style: {
              flat: true,
              controls: {
                visible: false,
              },
              borderAlpha: 0.1,
              borderColor: '#fff',
              label: {
                visible: false,
                overlap: false,
                text: '%long-text',
              },
              hoverState: {
                visible: false,
                backgroundColor: 'none',
                shadowAlpha: 0.2,
                shadowDistance: 2,
                shadow: true,
                shadowColor: '#333',
              },
            },
          },
        }, ],
        heatmap: {
          size: 5,
          blur: 15,
          alpha: 0.75,
          minValue: 0,
          maxValue: MAX[idx],
          gradientStops: GRAD[idx].stops,
          gradientColors: GRAD[idx].colors,
        },
        colorScale: {
          aspect: 'gradient',
          gradientStops: GRAD[idx].stops,
          gradientColors: GRAD[idx].colors,
          backgroundColor: null,
          alpha: 0.75,
          height: '100px',
          minValue: 0,
          maxValue: MAX[idx],
        },
      };
    };

    let cdata = {
      layout: '2x2',
      flat: true,
      graphset: [
        gdata(0, 'Temperature'),
        gdata(1, 'Water quality'),
        gdata(2, 'Air pollution'),
        gdata(3, 'Wind speed'),
      ],
    };

    let aData = [
      [],
      [],
      [],
      []
    ];

    zingchart.bind('myChart', 'load', function() {
      window.setInterval(function() {
        let l, iIndex, fLon, fLat, iPop, aXY;
        let iMaxPoints = 2 * 256;

        for (let g = 0; g < 4; g++) {
          if (aData[g].length === 0) {
            for (l = 0; l < iMaxPoints; l++) {
              iIndex = ZC._r_(0, FR_POP_2010.length - 1);
              fLon = FR_POP_2010[iIndex][0];
              fLat = FR_POP_2010[iIndex][1];
              iPop = FR_POP_2010[iIndex][2];
              aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
              aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
            }
          } else {
            for (l = aData[g].length - 1; l >= 0; l--) {
              aData[g][l][2] = Math.min(
                MAX[g],
                aData[g][l][2] - MAX[g] / 19 + (MAX[g] / 20) * Math.random()
              );
              if (aData[g][l][2] <= 0) {
                aData[g].splice(l, 1);
              }
            }
            for (l = 0; l < iMaxPoints - aData[g].length; l++) {
              iIndex = ZC._r_(0, FR_POP_2010.length - 1);
              fLon = FR_POP_2010[iIndex][0];
              fLat = FR_POP_2010[iIndex][1];
              iPop = FR_POP_2010[iIndex][2];
              aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
              aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
            }
          }
          zingchart.exec('myChart', 'heatmap.setdata', {
            graphid: g,
            data: aData[g],
          });
        }
      }, 15);
    });

    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,
        });
      }
    });

    zingchart.loadModules('heatmap,color-scale,maps,maps-fra', function() {
      zingchart.render({
        id: 'myChart',
        width: '100%',
        height: '100%',
        output: 'canvas',
        data: cdata,
        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">
  
  <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>

.zc-body {
  background: #fff;
}

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

.zc-ref {
  display: none;
}

let MAX = [20, 10, 20, 150];
let GRAD = [{
    stops: '0 0.4 0.6 0.7 0.8 1.0',
    colors: 'rgba(0,0,255,0) #0000ff #00ffff #bfff00 #ffff00 #ff0000',
  },
  {
    stops: '0 0.25 0.5 0.75 1',
    colors: '#B4E89F #A4E38A #8ADB69 #70D448 #5CAE3B',
  },
  {
    stops: '0 0.25 0.5 0.75 1',
    colors: '#75C3E5 #0E6BA8 #0A2472 #001C55 #00072D',
  },
  {
    stops: '0 0.4 0.5 0.6 0.7 1',
    colors: '#2B45B4 #5E37AE #B020AF #FF2D98 #FC840A',
  },
];

let gdata = function(idx, title) {
  return {
    flat: true,
    type: 'null',
    backgroundColor: '#fff',
    title: {
      text: title,
      fontSize: '11px',
    },
    plotarea: {
      margin: '25 10 10 10',
    },
    shapes: [{
      type: 'zingchart.maps',
      options: {
        id: 'mapmain' + idx,
        name: 'fra',
        scale: true,
        zooming: false,
        panning: false,
        scrolling: false,
        style: {
          flat: true,
          controls: {
            visible: false,
          },
          borderAlpha: 0.1,
          borderColor: '#fff',
          label: {
            visible: false,
            overlap: false,
            text: '%long-text',
          },
          hoverState: {
            visible: false,
            backgroundColor: 'none',
            shadowAlpha: 0.2,
            shadowDistance: 2,
            shadow: true,
            shadowColor: '#333',
          },
        },
      },
    }, ],
    heatmap: {
      size: 5,
      blur: 15,
      alpha: 0.75,
      minValue: 0,
      maxValue: MAX[idx],
      gradientStops: GRAD[idx].stops,
      gradientColors: GRAD[idx].colors,
    },
    colorScale: {
      aspect: 'gradient',
      gradientStops: GRAD[idx].stops,
      gradientColors: GRAD[idx].colors,
      backgroundColor: null,
      alpha: 0.75,
      height: '100px',
      minValue: 0,
      maxValue: MAX[idx],
    },
  };
};

let cdata = {
  layout: '2x2',
  flat: true,
  graphset: [
    gdata(0, 'Temperature'),
    gdata(1, 'Water quality'),
    gdata(2, 'Air pollution'),
    gdata(3, 'Wind speed'),
  ],
};

let aData = [
  [],
  [],
  [],
  []
];

zingchart.bind('myChart', 'load', function() {
  window.setInterval(function() {
    let l, iIndex, fLon, fLat, iPop, aXY;
    let iMaxPoints = 2 * 256;

    for (let g = 0; g < 4; g++) {
      if (aData[g].length === 0) {
        for (l = 0; l < iMaxPoints; l++) {
          iIndex = ZC._r_(0, FR_POP_2010.length - 1);
          fLon = FR_POP_2010[iIndex][0];
          fLat = FR_POP_2010[iIndex][1];
          iPop = FR_POP_2010[iIndex][2];
          aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
          aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
        }
      } else {
        for (l = aData[g].length - 1; l >= 0; l--) {
          aData[g][l][2] = Math.min(
            MAX[g],
            aData[g][l][2] - MAX[g] / 19 + (MAX[g] / 20) * Math.random()
          );
          if (aData[g][l][2] <= 0) {
            aData[g].splice(l, 1);
          }
        }
        for (l = 0; l < iMaxPoints - aData[g].length; l++) {
          iIndex = ZC._r_(0, FR_POP_2010.length - 1);
          fLon = FR_POP_2010[iIndex][0];
          fLat = FR_POP_2010[iIndex][1];
          iPop = FR_POP_2010[iIndex][2];
          aXY = zingchart.maps.getXY('mapmain' + g, [fLon, fLat]);
          aData[g].push([aXY[0], aXY[1], MAX[g] * Math.random()]);
        }
      }
      zingchart.exec('myChart', 'heatmap.setdata', {
        graphid: g,
        data: aData[g],
      });
    }
  }, 15);
});

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,
    });
  }
});

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