Responsive Specifications

Use this page to understand how the layouts and attributes of live visualizations change depending on their width.

Principles

All visualization text uses one font size regardless of visualization width, except in specific noted instances.
Visualization legends are always located directly below the visualization body, except live maps that are 1200px or wider. See additional detail below.
Content:
- Map content crops with center focus as width decreases until 609px width is reached, after which map content width and height scale down proportionally. Therefore all visualizations between 609px and 1200px should remain the same height regardless of width.
  - Note map content buttons and interface symbols remain the same size
- Chart content frame scales down horizontally as width decreases until 609px width is reached, after which width and height scale down proportionally. Therefore all visualizations wider than 609px should remain the same height regardless of width.
  - Note axis titles and labels remain the same size

Maximum map viewport size: 1198 x 677
Minimum map viewport size: 1198 x 677
Legend width: 252px Discuss
Intermediate behavior:
- No change. Body content width has reached maximum size.

Maximum map viewport size: 1198 x 677
Minimum map viewport size: 948 x 677
Legend width: 252px
Intermediate behavior:
- Legend stays next to map viewport
- Map viewport width ranges from maximum to minimum value

Maximum map viewport size: 1198 x 677 All three above are the same
Minimum map viewport size: 948 x 677
Legend width: Fills width of viz
Intermediate behavior:
- Legend wraps below map viewport
- Map viewport width ranges from maximum to minimum value

Maximum map viewport size: 948 x 677
Minimum map viewport size: 607 x 677
Legend width: Fills width of viz
Intermediate behavior:
- Legend wraps below map viewport
- Map viewport width ranges from maximum to minimum value

Maximum map viewport size: 607 x 677
Minimum map viewport size: 330 x 366
Legend width: Fills width of viz
Intermediate behavior:
- Legend wraps below map viewport
- Map viewport width and height scale from maximum to minimum dimensions, maintaining aspect ratio
- Map content scales with viewport

Maximum map viewport size: 330 x 366
Minimum map viewport size: 330 x 366
Legend width: Fills width of viz
Intermediate behavior:
- Legend wraps below map viewport
- No change. Body content width has reached minimum size.

Key success criteria: The following specifications are calibrated to ensure that the legend stays to the right of the map and does not wrap below the map body until the page width is less than 1280px.

Maximum map viewport size: 1150 x 644
Minimum map viewport size: 1150 x 644
Legend width: 300px
Intermediate behavior:
- No change. Body content width has reached maximum size.

Maximum map viewport size: 1150 x 644
Minimum map viewport size: 898 x 644
Legend width: Fills width of viz
Intermediate behavior:
- Legend stays next to map viewport
- Map viewport width ranges from maximum to minimum value

Maximum map viewport size: 1198 x 644
Minimum map viewport size: 607 x 644
Legend width: Fills width of viz
Intermediate behavior:
- Legend wraps below map viewport
- Map viewport width ranges from maximum to minimum value

Maximum map viewport size: 607 x 677
Minimum map viewport size: 330 x 366
Legend width: Fills width of viz
Intermediate behavior:
- Legend wraps below map viewport
- Map viewport width and height scale from maximum to minimum dimensions, maintaining aspect ratio
- Map content scales with viewport

Maximum map viewport size: 330 x 366
Minimum map viewport size: 330 x 366
Legend width: Fills width of viz
Intermediate behavior:
- Legend wraps below map viewport
- No change. Body content width has reached minimum size.

Contact us if you have an application question or recommended addition to these standards.