forked from IsaKiko/D3-visualising-data
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (105 loc) · 5.72 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<title>Software Carpentry: Visualising your data on the web using D3</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">Visualising your data on the web using D3</h1>
<p><strong>Instructor:</strong> Xavier Ho</p>
<p><strong>Contact:</strong> [email protected] </p>
<p><strong>Etherpad:</strong> <a href="http://pad.software-carpentry.org/ResBaz2018-D3" class="uri">http://pad.software-carpentry.org/ResBaz2018-D3</a></p>
<p>Open science should be visible science. What better way is there to make your research visible and accessible than to put it on the internet. However, no one wants to read endless tables of data. We’d rather look at graphs, or, even better, have the possibility of interacting with the data. And we have probably all created some graphs. But in order to make them accessible to many people, we will have to move away from our specialized software to a more universal platform: the internet.</p>
<p>We want to:</p>
<ul>
<li>Display our data on a website to increase visibility and accessibility of our research.</li>
</ul>
<p>Our goal is to create a <a href="http://bost.ocks.org/mike/nations/">dynamic bubble plot</a> (a prettier version of a scatter plot) and publish it on the internet.</p>
<p>Along the way, we will learn:</p>
<ul>
<li>how to create our first own web page</li>
<li>how to change the appearance of certain elements on the page</li>
<li>how to integrate graphical elements into our page</li>
<li>how to publish our page</li>
<li>how to allow interaction with elements</li>
<li>how to store data for the use in webpages</li>
<li>how to create a graph in D3</li>
</ul>
<div id="prerequisites" class="prereq panel panel-warning">
<div class="panel-heading">
<h2 id="prerequisites" class="prereq panel panel-warning"><span class="glyphicon glyphicon-education"></span>Prerequisites</h2>
</div>
<div class="panel-body">
<ul>
<li>Github account and Github client for your operating system (Windows, Linux, iOS).</li>
<li>Participation in at least one SWC workshop.</li>
<li>Familiarity with at least one programming language: concept of loops, functions, and conditionals.</li>
<li>Familiarity with your favorite text editor (Sublime Text is a good option).</li>
<li>You will need to be comfortable with search engines!</li>
<li>Preferably Chrome or Firefox(because of its excellent developer tools).</li>
</ul>
</div>
</div>
<div id="setup" class="prereq panel panel-warning">
<div class="panel-heading">
<h2 id="setup" class="prereq panel panel-warning"><span class="glyphicon glyphicon-education"></span>Setup</h2>
</div>
<div class="panel-body">
<ul>
<li>It’s probably a good idea to install a GitHub client, if you are not already</li>
<li>comfortable with commandline git.</li>
</ul>
</div>
</div>
<h2 id="topics">Topics</h2>
<ol type="1">
<li><a href="01-html.html">HTML</a></li>
<li><a href="02-css.html">CSS</a></li>
<li><a href="03-images-and-svg.html">Images and SVG</a></li>
<li><a href="04-publishing-with-github.html">Publishing with Github</a></li>
<li><a href="05-javascript.html">JavaScript</a></li>
<li><a href="06-json.html">JSON data format</a></li>
<li><a href="07-d3setup.html">D3 Setup</a></li>
<li><a href="08-d3enter.html">D3 Into the data</a></li>
<li><a href="09-d3exit.html">D3 Add and remove</a></li>
<li><a href="10-d3update.html">D3 Transitions</a></li>
</ol>
<ol start="20" type="i">
<li><a href="xx-d3future.html">What now?</a></li>
</ol>
<p>We are using <a href="http://gapminder.org">gapminder data</a> and the later lessons are based on an example by <a href="http://bost.ocks.org/mike/nations/">Mike Bostock</a>. In order to make this example slightly easier, we interpolated the data. The data files can be found <a href="https://github.com/IsaKiko/D3-visualising-data/blob/gh-pages/code/nations.json">here</a>.</p>
<p>Lessons created by <a href="https://github.com/isakiko">Isabell Kiral-Kornek</a> and <a href="https://github.com/robrkerr">Robert Kerr</a>. Course upgraded to v4 and v5 by <a href="https://github.com/Spaxe">Xavier Ho</a>.</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>