Auto Aggregate of data
JavaScript geochart example that automatically clusters nearby data points depending on the zoom level. Zoom in to reveal a more detailed view.
HTML
HTML
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>
CSS
CSS
//No CSS for this example
JavaScript
JavaScript
// function for shortening number for label texts
function getNumberTxt(number) {
if (number > (1000 * 1000)) {
number = Math.floor(number / (1000 * 1000)) + 'M';
} else if (number > 1000) {
number = Math.floor(number / 1000) + 'k';
}
return number;
}
var geochart = new GeoChart({
container: document.getElementById('demo'),
data: {
url: "/dvsl/data/geo-chart/USAcities15000.json",
postprocessorFunction: function (DATA) {
DATA = JSON.parse(DATA);
// USAcities15000.json is not formatted in the expected format,
// however the postprocessorFunction allows us to parse the data
// and return it in the desired format
var nodes = [];
for (var i in DATA) {
var data = DATA[i];
nodes.push({
coordinates: [parseFloat(data.lng), parseFloat(data.lat)],
type: "point",
id: data.id,
name: data.name,
population: parseInt(data.population)
});
}
return {
nodes: nodes
};
}
},
layers: [
{
id: "default",
type: "items",
aggregation: {
enabled: true,
// needed for aggregation and aggregatedWeight result
weightFunction: function(node) {
return node.population;
}
},
style: {
nodeStyleFunction: function (node) {
// get data about current aggregated item
var aggr = node.data.aggregatedNodes;
// get sum of current aggregated item
var w = node.data.aggregatedWeight;
// use Math.log of Math.log10 for big scale/difference statistics
// node.radius = Math.log(w);
// use simple delimeter/divider for node radius
node.radius = w / 500000 + 5;
// adding current aggregated item element coount and its elements sum for node label
if (node.removed)
node.label = "";
else
node.label = 'cities:' + aggr.length + "\n pop:" + getNumberTxt(w);
},
node: {
lineColor: "#B18C21",
fillColor: "rgba(253,172,21,0.8)"
},
nodeLabel: {
padding: 2,
borderRadius: 3,
backgroundStyle: { fillColor: "rgba(0, 0, 0, 0.8)"},
textStyle: { fillColor: "white", font:"12px Arial"}
},
aggregatedShape: {
lineColor: "rgba(0,153,204,1)",
fillColor: "rgba(0,153,204,0.3)",
mode: "selected"
},
nodeHovered: {
fillColor: "rgba(253,172,21,0.5)",
shadowBlur: 0,
shadowColor: "255,255,255,0.01",
labelStyle: {
backgroundStyle: {
fillColor: "rgba(0,153,204,0.8)",
lineColor: "rgba(0,153,204,0.8)"
}
}
},
nodeSelected: {
fillColor: "transparent",
shadowBlur: 0,
shadowColor: "255,255,255,0.01",
},
selection: {
fillColor: "transparent"
}
}
}
],
navigation: {
initialLat: 36,
initialLng: -100,
initialZoom: 5,
minZoom: 4
},
interaction: {
selection: {enabled: true}
},
advanced: {
labelCache: false,
logging: false
},
style: {
selection: { fillColor: "transparent"}
}
});