Project description

In China, most people get off work at about 18:00. After that, some of them choose to go home for rest, others tend to be more active in various activities. How was the real nighttime like in Beijing? Beyond telling an old story, we reproduced a series of Beijing evenings by modeling the urban traffic flow base on the car-hailing data from DIDI Chuxing. and tried to explained the reason behind. The data was grouped as geo-fences and extracted from the nighttime (17:00-5:00) in several typical days in 2016, based on which we would learn the connections and trends among the specific days, hours and locations. For those people enjoying night life, how did they choose the place to go? We grabbed the average price data from and stacked it with the traffic data on a 3D map. The average price data reflected the night consumption level therefore was visualized as a series of mountain contours. Then the crowds were compared to the magma or water flow on the ‘mountain’. As the crowds moved around, it would tell the tendency of the flow, from the top to the bottom, or bucking up. Moreover, a widget was provided for audiences to explore the map.

What makes this project innovative?

It's common visualizing data on a map of a 'real' place and leaving the background map simple and monotonous. Why not do something creative with the map so as to integrate the whole visualization?In this project, we have tried rebuilding the background map and presenting a new version of the night in Beijing. The contour line is the core conception. The geological symbol is used to visualize the average price data and arranged in a 3D space, clearly illustrating the various consumption levels in Beijing. Then overlaying the traffic flows, it will tell people's choices for their night joy.Moreover, how far do they go on average? We choose a series of clocks to tell the complicated story including districts, overall average distances and average distance per hour. Thereby the dial illustrates the timeline in the evening and the clock hands tells the average distance per hours as it rotating. The web animation is created to help audiences to catch the meaning efficiently. It displays the optimal order to learn the connections among the multi-dimensional data.

What was the impact of your project? How did you measure it?

It has been viewed more than 100 thousands times in the first 3 days since its releasing. It has been selected as one of the best in the Geo-News Innovation Program (the news sandbox) in Xinhua News Agency. Besides, it has been shared via the Official Account of DIDI Group. This year, the team was invited to shared their ideas online in Dyclub.

Source and methodology

The 'volcano' and the contour map were rendered in webGL shader. Two major tasks were done in this process, passing parameters to the shader (data binding) and scene rendering.The parameter passing, in spite of those live data (variables) transferred by Uniforms, were mostly done by texture. During this procedure, for the page efficiency, some data no need of instant computing were drawn into texture in advance via Python PIL. For instance, the average price data in the contour map were drawn into the greyscale heightmap and the car-haling data were drawn into the sequential heightmap. And for those data computing lively during the page processing, we transferred them from CPU to GPU through the bidirectional process of encoding/decoding between data and pixel. That is, encoding the data into pixels on the data texture and loading them as the raw data before the next circulation of computing.As for the scene rendering, the contour map was plotted by GLSL derivative functions in fragment shader. Several Octaves stacked Perlin Noise have controlled the terrain and simulated the 'magma exhalation' of the 'volcano'. And the Perlin Noise was generated via parameters derived in the sequential heightmap texture mentioned above.

Technologies Used

Adobe AI, Adobe PSHtml, CSS, Javascript, PythonTableu

Project members

Zhe Wang (Editor), Qian Ma (Designer), Ye Liu (Developer)


Additional links

Project owner administration

Contributor username


Click Follow to keep up with the evolution of this project:
you will receive a notification anytime the project leader updates the project page.