Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
280 lines (224 sloc) 12.4 KB
<!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>
You can’t perform that action at this time.