-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.rotateAxisLabels.html
154 lines (146 loc) · 5.38 KB
/
index.rotateAxisLabels.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!doctype html>
<html>
<head>
<!--
This example combines multiple data sets (indexes) with multiple countries by plotting them onto a 3D bar chart.
Rotating the chart on to the Z-axis can transform it into a heat mapped 2D chart. The goal for rotating axis
labels is to assist with readability of long axis label names.
Known issues:
rotateAxisLabels:true - requires showXAxis, showYAxis, showZAxis to also be true. Otherwise, it will not rotate correctly.
Data sources:
https://www.numbeo.com/quality-of-life/rankings_by_country.jsp?title=2018-mid®ion=019
https://en.wikipedia.org/wiki/List_of_countries_by_GDP_(nominal)
https://en.wikipedia.org/wiki/Estimated_number_of_civilian_guns_per_capita_by_country
https://en.wikipedia.org/wiki/List_of_countries_by_alcohol_consumption_per_capita
https://knoema.com/nwnfkne/world-gdp-ranking-2017-gdp-by-country-data-and-charts
-->
<title>WORLD INDEXES BY COUNTRY 2018 MID-YEAR</title>
<style>
body {font: 10pt arial;}
div#info {
width : 500px;
text-align: center;
margin-top: 2em;
font-size : 1.2em; }
span#graphHead, span#updateTime, span#startTime, span#endTime{
font: 10pt arial;
font-weight: bold;
text-align: center; }
</style>
<script type="application/javascript" src="https://eanar.github.io/demo/rotateAxisLabels/vis.js.v4-21-0-rotateAxisLabels.min.js?'+Math.random()+'"></script>
<script type="application/javascript">
var graph = null;
function drawVisualization() {
var style = document.getElementById('style').value;
var withValue = ['bar-color', 'bar-size', 'dot-size', 'dot-color'].indexOf(style) != -1;
// Create and populate a data table.
var data = new vis.DataSet();
var extra_content = [];
data.add( {id:"c57621e7d6cfb81", x:0, y:-1, z:0, extra:extra_content[0]} );
var axis_x = {};
var axis_y = {};
var file1 = 'https://eanar.github.io/demo/rotateAxisLabels/world_index_data_small.json?nocache='+Math.random();
var _width = '1000px';
var _height = '1000px';
var request = new XMLHttpRequest();
request.open('GET', file1, true);
function axisLoad(axis_obj, callback) {
Object.keys(axis_obj).forEach(function(field, i) {
callback(axis_obj[field], i);
});
};
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var result = JSON.parse(request.responseText);
axisLoad(result.graph3d, function(object, i) {data.add(object)});
axisLoad(result.axis_x, function(object, i) {axis_x[i] = object});
axisLoad(result.axis_y, function(object, i) {axis_y[i] = object});
data.remove("c57621e7d6cfb81");
} else {console.log("ERR: request.onload");}
};
request.onerror = function() {console.log("ERR: Connection request")};
request.send();
var options = {
width: _width,
height: _height,
style: style,
showPerspective: false,
showLegend: true,
showGrid: true,
showShadow: true,
xLabel: 'COUNTRY',
yLabel: 'INDEX',
zLabel: 'PERCENT',
legendLabel: 'value',
rotateAxisLabels: true,
axisColor: '#41413C',
axisFontType: 'courier',
axisFontSize: 30,
gridColor: '#5590CC',
backgroundColor: 'white',
dataColor: {
fill: 'green',
stroke: 'green',
strokeWidth: 2,
},
cameraPosition: {
horizontal: 0,
vertical: 2,
distance: 2.3
},
tooltip: function (point) {
return 'value: <b>'+ point.z +'%</b><br>'+ axis_x[point.x] +'</b><br>'+ axis_y[point.y];;
},
tooltipDelay: 0,
tooltipStyle: {
content: {
background : 'rgba(255, 255, 255, 0.7)',
padding : '10px',
borderRadius : '10px'
},
line: {
borderLeft : '1px dotted rgba(0, 0, 0, 0.5)'
},
dot: {
border : '5px solid rgba(0, 0, 0, 0.5)'
},
},
keepAspectRatio: false,
verticalRatio: 0.5,
xBarWidth: 1,
yBarWidth: 1,
xStep: 1,
yStep: 1,
xCenter: '50%',
yCenter: '25%',
xValueLabel: function(value) {return ""+ axis_x[value.toString()];},
yValueLabel: function(value) {return ""+ axis_y[value.toString()];},
zValueLabel: function(value) {return value + '%';},
};
var camera = graph ? graph.getCameraPosition() : null;
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
if (camera) graph.setCameraPosition(camera);
document.getElementById('style').onchange = drawVisualization;
}
</script>
</head>
<body onload="drawVisualization()">
<p>
<label for="style"> Style:
<select id="style">
<option value="bar">bar</option>
<option value="dot">dot</option>
<option value="dot-line">dot-line</option>
</select>
</label>
</p>
<div style="text-align: center; width: 1024px;">
<span id="graphHead">WORLD INDEXES BY COUNTRY 2018 MID-YEAR</span><br>
<span id="updateTime"></span><br>
<span id="startTime"></span><br>
<span id="endTime"></span><br>
<div id="mygraph" height="470px"></div>
<div id="info">Hover the mouse cursor over the graph to see tooltips.</div></div>
</body>
</html>