-
Notifications
You must be signed in to change notification settings - Fork 25
/
index.html
106 lines (94 loc) · 3.71 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>
<!--
Directive by HTML5 UP
html5up.net | @ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Directive by HTML5 UP</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<div id="header">
<span class="logo icon fa-spotify"></span>
<h1>My top 50</h1>
<p>Siempre que me preguntan qué tipo de música me gusta he querido responder algo distinto a "de todo" <br>
Hice está visualización a partir de mis 50 artistas favoritos para Spotify y quise explorar cómo se relacionan entre ellos
</p>
</div>
<!-- Main -->
<div id="main">
<div class="box container">
<section>
<p>A continuación se presenta un grafo mostrando las relaciones mencionadas anteriormente.
Para resaltar por géneros deslice sus mouse encima de los géneros a la izquierda.
En cualquier momento puede deslizar también su mouse encima de un artista para ver con qué otros está relacionado más claramente.
Haga click encima de un artista para abrir su página de Spotify en una nueva pestaña.
</p>
</section>
<section>
<svg width="930" height="630">
<defs>
<filter id="greyscale">
<feColorMatrix
type="matrix"
values="0 1 0 0 0
0 1 0 0 0
0 1 0 0 0
0 1 0 1 0 ">
</feColorMatrix>
</filter>
</defs>
</svg>
</section>
<header>
<h2>Pharrell Williams, mi puente entre el Hip Hop y la electrónica</h2>
</header>
<section>
<h4>
De la visualización podemos concluir varias cosas sobre mis gustos músicales:
</h4>
<ul class="default">
<li>
Me gusta bastante varios subgéneros del Hip Hop y del House
</li>
<li>
Pharrell Williams es mi puente entre los dos géneros conectando al Pop con el Pop Rap.
</li>
<li>
No salgo de muchos géneros; mi música está altamente conectada entre si.
</li>
</ul>
</section>
</div>
</div>
<!-- Footer -->
<div id="footer">
<div class="container 75%">
<ul class="icons">
<li><a href="https://github.com/ss1993/my-spotify-top50" class="icon fa-github"><span class="label">Github</span></a></li>
</ul>
<ul class="copyright">
<li>© Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
</ul>
</div>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.js"></script>
<script src="scripts/music_graph.js"></script>
</body>
</html>