Data Map OLD
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.”
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.)
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, Occasionally, Every Month, Every Week, etc.). When there is no intensity scale (School, Home, Work, Vehicle, etc.), use one of the four “qualitative” color palettes.
- 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.
- photo iconNumeric MapsCompare equal-interval and equal-number maps using the same data.
- photo iconCategorical MapsCompare qualitative and scale-based categorical maps.
- photo icon
- photo iconFilterable MapInteract with a filterable, shareable data map.
- photo iconU.S. Map with CitiesTry out a data map with states, territories, and cities.
- photo icon
- photo icon
- photo icon
- tools iconBuilding in the WCMS - U.S and world mapsSee key tips and guidelines for working with U.S. and world data maps in the WCMS.
- tools iconBuilding in the WCMS - County level mapsSee key tips and guidelines for working with county data maps in the WCMS.
- stack iconData Map State Names and Abbreviations excel icon[XLS - 847 B]Download approved state names and abbreviations for map data file.
- photo iconMap Color PalettesSee the intensity and qualitative color palettes available for data maps.
- photo iconTP4 UX Best Practices ppt icon[PPT - 14 MB]For general guidance on colors, layouts, and overall presentation, see this overview of TP4 best practices.
To see examples of different data classifications types, see the pages for numeric maps and categorical maps. For data filtering, see filterable map.