Spotify-Project/index.html at main · ayaegashi/Spotify-Project · GitHub

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
176
177
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Welcome to the Spotiverse</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


<div class="row slide intro-slide" id="title">
    <div class="intro-container">
        <h1 class="intro" style="color: #C5D86D">What were the makings of a popular song in the early 21st century?</h1>
        <div class="intro">
            As emissaries of history, we are compelled to honor our predecessors by journeying back to the radiant epoch known as the 21st century.
            This golden age was a period of vibrant cultures, boundless imagination, and the enigmatic allure of technological evolution.
        </div>
        <div class="intro">
            The early 21st century was a watershed moment of so-called "pop", or popular, music.
            The advent of the personal computer in the first decade of the 21st century democratized the electronic music medium, allowing for more and more ordinary people
            to engage in music listening and production. Personal music "streaming" phone applications developed. One of the most popular
            was a Swedish invention called "Spotify". This resulted in one of the most rich datasets known to human-history: a treasure trove
            of Spotify listening data.
        </div>
        <div class="intro">
            We are the historians Lily Orgeron, Kristina Thach, and Ayana Yaegashi. Follow us on our journey examining the listening habits of the young music imbiber of the
            early 21st century. Let's get to it!
        </div>
    </div>
    <div class="nav">
        <button class="next" onclick="document.getElementById('chordVis').scrollIntoView()">Next</button>
    </div>
</div>

<div class="row filler"></div>

<div class="row slide">
    <div id="chordVis"></div>
    <div class="nav">
        <button class="prev" onclick="document.getElementById('title').scrollIntoView()">Previous</button>
        <button class="next" onclick="document.getElementById('bubble-slide').scrollIntoView()">Next</button>
    </div>
</div>

<div class="row filler"></div>

<div class="row slide" id="bubble-slide">
    <div id="bubbleVis"></div>
    <div class="select-box-text" id="directions">
        <b>Select a 5-year period below!</b>
    </div>
    <div id="bubble-select-div">
        <select id="bubble-select" name="choice" onchange="bubbleSelection()" style="width: 11%;">
            <option value="2016-2020" selected>2016 - 2020</option>
            <option value="2011-2015">2011 - 2015</option>
            <option value="2006-2010">2006 - 2010</option>
            <option value="2001-2005">2001 - 2005</option>
            <option value="1998-2000">1998 - 2000</option>
        </select>
        <img src="Images/arrows2.jpg" style="width: 300px" />
    </div>
    <div class="select-box-text">
        Explore the most popular artists during this period,<br>
        and <div id="directions" style="text-decoration: underline; display: inline;">keep scrolling</div> to learn more about how the <br>
        distribution of song lengths evolved over these 5 years!
    </div>
<!--    <div class="nav">-->
<!--        <button class="prev" onclick="document.getElementById('chordVis').scrollIntoView()">Previous</button>-->
<!--        <button class="next" onclick="document.getElementById('hist-container').scrollIntoView()">Next</button>-->
<!--    </div>-->
</div>

<!--<div class="row filler"></div>-->

<div class="row slide" id="hist-container">
    <div id="hist-title">Distribution of Song Duration</div>
    <div class="col-md-8">
        <div id="histVis"></div>
    </div>
    <div class="col-md-4">
        <div id="sliderContainer">
            <span id="minlabel" class="slider-label">1999</span>
            <input type="range" class="form-range" min='1999' max="2019" step="1" id="yearRange">
            <span id="maxlabel" class="slider-label">2019</span>
        </div>
        <br>
        <br>
        <div id="summaryStats"></div>
    </div>
    <div id="hist-message" style="color: white">
<!--        <p>Notice that when you select a certain time frame in the previous visualization, it also changed the range in which the histogram is calibrated.</p>-->
        At any of the time frames, we see a similar trend: the typical song duration decreases! <br>
        This tells us that overall, the typical song duration decreased from about 5 minutes to 3 minutes!
    </div>
    <button class="prev" onclick="document.getElementById('bubble-slide').scrollIntoView()">Previous</button>
    <button class="next" onclick="document.getElementById('main-message').scrollIntoView()">Next</button>
</div>

<div class="row filler"></div>

<div class="row slide" style="align-items: center" id="main-message">
    <div id="message-container">
        <h1 id="message-title">Our Message</h1>
        <p>Our exploration of Spotify's dataset reveals how the presence of an artist grows and shrinks over time, highlighting the evolution of
        listeners' preferences and the shape of popular songs. </p>
        <p style="color: #C5D86D; margin-top: 40px">Before we take a closer look at some of the most popular artists in the 21st century, we need to define some key terms.</p>
        <p><strong style="color:#D7263D">Danceability: </strong>Tells you how suitable is the song for getting your groove on.</p>
        <p><strong style="color:#D7263D">Acousticness: </strong>The prevalence of acoustics in the song.</p>
        <p><strong style="color:#D7263D">Valence: </strong>The upbeat-ness of the song to bring a smile on your face.</p>
        <p><strong style="color:#D7263D">Speechiness: </strong>The amount of spoken words other than your own as you appreciate the song.</p>
    </div>
    <button class="prev-message" onclick="document.getElementById('bubble-slide').scrollIntoView()">Previous</button>
    <button class="next-message" onclick="document.getElementById('select-genre').scrollIntoView()">Next</button>
</div>

<div class="row filler"></div>

<div class="row slide" id="select-genre">
    <div>
        <h2 style="color: white; margin-bottom: 50px">Explore an artist! Pick your favorite genre of music:</h2>
        <button class="genre-button" id="0">Pop</button>
        <button class="genre-button" id="5">Rock</button>
        <button class="genre-button" id="3">Rap</button>
        <button class="genre-button" id="4">Emo</button>
        <button class="genre-button" id="1">Kpop</button>
        <button class="genre-button" id="2">R&B</button>
    </div>
</div>

<div class="row filler"></div>

<div class="row slide" id="closer-look-container">
    <div class="row selector">
        <div style="width: fit-content; margin-top: 20px">
            <p>Choose another artist to explore!</p>
        </div>
        <div style="width: fit-content">
            <select name="choice" id="artist-select">
                <option value="beyonce" selected>Beyonce</option>
                <option value="bts">BTS</option>
                <option value="weeknd">The Weeknd</option>
                <option value="kendrick_lamar">Kendrick Lamar</option>
                <option value="mcr">My Chemical Romance</option>
                <option value="queen">Queen</option>
                <option value="radio_head">Radio Head</option>
                <option value="taylor_swift">Taylor Swift</option>
            </select>
        </div>
    </div>
    <div id="closer-look-title"></div>
    <div class="row">
        <div class="col" id="closerLookVis"></div>
        <div class="col" id="info-box">
    </div>
    </div>
    <div class="nav">
        <button class="prev-last" onclick="document.getElementById('main-message').scrollIntoView()">Back to Main Message</button>
    </div>
</div>


<!-- Load JS libraries -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

<script src="https://d3js.org/d3.v7.min.js"></script>

<script src="js/chordVis.js"></script>
<script src="js/histVis.js"></script>
<script src="js/closerLookVis.js"></script>
<script src="js/bubbleVis.js"></script>
<script type="module" src="js/main.js"></script>
</body>
</html>