-
Notifications
You must be signed in to change notification settings - Fork 35
/
xx-d3future.html
69 lines (69 loc) · 4.14 KB
/
xx-d3future.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Software Carpentry: Beyond this content</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="css/swc.css" />
<link rel="alternate" type="application/rss+xml" title="Software Carpentry Blog" href="http://software-carpentry.org/feed.xml"/>
<meta charset="UTF-8" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="lesson">
<div class="container card">
<div class="banner">
<a href="http://software-carpentry.org" title="Software Carpentry">
<img alt="Software Carpentry banner" src="img/software-carpentry-banner.png" />
</a>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="title">Beyond this content</h1>
<h2 class="subtitle">...and now what??</h2>
<div id="learning-objectives" class="objectives panel panel-warning">
<div class="panel-heading">
<h2><span class="glyphicon glyphicon-certificate"></span>Learning Objectives</h2>
</div>
<div class="panel-body">
<ul>
<li>How do I make the plot I want?</li>
<li>What are alternatives to using D3 to create pretty plots?</li>
</ul>
</div>
</div>
<p>Choosing the right plot for your data is the first step to making it as accessible as possible. Even though bubble plots are objectively beautiful, they might not be the best choice for your specific data.</p>
<p>Other people have thought about this, too, and came up with this chart, that might come in handy: <img src="img/choose_right_chart.png" alt="Choose your chart" width="900" /> <a href="https://www.flickr.com/photos/amit-agarwal/3196386402/">Source</a></p>
<p>You can get more inspiration on <a href="http://d3js.org">d3js.org</a>. Here, you will find plenty of beautiful examples of plots that people have already made as well as a whole gallery of almost everything you can imagine with the according code right underneath it.</p>
<p><img src="img/d3-screenshot.png" alt="D3 webpage" width="900" /></p>
<p>Most of the examples happily link you to their code so you can go through it and modify it to suit your data. Some examples don't volunteer their code like this. But through the beauty of the internet, all that code is online, too, and we can have a look at it using the browser's developer tools (right click, 'inspect element').</p>
<p>This workshop tries to give you the tools you need to download someone's code and modify it for your needs. There are of course other ways you can create plots. Some handy packages that are online are:</p>
<ul>
<li><a href="http://www.highcharts.com/">highcharts</a></li>
<li><a href="https://plot.ly/feed/">plot.ly</a></li>
<li><a href="http://nvd3.org/">nvd3</a></li>
<li><a href="http://www.cytoscape.org/">cytoscape</a></li>
<li><a href="http://dimplejs.org/">dimplejs</a></li>
<li><a href="http://metricsgraphicsjs.org/">metricsgraphics</a></li>
</ul>
<p>Not all of them are free and not all of them are completely customisable, but they often offer a quicker and easier ways to create plots that you can then put online.</p>
</div>
</div>
<div class="footer">
<a class="label swc-blue-bg" href="http://software-carpentry.org">Software Carpentry</a>
<a class="label swc-blue-bg" href="https://github.com/swcarpentry/lesson-template">Source</a>
<a class="label swc-blue-bg" href="mailto:[email protected]">Contact</a>
<a class="label swc-blue-bg" href="LICENSE.html">License</a>
</div>
</div>
<!-- Javascript placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="css/bootstrap/bootstrap-js/bootstrap.js"></script>
</body>
</html>