Data Science Programming

L3D Cube visualizations Part 2: real-time worldwide weather


We will make use of the OpenWeatherMap API to retrieve the temperature from cities around the world and displays the result on the cube. The result is a “real-time” (actually the free API key only gives access to hourly updates) visualization of the earth’s weather.

A Python script is used to select which cities are displayed: we start with a json file provided by OpenWeatherMap that contains every city accessible from the API as well as their ID and coordinates. The json is parsed and casted as a panda dataframe. The latitude and longitude of each city are transformed in voxel coordinates over a sphere of 4 voxel radius. The cities that fall on the same voxel are grouped and a random one is picked up from each group to represent that voxel.

The result is saved in a csv file that is loaded in Processing and used to query the API. The temperatures of each city are then shown on the cube using a gradient of color.


Initial set-up


Create a new OpenWeatherMap account in order to get an API key.

Then download the JSON file containing the list of cities with their IDs and coordinates over here. If you cloned my repository, it is already included in the data/ subfolder of the corresponding Processing sketch.

Next use this Python script in order to select the cities that will be displayed. It will save a csv file containing the selected cities, their coordinates and IDs. Note that it can take quite some time to run.


Our main goal is similar to the last example. We want to send a get request to a third party, retrieve the result, parse it and display it on the cube.

Thus we will use the same two libraries:

The code

Link to the repository.

Server: Processing sketch

Link to the sketch.

Retrieve and parse data

Import the Request library and set-up the variables that will be used to request the temperature data from OpenWeatherMap and to store the result.

Load the csv file in setup().

Create a new getData() function that will be in charge of reading the input csv file, creating two queries using the IDs from the table, make the request and parse the result.

You’ll notice that we use a function called processColor() that we haven’t defined yet. The role of this function is to take a temperature, compare its position on a pre-defined range and return the corresponding color from a gradient ranging from orange (warm) to blue (cold).

Transform polar coordinates in cartesian’s

We define a few global variables that will be used for our transformation.

The latitude and longitude are transformed from degrees to radians. We then apply the following formula to get the Cartesian coordinates (x, y, z). We apply an eventual rotation on the resulting sphere (so that the sphere appears to be rotating over time) and add an offset of 4 to very resulting coordinate because the center of our referential lies at (4, 4, 4) and not (0, 0, 0).

Let’s add a function that will apply the transformation to every city’s coordinates.

Putting it all together

We declare the cube as a global variable, set-up the rendering window, initialize a new cube object and start streaming the voxel’s values on port 2000.

We define a new function plotCoordinates() that takes the transformed coordinates and the corresponding color and displays them on the cube.

We define global variables storing the rate at which the cube should be rotated as well as the delay between each data update. Since the temperatures from OpenWeatherMap are updated every hour, we set the update rate at 1/h.

Finally we fill-in the draw() loop.

Client: Photon firmware

Upload the following code to your device.


Leave a Reply