-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (108 loc) · 5.56 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
107
108
109
110
111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Data Visualisation</title>
<link rel="stylesheet" href="w3.css">
</head>
<body class="w3-container">
<div style="text-align: center;">
<h2>Data Vizualisation course @ Ecole polytechnique</h2>
<p>These are the exercises made in the <a href="https://moodle.polytechnique.fr/course/view.php?id=5620">Data Visualisation course of the Ecole polytechnique</a> (Palaiseau, France) for the year 2018 - 2019.<br>
Throughout the exercises, the purpose is to discover technics and stakes of data visualisation.</p>
<table class="w3-table w3-striped w3-bordered w3-hoverable w3-card-4" style="max-width: 1000px; margin: auto;">
<thead>
<tr class="w3-blue">
<th>TD</th>
<th style="width: 130px;">Date</th>
<th>Description</th>
<th style="min-width: 220px;">Technology discovered</th>
</tr>
</thead>
<tr onclick="window.location = 'TD1/ex01.html';">
<td>1</td>
<td>17 Sept. 2018</td>
<td>Illustration of the <em>visual pop out</em> effect.</td>
<td>JavaScript and DOM manipulation</td>
</tr>
<tr onclick="window.location = 'TD2/ex02.html';">
<td>2</td>
<td>24 Sept. 2018</td>
<td>Analysis of data from discovered planets to find a correlation between the planet mass and its star mass.</td>
<td>D3.js to display data</td>
</tr>
<tr onclick="window.location = 'TD3/ex03.html';">
<td>3</td>
<td>1 Oct. 2018</td>
<td>Analysis of the same data from discovered planets. Dynamic plot with scale and sample options.
Additional displays to analyze planet masses distribution and the use of detection method over time.</td>
<td>Vega & Vega-lite</td>
</tr>
<tr onclick="window.location = 'TD4/ex04.html';">
<td>4</td>
<td>8 Oct. 2018</td>
<td>Graph Visualization: force directed layout (simulating physical forces of repulsion between nodes and attraction thanks to links).
Illustration of the method on <a href="TD4/flights.json">airports</a> and <a href="TD4/airports.json">flights</a> data.</td>
<td>d3-force</td>
</tr>
<tr onclick="window.location = 'TD4/ex04b.html';">
<td>4b</td>
<td>8 Oct. 2018</td>
<td>Graph Visualization: hierarchical edge bundling.</td>
<td>D3.js cluster</td>
</tr>
<tr onclick="window.location = 'TD5/ex05.html';">
<td>5</td>
<td>15 Oct. 2018</td>
<td>Treemap Visualization: Treemap display of the general government expenditure breakdown by
their main socio-economic function <a href="TD5/cofog.csv">(according to the Classification of the Functions of Government - COFOG).</a></td>
<td>d3.treemap</td>
</tr>
<tr onclick="window.location = 'TD5/ex05b.html';">
<td>5b</td>
<td>15 Oct. 2018</td>
<td>Tree Visualization: Circular tree display of the <a href="TD5/cofog.csv">COFOG</a> data.</td>
<td>d3.tree</td>
</tr>
<tr onclick="window.location = 'TD6/ex06a.html';">
<td>6a</td>
<td>5 Nov. 2018</td>
<td>Time series: Time-to-space visualization (line plot) of the <a href="https://en.wikipedia.org/wiki/Case–Shiller_index">Case Shriller index</a> of several US cities based on this <a href="TD6/house_prices.json">data</a>.</td>
<td>Vega</td>
</tr>
<tr onclick="window.location = 'TD6/ex06b.html';">
<td>6b</td>
<td>5 Nov. 2018</td>
<td>Time series: Color map visualization (with diverging color scale) of the <a href="https://en.wikipedia.org/wiki/Case–Shiller_index">Case Shriller index</a> of several US cities based on this <a href="TD6/house_prices.json">data</a>.</td>
<td>d3.js</td>
</tr>
<tr onclick="window.location = 'TD7/ex07.html';">
<td>7</td>
<td>12 Nov. 2018</td>
<td>Animation of the colormap built in the <a href="TD6/ex06b.html">TD6</a> on the <a href="https://en.wikipedia.org/wiki/Case–Shiller_index">Case Shriller index</a> of several US cities based on this <a href="TD6/house_prices.json">data</a>.</td>
<td>d3.js transition</td>
</tr>
<tr onclick="window.location = 'TD8/ex08a.html';">
<td>8a</td>
<td>19 Nov. 2018</td>
<td>Geographical information: visualisation of the <a href="TD8/data/airports.json">US airports</a> information.</td>
<td>Vega</td>
</tr>
<tr onclick="window.location = 'TD8/ex08b.html';">
<td>8b</td>
<td>19 Nov. 2018</td>
<td>Geographical information: visualisation of the <a href="TD8/data/drinking_water.csv">drinking water sources quality</a> information.</td>
<td>d3.js - geojson format</td>
</tr>
<tr onclick="window.location = 'TD9/ex09.html';">
<td>9</td>
<td>26 Nov. 2018</td>
<td>Display real-time flight information based on the <a href="https://opensky-network.org/apidoc/rest.html">OpenSky REST API</a>.</td>
<td>d3.js - Vega</td>
</tr>
</table>
<p style="color: grey; font-style: italic;">Romain Fouilland, 2018</p>
</div>
</body>
</html>