Time map: UK

Displays events over time on a 3D map of the United Kingdom

Updated a year ago by Flourish team

How to use this template

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.

API information

Explains to developers how to use this template with the Flourish Live API.

template: _189

version: _6

Events

events_pulse_enabled boolean

Show events.

events_pulse_simple boolean

Allowed values:

  • false (Pulses)
  • true (Circles)

events_pulse_fallback_color color

Default colour. Circle colour when no category colour specified

events_pulse_default_scale number

Default size. The size of the circle when the “Scale” column is not selected or contains an invalid number for the given event

events_pulse_min_scale number

Min size. The smallest circle size allowed; usually best left at zero so that the sizes of the circles are proportional to the values in the data

events_pulse_max_scale number

Max size. The size of the largest circle

events_pulse_on_ocean boolean

Show events over ocean.

Event counter and graph

counter_type string

Count events. Enables the events counter and graph. Use “By count” to display the number of events, or “By size” to display the number scaled by the “Scale” column.

Allowed values:

  • off (Off)
  • count (By count)
  • scale (By size)

counter_other boolean

Include.

counter_other_label string

Label.

counter_enabled boolean

Show counter.

counter_labels boolean

Category labels.

graph_enabled boolean

Show graph.

graph_height number

Graph height (%).

label_cumulative string

“Total” label.

label_sampled string

“Rate” label.

number_prefix string

Prefix.

number_multiplier number

Multiplier.

number_decimals number

Decimals.

number_suffix string

Suffix.

timeline_bg_opacity number

Opacity of shading behind graph.

Max: 1

controls_bg_opacity number

Opacity of shading behind counter.

Max: 1

Time

events_pulse_date_format string

Date/time format in data. The date/time format in your data sheet. If it isn’t in the list, you can enter a custom format using d3-time-format syntax. See npmjs.com/package/d3-time-format for details.

Predefined values:

  • %Y-%m-%dT%H:%M:%S.%LZ (1986-01-28T11:39:13.000Z)
  • %Y-%m-%d (1986-01-28)
  • %m/%d/%Y (01/28/1986)
  • %d/%m/%Y (28/01/1986)
  • %d-%b-%y (28-Jan-86)
  • %m/%Y (01/1986)
  • %b %Y (Jan 1986)
  • %B %d (January 28)
  • %d %b (28 Jan)
  • %Y (1986)
  • %B (January)
  • %b (Jan)
  • %A (Tuesday)
  • %a (Tue)
  • %H:%M:%S (11:39:13)
  • %I:%M %p (11:39 AM)
  • %H:%M (11:39)

events_pulse_date_format_display string

Date/time format on slider. The date/time format in your data sheet. If it isn’t in the list, you can enter a custom format using d3-time-format syntax. See npmjs.com/package/d3-time-format for details.

Predefined values:

  • (Auto)
  • %Y-%m-%d (1986-01-28)
  • %m/%d/%Y (01/28/1986)
  • %d/%m/%Y (28/01/1986)
  • %d-%b-%y (28-Jan-86)
  • %m/%Y (01/1986)
  • %b %Y (Jan 1986)
  • %B %d (January 28)
  • %d %b (28 Jan)
  • %Y (1986)
  • %B (January)
  • %b (Jan)
  • %A (Tuesday)
  • %a (Tue)
  • %H:%M:%S (11:39:13)
  • %I:%M %p (11:39 AM)
  • %H:%M (11:39)

timeline_playing boolean

Play on load.

events_pulse_transition_duration number

Pulse duration. Duration in seconds of the pulse animation

Max: 5

timeline_duration number

Timeline duration. How long in seconds it takes to play through the timeline

Min: 5

timeline_speed number

Time multiplier. Speeds up or slows down the time. Affects the animations as well as the timeline. Set to 1 for normal time.

camera_transition_speed number

Pan/zoom duration. How long to spend moving the camera when changing slides in story mode, in seconds.

Popups

events_pulse_tooltips boolean

Enable popups. Display tooltips when the user hovers over an event circle, based on the column assigned for Labels

events_pulse_tooltips_custom boolean

Custom popups content. Allows you to create bespoke popups using HTML

events_pulse_tooltips_content text

Enable popups. The text to appear in the popup. You can use {{column_name}} to add a value from any selected column. You can add extra columns to “Popups” if needed. Advanced users can include HTML to apply layouts, formatting, images, etc.

Terrain

mesh_terrain_color_ground color

Ground.

mesh_terrain_color_coast color

Coast.

mesh_terrain_color_cliff color

Cliffs.

mesh_terrain_color_peak color

Peaks.

mesh_terrain_enable_lighting boolean

Enable lighting.

mesh_terrain_enable_noise boolean

Enable noise.

Fog and background

fog_color color

Colour.

fog_density number

Density.

Light

lighting_light1_color color

Light #1: Colour.

lighting_light1_polar number

Polar angle.

Min: -90

Max: 90

lighting_light1_azimuth number

Azimuth angle.

Min: -180

Max: 180

lighting_light2_color color

Light #2: Colour.

lighting_light2_polar number

Polar angle.

Min: -90

Max: 90

lighting_light2_azimuth number

Azimuth angle.

Min: -180

Max: 180

Ocean

ocean_enabled boolean

Show ocean.

ocean_color color

Water.

border_color color

Border.

ocean_stripe_color color

Stripe.

ocean_specular number

Water shininess.

border_thickness number

Border thickness.

Min: -0.05

Max: 1

ocean_stripe_opacity number

Stripe opacity.

Max: 1

ocean_stripe_thickness number

Stripe thickness.