Better Information from Better Visualization

Nicole Arksey, Inetco Systems Ltd

Scott Chapman, American Electric Power

Who we are

• Nicole – Manager, User Experience and Web Application Group, gets paid to come up with new ways to make it easier for people to understand their data.

• Scott – Mainframe capacity and performance guy, gets paid to improve and explain mainframe performance and capacity. That often involves visualizing data that is voluminous, complicated, or both.

• Y’all – here to keep us honest and make this interactive!

Why Good Visualizations Are Important

Why Good Visualizations Are Important

Source: http://peltiertech.com/WordPress/use-bar-charts-not-pies/

Outline

PART 1:

Making Bad Visualizations Better

PART 2:

Visualization Guidelines

PART 1: Making Bad Visualization Better

Response times by region

Response times by region

Response times by region

CPU Utilization

CPU Utilization

CPU Utilization

Real Time Application Status

Real Time Application Status(Bullet Charts)

ThresholdBox

Average ValueCurrent

Value

Application Performance

Application Performance(Sparklines)

Min Value

Thresholds

Max Value

Max, Min and Average

CurrentValue

Number of Incidents

Number of Incidents(with historical perspective)

Number of Incidents(variation from SLA)

Number of Incidents(Just what’s needed)

CPU Delay By Hour(Heat chart)

CPU Delay By Hour

Transaction DataTime Duration

Application Delay

Type Region Status

September 16, 12:35.123 5 5 Purchase North DeclinedSeptember 16, 12:35.124 10 3.1 Reversal South DeclinedSeptember 16, 12:35.125 10.2 3.2 Reversal North FailedSeptember 16, 12:35.126 10.3 3.1 Reversal East DeclinedSeptember 16, 12:35.127 4.5 3.4 Authorization North DeclinedSeptember 16, 12:35.128 4.5 3.2 Reversal North ApprovedSeptember 16, 12:35.129 6 3.3 Purchase West ApprovedSeptember 16, 12:35.130 10 3.2 Purchase West ApprovedSeptember 16, 12:35.131 5 3.3 Purchase West ApprovedSeptember 16, 12:35.132 5.5 3 Reversal South ApprovedSeptember 16, 12:35.133 8 3 Purchase West ApprovedSeptember 16, 12:35.134 12 3 Purchase South ApprovedSeptember 16, 12:35.135 12 3 Purchase West ApprovedSeptember 16, 12:35.136 5 3 Purchase West ApprovedSeptember 16, 12:35.137 4 3 Purchase North ApprovedSeptember 16, 12:35.138 4 3 Purchase West ApprovedSeptember 16, 12:35.139 4.5 2.1 Purchase West ApprovedSeptember 16, 12:35.140 4.5 2.5 Purchase West ApprovedSeptember 16, 12:35.142 5 3 Purchase West ApprovedSeptember 16, 12:35.143 20 15 Purchase West ApprovedSeptember 16, 12:35.144 5 3 Purchase East ApprovedSeptember 16, 12:35.145 5 3.1 Purchase East Approved

Transaction Data(Bubble Charts)

Transaction Data(Parallel Coordinates)

PART 2: Visualization Guidelines

Determine your message first

• Your data tells a story—have a clear vision of that story• Are you showing:

• Value changes over time?• Ratios?• Comparisons to thresholds?• Relationships between changing values?

• What conclusion do you want your audience to come to?• If you find you have too much data, think about what really

needs to be shown to support the intended conclusion• Consider highlighting data that supports the conclusion

Picking a chart:Values changing over time• Classic Line chart

• Widely used and easily understood• May be hard to find individual data values on the line

• Consider adding data markers (carefully, can lead to cluttered chart)

• Wide variability between data points can lead to difficult to read chart

• In Excel, consider using data markers only—no line

• Area chart• Very similar to line chart, but with more “weight”

• Sparklines• Small line charts, meant to be displayed with other

information

Picking a chart:Ratios and Comparisons• Beware the pie chart!

• More difficult to perceive differences between angles than length• If more than a few slices, labeling becomes difficult

• Consider bar charts• Bar length makes differences easier to perceive• Consider ordering the observations intelligently• Can effectively display many more values

• Heat maps for large quantities of data• Can be difficult to interpret details• Work best when interactive with tool tips or click-through to details

• Consider bullet graphs for threshold comparisons• Much more compact than speedometers

Picking a chart:Finding relationships• Scatter plots

• Good for comparing two quantative values• Correlation generally stands out visually

• Bubble charts • Can be used similarly to scatter plots but variances in bubble

size and color can encode two more variables• Can be difficult to discern small differences in size/color• Interactive bubble charts can be very compelling though

• Parallel Coordinates• Can be used when variables are both quantitative and

qualitative• Can help you see correlations between multiple variables• Can be used with very large number of observations• Limited tooling available

Colors

• Use white as your background for your chart• Consider intensities of a single color for data ranges• Use less saturated colors

• Reserve vivid colors for highlighting particular data points• Consider gray scale for most data, reserving color for

highlights

• Use different colors with similar intensities to denote categories of data

• Color blindness is common!• Red-green: 7-10% • Yellow-blue: 6%• Free check tool available at vischeck.com

Chart Junk

• Don’t include what’s not needed!• Don’t let visual effects distract the reader from the story

of your data• Unless obfuscation is the goal

• 3-D effects are often overused and unnecessary• Avoid unnecessary gradients, icons, and backgrounds

• Sometimes a background indicating thresholds may be ok

• Grid lines don’t need to be dark• Y-axis should usually start at zero

Tools – everyday use

• SAS (and R?)• Great for data analysis• Sophisticated graphical output, with a significant learning

curve

• Excel and other spreadsheet programs• Less sophisticated data analysis• Much easier to produce customized graphs

• Consider combining• Use SAS/R for initial data analysis, producing a CSV file• Use Excel to read the CSV file and produce charts

• Data range input can be set up to automatically re-read the data when the spreadsheet is opened

Tools – Libraries for Web Apps

• A lot more work than Excel• Appropriate for important daily charts• Need HTML, CSS, JavaScript skills

• Or a package that creates the web pages for your

• Multiple JavaScript libraries available, many free• Protovis and D3 (poor support for IE <9)• Plotr / Flotr / Flotr2 • Raphaël / gRaphaël• YUI Charts• Dojo Charts• JSCharts (commercial licensed)• Highcharts (commercial license)

Tools - other

• Parallel Coordinates • Parvis• XDAT• GGobi

• Many Eyes• Try multiple visualization techniques on your data• See other people’s visualizations• http://www-958.ibm.com/software/data/cognos/manyeyes/

QUESTIONS?