12 May 2020
@maartenzam
Boehringer Ingelheim
1. Data visualisation fundamentals
2. Online and interactive data visualisation
3. Going beyond bars and lines: non-standard visualisations
4. Dashboard design
Online graphics: bitmaps, svg, canvas, webGL
Responsive data visualisation
Interactive data visualisation
Why the New York Times is doing fewer interactives
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">
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
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
Hardware accelerated graphics
In <canvas>
animating lots and lots of circles with WebGL and REGL.js
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
Choose different dimension to be visualised
Choose another chart type
Thresholds, time ranges, categories, geographical regions, ...
To reveal patterns
Normalisation
Aggregation
Models and statistics
Identify single or multiple items, get details/summaries
Filter items in or out
Zoom out for bigger picture
Zoom in for details
Pan the viewport on the data
Explore multivariate data
Small multiples
Brushing and linking
What interactive features can you identify in pudding.cool/2019/04/eu-regions?
Identify items
Offer exact data points
Give more details
Identify items
Show group of items
Object constancy
Transitions for zoom and panning the data space
Transition between visual encodings
Need triggers: time interval, scroll, click
Filter, focus attention
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. Data visualisation fundamentals
2. Online and interactive data visualisation
3. Going beyond bars and lines: non-standard visualisations
4. Dashboard design