-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
55 lines (46 loc) · 1.95 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
<!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>Document</title>
<style> </style>
<link src="index.css" type="text/css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="spotify-web-api.js" type="text/javascript"></script>
<script src="//unpkg.com/force-graph"></script>
<script src="appSpotifyLogic.js" type="text/javascript"></script>
<script src="appGraphRendering.js" type="text/javascript" defer></script>
<!-- Resize monitor -->
<script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1 style="text-align: center">Spotify Artists' Working Relationships</h1>
<div id="graph"></div>
</div>
<div class="container">
<div style="text-align: center">
Search for an artist:
<input id="textInput">
<button id='btn1'>Search</button>
</div>
<div>
<p>This graph shows musical artists who have worked together.
This could be in the form of features, remixes, collaborations, etc.
The data is retrieved from Spotify.
</p>
<p> Click on an artist to load other artists they have worked with. Hover over an artist to highlight artists they have worked with.
You can also zoom in and out by scrolling the mouse, click and drag the background to move around, and click and drag the artist names around.
</p>
</div>
</div>
<script>
</script>
</body>
</html>