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
Global Homepage Map
Screen width: XL+
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.
Screen width: XL-LG
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
Screen width: LG-MD
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
Screen width: MD-SM
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
Screen width: SM-XS
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
Screen width: XS
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.
AFIC Map on Country / Region Page
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.
Screen width: XL+
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.
Screen width: XL-LG
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
Screen width: LG-MD
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
Screen width: SM-XS
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
Screen width: XS
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.
[For future expansion - more visualizations]
Contact us if you have an application question or recommended addition to these standards.