-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvisualizaciones.html
50 lines (45 loc) · 2.03 KB
/
visualizaciones.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
<!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">
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v7.js"></script>
<title>Top Spotify</title>
</head>
<body>
<div class="container">
<h1>Top Spotify</h1>
<h2>Artistas con más reproducciones:</h2>
<p>En esta visualización se puede observar los artistas cuyas canciones tuvieron más reproducciones en el 2023,
cada artista corresponde a uno de los círculos verdes, cuyo tamaño es proporcional a la cantidad de streams de
las canciones que tienen en la lista de más escuchados, si presionas uno de los círculos podrás ver las canciones más escuchadas,
presiona una de las canciones y se desplegará la segunda visualización.
</p>
<label for="nodeFilter">Cantidad de Artistas:</label>
<input type="range" id="nodeFilter" min="1" max="645" value="100">
<button id="updateButton">Filtrar</button>
<h2 id="titleVis1"></h2>
<h2 id="artist"></h2>
<div id="vis-1">
</div>
<p id="instructions">(Seleccionar artista y canción para desplegar siguiente visualización)</p>
</div>
<div class="container">
<h2 id="titleVis2"></h2>
<p id="descriptionVis2"></p>
<div id="vis-2">
</div>
<div class="container">
<h2>Colaboraciones de Artistas</h2>
<p>Por último, en la tercera visualización, se presenta un Diagrama Nodo Enlace, en el cual cada enlace
muestra la cantidad de colaboraciones que hizo cada artista, entendiendo como colaboración las
canciones que se hicieron en conjunto entre 2 o más artistas, además el tamaño de cada nodo es
proporcional a la cantidad de colaboraciones.</p>
<div id="vis-3">
</div>
</div>
<script src="main.js"></script>
</body>
</html>