HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
// create data
4
var data = {
5
// celestial bodies
6
// with their diameter in kilometers
7
"nodes": [
8
{ "id": "Sun", "value": 1392700 },
9
{ "id": "Mercury", "value": 4879 },
10
{ "id": "Venus", "value": 12104 },
11
{ "id": "Earth", "value": 12756 },
12
{ "id": "Moon", "value": 3474 },
13
{ "id": "Mars", "value": 6779 },
14
{ "id": "Phobos", "value": 22 },
15
{ "id": "Deimos", "value": 12 },
16
{ "id": "Jupiter", "value": 142984 },
17
{ "id": "Io", "value": 3643 },
18
{ "id": "Europa", "value": 3122 },
19
{ "id": "Ganymede", "value": 5262 },
20
{ "id": "Callisto", "value": 4821 },
21
{ "id": "Saturn", "value": 116464 },
22
{ "id": "Titan", "value": 5150 },
23
{ "id": "Rhea", "value": 1527 },
24
{ "id": "Uranus", "value": 50724 },
25
{ "id": "Titania", "value": 1578 },
26
{ "id": "Oberon", "value": 1523 },
27
{ "id": "Neptune", "value": 49244 },
28
{ "id": "Triton", "value": 2706 }
29
],
30
31
// connections between celestial bodies
32
// with the distance between them in million kilometers
33
"edges": [
34
{ "from": "Sun", "to": "Mercury", "distance": 50.9 },
35
{ "from": "Sun", "to": "Venus", "distance": 108.2},
36
{ "from": "Sun", "to": "Earth", "distance": 148.7 },
37
{ "from": "Earth", "to": "Moon", "distance": 0.3877 },
38
{ "from": "Sun", "to": "Mars", "distance": 207.6 },
39
{ "from": "Mars", "to": "Phobos", "distance": 0.00567 },
40
{ "from": "Mars", "to": "Deimos", "distance": 0.02006 },
41
{ "from": "Sun", "to": "Jupiter", "distance": 748.5 },
42
{ "from": "Jupiter", "to": "Io", "distance": 0.3484 },
43
{ "from": "Jupiter", "to": "Europa", "distance": 0.6025 },
44
{ "from": "Jupiter", "to": "Ganymede", "distance": 0.9961 },
45
{ "from": "Jupiter", "to": "Callisto", "distance": 1.81 },
46
{ "from": "Sun", "to": "Saturn", "distance": 1450 },
47
{ "from": "Saturn", "to": "Titan", "distance": 1.17 },
48
{ "from": "Saturn", "to": "Rhea", "distance": 0.4667 },
49
{ "from": "Sun", "to": "Uranus", "distance": 2930 },
50
{ "from": "Uranus", "to": "Titania", "distance": 0.4095 },
51
{ "from": "Uranus", "to": "Oberon", "distance": 0.5559 },
52
{ "from": "Sun", "to": "Neptune", "distance": 4470 },
53
{ "from": "Neptune", "to": "Triton", "distance": 0.3287 }
54
]
55
};
56
57
// create a network graph and set the data
58
var chart = anychart.graph(data);
59
60
// set the chart title
61
chart.title("Solar System Network Graph");
62
63
// set the container id
64
chart.container("container");
65
66
// initiate drawing the chart
67
chart.draw();
68
69
});