-
Notifications
You must be signed in to change notification settings - Fork 0
/
training-tutorials-and-templates.html
279 lines (224 loc) · 12.4 KB
/
training-tutorials-and-templates.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />
<title>Training, Tutorials and Templates</title>
<script src="site_libs/jquery-1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="site_libs/bootstrap-3.3.5/css/cosmo.min.css" rel="stylesheet" />
<script src="site_libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="site_libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="site_libs/navigation-1.1/tabsets.js"></script>
<link href="site_libs/highlightjs-9.12.0/textmate.css" rel="stylesheet" />
<script src="site_libs/highlightjs-9.12.0/highlight.js"></script>
<script src="site_libs/htmlwidgets-1.3/htmlwidgets.js"></script>
<link href="site_libs/datatables-css-0.0.0/datatables-crosstalk.css" rel="stylesheet" />
<script src="site_libs/datatables-binding-0.5/datatables.js"></script>
<link href="site_libs/dt-core-1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="site_libs/dt-core-1.10.16/css/jquery.dataTables.extra.css" rel="stylesheet" />
<script src="site_libs/dt-core-1.10.16/js/jquery.dataTables.min.js"></script>
<link href="site_libs/crosstalk-1.0.0/css/crosstalk.css" rel="stylesheet" />
<script src="site_libs/crosstalk-1.0.0/js/crosstalk.min.js"></script>
<meta name="description" content="Learn how to choose the most effective data visualisation options for your research data from the OxShef Charts webste. OxShef is a collaboration between University of Oxford and University of Sheffield." />
<link rel="icon" type="image/png" href="images/favicon.png" />
<script type="text/javascript" src="js/rmarkdown.js"></script>
<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
pre:not([class]) {
background-color: white;
}
</style>
<script type="text/javascript">
if (window.hljs) {
hljs.configure({languages: []});
hljs.initHighlightingOnLoad();
if (document.readyState && document.readyState === "complete") {
window.setTimeout(function() { hljs.initHighlighting(); }, 0);
}
}
</script>
<style type="text/css">
h1 {
font-size: 34px;
}
h1.title {
font-size: 38px;
}
h2 {
font-size: 30px;
}
h3 {
font-size: 24px;
}
h4 {
font-size: 18px;
}
h5 {
font-size: 16px;
}
h6 {
font-size: 12px;
}
.table th:not([align]) {
text-align: left;
}
</style>
<link rel="stylesheet" href="css/rmarkdown.css" type="text/css" />
<link rel="stylesheet" href="css/title-0px.css" type="text/css" />
</head>
<body>
<style type = "text/css">
.main-container {
max-width: 940px;
margin-left: auto;
margin-right: auto;
}
code {
color: inherit;
background-color: rgba(0, 0, 0, 0.04);
}
img {
max-width:100%;
height: auto;
}
.tabbed-pane {
padding-top: 12px;
}
.html-widget {
margin-bottom: 20px;
}
button.code-folding-btn:focus {
outline: none;
}
</style>
<div class="container-fluid main-container">
<!-- tabsets -->
<script>
$(document).ready(function () {
window.buildTabsets("TOC");
});
</script>
<!-- code folding -->
<div id="rStudioHeader" class="alwaysShrunk">
<div class="innards bandContent">
<div>
<a class="menuItem" href="index.html">OxShef: Charts</a>
</div>
<div id="menu">
<div id="menuToggler"></div>
<div id="menuItems">
<a class="menuItem" href="training-tutorials-and-templates.html">Training, Tutorials and Templates</a>
<a class="menuItem" href="charts.html">Charts</a>
<a class="menuItem" href="geoviz_maps.html">Geoviz (Maps)</a>
<a class="menuItem" href="networks.html">Networks</a>
<a class="menuItem" href="timeseries.html">Time Series</a>
<a class="menuItem" href="other.html">Other Visualisations</a>
<a class="menuItem gitHub" href="https://github.com/ox-it/OxfordIDN_charts"></a>
<a class="menuItem gitHubText" href="https://github.com/ox-it/OxfordIDN_charts">Source on GitHub</a>
</div>
</div>
</div>
</div>
<style type="text/css">
#TOC {
margin-left: 35px;
margin-top: 90px;
}
</style>
<script type="text/javascript">
$(".main-container").removeClass("main-container").removeClass("container-fluid").addClass("footerPushDown");
</script>
<div id="pageContent" class="standardPadding">
<div class="articleBandContent">
<style type="text/css">
.title {
display: none;
}
#disqus_thread {
display: none;
}
</style>
<div class="fluid-row" id="header">
<h1 class="title toc-ignore">Training, Tutorials and Templates</h1>
</div>
<p><link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet"></p>
<p><strong>OxShef: Charts</strong> provides general advice on choosing the most appropriate visualisation for your data and to avoid making common mistakes or pitfalls in data viz. However, we do not provide interactive tools for matching your data to charts (or vice versa).</p>
<div class="row">
<div class="col-sm-7">
<p>There are many tools (Excel, Google Sheets, Plotly, Tableau) which automatically suggest charts based on the properties of your dataset. This is possible thanks to excellent research into visual perception theory and machine vision from back in the <a href="http://doi.org/10.2307/2288400">1980s</a> through to today.</p>
<p>In fact, some tools like <a href="https://doi.org/10.1145/2047196.2047247">ReVision</a> are even capable of taking existing charts and re-designing them to be more accessible and easy to read by humans. The example here shows a number of badly designed pie charts that have been converted into much easier to understand barcharts.</p>
</div>
<div class="col-sm-5">
<p><img src='images/revision-pie.png'></img></p>
</div>
</div>
<p><strong>OxShef: Charts</strong> maintains a collection of tools and resources to assist you in developing and designing effective visualisations, split into the following three categories:</p>
<!-- There are many excellent tools which can help -->
<!-- **OxShef: Charts** is designed to help you select the most appropriate visualisations for your data, primarily by using the [Financial Times' Visual Vocabulary](http://ft-interactive.github.io/visual-vocabulary/) and roughly dividing dataviz into the following categories; Charts, Geoviz (Maps), Networks and Time Series. Unfortunately, this is not sufficient advice for us to guarantee you select the best (and effectively designed) dataviz. There are a number of third-party resources and tutorials that we split into the following three categories: -->
<div class="row">
<div class="col-sm-4">
<center>
<h5>
Choosing a dataviz
</h5>
</center>
<center>
<i class='fas fa-search fa-2x'></i></i>
</center>
<p>Some charts are more suitable for specific purposes than others. In some cases these resources can automate the chart selection process, or at least help exclude some chart options.</p>
</div>
<div class="col-sm-4">
<center>
<h5>
Designing good dataviz
</h5>
</center>
<center>
<i class='fas fa-eye fa-2x'></i></i>
</center>
<p>There are many best practices for dataviz which radically improve the legibility of a chart, for instance: horizontal barcharts with bars arranged from longest to shortest are significantly easier to interpet than unordered vertical barcharts.</p>
</div>
<div class="col-sm-4">
<center>
<h5>
Adding interactivity
</h5>
</center>
<center>
<i class='fas fa-magic fa-2x'></i></i>
</center>
<p>Sadly, there’s little general advice for effectively adding interactivity to charts. However, two extremely useful rules of thumb are <a href="https://twitter.com/brianboyer/status/784874560009150464">“Make the least interactive thing that works”</a> (<a href="https://twitter.com/brianboyer">@BrianBoyer</a>) and Ben Shneiderman’s mantra <a href="https://doi.org/10.1109/VL.1996.545307">Overview first, zoom and filter, then details-on-demand</a>.</p>
</div>
</div>
<div id="htmlwidget-d0be7060e85852dfa39f" style="width:100%;height:auto;" class="datatables html-widget"></div>
<script type="application/json" data-for="htmlwidget-d0be7060e85852dfa39f">{"x":{"filter":"none","data":[["<a href='https://doi.org/10.1109/VL.1996.545307' target='_blank'><h5>Ben Shneiderman's mantra<\/h5><\/a>","<a href='http://chartmaker.visualisingdata.com/' target='_blank'><h5>Chart Maker (Visualising Data)<\/h5><img src='images/table-of-viz-tutorials-etc/chartmaker-logo.jpg' style='max-height:150px'><\/img><\/a>","<a href='https://eagereyes.org' target='_blank'><h5>Eager Eyes<\/h5><img src='images/table-of-viz-tutorials-etc/eager-eyes-logo.png' style='max-height:150px'><\/img><\/a>","<a href='https://github.com/ft-interactive/chart-doctor/blob/master/visual-vocabulary/Visual-vocabulary.pdf' target='_blank'><h5>Financial Times Visual Vocabulary<\/h5><img src='images/table-of-viz-tutorials-etc/ft-vocabulary-logo.png' style='max-height:150px'><\/img><\/a>","<a href='https://github.com/archietse/malofiej-2016/blob/master/tse-malofiej-2016-slides.pdf' target='_blank'><h5>Why We Are Doing Fewer Interactives <br> Archie Tse<\/h5><\/a>"],["<a href='https://doi.org/10.1109/VL.1996.545307' target='_blank'>Ben Shneiderman's mantra<\/a> is one of the few general purpose pieces of advice for adding interactivity to dataviz:\r\n<br>\r\n<blockquote>Overview first, zoom and filter, then details-on-demand<\/blockquote>","Andy Kirk designed and maintains the Chart Maker as a tool for selecting data visualisation tools based on specific charts. Andy has put a lot of effort into designing minimal explanations of each chart, this is a great reference tool when selecting both charts and dataviz tools.","Eager Eyes provides long-form articles and investigations into a wide variety of data visualisation topics and best practices. This website is not only useful for designing good dataviz, but also in choosing which chart to use in the first place.","The Financial Times has invested significantly in their data visualisation toolkit, part of which is a \"visual vocabulary\" that they use to help automatically choose the most appropriate dataviz for each dataset. In the future the FT are planning on open sourcing their tools based on this visual vocabularly, for the time being this remains a useful cheat sheet.","Archie Tse from the New York Times spoke at the 26th Infographics World Summit in 2016 about how their team has reduced the number of interactives they've developed in response to user testing. Archie's overall advice can be summed up as \"if anything other than scrolling is required, make something spectacular happen\"."],["Research paper","Interactive tool for comparing different charts","Robert Kosara’s website and blog dedicated to long-form articles on data viz.","Poster presenting the Financial Times' taxonomy of dataviz types.","Conference presentation"],["<i class='fa fa-magic fa-2x'><\/i>","<i class='fa fa-search fa-2x'><\/i>","<i class='fa fa-eye fa-2x'><\/i>","<i class='fa fa-search fa-2x'><\/i>","<i class='fa fa-magic fa-2x'><\/i>"]],"container":"<table class=\"display\">\n <thead>\n <tr>\n <th>Resources<\/th>\n <th>Description<\/th>\n <th>Resource description<\/th>\n <th>Type of Advice<\/th>\n <\/tr>\n <\/thead>\n<\/table>","options":{"scrollX":true,"autoWidth":true,"columnDefs":[{"width":"150px","targets":0},{"width":"550px","targets":1},{"width":"100px","targets":3},{"className":"dt-center","targets":[0,3]}],"dom":"t","order":[],"orderClasses":false}},"evals":[],"jsHooks":[]}</script>
</div> <!-- articleBandContent -->
</div> <!-- pageContent -->
<div id="rStudioFooter" class="band full">
<div class="bandContent">
<h4><a href="http://oxshef.io" target="_blank" style="color:#fff;font-weight:bold">OxShef</a></h4>
<div id="logos">
<!--<a href="https://twitter.com/rstudio" class="footerLogo twitter"></a>!-->
<a href="https://github.com/ox-it/OxfordIDN_charts" class="footerLogo gitHub"></a>
<!--<a href="https://www.linkedin.com/company/rstudio-inc" class="footerLogo linkedIn"></a>
<a href="https://www.facebook.com/pages/RStudio-Inc/267733656584415" Class="footerLogo facebook"></a>-->
</div>
</div>
</div>
<!-- bizible -->
<script type="text/javascript" src="//cdn.bizible.com/scripts/bizible.js" async=""></script>
</div>
<script>
// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
$('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
bootstrapStylePandocTables();
});
</script>
</body>
</html>