SociallyCompute · AndrewUsesGit · Sep 5, 2016 · Sep 5, 2016 · Sep 5, 2016 · Sep 5, 2016
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+#Group 9 Project Title
+
+##Description
+This project is designed to familiarize ourselves with git and utilize it in a small group setting. This repo is for group 9, and is it forked from the class repository for the assignment. The goal is to use an API and a few javascript libraries to create a visualization for presidential candidate polls. Below are links to the tools.
+
+jQuery: [link](https://jquery.com/)
+
+Javascript: [link] (https://www.javascript.com/)
+
+Huffington Post API for candidate data: [link] (http://elections.huffingtonpost.com/pollster/api) 
+
+###Visualizations
+
+####Jared Welch
+My visualization is a simple UI change to make the graphs more readable. First, I changed the data to represent the democratic presidential candidates, as outlined in the assignment description. Second, I changed the background color, font color, and bar colors in order to make them look more visually appealing. Font was changed and the numbers were formatted to be displayed to the user(formatted to 2 decimal places). I also added a title to the graph. Finally, I adjusted the width of the labels for each bar in order to make the graph look more organized. 
+####Andrew Stoll
+My visualization change is slightly different. I used a different url to gather information on the national democtatic primary polls. I colored the bars blue to reflect the democratic color. I also rounded the decimals to two spots, because the
+long decimals gave me a headache. The rounding function also had the unintended effect of lining all of the candidates up nice and neat.
+####Geoff Husser
+For my visualizer I changed the bar graph and the background color to something not quite as harsh (to black and beige, respectively). I also removed any candidate with less than 5% as at this point in the race, they've become inconsequential.
+
+#TO DO 
+Need to take the three visualizations that are individually submitted and combine them to one "master" index file
diff --git a/andrewsVisualization.html b/andrewsVisualization.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Andrew's Primary Data 2016</title>
+    <link href="app.css" rel="stylesheet" type="text/css">
+    <script src="jquery-1.12.0.min.js"></script>
+    <script src="d3.v3.min.js"></script>
+</head>
+<body>
+
+    <div id="graph"></div>
+
+    <script>
+
+        var url = "http://elections.huffingtonpost.com/pollster/api/charts/2016-national-democratic-primary";
+
+        $.ajax(url, {
+            dataType: "jsonp",
+            jsonpCallback: "pollsterCallback",
+            cache: true,
+            success: function(data) {
+
+                var candidateBar = d3.select("#graph").selectAll("div").data(data.estimates),
+                    candidateWrapper = candidateBar.enter().append("div").classed("group", true);
+
+                candidateWrapper.append("div")
+                    .classed("choice", true)
+                    .text(function(candidate) {
+                        return candidate.choice + " " + parseFloat(candidate.value).toFixed(2) + "%";
+                    });
+
+                candidateWrapper.append("div")
+                    .classed("bar", true)
+                    .transition()
+                    .duration(1000)
+                    .style("width", function(candidate) {
+                        return candidate.value * 10 + "px";
+                    });
+
+                    var bars = d3.selectAll("div.bar");
+      							bars.style("background-color", "#12c9f0");
+
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/geoff.css b/geoff.css
@@ -0,0 +1,23 @@
+body {
+    background-color: beige;
+}
+#graph .choice {
+    float: left;
+    font-family: arial;
+    font-size: 1.5em;
+    min-width: 200px;
+    text-align: right;
+    margin: 8px 5px;
+}
+#graph .bar {
+    width: 0;
+    height: 35px;
+    background-color: red;
+    margin: 5px;
+    float: left;
+}
+.group:after {
+  content: "";
+  display: table;
+  clear: both;
+}
diff --git a/geoffViz.html b/geoffViz.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Andrew's Primary Data 2016</title>
+    <link href="app.css" rel="stylesheet" type="text/css">
+    <script src="jquery-1.12.0.min.js"></script>
+    <script src="d3.v3.min.js"></script>
+</head>
+<body>
+
+    <div id="graph"></div>
+
+    <script>
+
+        var url = "http://elections.huffingtonpost.com/pollster/api/charts/2016-national-democratic-primary";
+
+        $.ajax(url, {
+            dataType: "jsonp",
+            jsonpCallback: "pollsterCallback",
+            cache: true,
+            success: function(data) {
+
+                var candidateBar = d3.select("#graph").selectAll("div").data(data.estimates),
+                    candidateWrapper = candidateBar.enter().append("div").classed("group", true);
+
+                candidateWrapper.append("div")
+                    .classed("choice", true)
+                    .text(function(candidate) {
+                      if(candidate.value >5){
+                        return candidate.choice + " " + parseFloat(candidate.value).toFixed(2) + "%";
+                      }
+                    });
+
+                candidateWrapper.append("div")
+                    .classed("bar", true)
+                    .transition()
+                    .duration(1000)
+                    .style("width", function(candidate) {
+                      if(candidate.value >5){
+                        return candidate.value * 10 + "px";
+                      }
+                    });
+
+                    var bars = d3.selectAll("div.bar");
+      							bars.style("background-color", "black");
+
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/jaredsVisualization.html b/jaredsVisualization.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<style>
+	#graph {
+		background-color: black;
+	}
+</style>
+	<head>
+		<title>Presidential Primary Data 2016</title>
+		<link href="app.css" rel="stylesheet" type="text/css">
+		<script src="jquery-1.12.0.min.js"></script>
+		<script src="d3.v3.min.js"></script>
+	</head>
+	<body>
+		<div id="graph"></div>
+		<script>
+
+			var url ="http://elections.huffingtonpost.com/pollster/api/charts/2016-new-york-presidential-democratic-primary";
+
+			$.ajax(url, {
+				dataType: "jsonp",
+				jsonpCallback: "pollsterCallback",
+				cache: true,
+				success: function(data) {
+						var graph = d3.select("#graph");
+						graph.append("h1").classed("title", true).text("Poll Information");
+						var title = d3.select("h1");
+						title.style("color", "gold");
+
+						var candidateBar = graph.selectAll("div").data(data.estimates),
+						candidateWrapper = candidateBar.enter().append("div").classed("group", true);
+						candidateWrapper.append("div")
+							.classed("choice", true)
+							.text(function(candidate) {
+									return candidate.choice + " " + Number(candidate.value).toFixed(2) + "%";
+							}).style("color", "white");
+						candidateWrapper.append("div")
+							.classed("bar", true)
+							.transition()
+							.duration(1000)
+							.style("width", function(candidate) {
+									return candidate.value * 10 + "px";
+							});
+
+							var allBars = d3.selectAll("div.bar");
+							allBars.style("background-color", "gold");
+							allBars.style("border-width", "5px");
+							allBars.style("border-color", "gray");
+							allBars.style("border-style" , "solid");
+							var allNames = d3.selectAll("div.choice");
+							allNames.style("width", "400px");
+				}
+			});
+	</script>
+	</body>
+	</html>