Network chart over world map
Map chart where location nodes are displayed as a network chart and they are connected using links. The node relationships are defined in 'data' using 'links' array - each link has a 'from' and 'to' value with node IDs.
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({
"layers": [
{
"name": "Points",
"type": "items",
"style": {
"nodeStyleFunction": function (node) {
node.label = node.data.id;
},
"linkStyleFunction": function (link) {
link.label = link.data.value;
},
"node": {
"fillColor": "#2fc32f",
"lineColor": "#b0dc0b",
"lineWidth": 2
},
"nodeLabel": {
"backgroundStyle": {
"fillColor": "#eab404"
},
"textStyle": {
"fillColor": "#de672c"
}
},
"linkLabel": {
"backgroundStyle": {
"fillColor": "#ec2e2e"
},
"textStyle": {
"fillColor": "#56b9f7"
}
}
}
}
],
"navigation": {
"initialLat": 35.04409,
"initialLng": -90.246213,
"initialZoom": 2,
"minZoom": 2
},
"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/driving-time-world.json",
"perBoundsData": false
}
],
"interaction": {
"resizing": {
"enabled": false
}
}
})Data
Data
Download Data
{
"nodes": [
{
"id": "Paris",
"coordinates": [
2.2770199,
48.8588377
],
"value": 100
},
{
"id": "London",
"coordinates": [
-0.3817813,
51.528308
],
"value": 120
},
{
"id": "Atlanta",
"coordinates": [
-84.388846,
33.752504
],
"value": 50
},
{
"id": "New York",
"coordinates": [
-73.996705,
40.74838
],
"value": 230
},
{
"id": "Moscow",
"coordinates": [
37.0720851,
55.748517
],
"value": 65
},
{
"id": "Tokyo",
"coordinates": [
139.5703018,
35.6732619
],
"value": 185
},
{
"id": "Sydney",
"coordinates": [
150.6517803,
-33.847927
],
"value": 44
},
{
"id": "Lake Placid",
"coordinates": [
-81.364918,
27.294474
],
"value": 23
},
{
"id": "Riga",
"coordinates": [
23.9890799,
56.9713962
],
"value": 25
},
{
"id": "Cape Town",
"coordinates": [
18.0955842,
-33.9142687
],
"value": 47
},
{
"id": "Abu Dhabi",
"coordinates": [
53.8687803,
24.4270645
],
"value": 115
},
{
"id": "Rio de Janeiro",
"coordinates": [
-43.7261817,
-22.913885
],
"value": 30
}
],
"links": [
{
"id": "l1",
"from": "Paris",
"to": "Tokyo",
"value": 15
},
{
"id": "l2",
"from": "Paris",
"to": "New York",
"value": 35
},
{
"id": "l3",
"from": "Paris",
"to": "Riga",
"value": 5
},
{
"id": "l4",
"from": "Abu Dhabi",
"to": "Cape Town",
"value": 8
},
{
"id": "l5",
"from": "Cape Town",
"to": "Lake Placid",
"value": 3
},
{
"id": "l6",
"from": "New York",
"to": "Atlanta",
"value": 21
},
{
"id": "l7",
"from": "New York",
"to": "London",
"value": 41
},
{
"id": "l8",
"from": "London",
"to": "Moscow",
"value": 18
},
{
"id": "l9",
"from": "Sydney",
"to": "Tokyo",
"value": 22
},
{
"id": "l10",
"from": "Moscow",
"to": "Abu Dhabi",
"value": 7
},
{
"id": "l11",
"from": "Lake Placid",
"to": "New York",
"value": 14
},
{
"id": "l12",
"from": "London",
"to": "Paris",
"value": 47
},
{
"id": "l13",
"from": "London",
"to": "Riga",
"value": 12
},
{
"id": "l14",
"from": "Sydney",
"to": "Riga",
"value": 3
},
{
"id": "l15",
"from": "Abu Dhabi",
"to": "Rio de Janeiro",
"value": 6
}
]
}