This project started out with the motivation of how to visualize multiple information about cities on a 3D globe. The solution is implemented in webGL and features a quick overview of world cities with the information about the consumer price index (CPI) and crime rates. The development phase have been done in cooperation with Mads Frøding Engels – s103201.
There are many ways to visualize geo-location data. The most typical one is using a 2D map such as Google maps having pins containing more information. But by using this solution the user has to browse through cities to get multiple information.
There are different parameters that can used as differentiator for the geolocated place when mapped in the three dimensional space:
- pin width
- pin height
- pin color
- pin texture
The hypothesis was that at least 2 of these parameters could be used to show multiple information about the geolocations.
After some research it was found that Google had a 3d Globe webGL project that could be used as the baseline for this project since it provided a framework for using a JSON file containing location data and then display this point on the globe. But since it did not support multiple city information, animation, mouse actions, text on globe and bars modifications a development- and modification phase had to be done.
The data are crawled from numbeo.com that has a wide range of information about different cites in the world. The data was chosen to be Consumer Price Index (CPI) and Crime rates. But since one JSON file was preferable for computation and for simplicity the data had to merged so each city had information in the following structure:
[cityname, latitude, longtitude, cpiValue, cpiRealVal, crimeValue, crimeRealVal, url]
where the cpiValues and the crimeValues are the normalized values so these can be multiplied on the height, width and for generating colors. The cpiRealVal and the crimeRealVal are the original values from numbeo.com.
The following JAVA program was developed for data extraction of the two sources and merging together for each city.
The normalization functions can also be found in the java.
The project consist of the following important files:
This holds the city data using the structure described earlier.
This is the main file that contains all the functionality and visualization of the globe. When initialized it will call the init() function that sets the texture image of the globe (world4.jpg) and initializes the shaders, the camera, the scene and the mouse listeners.
adddata(data); Iterates over the cities from the city.json file and gets the information that
is used in the addCity() funtion.
addCity(): This funtion generates a point (using THREE.CubeGeometry) and a text (using THREE.TextGeometry) for each city and depending on the cpi- and crimevalue the bars are created with width, height and color. Each city is also saved in the cities arays with the informations. These are used for showing the text in the index.html using CSS.
These classes holds the THREE used for components and the TWEEN class used for animation.
Visualization and interaction
Every time the mouse is moved, a city can be detected using the findClosestCity() funtion. If a city is within the specified range then the setActiveCity() is called. This will animate the others inactive cities to be of low height while the active city will have its original height. For animation the TWEEN.Easing functions are used. Futhermore the three pulsing circels will be painted using a timer.
The color that each bar will get depends on the normalized CPI value and are on the globe colored using the following code. The reason for using this is that a small change in the normalized CPI value will mean a more different color so it is easier to discover differences in a crowded area of cities:
c.setHSL(hue, 1.0, 0.5);
For the color used to show the values in the CSS the following code is used since the colors here should indicate bad to good going from green to red using the function colorRedGreenFn.
c.setHSL((0.5 - (hue * 0.5)), 1.0, 0.5);
The width and hight uses the following equations for differentiate the cities from each other so small values will stay small and the extreme values can be seen on the globe.
point.scale.z = Math.max(cpiValue * 1200, 0.05); //Height of bar
point.scale.x = Math.max((crimeValue * crimeValue* crimeValue * 18), 0.05); //BAR WIDTH x point.scale.y = Math.max((crimeValue * crimeValue* crimeValue* 18), 0.05); // BAR WIDTH y
It has been shown that representing multiple information based on geolocation works very properly on a globe using the parameters of width, height and color. The solution was showed to a couple of test persons for feedback and based on that adjustments was made.
The solution could be extended to having even more information for each city by adding information to the texture, having multiple data added on top of the height or by animations. The solution is made so it is very scalable as long as the json file will contain the needed information.
The solution was successfully implemented and it is possible to visualize multiple information based on geolocation data on a 3D globe in webGL.
- Date september 29, 2014
- Tags Data Mining, User Experience, Web Development