Lunch & Learn Stefan Popowycz, BSc, BAH, MA

Senior Information Designer Senior Business Systems Architect

Canadian Institute for Health Information

Presentation Overview

• Who I am, what I do, what CIHI does, and why our work is important.

• Explain the CHRP solutions, the data, the challenges we faced, and detailed examples.

• Information Design, theory in action.

• Things to remember, authors to read, questions.

3 http://pinterest.com/stefanpopowycz/information-design/

Visualizations I created: Visualization I did not create:

Data Visualization Teaser

Who am I

• Stefan Popowycz, B.Sc., B.A.Hons., M.A

• Trained as a Medical Sociologist, Statistician, Researcher

• Senior Information Designer / Senior Business Systems Architect

• Lead Design and Information Architect for the Canadian Hospital Reporting Project 2012 Custom Public Reports.

• Information Access & Delivery Team, Canadian Institute for Health Information

CIHI

• The Canadian Institute for Health Information (CIHI) is an independent, not-for-profit corporation that aims to contribute to the improvement of the health of Canadians and the health care system by disseminating quality health information.

• Additionally, CIHI's data and reports are provided to help inform health policies, support the effective delivery of health services and to raise awareness among Canadians in general on current research and trends in the healthcare industry that contribute to better health outcomes.

Why is our work important?

• Healthcare is extremely important for all Canadians.

• Healthcare data is used to inform decision makers on progress, overall comparison, and most importantly best practice.

• Traditionally, CIHI has had a clear obligation to analyze these data, and communicate the results to all Canadians (vision & mandate).

Why is our work important?

• However, there is a clear shift in the way people are organizing, sharing, and consuming data.

• Proper data visualizations facilitates the comprehension of complex analysis and patterns.

• But, data visualizations do not need to be boring and uninviting.

Challenges

• We needed to design a solution that was sexy, fast, inviting and easily accessible to all Canadians.

• It needed to be public facing.

• Added bonus, if it was functional on a mobile platform with social media capabilities.

• Critical requirement that detailed contextual metadata (tooltips) be made available

Solution

• Never done before: cloud computing and aggregated health care metrics.

• Strong belief in better communication through visualization

• Tableau was the only tool that allowed us to quickly create and publish data visualizations with many best practice features already inherent within the software.

Hospital Reporting

What is CHRP?

• The Canadian Hospital Reporting Project (CHRP) is a national quality improvement initiative providing hospital decision makers, policy makers and Canadians with access to clinical and financial indicator results for more than 600 facilities, from every province and territory in Canada.

What is CHRP?

• The public data visualizations of the CHRP project were designed with the intent to visually and interactively communicate key messages to end users using a web-based business intelligence solution.

• In essence, we wanted to create interactive infographics.

CHRP Key Findings

• The first category of visualization we created we called “Key Findings”. Nuggets of information.

• It's summary level data, at 2-3 different levels of analysis for a specific indicator of interest, and represents an interactive approach to data presentation.

• We created two (2) clinical and two (2) financial key findings.

CHRP Key Findings

• These follow information design best practice with regards to content, colour, typography, interactivity, and design.

• Things to note: 4 key findings in total; 4 vizs in each dashboard; increasing hierarchy; all titles and heading done in Adobe Illustrator at 300 dpi; all embedding within our web ECM.

CHRP Stand Alone Solution

• The second category of data visualizations created we called “Stand Alone Interactive Solution”.

• These consist of more complex data visualizations that combine several types of data within an interactive real-estate.

• Contains guided analysis, allowing the end user to focus in on information of interest.

CHRP Stand Alone Solutions

• Layered views of the same data provides better contextual understanding of the whole message being communicated.

• Things to note: 2 complete solutions; 2 tabs, first tabs have around 5 vizs, second tab around 9; all headings and titles done in Adobe Illustrator; all embedded within our web ECM.

Information Design

Information Design

• Information design represents the clean and effective presentation of information, and involves a multi-disciplinary approach to communication.

• Jen & Ken O’Grady

Information Design

• Its goal is to communicate a specific message to an end user in a way that is clear, accessible and easy to understand.

• Combines graphic design, communications theory, technical and non-technical practices, cultural studies and psychology.

Data Visualization

• Data visualization is a visual representation of data that has a main goal to communicate quantitative information clearly and effectively through graphical means.

• Objects/components/artefacts generated during the Information Design process.

• More analytical in nature, and can be static, animated, or interactive.

Infographics

• Infographics are graphic visual representations of information, data or knowledge, and present complex information quickly and clearly, such as in signs, maps, journalism, technical writing, and education.

• Static and less analytic in nature. Also an artefact of the information design process.

• Currently very popular with media and are published almost on a weekly basis.

Information Design Components

Content, Function, Form

• The essential elements for information design are content, function and form.

• A delicate balance needs to be maintained between all three in order to achieve an effective data visualization.

Form Follows Function

• Content: the information that you want to communicate

• Function: the intended actions associated with the object you are designing.

• Form: the size, shape, dimension and other distinct parameters of the object you are designing.

Negotiation

• Preconceived notions of what type of data visualizations are appropriate hinder the overall information design process.

• Developers need to participate in gentle negotiation between the business and all three elements.

• Ex: academic vs.. graphic art (boxplots vs.. data variability).

Five Design Components

• Key messages (critical analysis)

• Types of underlying data

• Typography (fonts)

• Colour selection

• Design and layout

• Theory in action!

Key Messages

Key Messages

• It is important to clearly define 3-5 key messages that you want to communicate?

• This requires that you distill the various components of your critical analysis into nuggets of information.

• What are they key metrics?

Key Messages

• Important to be explicit when defining your key messages, and try to contextualize them as much as possible.

• Maybe arrange them hierarchically, as it will allow you to get a better understanding of the overall message you want to communicate.

Key Messages

• 30-Day Readmission example.

• Three key messages clearly defined and levels arranged hierarchically in all Key Findings.

• Graphs are clean and crisp.

• Colour palette is muted and maintained throughout all the key findings.

Types of Data

Types of Data

• Important to assess the types of data available for development.

• Compare data to the key messages in order to assess if all necessary fields are available or if additional data collection is necessary.

• Why? The data visualization techniques for one data type may not be appropriate for another type of data.

Types of Data

• Time series analysis (trends, variability, rate of change)

• Part to whole and ranking analysis (bar, pie, Pareto)

• Deviation analysis (categorical, comparative, thresholds)

• Distribution analysis (histogram, box plots, categorical)

• Correlation analysis (scatter plot)

• Multivariate analysis (heat, multiple line)

• Each type has an appropriate graphic technique associate with it.

Types of Data

Some best practices:

• Select the appropriate chart type and units of measurement.

• Include a reference line (if possible).

• Optimize the aspect ratio of the graph (zero line).

• Maintain consistency throughout the graph: fonts, colours, design.

• Avoid 3D graphs.

Types of Data

CHRP best practices:

• Cost per Weighted Case example.

• Mix of traditional and aesthetic visualizations (negotiation between traditional content and current design standards).

• Scatter plot (correlation), bar graph over multiple fiscals (time series and part to whole), categorical analysis (deviation).

Types of Data

CHRP best practices:

• 30-Day Mortality example.

• Reference line used to indicate thresholds. Error bars indicate confidence intervals.

• Pervasive meta data provides contextual information

• Narrative flow is simple (description, left, right, left flow)

Typography

Typography

• Font selection is extremely important when thinking about information design and communication.

• Rule of thumb, keep it simple and ensure the legibility of your design.

• Aesthetics vs. communicability.

Typography

• Compromise between visual impact and the richness of data.

• Try not to use all caps, stylized fonts, or angled fonts. Different types of fonts can be mixed, but be careful.

• Adjust the size, weight, colour of the font for additional impact.

• Integrating Corporate standards and design.

• Donna Wong

Typography

CHRP best Practices:

• Large chunky fonts used to draw end users attention to top.

• Sans serif font employed throughout (web and print).

• All titles are two points larger than the text for impact.

• This pattern is maintained though all data visualizations created for the CHRP public.

Colour

Colour

• Selecting a colour scheme is also very important when designing data visualizations.

• Allows the designer to set the tone of the data visualization.

• Colours used as categorical highlight (performance allocation)

• Corporate colours?

Colour

• Try to keep the representation consistent across your data visualizations.

• Altering the hues and intensity are a good way to draw distinctions and make comparisons.

• Do not use distracting colours.

• Print everything in black and white.

Colour

CHRP best Practices:

• Clean, crisp, and simple.

• Contrasting colours differentiate between values that are above national average and those that are not.

• The colour scheme is carried over into the interactive graph.

Colour

CHRP best Practices:

• In the performance allocation example, the shape and colour indicate these stability and performance of the result.

• Both schemes carried over to the scatterplot below.

• Similar pattern for key findings.

Design and Layout

Design and Layout

• Selecting the proper design and layout for your data visualization is also very important.

• Adhering to simplicity and being aware of narrative flow, will greatly aid in communicating.

• The information should flow with ease for the consumer.

Design and Layout

• Designing the data visualization environment requires some key features: comparing, sorting, filtering, highlighting, aggregating, re-expressions, re-visualization, zooming and panning, re-scaling, access to details on demand, annotation and bookmarking

Design and Layout

• Trellises and cross tabs: provides more contextual view of the data you would like to present.

• Web and social media integration.

• Designed with printing in mind.

Design and Layout

CHRP best practices:

• Trellises and cross tabs: provides more contextual view of the data you would like to present.

• Multiple concurrent views of the data provides helps to provide contextual understanding of your key message.

• Facebook and Twitter functionality, and JavaScript embedding.

Design and Layout

CHRP best practices:

• Entire key finding is interactive.

• Analytical techniques and practices, such as directed vs. exploratory navigation, hierarchical navigation

• Hover over meta data on every data point.

CHRP Key Finding Links

• http://public.tableausoftware.com/shared/6W78QWZHY

• http://www.cihi.ca/cihi-ext-portal/internet/en/document/health+system+performance/indicators/performance/chrp_ireport_findings_b

CHRP Stand Alone Links

• http://public.tableausoftware.com/shared/KWB7FMHPS

• http://www.cihi.ca/cihi-ext-portal/internet/en/document/health+system+performance/indicators/performance/chrp_ireport_financial

Lightweight BI

• Gartner Magic Quadrant for Business Intelligence Platforms

• Why are they so important? They have a lot of the best practices built into them. Easier easier for the developer to create effective data visualizations.

• Many have inherent social media functionality and web integration.

• However, none of them are perfect.

Things to Remember

• Look at your data: what story do you want to tell? How will people consume this information?

• Remember that a chart is always more memorable than a table.

• Keep it simple. Less is more.

• Design, don't decorate.

Authors to Read

• David McCandless

• Manuel Lima

• Stephen Few

• Jen and Ken O'Grady

• Donna Wong

• Edward Tufte

• Nathan Yaw

• Jason Lankow, Josh Ritchie and Ross Crooks

Websites to See

• good.is

• visual.ly

• visualnews.com

• columnfivemedia.com

• thedailyviz.com

• datavisualization.ch

• pinterest.com

• printmag.com

Questions

Thanks!

• Stefan Popowycz

• Email: spopowycz@cihi.ca

• Website: www.cihi.ca

• Information Design Pinterest: http://pinterest.com/stefanpopowycz/information-design/

• LinkedIn: ca.linkedin.com/in/stefanpopowycz