Skip to content

CS4320 Exercise 1 #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
C-Stevens wants to merge 4 commits into
base: master
Choose a base branch
from
Open

CS4320 Exercise 1 #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7680e8e
Initial commit of README
C-Stevens Jan 28, 2016
2739c83
Refactored source, added Dem graphing data
C-Stevens Jan 28, 2016
9fa5755
Updated to reflect new features
C-Stevens Jan 28, 2016
812e1b1
Updated to reflect new features
C-Stevens Jan 29, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
##Mizzou SENG 2016 Presidential Candidate Polling App
This app uses the D3.js visualization library to compile updated graphs visualizing the current presidential nomination standings between candidates in both GOP and Democrat parties.

###Tools used
* [jQuery](https://jquery.com/)
* [D3.js](http://d3js.org/)
* [Huffington Post Pollster API](http://elections.huffingtonpost.com/pollster/api)
29 changes: 25 additions & 4 deletions app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,43 @@
body {
background-color: #EEE;
}
#graph .choice {
#gop .choice {
float: left;
font-family: arial;
font-size: 1.5em;
min-width: 200px;
text-align: right;
margin: 8px 5px;
}
#graph .bar {
#gop .bar {
width: 0;
height: 35px;
background-color: coral;
background-color: maroon;
margin: 5px;
float: left;
}
.group:after {
#gop .group:after {
content: "";
display: table;
clear: both;
}

#dem .choice {
float: left;
font-family: arial;
font-size: 1.5em;
min-width: 200px;
text-align: right;
margin: 8px 5px;
}
#dem .bar {
width: 0;
height: 35px;
background-color: blue;
margin: 5px;
float: left;
}
#dem > .group:after {
content: "";
display: table;
clear: both;
Expand Down
45 changes: 41 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,28 @@
</head>
<body>

<div id="graph"></div>
<table width="100%">
<tr style="text-align: center; font-weight: bold; padding: 10px">
<td>Republican (GOP) Candidates</td>
<td>Democrat Candidates</td>
</tr>
<tr>
<td><div id="gop"></div></td>
<td><div id="dem"></div></td>
</tr>
</table>

<script>

// GOP
var url = "http://elections.huffingtonpost.com/pollster/api/charts/2016-national-gop-primary";

$.ajax(url, {
dataType: "jsonp",
jsonpCallback: "pollsterCallback",
cache: true,
success: function(data) {

var candidateBar = d3.select("#graph").selectAll("div").data(data.estimates),
console.log(data.estimates);
var candidateBar = d3.select("#gop").selectAll("div").data(data.estimates),
candidateWrapper = candidateBar.enter().append("div").classed("group", true);

candidateWrapper.append("div")
Expand All @@ -30,13 +39,41 @@
});

candidateWrapper.append("div")
.classed("graph", true)
.classed("bar", true)
.transition()
.duration(1000)
.style("width", function(candidate) {
return candidate.value * 10 + "px";
});
}
});

// Dem
var url2 = "http://elections.huffingtonpost.com/pollster/api/charts/2016-national-democratic-primary";

$.ajax(url2, {
dataType: "jsonp",
jsonpCallback: "pollsterChart",
cache: true,
success: function(data) {
var candidateBar = d3.select("#dem").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 + " " + candidate.value + "%";
});

candidateWrapper.append("div")
.classed("graph", true)
.classed("bar", true)
.transition()
.duration(1000)
.style("width", function(candidate) {
return candidate.value * 10 + "px";
});
}
});
</script>
Expand Down