Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← Visualization

Proportional-symbol map

Symbol areas represent amounts at geographic locations.

A city’s public gardens

A city’s public gardens: proportional symbol map. Garden visits per week. Full values follow in the data view.Garden visits per week in fictional districts. Circle area represents visits.North120Hill80Harbor260West160Central320South200

Garden visits per week in fictional districts. Circle area represents visits.

Illustrative data
View data6 records
A city’s public gardens
ItemWithin 10 min (%)Visits / week
North35120
Hill6280
Harbor48260
West78160
Central88320
South54200

When it fits

Compare counts while retaining geographic context.

What you need

Locations and nonnegative amounts.

Watch for

Large overlapping symbols can hide nearby locations.

In practice

Earthquake locations and magnitude, published by Vega contributors.
Earthquake locations and magnitude · Vega contributors · BSD-3-Clause

Related alternatives

Choropleth map Bubble chart
Sources and accessibility

The authored example uses illustrative data. Published references retain their original information and presentation.

Use Tab to reach controls and the data view. Native selects support arrow keys. All values are available in the data view; color and hover are never the only way to read the example.