grid grid small list close gear menu search external_link linkedin bio twitter leader-area

Introduction

Good data visualization communicates information clearly and succinctly through a combination of color, illustration and typography. It makes information visually interesting, accessible and approachable. When done with care, it also helps focus your readers’ attention.

We strive to maintain a consistent style of data visualization to:

  • Tell meaningful stories in a direct and simple way 
  • Create professional-looking documents 
  • Ensure that information is communicated clearly
  • Maintain the DXC brand image

This section highlights visual elements that should be used consistently including: type styles, pie charts, line graphs, bar charts, maps and navigational graphics, and rules and colors as applied to tables.

Typography

Follow these simple rules when using type to help make better-looking stories that are easier to read:

  • Use graphic numbers in larger scales and bolder weights to guide the reader’s attention through the material.
  • Heavy rules add importance and substance to the text above them. Use rules the width of the column to divide headings and subheadings from the text below.
  • Text headers should be in bold, and bulleted text should be regular weight.
  • Add interest to the content while maintaining a hierarchy of material by mixing contrasting sizes of bold and regular-weight type.
  • Set type flush left and ragged right, maintaining a “lively” rag on the right side.
  • When possible, don’t hyphenate words.
  • Don’t set the text full-width in headings if the runover line is a single word or a very short phrase. 
  • Try to break lines into logical chunks of thought.
  • Use sentence case and avoid using all caps.

Graphic numbers

Graphic numbers make information easier to read, add visual impact and create a contrast with the white space around them. The scale of graphic numbers is large and prominent in relation to the regular-weight text near it. Using graphic numbers makes the reader feel that the numbers being represented are trustworthy.

A few rules to follow:

  • Leave white space around graphic numbers so they are not crowded by other text and can stand out as important elements. 
  • Typeset graphic numbers in solid black. Don’t outline the number, fill it with a color or use a gradient. 
  • Don’t apply special effects such as a drop shadow to graphic numbers.

Tables

Tables help synthesize large amounts of data into an organized, comprehensible format. The goal is to create tables that look clean and uncluttered. To do so:

  • Follow the type hierarchy for headings, subheads and content. 
  • Content may be set as bullet points to make reading easier.
  • Use graphic numbers when appropriate to make tables interesting, easy to navigate and “friendly” to read.
  • Size rows and columns consistently to create a sophisticated, professional look.
  • Increase margins and negative space inside the cells to let the type breathe.
  • Use a heavy black rule at the top to draw attention to the table and anchor it on the page.
  • Close the table with a heavy rule in the same weight.
  • Use thin, black, horizontal rules to divide sections. 
  • Avoid building tables with both horizontal and vertical rules. Use columns with text set flush left to delineate columns vertically and to maintain the table’s clean and sophisticated appearance.
  • Text should be aligned to the top rule, leaving generous white space below the last line of a section. Try not to crowd sections with text.
  • Use our secondary yellow color to highlight important material.
  • A light-gray background may be used to draw attention to important data.
  • Place the most important data in the far-left data column(s).

Pie charts

Pie charts are used to show data as parts of a whole. They are most effective when you limit the number of slices to no more than six. If you have additional slices, group them into a single slice labeled “other.” A few more rules:

  • Don’t outline the pie with a stroke.
  • Use black as one of the sections, followed by gray(s) and DXC Yellow. Use the tertiary colors at 100% for additional sections.
  • Use a heavy black rule at the top to draw attention to the pie chart and to anchor it on the page.
  • A gray background is a good “container” for the pie chart and its explanatory information.
  • Follow the type hierarchy for contrast and use graphic numbers with bold callouts.
  • Set callouts flush left on the chart’s right side and flush right on the left side. Maintain the alignment on all callouts in a column.
  • Narrow columns of callout text are preferable to wide columns because they are more attractive and easier to read.
  • Thin, black rules lead the callout to the section and are always placed at the first line of the callout. Lines may be horizontal or vertical, but never diagonal. Lines should have no more than one 90-degree corner.
  • Apply consistent labeling. When space is limited, callouts may be typeset in each pie section with a centered alignment. Use white callouts on dark backgrounds and black callouts on light-colored backgrounds.
  • A black vertical rule may be used to divide key or secondary information from the pie graphic.
  • Use callouts rather than color keys to define pie data.
  • Don’t apply special effects such as a drop shadow to pie charts or sections of pie charts.

Donut pie charts

Donut pie charts with large sections and a small center hole may use text placed within each section. Use bold, white callouts on dark backgrounds, and bold, black callouts on light-colored backgrounds. Explanatory text may be placed alongside the pie and divided by a thick black vertical rule.

  • Butt adjacent pie sections without dividing rules.
  • Don’t outline the pie with a stroke.
  • Use black as one of the sections, followed by gray(s) and DXC Yellow. Use the tertiary colors at 100% for additional sections.
  • Donut pie charts with small sections and a large center hole use callouts outside the pie. Don’t place type in the pie sections.
  • An identifier may be placed in the center of the large-hole pie chart in bold type.
  • Follow type hierarchy for contrast and use graphic numbers with bold callout text.
  • Set callouts flush left on the chart’s right side and flush right on the left side. Maintain the alignment on all callouts in a column.
  • Narrow columns of callout text are preferable to wide columns because they are more attractive and easier to read.
  • Thin, black rules lead the callout to the section and are always placed at the first line of the callout. Lines may be horizontal or vertical, but never diagonal. Lines should have no more than one 90-degree bend.
  • Apply consistent labeling. When space is limited, callouts may be typeset in each section with a centered alignment. Use white callouts on dark backgrounds and black callouts on light-colored backgrounds.
  • Use callouts rather than color keys to define pie data.
  • Don’t apply special effects such as a drop shadow to pie charts or sections of pie charts.

Bar graphs

Bar graphs allow multiple data sets to be compared and presented in relation to each other. Use bar graphs for comparing and contrasting discrete quantities or different categories of data, and for illustrating changes in value. Don’t apply special effects such as a drop shadow to bars.

Horizontal-bar graphs:

  • For bar charts with many data points, place bars on a heavy black “grounding” line.
  • Individual bars may be a single color or have stacked sections. Values may be within the bar when space allows, or placed above the bar when it does not.
  • Typeset years as four digits in regular weight. Set data values in bold.
  • Avoid gridlines on the x- and y-axes.
  • Follow the type hierarchy for headings and bullets.
  • Key information should be typeset in regular text, sentence case, with a vertical alignment for key colors and callouts.

Stacked-bar graphs:

  • Heavy content may be contained in a light-gray area.
  • To avoid clutter, bars should be narrow with no visible baseline. Text may be placed in close proximity.
  • When appropriate, small, black icons can replace type to help avoid an excessively text-heavy graph.
  • Wide-stacked bars may contain values typeset in sentence case with a top alignment.

Line graphs

Use line graphs to compare quantities or continuous data over time. Use a thin black baseline to anchor the graph so that it does not compete with the story being told.

  • Simple line graphs should have no visible grid lines.
  • Use as few axis lines as possible. The most important lines should be heavy. Multiple lines in a graph should have similar weights.
  • Use black, gray, white and DXC Yellow for simple line graphs. Complex graphs may also use the tertiary palette for clarity.
  • Line graphs with many lines may use thin horizontal rules and values on the y-axis. A color key should appear alongside the graph.
  • Follow type hierarchy and, when appropriate, typeset the most important data point as a bold graphic element.
  • Don’t apply special effects such as drop shadows to line graphs.

Maps

Maps are drawn as single-color, light gray, one-dimensional shapes.

  • Maps have no defining strokes between countries or areas, and no outline.
  • Locations are defined with open circles, using black in a thin line-weight.
  • Locations are connected to their identifiers by thin, black lines. Lines may have only one 90-degree corner adjacent to the open circle. Lines should not have a second corner at the identifying label.
  • Labels are bold weight, set flush left in narrow columns.
  • Don’t apply special effects such as drop shadows to maps or location circles.

What the right elements look like together

Things to avoid

  • DON’T center body text.

  • DON’T use grid lines in charts or graphs.

  • DON’T add color for decoration. Add color only to help to tell the story.

  • DON’T typeset callouts in all caps.

  • DON’T color charts with only the secondary and tertiary colors.

  • DON’T use an outline on maps.

  • DON’T create data visualizations that are cluttered with information and icons.

  • DON’T define donut pie chart sections with a stroke.

  • DON’T use graphic elements that are not in the system (i.e., angled divider line).

  • DON’T make divider rules as heavy as the header rule. Use thin rules to divide sections.

  • DON’T use locators that aren’t in the visual system. Use thin line-weight open circles.

  • DON’T place lines to callouts at an angle.

  • DON’T use background colors other than DXC Light Gray.

  • DON’T use colored callouts.

  • DON’T use background colors other than DXC Light Gray.

  • DON’T use colors that aren’t in our color palette.

© DXC Technology