Data Map OLD

Best Practices


A data map displays numeric or categorical data for U.S. states / territories* in a color-coded country map. In larger viewports, users can view data for a location by hovering over the location on the map or by viewing the expandable / collapsible data table below the map. Users can also filter data by clicking the legend categories and sort data using the column headings in the data table. The data map works in both the English and Spanish templates (based on the map language setting). By default, the data table can display in collapsed or expanded view, as set in the WCMS. Maps can be inserted as regular content elements or as embeddable widgets.

*You can include data for cities and counties with your state data. Cities and counties are represented by color-coded shapes below the map. In the data table, they display under their respective parent states/territories. For more information, see “Building in the WCMS.”

Example quantitative data map

Each data map is driven by a JSON or CSV source data file typically prepared by the content owner. For information on data file format, see the WCMS instructions.

The illustration above is a static image. “Live” map examples are available on separate pages: See numeric maps and categorical maps. Also see filterable data map.


Use a data map to display color-coded numeric or categorical data for U.S. states and territories, such as prevalence of a specific disease, case counts for an outbreak, or percentage of adults in a health program.  For states / territories with “special values” (such as “*” or “NA”), you can specify up to two special classes. The map tool automatically color-codes these special classes with two shades of gray, one for each special class.

Note that a data map can be used as a navigation aid if URLs are provided in the data file. (If there is no state-based data for color-coding, use the navigation-only map.)

Data Classification

For data maps the WCMS offers three types of data classification:

  • Equal Number (Quantile) places the states into numeric data classes of the same size.
  • Equal Interval divides the numeric range into subranges of equal size (good for showing outliers). The Example Numeric Maps show how the same data display in equal number vs. equal interval classification types.
  • Categorical is for non-numeric classification.

Data classification can affect a map user’s perception of the data story. To determine the best classification for a numeric map, web developers should work closely with content owners to ensure that each map conveys the intended story about public health data. This may require educating the content owner about the map options available in the WCMS. For more information on data classification and other data map options, see the WCMS instructions.

State Information Display

In addition to the pop-up information that displays in larger viewports when a visitor hovers over a state, you can provide longer state-specific information when the visitor clicks a state.  Two approaches are supported:  text that displays below the map (and above the data table) and URLs.  See examples of these two approaches.

Color Palette / Ramp

Multiple maps:  All of the “intensity” color palettes have two versions:  light-to-dark and dark-to-light. If your site is presenting multiple related maps, consider the public health indicators when determining the map color palette / ramp.  (View palette options.) To ensure visual consistency and optimal usability across maps, you may need to “flip” the color ramp for one or more maps. For example, compare the indicators “Percentage of adults who smoke daily” and “Percentage of adult smokers enrolled in a cessation program.” A higher number for the first indicator reflects a relatively negative outcome while a higher number for the second indicator reflects a relatively positive outcome. In the best cases the public health indicators have been formulated with color ramp direction in mind.  But if the data sources are varied, this may not be the case.

Categorical maps:  Like numeric maps, categorical maps can be based on an intensity scale (Never, OccasionallyEvery Month, Every Week, etc.). When there is no intensity scale (School, Home, Work, Vehicle, etc.), use one of the four “qualitative” color palettes.

Other Guidelines

  • Keep the display name as short as possible.  Use the map subtext for details.
  • Allow as much space as possible for each data map.
  • Don’t forget to explain special classes such as “NA.”  The map subtext is a good location for this information.
  • In most cases, four to five data classes work best, but as with the data classification schema, much depends on the public health message and the source data.


To see examples of different data classifications types, see the pages for numeric maps and categorical maps. For data filtering, see filterable map.

Page last reviewed: May 10, 2018
Content source: WCMS / Template Team