Maps-flows

We’re sharing our experience in interactive visualization of transport flows on maps in the browser. This type of data representation is fairly classic and widely used: both in web applications and in static infographic renders. We studied a lot of material to identify areas that could be made more engaging, and here’s what we came up with.

First of all, we worked on landscapes: implemented the terrain using parallax mapping and added a bunch of configurable parameters. And in general, we made sure that the roads and all lines adapt to this terrain in the most correct way.

We couldn’t skip extreme attention to the details: when the camera moves from one region to another, the light rotates to a new position. In simple terms, the light tries to position itself in front of the viewer so that the rays hitting the surface are reflected at a large angle — this makes surfaces and text look their best.

Next, we analyzed all existing arch implementations and added the ability to configure absolutely any shape and appearance: from canonically correct to highly specific and unusual.

You can customize your own arches or use presets.

Settings for arch geometry, width, gradient settings, the junction of arches with surfaces, visual dependence on flow magnitude, interactivity — everything is fully available through the API.

Flow visualization would looked incomplete without an animated particle system, so we implemented extensive customization options: from classic spheres/cubes to custom meshes like boats, trucks, and airplanes.

The wide range of particle flow parameters allows configuring the scene to be either more artistic and infographic-style or the most classic representation. It depends on the context in which it needs to be integrated.