-
Notifications
You must be signed in to change notification settings - Fork 1
/
dataset.html
79 lines (75 loc) · 3.88 KB
/
dataset.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Histoires d'Autrices</title>
<link rel="stylesheet" href="assets/styles.css">
<script src="assets/papaparse.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datasource@0.1.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<!--<script src="https://raw.githubusercontent.com/chartjs/Chart.js/master/docs/scripts/utils.js"></script>-->
<script src="assets/dataset.js"></script>
</head>
<body style="overflow:hidden;">
<div class="loader">
<div class="lds-dual-ring"></div>
</div>
<main class="main">
<div style="font-size:1.5em;text-align:center;position:fixed;left:0px;right:0px;bottom:0px;height:60px;background-color:rgba(255,255,255,0.5);z-index:10000;"><strong>Site en cours de développement : URL des pages non pérennes</strong></div>
<nav class="return">
<a class="return__link" href="./index.html">◀︎ Accueil</a>
</nav>
<nav class="nav">
<button class="nav__button" id="menuButton">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav__list" id="navList">
<li class="nav__list__title"><a href="index.html">Histoires d'Autrices</a></li>
<li class="nav__list__link"><a href="index.html#jeux-donnees">Où les retrouver ?</a></li>
<li class="nav__list__link"><a href="index.html#jeux-donnees">Où ont-elles vécu ?</a></li>
<li class="nav__list__link"><a href="index.html#a-propos">Pourquoi ce site ?</a></li>
</ul>
</nav>
<section class="hero">
<h1 class="hero__title" id="h1_title"></h1>
<p class="hero__text" id="heroDesc"></p>
<img src="../assets/images/bg-hero.png" alt="" id="hero__img" class="hero__img">
</section>
<section class="data">
<h2 class="data__title"> La présence des autrices</h2>
<p class="data__text">Plus d'informations sur chacune des autrices en cliquant sur son nom !</p>
<div class="data__chart">
<div class="data__chart__container">
<canvas id="pieChart"></canvas>
</div>
<p class="data__chart__text" id="autrice_nom"></p>
</div>
</section>
<section class="chart">
<h2 class="chart__title">L'évolution des données</h2>
<p class="chart__text">Découvrez comment a évolué la place des autrices dans ce jeu de donnée par année et par décennie.</p>
<h3>Pourcentages par année</h3>
<div class="chart__container"><canvas id="barChart" width="600" height="400"></canvas></div>
<h3 id="decadeText">Pourcentages par décennie</h3>
<div class="chart__container"><canvas id="barChartDecade" width="600" height="400"></canvas></div>
<h2 class="chart__title">En savoir plus sur les données</h2>
<p class="chart__text">Cliquez sur un cercle pour accéder à la source de la ligne de la donnée correspondante.</p>
<div class="chart__bubble">
<div id="bubbleM" class="chart__bubble__column">
<h3>Auteurs</h3>
</div>
<div id="bubbleF" class="chart__bubble__column">
<h3>Autrices</h3>
</div>
</div>
</section>
</main>
</body>
</html>