Time map: the world

Uploaded by Flourish team a year ago (Updated 7 months ago)

A modern 3D map with time slider for visualising events

A template for creating fast and beautiful maps showing events over time. Useful for any data with timestamps and locations, such as website traffic or financial transactions. Events are shown as pulses on a three-dimensional WebGL map, optionally scaled and coloured based on the data.

Panning the map

Pan the map by dragging; hold down Alt while dragging to change the angle of view.

Data Requirements

At a minimum, you need a spreadsheet of data with columns for:

  • Latitude: the latitude of the event.
  • Longitude: the longitude of the event.
  • Timestamp: the start time of the event. Be sure to set the time format for your data in the settings panel!

In addition you set columns for:

  • End timestamp: the end time of the event in the same format as the main timestamp.
  • Scale: the scale at which to draw the event.
  • Colour: a column of categories to determine the color of the event. Colors are listed in the colours spreadsheet.

Colouring events

Colours for the events are listed in a separate spreadsheet with two columns:

  • Category: should contain categories matching those in the main data sheet.
  • Colour: the desired colour, in any standard format, such as “red” (i.e. named colours), “#ffeeaa”, ”rgb(255, 255, 255)”, “hsla(120, 50%, 20%, 0.4)”.

If a matching color isn't found in the spreadsheet, a fallback colour will be used. This can be set in the settings panel.

Counter

The event counter tracks the number of events of each category over time. This also doubles as a legend. In the settings panel you can decide whether the counter should measure just the number of events or the total value of those events as specified in the “Size” column. For example, if your dataset showed financial transactions, you could scale the dots by the value of the transactions and have the counter show the cumulative value of transactions in each category.

Tips

  • Try experimenting the “Terrain” and “Ocean” colour settings to change the look of the map
  • You can drag the time slider back and forward to quickly scan through the data
  • Try making a Flourish story to capture stunning animations between different views

Credits

Created by Hugh Kennedy, inspired by Kiln’s shipmap.org.

Read more