-
Notifications
You must be signed in to change notification settings - Fork 0
/
visualization3.html
104 lines (98 loc) · 5.54 KB
/
visualization3.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
<!DOCTYPE html>
<html lang="en-us"></html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
Music to our ears: Song Length
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="formatting.css">
</head>
<!-- Navigation bar using LUX from Bootswatch -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">Homework 11</a>
<div class="collapse navbar-collapse" id="navbarColor02">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="comparisons.html">Plots</a>
</li>
<!-- change color formatting -->
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 48px, 0px);">
<a class="dropdown-item" href="visualization1.html">Year vs Duration</a>
<a class="dropdown-item" href="visualization2.html">Year vs Loudness</a>
<a class="dropdown-item" href="visualization3.html">North vs South</a>
<a class="dropdown-item" href="visualization4.html">West vs East</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="comparisons.html">Comparisons</a>
</li>
<li class="nav-item">
<a class="nav-link" href="data.html">Data</a>
</li>
</ul>
</div>
</nav>
<body style="background-color:rgb(252, 252, 252)">
<div class="container-fluid">
<!-- main plot -->
<div class="row">
<div class= "col-md-7 main_info">
<br>
<h2 class="main_header">North vs South</h1>
<br>
<p >
America's regional cultures are defined in many ways. Here we look at the North vs the South. Narrowing the data set to
latitudes within the continental US, we asked if song tempo refleectedthe sterotype of the North being fast-paced and the
South having a leisurely pace. The dataset finds it not too different at all. There were two latitudes that stood out,
40.71455 and 34.05349. 40.71455 is New York City which is no suprise for producing a large volume of music at any tempo.
34.05349 is Los Angeles, again being no surprise for high volume music production. New York does seem to produce more
music at higher beats per minute (bpm) than Los Angeles. There is a great spread of music production all over the US.
It would be interesting to see if pop music is around 100 bpm as it seems the more frequest speed.
</p>
<br>
<img src="yr_duration.jpg" alt="Year vs Duration" class="main_plot" >
</div>
<!-- sidebar -->
<div class= "col-md-4 mini_info">
<h2 class="mini_header"> Graphic Evidence </h2>
<div class="row">
<div class="col-md-6">
<h6>Year vs Duration</h6>
<a href="visualization1.html">
<img src="yr_duration.jpg" alt="Year vs Duration" class="mini_plot">
</a>
</div>
<div class="col-md-6">
<h6>Year vs Loudness</h6>
<a href="visualization2.html">
<img src="yr_loudness.jpg" alt="Year vs Loudness" class="mini_plot">
</a>
</div>
<div class="col-md-6">
<h6>North vs South</h6>
<a href="visualization3.html">
<img src="NorthSouth_tempo.jpg" alt="NorthSouthTempo" class="mini_plot">
</a>
</div>
<div class="col-md-6">
<h6>West vs East</h6>
<a href="visualization4.html">
<img src="WestEast_tempo.jpg" alt="WestEastTemp" class="mini_plot">
</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>