Data Bite

Key points

Data bites help page users quickly find answers in a single highlighted value. They provide a way to aggregate data into a single value to focus attention and provide textual context about that value.
Example Data Bite

Best Practices

When used inside a dashboard, data bites provide calculated summary information that react to dashboard level filtering as an interactive page element.

As a reusable Data Visualization module, these data bites can be reused across a site and updated in a single editor.

Data Bites provide a way to aggregate data into a single value and provide manually created textual context about that value.

Use:

  • When one number respresent a significant perspective.
  • To create visual interest within a series of textual elements.

Don't Use:

  • If isolating one point of data tells and incomplete perspective.
  • If the supporting test needs to be more than three lines.

Quick Build Notes

  1. Select a data bite as the Visualization Type.
  2. Upload your data.
  3. Type in the title and other text fields in the General panel.
  4. Select your data column and function in the Data panel.

Configuration Options

The example visualizations below highlight options available for data bites. Key configuration selections are in the build notes section under each example.

For in-depth configuration information visit the Configuration Options section.

Calculated Average

This data bite shows the graphic on left calculating the average of the filtered data.

Data Sample: Data Bite Data

Data Format
  • Vertical
  • Multiple Series: No
General
Data Bite Style: Graphic
Data
  • Data Column: Amount
  • Data Function: Mean (Average)
  • Add Commas
Add Filter
  • Column: Location
  • Column Value: Georgia
Image
  • Image Display Type: None
  • Image/Graphic Position: Left

Max Value

This data bite displays the maximum value of the filtered data inline with the description text. The image is provided using a linked URL.

Data Sample: Data Bite Data

Data Forma
  • Vertical
  • Multiple Series: No
General
Data Bite Style: Value Before Message
Data
  • Data Column: Amount
  • Data Function: Max
  • Add Commas
Image
  • Image Display Type: Static
  • Image/Graphic Position: Top
  • Image URL: https://www.cdc.gov/wcms/4.0/cdc-wp/images-all-purpose/kitchen_adventurer_donut_1.jpg
  • Alt Text: Donut

Sum of Data

This data bite is calculating the sum of all data in the selected column. The graphic was set to display above the description.

Data Sample: Data Bite Data

Data Format
  • Vertical
  • Multiple Series: No
General
Data Bite Style: Graphic
Data
  • Data Column: Amount
  • Data Function: Sum
  • Add Commas
Image
  • Image Display Type: None
  • Image/Graphic Position: Top

Calculated Average with Picture

This data bite reflects the calculated average amount displayed above the description text. The image was added using a URL to set to display to the left.

Data Sample: Data Bite Data

Data Format
  • Vertical
  • Multiple Series: No
General
Data Bite Style: Value Above Message
Data
  • Data Column: Amount
  • Data Function: Mean (Average)
  • Add Commas
Add Filter
  • Column: Location
  • Column Value: Georgia
Image
  • Image Display Type: Static
  • Image/Graphic Position: Left
  • Image URL: https://www.cdc.gov/wcms/4.0/cdc-wp/images-all-purpose/kitchen_adventurer_donut_1.jpg
  • Alt Text: Donut

Data Bites as an Interactive Element using a Dashboard

Data Bites can be added to a dashboard to allow a user to customize the data view.

Data Sample: Data Bite Data

Please note that these build notes are specific to the data bites only and do not give instructions to replicate this in a dashboard. For purposes of these notes, the visualizations are labeled 1, 2, 3, and 4 from top left to bottom right.

General
Data Bite Style: Graphic (1, 2), Value Above Message (3, 4)
Data
  • Data Column: Amount (1, 2, 3, 4)
  • Data Function: Mean (Average) (1), Sum (2), Count (3), Median (4)
  • Add Commas
Image
  • Image Display Type: None (1, 2), Static (3, 4)
  • Image/Graphic Position: Left (1, 2), Top (3, 4)
  • Image URL: https://www.cdc.gov/wcms/4.0/cdc-wp/images-all-purpose/coastal-village.jpg (3), https://www.cdc.gov/wcms/4.0/cdc-wp/images-all-purpose/tavern.jpg (4)
  • Alt Text: Coastal Village (3), Tavern (4)

Data Bite Using Conditional Imagery

Data bites can be configured to display different imagery depending on the value that is calculated. The image will change based on inputs and filtering.

Notice that once the number increases beyond 19 students with books, the image changes to numerous books. Conditional imagery helps if data sets are updated frequently or dashboard values change with filtering. Having a dynamic conditional image in data bites helps users translate the information. Conditional image URLs can be configured for sets of three or four values:

  • Four values - Default, less than, equal to, and greater than.
  • Three values - Default, less than or equal to, and greater than or equal to.

Conditional imagery can be set for data bites in a dashboard or as a stand alone visualization.

Data Sample: Conditional Image Bite Data

In order to display the dropdowns for the filters and have them be selectable, this data bite was set up in a dashboard. These build notes are only for the data bite and not instructions on setting up this dashboard.

General
Data Bite Style: Value Above Message
Data
  • Data Column: Value
  • Data Function: Sum
  • Suffix: Students (with a leading space)
Images
  • Image Display Type: Dynamic
  • Image/Graphic Position: Left
  • Image URL (Default): /wcms/4.0/cdc-wp/images-all-purpose/young-friends.jpg
  • Alt Text (Default): Youth Standing Together
Add Dynamic Image
  • If Value <= 19 Then
  • Show: /wcms/4.0/cdc-wp/images-all-purpose/blue-book.jpg
  • Alt Text: Few books
Add Dynamic Image
  • If Value >= 20 Then
  • Show: /wcms/4.0/cdc-wp/images-all-purpose/books-stacked.jpg
  • Alt Text: Many Books