forked from Alpyg/inf8808e-project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
175 lines (175 loc) · 7.01 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Outil de visualisation de données immobilières pour Le Devoir."
/>
<meta
name="keywords"
content="immobilier, visualisation de données, Le Devoir, Polytechnique Montréal"
/>
<meta
name="author"
content="George Salib, Zakaria Sbai-Chkirid, Khalil Beddouch, Nassim Boughedaoui, Abderahim Laribi, Artour Benevolenski"
/>
<title>Le Devoir: Marché immobilier</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="./output.css" rel="stylesheet" />
<script src="https://d3js.org/d3.v6.min.js" defer></script>
</head>
<body
data-theme="light"
class="grid min-h-screen h-full w-full md:grid-cols-[220px_1fr] lg:grid-cols-[135px_1fr]"
>
<nav
class="flex h-full flex-col gap-4 p-4 bg-neutral-400"
aria-label="Main Navigation"
>
<a class="p-2 font-bold btn btn-neutral" href="/">Accueil</a>
<a class="p-2 font-bold btn" href="/transfers">Transferts</a>
<a class="p-2 font-bold btn" href="/sales">Ventes</a>
<a class="p-2 font-bold btn" href="/difficulties"
>Difficultés financières</a
>
<a class="p-2 font-bold btn" href="/mortgages">Hypothèques</a>
</nav>
<main class="flex-1 flex flex-col gap-4 p-4" id="content">
<h1 class="text-lg font-extrabold">
Bienvenue sur la page web de notre outil de visualisation de données
immobilières!
</h1>
<p>
En collaboration avec Samuel Ouvrard du journal Le Devoir, cet outil a
été développé par George Salib, Zakaria Sbai-Chkirid, Khalil Beddouch,
Nassim Boughedaoui, Abderahim Laribi et Artour Benevolenski dans le
cadre du cours INF8808E à Polytechnique Montréal.
</p>
<p>
Notre outil de visualisation de données immobilières offre une multitude
d'informations clés pour aider le grand public ainsi que les
journalistes chez Le Devoir à analyser le marché immobilier par région.
Ces informations incluent la valeur d'achat, le nombre de ventes, les
transferts de propriétés, le nombre d'hypothèques, le nombre de
faillites et bien d'autres.
</p>
<div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<div class="bg-white shadow-md p-4 rounded-lg flex flex-col">
<h2 class="text-xl font-bold mb-2 text-center">Transferts</h2>
<img
src="assets/transfers.png"
alt="Transferts Image"
class="w-full h-32 object-cover rounded-lg"
/>
<p class="text-sm">
Découvrez les détails des transferts de propriétés dans différentes
régions.
</p>
<ul class="list-disc pl-5 flex-grow text-sm">
<li>
Carte thermique représentant le nombre de requêtes pour un
transfert de propriété selon la région, le mois et l'année
</li>
<li>Filtre permettant une vue mensuelle ou annuelle</li>
<li>Légende pour le nombre de requêtes</li>
<li>
Infobulles contenant la région, l'année et le nombre de requêtes
</li>
</ul>
<a href="/transfers" class="btn btn-primary mt-2 self-end"
>Voir plus</a
>
</div>
<div class="bg-white shadow-md p-4 rounded-lg flex flex-col">
<h2 class="text-xl font-bold mb-2 text-center">Ventes</h2>
<img
src="assets/sales.png"
alt="Ventes Image"
class="w-full h-32 object-cover rounded-lg"
/>
<p class="text-sm">
Analysez le nombre de ventes immobilières selon le nombre d'achats
par gamme de prix
</p>
<ul class="list-disc pl-5 flex-grow text-sm">
<li>
Graphique à barres empilées représentant le nombre d'achats par
gamme de prix pour chaque région
</li>
<li>
Légende cliquable pour afficher ou cacher chaque gamme de prix
</li>
<li>
Infobulles contenant le nom de la région et le nombre d'achats
pour chaque gamme de prix
</li>
</ul>
<a href="/sales" class="btn btn-primary mt-2 self-end">Voir plus</a>
</div>
<div class="bg-white shadow-md p-4 rounded-lg flex flex-col">
<h2 class="text-xl font-bold mb-2 text-center">
Difficultés financières
</h2>
<img
src="assets/difficulties.png"
alt="Difficultés financières Image"
class="w-full h-32 object-contain rounded-lg"
/>
<p class="text-sm">
Explorez les données sur les difficultés financières des
propriétaires.
</p>
<ul class="list-disc pl-5 flex-grow text-sm">
<li>
Carte choroplèthe représentant les détresse financières des
régions selon un intervalle de temps sélectionné
</li>
<li>
Légende indiquant si le nombre total de détresses financières est
faible ou élevé
</li>
<li>
Infobulles contenant le nombre de détresses (avis de vente,
faillites, hypothèques construction, préavis et saisies)
</li>
</ul>
<a href="/difficulties" class="btn btn-primary mt-2 self-end"
>Voir plus</a
>
</div>
<div class="bg-white shadow-md p-4 rounded-lg flex flex-col">
<h2 class="text-xl font-bold mb-2 text-center">Hypothèques</h2>
<img
src="assets/mortgages.png"
alt="Hypothèques Image"
class="w-full h-32 object-cover rounded-lg"
/>
<p class="text-sm">
Obtenez des informations sur les hypothèques et leur évolution au
fil du temps
</p>
<ul class="list-disc pl-5 flex-grow text-sm">
<li>
Graphique en aires empilées représentant le nombre d'hypothèques
selon le mois pour chacune des régions
</li>
<li>Filtres pour choisir les régions et la période à couvrir</li>
<li>
Marqueurs et pente pour réprésenter visuellement la variation
nette du volume des hypothèques durant une période
</li>
</ul>
<a href="/mortgages" class="btn btn-primary mt-2 self-end"
>Voir plus</a
>
</div>
</div>
</main>
</body>
</html>