France Population Heat Map
(up to people)
<!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> <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 src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/fr_pop_2010.js'></script> <script> ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; var cdata = { type: "null", backgroundColor: "#fff", flat: true, tooltip: { padding: '5 10', fontSize: 11, callout: true, calloutWidth: 10, calloutHeight: 6, calloutPosition: 'bottom' }, heatmap: { alpha: 1, tooltip: { decimals: 0, thousandsSeparator: '.', text: '~ %value people' }, sortData: true, async: true, brushType: 'square', size: 3, blur: 1 }, 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) { var aData = []; var iMaxPop = 0; for (var i = 0; i < FR_POP_2010.length; i++) { if (iMax && FR_POP_2010[i][2] > iMax) { continue; } var fLon = FR_POP_2010[i][0], fLat = FR_POP_2010[i][1], iPop = FR_POP_2010[i][2]; var 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 } }); var 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: 600, height: 600, 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"> <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>
var cdata = { type : "null", backgroundColor : "#fff", flat : true, tooltip : { padding : '5 10', fontSize : 11, callout : true, calloutWidth : 10, calloutHeight : 6, calloutPosition : 'bottom' }, heatmap : { alpha : 1, tooltip : { decimals : 0, thousandsSeparator : '.', text : '~ %value people' }, sortData : true, async : true, brushType : 'square', size : 3, blur : 1 }, 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) { var aData = []; var iMaxPop = 0; for (var i=0;i<FR_POP_2010.length;i++) { if (iMax && FR_POP_2010[i][2] > iMax) { continue; } var fLon = FR_POP_2010[i][0], fLat = FR_POP_2010[i][1], iPop = FR_POP_2010[i][2]; var 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 } }); var 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 : 600, height : 600, output : 'canvas', data : cdata, modules : 'heatmap,color-scale' }); });
.zc-body { background:#fff; } .chart--container { height: 100%; width: 100%; min-height: 530px; } .zc-ref { display: none; }