Ryan Hafen

42 Pages·2017·5.68 MB·English

TrelliscopeJS
Modern Approaches to Data Exploration
with Trellis Display
Ryan Hafen
Hafen Consulting, LLC
Purdue University
@hafenstats
http://bit.ly/trelliscopejs1
All examples in this talk are
reproducible after installing and
loading the following packages:
install.packages(c("tidyverse", "gapminder", "rbokeh",
"visNetwork", "plotly"))
devtools::install_github("hafen/trelliscopejs")
library(tidyverse)
library(gapminder)
library(rbokeh)
library(visNetwork)
library(trelliscopejs)
TrelliscopeJS is an htmlwidget
TrelliscopeJS is a layout engine for
collections of htmlwidgets
TrelliscopeJS is a framework for creating
interactive displays of small multiples
Small Multiples
A series of similar plots, usually
each based on a different slice of
data, arranged in a grid
This idea was formalized and
popularized in S/S-PLUS and
subsequently R with the trellis and
lattice packages
"For a wide range of problems in
data presentation, small multiples
are the best design solution."
Edward Tufte (Envisioning
Information)
Advantages of Small Multiple Displays
Avoid overplotting
Work with big or high dimensional data
It is often critical to the discovery of a new
insight to be able to see multiple things at
once
Our brains are good at perceiving
simple visual features like color or
shape or size and they do it amazingly
fast without any conscious effort
We can tell immediately when a part of
an image is different from the rest,
without really having to focus on it
In my experience, small multiples are much more effective
than more flashy things like animation, linked brushing,
custom interactive vis, etc.
source:
Trelliscope: Interactive
Small Multiple Display
Small multiple displays are useful when visualizing data in detail
But the number of panels in a display can be potentially very large,
too large to view all at once
It can also be difficult to specify a meaningful order in which panels
are displayed
Trelliscope is a general solution that allows small
multiple displays to come alive by providing the
ability to interactively sort and filter the panels
based on summary statistics, cognostics,
automatically computed for each panel
source:
TrelliscopeJS
JavaScript Library R Package
trelliscopejs-lib trelliscopejs
htmlwidget interface to
Built using React
trelliscopejs-lib
Pure JavaScript
Evolved from CRAN "trelliscope"
Interface agnostic
package (part of DeltaRho project)
Gapminder Example
https://www.gapminder.org/
glimpse(gapminder)
(cid:50)bservations: (cid:20),(cid:26)(cid:19)(cid:23)
(cid:57)ariables: (cid:25)
(cid:7) country (cid:31)fctr(cid:33) (cid:36)fghanistan, (cid:36)fghanistan, (cid:36)fghanistan, (cid:36)fghanistan, (cid:36)fgh...
(cid:7) continent (cid:31)fctr(cid:33) (cid:36)sia, (cid:36)sia, (cid:36)sia, (cid:36)sia, (cid:36)sia, (cid:36)sia, (cid:36)sia, (cid:36)sia, (cid:36)sia, (cid:36)s...
(cid:7) year (cid:31)int(cid:33) (cid:20)(cid:28)(cid:24)(cid:21), (cid:20)(cid:28)(cid:24)(cid:26), (cid:20)(cid:28)(cid:25)(cid:21), (cid:20)(cid:28)(cid:25)(cid:26), (cid:20)(cid:28)(cid:26)(cid:21), (cid:20)(cid:28)(cid:26)(cid:26), (cid:20)(cid:28)(cid:27)(cid:21), (cid:20)(cid:28)(cid:27)(cid:26), (cid:20)(cid:28)(cid:28)(cid:21), (cid:20)(cid:28)(cid:28)...
(cid:7) life(cid:40)(cid:91)p (cid:31)dbl(cid:33) (cid:21)(cid:27).(cid:27)(cid:19)(cid:20), (cid:22)(cid:19).(cid:22)(cid:22)(cid:21), (cid:22)(cid:20).(cid:28)(cid:28)(cid:26), (cid:22)(cid:23).(cid:19)(cid:21)(cid:19), (cid:22)(cid:25).(cid:19)(cid:27)(cid:27), (cid:22)(cid:27).(cid:23)(cid:22)(cid:27), (cid:22)(cid:28).(cid:27)(cid:24)(cid:23), (cid:23)...
(cid:7) pop (cid:31)int(cid:33) (cid:27)(cid:23)(cid:21)(cid:24)(cid:22)(cid:22)(cid:22), (cid:28)(cid:21)(cid:23)(cid:19)(cid:28)(cid:22)(cid:23), (cid:20)(cid:19)(cid:21)(cid:25)(cid:26)(cid:19)(cid:27)(cid:22), (cid:20)(cid:20)(cid:24)(cid:22)(cid:26)(cid:28)(cid:25)(cid:25), (cid:20)(cid:22)(cid:19)(cid:26)(cid:28)(cid:23)(cid:25)(cid:19), (cid:20)(cid:23)(cid:27)(cid:27)(cid:19)(cid:22)(cid:26)(cid:21),...
(cid:7) gdp(cid:51)ercap (cid:31)dbl(cid:33) (cid:26)(cid:26)(cid:28).(cid:23)(cid:23)(cid:24)(cid:22), (cid:27)(cid:21)(cid:19).(cid:27)(cid:24)(cid:22)(cid:19), (cid:27)(cid:24)(cid:22).(cid:20)(cid:19)(cid:19)(cid:26), (cid:27)(cid:22)(cid:25).(cid:20)(cid:28)(cid:26)(cid:20), (cid:26)(cid:22)(cid:28).(cid:28)(cid:27)(cid:20)(cid:20), (cid:26)(cid:27)(cid:25).(cid:20)(cid:20)(cid:22)...
Suppose we want to understand mortality over time for each country
(cid:84)plot(year, life(cid:40)(cid:91)p, data (cid:32) gapminder, color (cid:32) country, geom (cid:32) "line")
Yikes! There are a lot of countries...
(cid:84)plot(year, life(cid:40)(cid:91)p, data (cid:32) gapminder, color (cid:32) continent,
group (cid:32) country, geom (cid:32) "line")
...
I can't see what's going on