Timespace Map

Traditional maps are drawn based on geographical distance. However, in urban life, people often rely on transportation, making time increasingly the primary factor in travel decisions rather than physical distance.

Can maps be drawn based on time?

Through literature review, we identified the Moving Least Squares (MLS) method as a suitable approach for map deformation. This technique uses the principles of MLS to adjust the positions of points on the original map based on the changes in the positions of a set of control points. As a result, while stations are rearranged according to time distance, a significant amount of geographical information is retained.

References:

1. 王丽娜, 李响, 江南, 杨振凯, & 杨飞. (2018). 中心型时间地图的构建方法与实现. 测绘学报, 47(1), 123.
2. Ullah, R., & Kraak, M. J. (2015). An alternative method to constructing time cartograms for the visual representation of scheduled movement data. Journal of Maps, 11(4), 674-687.

Demo

timespace map

Data

The data is divided into two parts: one for map graphics and the other for railway stations and information. To reuse the drawing functions, both parts are processed into a similar structure as follows:

{ lines:{
        "1" : { points:[], colors:[] },
        "2" : { points:[], colors:[] }
        },
  points:{ 
         “A1” : { lon: , lat: },
         “A2” : { lon: , lat: }
         }
 }

Implementation

Used D3.js + HTML5 + CSS3 to layout the chart and set the styles.

Bound subway station/line/map data using D3.js to draw corresponding SVG elements.

Captured central point events to trigger functions, update data, and refresh the graphics.

Implemented mouse events to enable tooltip interactions and panning/zooming of the map.