Merge branch 'master' of github.com:raymondtiu/music_visualization_pr…

…oject
jshtaway · Sep 20, 2018 · eed727d · eed727d
2 parents 71e476b + 8b6e059
commit eed727d
Show file tree

Hide file tree

Showing 90 changed files with 47,234 additions and 0 deletions.
diff --git a/genre_charts/.DS_Store b/genre_charts/.DS_Store
diff --git a/genre_charts/billboard_100_pulls.ipynb b/genre_charts/billboard_100_pulls.ipynb
diff --git a/genre_charts/bubble chart/.DS_Store b/genre_charts/bubble chart/.DS_Store
diff --git a/genre_charts/bubble chart/index.html b/genre_charts/bubble chart/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+
+  <head>
+		<meta charset="utf-8">
+		<title>Bubble Chart for Each Billboard Year</title>
+
+
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
+		<link rel="stylesheet" href="style.css">
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+
+	</head>
+
+	<body>
+		<div id="container">
+			<div id="header">
+			<h1>Interactive Billboard Year Charts</h1>
+			</div>
+
+			<div id="headerBand">
+			</br>
+			</div>
+			<div id="charts">
+
+				<div id="bubbleContainer">
+				<h2>Risk Assessment Ratings (Dummy Data)</h2>
+				<div id="overallRatings" class="btn-group btn-info top-btn" data-toggle="buttons">
+				  <label class="btn active ratingBtn" id="reset">
+					<input type="radio" name="options">Reset</label>
+				   <label class="btn ratingBtn" id="riskCategory1">
+					<input type="radio" name="options">Risk Category 1</label>
+				  <label class="btn ratingBtn" id="riskCategory2">
+					<input type="radio" name="options">Risk Category 2</label>
+				  <label class="btn ratingBtn" id="ratingCategory">
+					<input type="radio" name="options">Both Categories</label>
+				</div>
+				<div id="RiskCycle" class="btn-group btn-default top-btn" data-toggle="buttons">
+				  <label class="btn cycleBtn" id="2014">
+					<input type="radio" name="options">2014</label>
+				   <label class="btn active cycleBtn" id="2015">
+					<input type="radio" name="options">2015</label>
+				</div>
+				<div id="bubbleChart">
+				</div>
+				</div>
+		</div>
+		<script src="bubbles.js"></script>
+  </body>
+
+</html
diff --git a/genre_charts/bubble chart/style.css b/genre_charts/bubble chart/style.css
@@ -0,0 +1,187 @@
+body {
+    background-color: white;
+    margin:0 auto;
+  }
+
+h1{
+font-family:helvetica,arial,sans-serif;
+font-size:22;
+font-style:bold;
+color:#34495e;
+}
+
+h2{
+font-family:helvetica,arial,sans-serif;
+font-size:16;
+font-style:bold;
+color:#00A6AA;
+}
+
+h3{
+font-family:arial;
+font-size:13;
+font-style:bold;
+color:#004855;
+}
+
+h4{
+font-family:arial;
+font-size:11;
+font-style:bold;
+color:#00A6AA;
+}
+
+p{
+font-family:arial;
+font-size:22;
+font-style:none;
+color:#000000;
+}
+
+
+
+
+#container{
+text-align:center;
+width: 100%;
+}
+
+#header{
+text-align:center;
+width: 1366px;
+min-height:100px;
+height:auto;
+padding-top:20px;
+margin:0 auto;
+}
+
+#headerBand{
+background-color:#1abc9c;
+min-height:60px;
+height:auto;
+}
+
+
+#bubbleContainer{
+width: 960x;
+height: 850px;
+border: 1px solid #BFD1D4;
+border-radius: 10px;
+margin: 2px;
+text-align: center;
+}
+
+#bubbleChart{
+
+}
+
+
+#providerSection{
+text-align:center;
+width: 960px;
+}
+
+
+circle {
+    fill:#3498DB;
+    stroke: black;
+    stroke-width:2px;
+    opacity: .8;
+  }
+
+circle:hover {
+stroke:#22A7F0;
+  }
+
+
+.label {
+    fill: black;
+    font-size: 16px;
+  }
+
+.ratingCategory1{
+fill:#88DB54;
+}
+
+.ratingCategory2{
+fill: url(#lowModGrad);
+}
+
+.ratingCategory3{
+fill:#FE9A2E;
+}
+
+.ratingCategory4{
+fill: url(#lowHighGrad);
+}
+
+.ratingCategory5{
+fill: url(#modHighGrad);
+}
+.ratingCategory6{
+fill:#FF0000;
+}
+
+.Low{
+fill:#88DB54;
+}
+
+.Moderate{
+fill:#FE9A2E;
+}
+
+.High{
+fill:#FF0000;
+}
+
+.Suspended{
+fill:#A4A4A4;
+}
+.All-Objects{
+fill:#3498db;
+}
+
+
+.selected {
+fill:#3498DB;
+stroke: black;
+stroke-width: 2px;
+}
+
+
+.yAxis path,
+.yAxis line {
+fill: none;
+stroke: none;
+}
+
+.xAxis path,
+.xAxis line {
+fill: none;
+stroke: #7f8c8d;
+}
+
+
+.yAxis text {
+font-family: sans-serif;
+font-size: 15px;
+color: #ecf0f1;
+
+}
+
+.xAxis text {
+font-family: arial;
+font-size: 11px;
+color: #ecf0f1;
+
+}
+
+.notes {
+text-align:left;
+padding-top: 10px;
+}
+
+.imageContainer {
+text-align: center;
+padding-top: 10px;
+}
diff --git a/genre_charts/bubble chart/year_bubbles.js b/genre_charts/bubble chart/year_bubbles.js
@@ -0,0 +1,47 @@
+(function() {
+  var width = 1000,
+    height = 1000;
+
+  var svg = d3.select("#chart")
+    .append("svg")
+    .attr("height", height)
+    .attr("width", width)
+    .append("g")
+    .attr("transform", "translate(0,0)")
+
+  var simulation = d3.forceSimulation()
+    .force("x", d3.forceX(width / 2).strength(0.005))
+
+  d3.queue()
+    .defer(d3.csv, "genres_2010.csv")
+    .await(ready)
+
+  function ready (error, datapoints) {
+
+    var circles = svg.selectAll(".artist")
+      .data(datapoints)
+      .enter().append("circle")
+      .attr("class", "artist")
+      .attr("r", 10)
+      .attr("fill", "lightblue")
+      .attr("cx, "cy")
+
+    simulation.nodes(datapoints)
+      .on('tick', ticked)
+
+    function ticked() {
+      circles
+      .attr("cx", function(d) {
+        return d.x
+      .attr("cy", function(d) {
+        return d.y
+      })
+    }
+
+
+  }
+})();
+
+
+
+