Bubble map chart
Map chart where node size changes depending on the population of each location. In 'data', each node also contains a numeric value (in this case, "population"), and it is used to determine 'node.radius' using a custom 'nodeStyleFunction'.
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
chart= new GeoChart({
"navigation": {
"initialLat": 37,
"initialLng": -95,
"initialZoom": 4,
"minZoom": 3,
"maxZoom": 12
},
"layers": [
{
"type": "items",
"style": {
"nodeStyleFunction": function (node) {
node.label = node.data.name;
var pop = node.data.population / 20000;
if(pop < 6) {
pop = 6;
}
node.radius = pop;
node.fillColor = "#b0dc0b";
node.lineColor = "#2fc32f";
node.lineWidth = 1;
node.labelStyle = {
backgroundStyle: {
fillColor:"#eab404",
lineColor:"#de672c",
lineWidth:1
},
textStyle: {
fillColor: "#de672c"
}
}
}
}
}
],
"background": {
"enabled": true,
"type": "tile",
"url": "https://maps.zoomcharts.com/{z}/{x}/{y}.png",
"params": {
"attribution": "\u00a9 <a target=\"_blank\" href=\"https://www.openstreetmap.org/copyright\"\\>OpenStreetMap</a> contributors"
}
},
"container": "demo",
"data": [
{
"url": "/dvsl/data/extra/usa-largest-capitals.json"
}
],
"interaction": {
"resizing": {
"enabled": false
}
}
})Data
Data
Download Data
{
"nodes": [
{
"state": "AK",
"population": "31275",
"id": "2",
"coordinates": [
"-134.406794",
"58.299740"
],
"name": "Juneau"
},
{
"state": "AZ",
"population": "1445632",
"id": "4",
"coordinates": [
"-112.075774",
"33.448260"
],
"name": "Phoenix"
},
{
"state": "CA",
"population": "466488",
"id": "6",
"coordinates": [
"-121.491014",
"38.579065"
],
"name": "Sacramento"
},
{
"state": "CO",
"population": "600158",
"id": "8",
"coordinates": [
"-104.992259",
"39.740010"
],
"name": "Denver"
},
{
"state": "FL",
"population": "181376",
"id": "12",
"coordinates": [
"-84.280649",
"30.439775"
],
"name": "Tallahassee"
},
{
"state": "GA",
"population": "420003",
"id": "13",
"coordinates": [
"-84.391109",
"33.748315"
],
"name": "Atlanta"
},
{
"state": "HI",
"population": "337256",
"id": "15",
"coordinates": [
"-157.857614",
"21.304770"
],
"name": "Honolulu"
},
{
"state": "IN",
"population": "820445",
"id": "18",
"coordinates": [
"-86.149964",
"39.766910"
],
"name": "Indianapolis"
},
{
"state": "MA",
"population": "617594",
"id": "25",
"coordinates": [
"-71.056699",
"42.358635"
],
"name": "Boston"
},
{
"state": "MN",
"population": "285068",
"id": "27",
"coordinates": [
"-93.093326",
"44.943829"
],
"name": "Saint Paul"
},
{
"state": "NE",
"population": "258379",
"id": "31",
"coordinates": [
"-96.707739",
"40.813620"
],
"name": "Lincoln"
},
{
"state": "NM",
"population": "67947",
"id": "35",
"coordinates": [
"-105.937406",
"35.691543"
],
"name": "Santa Fe"
},
{
"state": "ND",
"population": "61272",
"id": "38",
"coordinates": [
"-100.779334",
"46.805372"
],
"name": "Bismarck"
},
{
"state": "OK",
"population": "579999",
"id": "40",
"coordinates": [
"-97.520354",
"35.472015"
],
"name": "Oklahoma City"
},
{
"state": "OR",
"population": "154637",
"id": "41",
"coordinates": [
"-123.043814",
"44.933260"
],
"name": "Salem"
},
{
"state": "TN",
"population": "601222",
"id": "47",
"coordinates": [
"-86.778365",
"36.167783"
],
"name": "Nashville"
},
{
"state": "TX",
"population": "790390",
"id": "48",
"coordinates": [
"-97.742984",
"30.267605"
],
"name": "Austin"
},
{
"state": "UT",
"population": "186440",
"id": "49",
"coordinates": [
"-111.888229",
"40.759505"
],
"name": "Salt Lake City"
},
{
"state": "VA",
"population": "204214",
"id": "51",
"coordinates": [
"-77.433654",
"37.540700"
],
"name": "Richmond"
},
{
"state": "WI",
"population": "233209",
"id": "55",
"coordinates": [
"-89.386694",
"43.072950"
],
"name": "Madison"
}
]
}