forked from cid-harvard/globe
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·222 lines (187 loc) · 10.2 KB
/
index.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
<html>
<head>
<title>The globe of economic complexity</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" />
<META NAME="ROBOTS" CONTENT="INDEX, FOLLOW">
<meta charset="utf-8">
<meta property="og:title" content="The Globe of Economic Complexity: Visualize $15 Trillion of World Exports">
<meta name="description" content="One dot equals $100M of exports">
<meta property="og:description" content="One dot equals $100M of exports">
<meta property="og:image" content="http://globe.cid.harvard.edu/images/preview.png">
<meta property="og:url" content="http://globe.cid.harvard.edu">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="icon" href="images/favicon.ico" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Rajdhani:300|500' rel='stylesheet' type='text/css'>
<link href="select2.css" rel="stylesheet" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.min.js"></script>
</head>
<body >
<div id="storyPrompt">
<div id="description">Ever wanted to see the true scale of the world economy?<br/><br/> Visualize 15 trillion dollars of world trade. One dot equals 100 million dollars of exported products.<br/> <div id="loaded">Loading world export data...</div>
</div>
<div id="choice" style="display:none">
<div id='beginStory'>
<img src="images/icon/tour.png"/>
<div>Start the Intro</div>
<div id="loading">View an animated tour through the visualizations and concepts behind this project.</div>
</div>
<div><div class="midSeparator"> </div></div>
<div id='beginExplore'>
<img src="images/icon/explore.png"/>
<div>Visualize Data</div>
<div id="loading">Skip the tour and start exploring our data</div>
</div>
</div>
<div id="description" style="top: 700px">
<a href="http://www.cid.harvard.edu/" target="_blank"><img src="images/center-for-international-development-black.png" style="width: 310px; height: 100px"/></a>
</div>
</div>
<div id="spinner"></div>
<div id="UI" style="display:none">
<div id="sideBar">
<div class="logobox" style="position: fixed; right: 10px; top: 10px;">
<a href="http://www.cid.harvard.edu/" target="_blank"><img src="images/center-for-international-development-black.png" style="width: 200px; height: 62px"/></a>
</div>
<div class="titlebox">
<div class="titleTop2">
<span class="small">The</span><span style="font-size:46px">GLOBE</span><br/>
<div class="optionSeparator"> </div>
<span class="small">of</span>
<span style="font-size:32px">ECONOMIC</span><br/>
<span style="font-size:27px">COMPLEXITY</span><br/>
</div>
</div>
<div class="subtitle2">$15 trillion of world trade</br>one dot = $100 million of exports<br/><br/><br/><br/></div>
<div class="optionSeparator"> </div>
<div id="storyline">► Play Intro</div>
<div id="buttons">
<div id="countrySection">
<div class="optionSeparator"> </div>
<div class="selectionBox">
<select class="countrySelection">
</select>
</div>
</div>
<div id="productSection" style="display:none">
<div class="optionSeparator"> </div>
<div class="productBox">
<select class="productSelection">
</select>
</div>
</div>
<div class="optionSeparator"> </div>
<div id="visualizations"></div>
<div class="optionSeparator"> </div>
<div id="showAbout">About</div>
<div id="fullscreen">Fullscreen Mode</div>
<div id="showlabels">Hide Labels</div>
<div id="contrastbutton">High contrast</div>
<div class='sectionTitle'>Powered by:</div>
<a href="http://atlas.cid.harvard.edu/" target="_blank"><img id="theatlas" src="images/the-atlas-of-economic-complexity-black.png" style="width: 150px; opacity: .7"/></a>
<div id="atlasBox"></div>
<div class="sectionTitle" style="position:absolute;bottom:35px;">Filter by product category</div>
</div>
</div>
<div id="watch">
<img id="watchsvg" src="images/bluewatch.png"/>
</div>
<div id="annotation"></div>
<div id="nextlevel">
<div id="nextBox">
<div id="nextButton">
<img src="images/icon/next.png"/>
<div class="small">Next</div>
</div>
<div></div>
<div id="skipStoryLine">
<img src="images/icon/stop.png"/>
<div class="small">Quit</div>
</div>
</div>
</div>
<div id="countries" ></div>
<div id="categories"></div>
<div id="pointer"></div>
<div id="modeDescription"></div>
<div id="productlabel"></div>
<div id="noWebGL" style="display:none">
<div id='description'>The globe of economic complexity dynamically maps out the entire world production of goods to create an economic landscape of countries around the globe.<br/> This project was built with WebGL and needs it to run properly, your current web browser is not compatible.<br/> See <a href='https://get.webgl.org/'>get.webgl.org</a> to fix this issue or enjoy the following teaser:
<iframe width="420" style="padding-top:30px" height="315" src="https://www.youtube.com/embed/Obuq_L2U4VU" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="aboutText" style="display:none">
<span class="aboutTitle">About</span><span style="float:right"><div id="closeAbout">close x </div></span>
<div class="optionSeparator"> </div>
<div>Built by <a href="http://www.polyfra.me/" target="_blank">Owen Cornec</a>, mentoring and concept by <a href="http://romain.vuillemot.net/" target="_blank">Romain Vuillemot</a>.</div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">The Globe of Economic Complexity</div>
<div>The globe of economic complexity dynamically maps out the entire world production of goods to create an economic landscape of countries around the globe.</div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">The original Atlas of Economic Complexity</div>
<div>The Globe is built upon The Atlas of Economic Complexity, a powerful interactive tool that enables users to visualize a country’s total trade, track how these dynamics change over time and explore growth opportunities for more than a hundred countries worldwide.<br/> For any given country, The Atlas shows which products are produced and exported; The Atlas can then use this information to suggest products a country could begin manufacturing in order to fuel economic growth. <br/>It is available at: <a href="http://atlas.cid.harvard.edu" target="_blank">http://atlas.cid.harvard.edu</a></div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">The Center for international development (CID)</div>
<div>CID is a university-wide research center housed at the Harvard Kennedy School.<br/>Learn more here: <a href="http://www.cid.harvard.edu/" target="_blank">http://www.cid.harvard.edu/</a> </div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">Associated Paper</div>
<div>This project will be featured at the 2015 IEEE VIS conference in Chicago.<br/> Read our poster <a href="PDF/poster.pdf" target="_blank"> here</a>.</div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">Data Used</div>
<div>Product and trade data generated with <a href="https://github.com/cid-harvard/atlas-data" target="_blank">CID's 2012 world export data</a>, originally from the <a href="http://comtrade.un.org/" target="_blank">United Nations Comtrade database.</a></div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">Technology</div>
<div>This visualization was built with webGL, a new graphics library that enables to create new 3D worlds in the browser. We used Three.js, a javascript library to streamline creating and editing 3D objects.<br/>The code can be viewed in our<a href="https://github.com/cid-harvard/globe/" target="_blank"> Github repository</a></div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">Contact</div>
<div>For any issues, questions or inquiries, <a href="https://github.com/cid-harvard/globe/wiki/FAQ" target="_blank">read our FAQ</a> or send your thoughts to <a href="#">atlas.cid.harvard@gmail.com</a></div>
<div class="optionSeparator"> </div>
<div class="aboutTitle">Aknowledgements</div>
<div>We would like to thank Marcela Escobari, Ricardo Hausmann, Gus Wezerek, Tim Cheston and Greg Shapiro for their insight and support. Icons: Cube Divisions, Earth, World by Juan Pablo Bravo, Molecule by Swaty Shah, Coins by Ramakrishna Venkatesan, Subsystem by Alex Tai from the Noun Project</div>
</div>
</div>
<script type="x-shader/x-vertex" id="vertexshader">
attribute float size;
attribute vec3 customColor;
varying vec3 vColor;
void main() {
vColor = customColor;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec3 vColor;
void main() {
gl_FragColor = vec4( color * vColor, 1.0 );
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
}
</script>
<script src="scripts/noWebGL.js"></script>
<script src="scripts/spin.js"></script>
<script src="data/anchors.js"></script>
<script src="scripts/UI.js"></script>
<script src="scripts/labels.js"></script>
<script src="scripts/countrydata.js"></script>
<script src="scripts/THREE.GeoJSON.js"></script>
<script src='scripts/cameraControls.js'></script>
<script src='scripts/THREE.FullScreen.js'></script>
<script src='scripts/ParticleLinks.js'></script>
<script src="scripts/URLparser.js"></script>
<script src="scripts/script.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-41291966-6', 'auto');
ga('send', 'pageview');
</script>
<script src='scripts/THREEx.KeyboardState.js'></script>
</body>
</html>