-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (91 loc) · 4.53 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
<!DOCTYPE html>
<html>
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!--Dynamically Import external HTML.css-->
<!--Local Styling-->
<style>
img {
max-width: 100%;
max-height: 100%;
}
div.main {
padding-left: 5%;
padding-right: 5%;
padding-top:2.5%;
}
div.note {
margin: 10px;
padding-left: 50px;
padding-right: 50px;
div.nav-wrapper{
}
</style>
<script type="text/javascript" src="js/dygraph-combined-dev.js"></script>
<style>
.dygraph-legend > span { display: none; }
.dygraph-legend > span.highlight { display: inline; }
</style>
</head>
<body>
<!--Site Navigation-->
<nav>
<div class="nav-wrapper light-blue darken-2">
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a class="modal-trigger" href="#modal">Motivation</a></li>
<li class="active"><a href="index.html">Intermediate Results</a></li>
<li><a href="research.html">Research</a></li>
<li><a href="opensource.html">Source Code</a></li>
</ul>
</div>
</nav>
<div class="main">
<div id="graph" style="width:100%; height:600px;"></div>
<p style= padding-top:5%><b>*</b>Mousing over the above graph reveals that several series' have gaps. This is because 74 songs (72 Instrumental and 2 Incomprehensibly Foreign) have been omitted. Refer to <a href="research.html">Question 223</a> for definition of the <i>Instrumental</i> and <i>Incomprehensibly Foreign</i> categories.</p>
<p><b>NOTE:</b> As of the April 20 2015 it is apparent that an increase in unique words used in songs have risen due to increased use of slang over the last decade. An analysis seeking to compensate for slang is desirable such that words like <i>dem</i> or <i>dat</i> map to <i>them</i> or <i>that</i>, respectively, and that both words, although distinct, would be considered the same. By mapping slang to traditional English in this way, also know as <i>stemming</i>, one is able to compare older music to modern music <i>apples to apples</i>. Since there is an obvious case for also tabulating slang words as unique words, in that such words are significant because they describe the evolution of musical expression, a comparison of both approaches will be provided here May 4th 2015</p>
</div>
<div id="modal" class="modal bottom-sheet">
<div class="modal-content">
<h4>Have popular songs become less unique?</h4>
<p>In early 2015 I had finished listening to a poplar song and couldn't help but think it was overly repetitive. It seemed to me, and to agreement of friends, that modern 'hits' have devolved into hyper-looped melody and chant. Having recently decided to pursue a masters degree in data science I thought it worthwhile to explore the craft by scraping, processing, and analyzing my way through a simple project. It was then that the question "By exactly what degree have songs become less unique?" grew intriguing. This tiny website represents my effort to specify the answer to that question as well as what may be its surprising result. By analyzing the lyrics of every one of the Billboard Hot 100 songs since 1957, 5700 songs in all, <b>intermediate</b> findings suggest that popular songs may have actually become <i>more</i> unique across the 21st century. </p>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graph"),
"Uniqueness of Historic BH 100.csv", // path to CSV file
{ // options
title: 'Unique Word Count of Every* Song in the Billboard Hot 100 Since 1958',
titleHeight: 32,
ylabel: 'Unique Words',
xlabel: 'Year',
labelsDivStyles: {
'text-align': 'right',
'background': 'none'
},
highlightCircleSize: 2,
drawPoints: 1,
pointSize: 1.25,
strokeWidth: 0,
highlightSeriesOpts: {
strokeWidth: 2,
strokeBorderWidth: 0,
highlightCircleSize: 5
}
}
);
</script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript">
$('#modal').openModal();
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>