Skip to main content
Skip table of contents

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

Figma page sizes

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

Figma page sizes

  • 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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.