CINXE.COM
2012 U.S. Presidential Election - Social Media
<!DOCTYPE HTML> <html lang="en"> <head> <title>2012 U.S. Presidential Election - Social Media</title> <meta charset="utf-8"> <style type="text/css"> html { height: 100%; } body { margin: 0; padding: 0; background: #000000 url(/SocialHarvest/loading.gif) center center no-repeat; color: #ffffff; font-family: sans-serif; font-size: 12px; font-weight: normal; line-height: 20px; height: 100%; } #info { font-size: 11px; position: absolute; bottom: 5px; background-color: rgba(0,0,0,0.8); border-radius: 3px; right: 10px; padding: 10px; } #currentInfo { width: 370px; position: absolute; left: 20px; top: 63px; background-color: rgba(0,0,0,0.2); border-top: 1px solid rgba(255,255,255,0.4); padding: 10px; } #extraNotes { width: 370px; position: absolute; left: 20px; top: 150px; background-color: rgba(0,0,0,0.2); padding: 10px; } a { color: #aaa; text-decoration: none; } a:hover { text-decoration: underline; } .bull { padding: 0 5px; color: #555; } #title { position: absolute; top: 20px; width: 370px; left: 20px; background-color: rgba(0,0,0,0.2); border-radius: 3px; font: 20px Georgia; padding: 10px; } .candidate { font: 16px Georgia; line-height: 26px; height: 30px; text-align: center; float: left; width: 90px; color: rgba(255, 255, 255, 0.4); cursor: pointer; -webkit-transition: all 0.1s ease-out; } .candidate:hover, .candidate.active { color: #fff; font-weight: bold; text-decoration: underline; } .candidateDataDetail { width: 90px; font-size: 11px; text-align: center; float: left; } .notes { font-weight: bold; text-decoration: underline; } #hideNotes { font-weight: normal; font-size: 10px; text-decoration: none; color: #eee; } #hideNotes:hover { text-decoration: underline; cursor: pointer; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.min.js"></script> <script type="text/javascript" src="/SocialHarvest/location-controller.js"></script> <script type="text/javascript" src="/SocialHarvest/location-service.js"></script> <script type="text/javascript" src="/SocialHarvest/geohash.js"></script> <script type="text/javascript" src="/SocialHarvest/third-party/Three/ThreeWebGL.js"></script> <script type="text/javascript" src="/SocialHarvest/third-party/Three/ThreeExtras.js"></script> <script type="text/javascript" src="/SocialHarvest/third-party/Three/RequestAnimationFrame.js"></script> <script type="text/javascript" src="/SocialHarvest/third-party/Three/Detector.js"></script> <script type="text/javascript" src="/SocialHarvest/third-party/Tween.js"></script> <script type="text/javascript" src="/SocialHarvest/globe.js"></script> </head> <body> <div id="container" ng-controller="LocationController"></div> <div id="info"> <strong><a href="http://www.chromeexperiments.com/globe" target="_blank">Built with Google WebGL Globe</a></strong> <span class="bull">•</span>聽Created by <a href="http://www.shift8creative.com" target="_blank">Shift8Creative</a> <span class="bull">•</span> Data from <a href="http://www.socialharvest.io" target="_blank">Social Harvest ®</a> </div> <div id="currentInfo"> <select id="currentDataSet" ng-model="dataSetSelection"> <option value="dataMentions">Mentions</option> <option value="dataMaleGender">Mentions by Males</option> <option value="dataFemaleGender">Mentions by Females</option> <option value="dataPositiveSentient">Mentions Positive in Nature</option> <option value="dataNegativeSentient">Mentions Negative in Nature</option> </select> <br /> <span id="candidateObama" class="candidate">Obama</span> <span id="candidateRomney" class="candidate">Romney</span> <br style="clear: left;" /> <span class="candidateDataDetail" id="obamaDataDetail"></span> <span class="candidateDataDetail" id="romneyDataDetail"></span> <br /> </div> <div id="extraNotes"> <p> <span id="hideNotes" class="" style="z-index:100;">[X]</span><br /> This globe represents an aggregate of over 100,000 mentions from Twitter, Facebook, and Google+ for October 22, 2012 through November 5, 2012. </p> <p> <span class="notes">Notes</span><br /> Percentages shown are relative to candidate's own mentions. </p> <p> Hover over each candidate's name to compare values between data sets which you can change with the drop down menu. </p> <p> If your mouse scroll wheel does not zoom in, press the up and down arrows on your keyboard. </p> </div> <div id="title"> 2012 U.S. Presidential Election </div> <script type="text/javascript"> // Ensure users get to https and not http (CORS). var pageUrl = document.URL; if(pageUrl.substring(0, 5) == 'http:') { window.location = 'https://s3.amazonaws.com/SocialHarvest/aggregate.html'; } if(!Detector.webgl){ Detector.addGetWebGLMessage(); } else { // Add WebGL Globe var Globe = angular.module('GlobeModule', []).factory('Globe', function() { return function() { //var container = document.getElementById('container'); //return new DAT.Globe(container); return DAT; }; }); // Bootstrap Angular manually. angular.element(document).ready(function() { var electionApp = angular.module('electionApp', ['locationServices', 'GlobeModule']); // Bootstrap the application. angular.bootstrap(document, ['electionApp']); }); } </script> </body> </html>