Pattern library

Sections

• Bar graph

  Show relationships

  A bar chart is a visual representation of data that uses bars to show the relative values of different data points.

  

• Customization buttons

  Interaction

  Buttons used to modify the graph: sorting, changing from list to tiles, changing size, going from absolute to relative, etc.

  

• Drop-down selector

  Interaction

  Drop-down selections allow users to choose between different options.

  

• Heat map

  Part to whole

  A heat map is a visual representation of data that uses color to show the values of two or more variables.

  

• Histogram

  Distribution

  A histogram is a visual representation of data that uses bars to show the frequency or number of observations within a given range of values.

  

• Key highlights

  Single value

  Key highlights tiles are used to draw attention to the key insights from the data product.

  

• Line chart

  Capture a trend

  A line chart is a visual representation of data that uses a series of connected data points to show the values of different data points over time.

  

• Map

  Distribution

  A map is a visual representation of geographical data, from simple geographic boundaries to complex statistical information.

  

• Pie chart and doughnut chart

  Part to whole

  A pie chart is a visual representation of data that uses slices to show the relative sizes or proportions of different data points.

  

• Related products

  Discovery

  Allows the user to discover other related health data products.

  

• Scatter plot

  Show relationships

  A scatter plot is a visual representation of data that uses dots or markers to show the values of two or more variables.

  

• Tabbed interface

  Interaction

  Tabbed interfaces allow splitting a complex data product in multiple sections.

  

• Timeline slider

  Interaction

  Timeline sliders allow users to see data for a specific time period.

  

• Transitions

  Interaction

  Transitions go smoothly from one state to another.