-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (57 loc) · 2.75 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.png">
<title>GenreViz</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
</head>
<style>
</style>
<body>
<div class="main">
<div class="navbar">
<div class="left-nav">
<p class="title">GenreViz</p>
<p class="description">click and drag a song node</p>
<a class="icon" href="https://github.com/kpchoy/genre-viz"><i class="fab fa-github"></i></a>
<a class="icon" href="https://www.linkedin.com/in/kevin-choy-b5714b133"><i class="fab fa-linkedin-in"></i></a>
<!-- Modal Trigger -->
</div>
<a class="waves-effect waves-light modal-trigger" href="#modal1"><i class="fas fa-info-circle"></i></a>
<div class="song-info">
<h4>Genre: <span id="song-genre"></span></h4>
<h5>Song: <span id="song-info"></span></h5>
<h5>Artist: <span id="song-artist"></span></h5>
<img id="song-img" src="https://www.free-stock-music.com/thumbnails/free-music-thumbnail.jpg" alt="Song Image">
</div>
</div>
<svg class="svg"></svg>
</div>
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<p class="modal-title">Welcome to GenreViz</p>
<p class="modal-description">GenreViz is a music data visualization project that implements force with D3js. GenreViz implements lastfm's API to fetch data for current top tracks sorted by their respective genre.
Users can click and drag various different genres, see song information, and images.
</p>
</div>
</div>
<!-- <script src="https://d3js.org/d3.v5.min.js"></script> -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
$(document).ready(function () {
$('.modal').modal();
});
</script>
<!-- <script src="main.js"></script> -->
<script src="bubble.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
</body>
</html>