Data Visualisation

 

 

12 May 2020

@maartenzam

Boehringer Ingelheim

2.Interactive & online

Today

1. Data visualisation fundamentals

2. Online and interactive data visualisation

3. Going beyond bars and lines: non-standard visualisations

4. Dashboard design

Interactive & online viz

Online graphics: bitmaps, svg, canvas, webGL

Responsive data visualisation

Interactive data visualisation

Why the New York Times is doing fewer interactives

Online graphics

Bitmaps

Raster of pixels

Each pixel a color

Vectors

Coordinates

Shape specification

Shape properties

[1,1] => rgb(255, 255, 255)
[1,2] => rgb(236, 89, 83)
[1,3] => rgb(234, 50, 35)
...

<circle cx=30 cy=30 r=20 fill="red">

Bitmaps

Do not scale

 

jpg, png

 

Vectors

svg = scalable vector graphics

 

<circle>, <line>, <rect>, <path>, <text>, ...

 

Works together with html, css, js

 

[1,1] => rgb(255, 255, 255)
[1,2] => rgb(236, 89, 83)
[1,3] => rgb(234, 50, 35)
...

<circle cx=30 cy=30 r=20 fill="red">

svg

Scales well in resolution

Smaller file sizes

Part of the DOM: events

Animatable

Accessible

Filters

Part of the DOM: limited number of elements

Not good for things like photos

canvas

Added in html5

Draw bitmaps with javascript

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw() {
        var canvas = document.getElementById('tutorial');
        var ctx = canvas.getContext('2d');
        ctx.fillStyle = "green";
        ctx.fillRect(10, 10, 100, 100);
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

svg

canvas

Pro

Con

Easy to get started

Easy to register user interactions

Easy to animate

Very performant

Easy to update

Potentially complex DOM updates

Not performant for large numbers of elements

More work to get started

More work to handle interactions

Have to write custom animations

WebGL

Responsive visualisations

Font too small

Axis labels might start to overlap

Line is too narrow

Small responsive

Less ticks
More compact formatting
Thicker line width
Bigger font
Remove y axis

Large responsive

More ticks
Less compact formatting
Thinner line width
Smaller font

Chart orientation

Interactivity

What is interactivity for visualisation?

What is interactivity?

As of today there is no consensus on what interaction is, and what its role for visualization is – as interaction is an elusive and overloaded term

Interactivity for analysis

 

Specify visual encoding

 

Choose different dimension to be visualised

Choose another chart type

Interactivity for analysis

 

Filter out relevant data

 

Thresholds, time ranges, categories, geographical regions, ...

 

Interactivity for analysis

 

Sort data

 

To reveal patterns

 

Interactivity for analysis

 

Derive values

 

Normalisation

Aggregation

Models and statistics

Interactivity for analysis

 

Select items

 

Identify single or multiple items, get details/summaries

Filter items in or out

 

Interactivity for analysis

 

Navigate

 

Zoom out for bigger picture

Zoom in for details

Pan the viewport on the data

 

Interactivity for analysis

 

Coordinate multiple views

 

Explore multivariate data

Small multiples

Brushing and linking

 

Interactivity for explanatory data visualisation

What interactive features can you identify in pudding.cool/2019/04/eu-regions?

Interactivity for Explanatory dataviz

 

Tooltips

 

Identify items

Offer exact data points

Give more details

Interactivity for Explanatory dataviz

 

Highlighting

 

Identify items

Show group of items

Interactivity for Explanatory dataviz

 

Animation

 

Object constancy

Transitions for zoom and panning the data space

Transition between visual encodings

Need triggers: time interval, scroll, click

Interactivity for Explanatory dataviz

 

Zoom

 

Filter, focus attention

Why the NYT is doing fewer interactives

Title of a famous talk by Archie Tse, graphics director of The New York Times

 

Based on user statistics, they noted that many interactive features were not being used

 

They came up with 3 rules for visual storytelling

 

They apply to the online news context, but good to know about them

1. If you make the reader click or do anything other than scroll, something spectacular should happen

2. If you make a tooltip or a rollover, assume no one will ever see it. If content is important for readers to see, don't hide it

3. When deciding to make something interactive, remember that it is expensive to make it work on all platforms

  • Users can dig deep
  • Users can discover the full data set
  • Interaction can help build trust in your analysis

Tomorrow

1. Data visualisation fundamentals

2. Online and interactive data visualisation

3. Going beyond bars and lines: non-standard visualisations

4. Dashboard design

Thank you!

slides.com/maartenzam/boehringer-2


www.maartenlambrechts.com

@maartenzam

Interactive and online visualisations

By maartenzam

Interactive and online visualisations

  • 238
Loading comments...

More from maartenzam