Now that the globe is finished, it's time to start adding the data. We will use the data format as it is provided by the original inspiration for this recipe: http://code.google.com/p/webgl-globe/.
Data sets come in series of repeating (latitude, longitude, magnitude) tuples. The latitude and longitude map to a place on the globe. The magnitude represents the actual data we want to show, in this case, the population at that location.
We will start from the end result in the previous recipe.The data set can be downloaded from http://code.google.com/p/webgl-globe/source/browse/globe/population909500.json.
Click on the View raw file link to download the actual JSON file. Store that file in the lib folder of the project.
All code for this recipe will be added to the Graph3D class:
- Embed the JSON object:
[Embed(source = "../lib/population909500.json", mimeType = "application/octet-stream")] private var PopulationData:Class;
- Add a segment set private variable that will hold the different lines that represent the population:
private var _lines:SegmentSet;
- In the constructor, initialize the set and add it to the 3D container:
_lines = new SegmentSet(); addChild(_lines);
- Now we can load and parse the JSON file (we use the year 2000 population data for this recipe):
var json:Object = JSON.parse(new PopulationData()); var data:Array = json[2][1]; trace(data.length); for (var i:int = 0; i < data.length; i+=3) { addLine(data[i+0], data[i+1], data[i+2]); } - And finally we need to draw the actual lines:
private function addLine(latitude:Number, longitude:Number, amount:Number):void { var phi:Number = (90.0 - latitude) * Math.PI / 180.; var theta:Number = (180.0 - longitude) * Math.PI / 180.; var r:int = 300 + 500 * amount; var x:Number = r * Math.sin(phi) * Math.cos(theta); var y:Number = r * Math.cos(phi); var z:Number = -r * Math.sin(phi) * Math.sin(theta); var line:LineSegment = new LineSegment(new Vector3D(0, 0, 0), new Vector3D(x, y, z), 0x99eeff, 0x002233, 5); _lines.addSegment(line); }
If you run the application, you should see the result that we showed in the first recipe of this series, 3D world population chart, part 1: The globe.
The data is read from an existing JSON file. In Chapter 2, Working with Data, we already saw that Flash makes this exceptionally easy. We select the 2000 dataset by picking the third element in the list (offset 2) and taking the second from that.
Ideally, you'd want to check that this is really the 2000 dataset, just in case the content of the JSON file changes.
The data comes in a combination longitude, latitude, and population density. Longitude/latitude coordinates are called Geodetic. This coordinate system describes locations on a sphere and is a spherical coordinate system (at least approximated, which is good enough for this application).You can read up on it on Wikipedia at the following links: http://en.wikipedia.org/wiki/Geodetic_system and http://en.wikipedia.org/wiki/Spherical_coordinate_system. Be prepared for a lot of maths and a lot of confusion, because there are many ways of representing coordinates on earth.
When we draw in 3D on a computer screen, we need Cartesian coordinates (the traditional x,y,z coordinates). The conversion consists of a trigonometry formula that converts angles into distances. It falls outside the scope of this book, but if you want to understand it, Wikipedia is, again, an invaluable resource: Check http://en.wikipedia.org/wiki/Trigonometry and the previously linked pages.
Away3D has a special type for drawing lines, called segments. These are grouped in a segment set. Usually they are used for drawing wireframes, the outlines of a 3D object, useful for debugging complex 3D scenes. However, in this case we use them to draw the dataset.
A LineSegment variable has a starting point and an endpoint, represented by a vector. It also has a color at the start and end of the line. The color in between is a gradual transition between the two. The final parameter is the thickness of the line.
We've now seen the basics of working with 3D and data, and hopefully you've noticed that the only limitation is your imagination.
Just as in the keyboard recipe, you can add a combobox that allows the user to select which dataset to display. The JSON file we used contains population data for the years 1990, 1995, and 2000.
You can also add code to load the file from the Internet (see Chapter 2, Working with Data). When that is in place, you can point to other datasets. And you can even add automatic updates that reload data regularly.
In the last two chapters, we've only shown the basics of creating 3D graphs and 3D engines. If you want to learn more about Away3D, take a look at the many examples on their GitHub repository (https://github.com/away3d/) and ask your questions in the forum (http://away3d.com/forum/).