DATA

  VISUALISATION

    SANDRAVIZ.COM | 2023

 

0 | DATAVIZ SKILLS

 

 

0 | DATAVIZ SKILLS

 

 

0 | DATAVIZ SKILLS

 

 

0 | DATAVIZ SKILLS

 

INTRO

The purpose of data visualisation are insights not pictures

B. SCHNEIDERMANN

H. ROSLING

Let my dataset change your mindset

It's not what you look at that matters, it's what you see.

H. THOREAU

 

01

 

The purpose of data visualisations is to enlighten people.

Not to entertain them, not to sell them products, services, or ideas, but to inform them.

It’s as simple and as complicated as that

A. CAIRO

E. TUFTE

WHAT IS DATA VIZ?

 

01 | THE OBJECTIVE

 

Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.

E. TUFTE

Big Data Viz

 

 

 

 

 

Now, through ADV [Advanced Data Visualisation], potential exists for nontraditional and more visually rich approaches, especially in regard to more complex (i.e., thousands of dimensions or attributes) or larger (i.e., billions of rows) data sets, to reveal insights not possible through conventional means.

 

E.VELSON, 2011, PARA,. 6

 

01

 

 

01 BIG DATA ALLOWS FOR PATTERN DETECTION

 

EVENT DETECTION 

A radial plot visualization of 23,581 photos taken during 24 hours in Brooklyn area during hurricane Sandy (2012).

The photos are organized by time (angle) and hue (distance from the center).

Note the line marking a change in the number of photos and their brightness, corresponding to the moment of the power outage in the area.

This sudden and dramatic visual change (compared to normal day) reflects well the intensity of the human experience during the event.

 

01

 

 

01 | VISUAL ENCODINGS

 

Prediction skill

 

 

 

 

 

How well the prediction model performed on historic data in that region is expressed through opacity.

Regions with higher skill values are more opaque, regions with lower values more transparent.

Only lines that represent areas with skillful forecasts are visible at all.

 

01 | EXAMPLE

 

 

01 | OBSERVATION VS. PREDICTION PLOT

 

 

Summarises the mean wind speed observations in the selected geographic region over the last 30 years, in the respective season. Each observation is color coded and split into three categories of equal size (terciles) that indicate if that year had low(blue), medium(grey) or high(yellow) wind speeds.

Observation plot

 

Presents the predicted values of the 51 ensemble members obtained by the RESILIENCE prototype. These values comprise the calibrated probabilistic prediction for the selected region. The ensemble predictions are displayed as a cone of rays emanating from the typical (median) value of the historic data.

Prediction plot

 

01 | OBSERVATION VS. PREDICTION PLOT

 

 

01 | VISUAL ENCODINGS

 

 

01 | VISUAL ANIMATION TO PRESENT SIMULATION

 

 

01 | SCROLL-Y-TELLING TO EXPLAIN MACHINE LEARNING

 

 

01 | ANIMATED VISUALIZATION AS THE FLOW OF THE STORY

 

 

01 | FINAL CONCLUSION

ALGORITHM VIZ

 

 

 

 

 

To visualise an algorithm, we don’t merely fit data to a chart; there is no primary dataset. Instead there are logical rules that describe behaviour. But algorithms are also a reminder that visualisation is more than a tool for finding patterns in data. Visualisation leverages the human visual system to augment human intellect.

M. BOSTOCK

 

01

 

 

01 | COMPLEX CONCEPTS VISUALLY EXPLAINED

 

01 | STATISTICAL CONCEPTS EXPLAINED THROUGH INTERACTIIVE VIZ

 

 

 

 

 

01 | DATA ART

INFORMATION/DATA ART

 

 

 

 

 

Information art has a long history as visualisation of qualitative and quantitative data forms a foundation in science, technology, and governance. Information design and informational graphics, which has existed before computing and the Internet, are closely connected with this new emergent art movement

WIKIPEDIA

 

01 | CONSTELLATION MAPS

 

 

A series of posters designed to resemble constellation maps but instead of being based on real stars, the shapes are based on first sentences from chapters of short classic stories.

Literary Constellations

 

01 | VISUAL EONCODINGS

PRACTICE

DEFINE

OBJECTIVES

DATA

EXPLORE

 

02 | THE COMMON FLOW

 

When starting on a new data visualization project, I usually ask for two things from my clients: an objective and a data set.

To me, it is essential to understand what we want to achieve on a strategic level, but also which inspirations we can draw from investigating the data. Sometimes, the data can suggest ideas and insights you could not have come up with on your own.

M. STEFANER

DEFINE

OBJECTIVES

DATA

IDEA

RESULT

TOOL

EXPLORE

DESIGN

CREATE

REVIEW

 

02 | THE COMMON FLOW

 

 

02 | APPLIES TO A DATAVIZ PROJECT TOO

 

DATAVIZ TYPE

 

02 | DATAVIZ CATALOG

 

 

02 | 25 VISUALIZATIONS 1 DATASET

 

 

02 | EXAMPLES WITH CODE

 

THE SPAGHETTI PLOT

 

02 | STANDARD LINE CHARTS FOM THE 90s

 

 

02 | CHART EVALUATION

Too much chartjunk

 

 

 

Bad choice of colours

 

 

 

Missing focus

The grey background, the grid, the shapes on the lines, the frame around the legend, the axis labeling

 

In this example colours have the function to distinguish, therefore choosing similar colours makes no sense.

Including many lines in one chart without the option to help the user focus on one and compare to the others, interpretation is difficult.  

 

02 | LINE CHART WITH HIGHLIGHT OPTION

 

 

02 | CHART EVALUATION

 

HIGHLIGHTING

 

 

 

 

 

 

 

 

Highlighting the lines to provide data context while focusing on select series, which allows to explain the feature of one particular group compared to the others. Make it appear different, and give it a proper annotation.

 

In this example:

Trough the size of the life: highlighting the average, extreme values, discovered groups of lines representing a certain pattern,

 

 

02 | LINE CHART WITH FILTER OPTION

 

 

02 | CHART EVALUATION

FILTERING

 

 

 

 

 

 

 

 

Filtering simply eliminates elements, it is very straightforward for users to understand and compute. 

The challenge comes in designing a vis system where filtering can be used to effectively explore a dataset.

In this example:

The user types in a search box the terms which wants to be compared.

 

 

 

02 | SMALL MULTIPLE AREA CHART

 

 

02 | SMALL MULTIPLE AREA CHART

 

Is a series of similar graphs using the same scale and axes, allowing them to be easily compared. Comparing two views that are simultaneously visible is relatively easy, because we can move our eyes back and forth between them to compare their states. In contrast, for a changing view, comparing its current state to its previous state requires users to consult their working memory, a scarce internal resource.

In this example:

The level of immigration/emigration it layered by country. The ordering helps the user interpreting the results and detect extreme values and common patterns.

SMALL MULTIPLE

 

 

 

 

 

 

 

 

 

02 | SMALL MULTIPLE PLUS FILTER & LINKED HIGHLIGHT OPTION

 

 

02 | SMALL MULTIPLE PLUS FILTER & LINKED HIGHLIGHT OPTION

 

LINKED HIGHLIGHTING

Interactivity unleashes the full power of linked views., the most common forms of linking is linked highlighting, where items that are interactively selected in one view are immediately highlighted in all other views using in the same highlight color. whether it is distributed differently..

In this example:

The category state is highlighted across the different KPIs: population, assaults, robberies and murders.

 

 

02 | SMALL MULTIPLE PLUS FILTER & HIGHLIGHT OPTION

 

 

02 | SMALL MULTIPLE PLUS FILTER & HIGHLIGHT OPTION

 

LINKED HIGHLIGHTING & FILTERING

In this example:

The data is represented as a small multiple using the category "theme", highlighting the current year compared to the rest of the years and filter on different years via a button applied to the complete visualization.

 

DATAVIZ TOOLS

 

02 | ALL RESOURCES - TOOLS

 

 

02 | WEB BASED TOOLS FOR QUICK EXPLORATION

 

 

 

 

 

02 | VISUALISATION FOR DATA SCIENTISTS

 

 

02 | INDUSTRY STANDARDS

 

 

02 | EXPLORATIVE ANALYSIS

 

 

02 | DYNAMIC VISUALIZATION FOR THE WEB

 

 

02 | LOCATION BASED DATA MAPPING

 

 

02 | WebGL

GOOD & BAD VIZ

 

02

 

 

02 | WHAT MAKES A GODO VIZ

 

 

02

 

 

02 | OVERPLOTTING PROBLEM

 

Solutions

Change symbol size > trying to increase white space

Use transparency > when more symbols appear on top of each other leads to less transparency

Reduce data > break up the population into sub samples and show them via small multiples

Aggregate data > into bins

 

 

02 | SHOW THE DATA

 

 

02 | AWARD WINNERS

 

 

02 | TIPS & TRICKS

 

 

02 | GOOD PRACTICE

 

VIZ

 

02 | LEARNING FROM THE BAD

 

VISUAL ENCODING

 

03 | SEEING = UNDERSTANDING

 

 

 

 

03 | DIFFERENT TYPES OF VISUAL ENCODING

 

 

03 | DEFINITION

 

When a graph is constructed, quantitative and categorical information is encoded, chiefly through position, shape, size, symbols, and color.

When a person looks at a graph, the information is visually decoded by the person’s visual system. A graphical method is successful only if the decoding is effective.

No matter how clever and how technologically impressive the encoding, it fails if the decoding process fails.

Informed decisions about how to encode data can be achieved only through an understanding of this visual decoding process, which we call graphical perception.

CLEVELAND & MCGILL

 

03 | EXPLANATION

How do we make sure the audience is able to decode the information?

Legends (e.g. size bubble legend to endorse comparison)

Labels (if there is enough space you can add labels directly)

Keys (e.g. color scale: provide a key for each one)

 

 

COLOR

 

03 | COLOUR WHEEL

 

 

03 | RULES

 

Saturation

Don't over do it !!!

Use it to guide the viewer, tell the story, change the mood or draw attention to something

 

 

 

03 | DON'T USE COLOURS TO SHOW INTENSITY

 

 

03 | SUPPORT TOOLS | COLOUR BREWER

 

 

 

03 | ADVANCED TOOLS

 

 

03 | ADVANCED TOOLS

 

 

03 | COLOR CHECK

 

 

03

 

ENVIRONMENT | NATURE | PERMISSION

 

03

 

 

03

 

SUN | HAPPINESS | PLAYFUL

 

03

 

 

03

 

DANGER | PASSION | BLOOD | LOVE | AGGRESSION

 

03

 

 

03

 

WATER | COOL | QUIETNESS | HOPE

 

03

 

 

03

 

DEATH | LUXURY | SOPHISTICATION

 

03

 

 

03

 

WEDDING | PURE | INNOCENT

 

03

 

 

03 | NEON COLOUR WITH DARK BACKGROUND

 

 

03 | ENDORSEMENT OF DIRECT COMPARISON

 

 

 

03 | OVERLAPPING PATTERN STRUCTURES

 

 

 

03 | PATTERN STRUCTURES THROUGH COLORS

 

 

 

03 | INTUITIVE CATEGORIZATION THROUGH COLORS

 

 

POSITION

 

03 | POSITIONING IN THE COORDINATE SYSTEM

 

 

 

 

 

03 | LEFT RIGHT RELATIONSHIP | COMPARISON

 

 

 

03 | ORDERING FROM TOP LEFT TO BUTTOM RIGHT

 

 

03 | USING COLORS TO INDICATE GOOD VS. BAD

 

 

REDUNDANCY

 

03 | LABELING & LEGEND ARE SHOWING THE SAME INFORMATION

 

 

 

 

 

03 | COLOR SUPPORTS THE POSITION ENCODING

 

 

 

 

HUMAN PERCEPTION

USERS ARE

HUMANS

 

04 | SAME MEAN, VARIANCE AND CORRELATION - SAME DATA?

 

 

 

04 | SCATTER PLOT SHOWS THE DIFFERENCES

 

 

 

04 | HOW MANY MORE POINTS ARE IN THE QUADRANT BELOW?

 

 

04 | HOW MANY MORE POINTS ARE IN THE QUADRANT BELOW?

 

 

04 | THE ABSOLUTE DIFFERENCE IS THE SAME

 

 

04 | WHICH BAR IS LARGER?

 

 

 

04 | WHICH BAR IS LARGER?

 

 

 

04 | IS THE COLOR OF THE QUADRANT BEHIND THE LETTER A & B THE SAME?

 

 

 

04 | IS THE COLOR OF THE QUADRANT BEHIND THE LETTER A & B THE SAME?

 

 

USERS

U X

 

04 WHO ARE THE USERS?

 

 

04 | AVOID CHARTJUNK

 

 

 

 

04 | PRESENTING TRUTH

 

 

 

04 | PRESENTING TRUTH

 

 

 

04 | SHOWING REAL PROPORTIONS

 

 

04 | HANDELING OUTLIERS

 

 

 

04 | HANDELING OUTLIERS THROUGH RE-SCALING

 

 

 

04 | GENERAL WAYS OF VISUALIZING OUTLIERS

 

 

VISUAL COMPLEXITY

Even publications, such as NY times assume that people are intelligent enough to read complex prose, but too stupid to read complex graphics.

E. TUFTE

 

04

 

04 | NUMBER OF VISUAL ENCODINGS

 

 

04 | LEVEL OF INNOVATION

 

 

 

04 | LEVEL OF INNOVATION

 

 

 

04 | GUIDANCE

 

DATA VISUALISATION

By Sandra Becker

DATA VISUALISATION

  • 5,230