Skip to content

Instantly share code, notes, and snippets.

@inspired12

inspired12/README.md

Last active September 30, 2015 14:36
Show Gist options
  • Save inspired12/4b730e4e1828853c49c2 to your computer and use it in GitHub Desktop.
Save inspired12/4b730e4e1828853c49c2 to your computer and use it in GitHub Desktop.
Download ZIP
Search Engine Popularity Line Chart
Raw
README.md

Election-2016-Search-Engine-Popularity

Working on a few visualizations using the Elections Data shared by Google Trends

data source here

Raw
data.csv
Week Hillary Clinton Bernie Sanders Ben Carson Ted Cruz Carly Fiorina Mike Huckabee Rand Paul Marco Rubio Jeb Bush Scott Walker Chris Christie Lindsey Graham Rick Santorum Martin O'Malley George Pataki Rick Perry Lincoln Chafee Bobby Jindal John Kasich Jim Webb Donald Trump
12/28/2014 1.699089009 0.177758004 0.85261851 0.392416335 0.122591731 0.104202969 0.312674018 0.300404754 2.192188538 0.263572223 0.318738497 0.030652208 0.177758004 0.049036695 0.128721322 0.159369255 0 0.049036695 0.067425457 0.165498834 1.566544367
1/4/2015 4.286984929 0.524219562 1.952675595 0.895633369 0.398397208 2.841354413 0.9771624 0.627540634 3.058373446 0.88478759 10.55891883 0.316498755 0.589490275 0.06549109 0.180100914 0.655018065 0.027284375 0.212818128 0.256543746 0.327412505 5.990411787
1/11/2015 4.773637918 0.65286055 2.172130899 3.25188898 0.4708639 1.790673628 1.56965936 1.924256697 2.414265846 1.254224863 4.351757674 0.256834852 0.422804257 0.037455081 0.133771009 0.856674118 0.048156541 0.422776522 0.374733567 0.090962346 4.562137638
1/18/2015 5.43285858 0.585971729 2.316812461 2.687080636 0.260327017 3.225529583 1.793156957 2.109874433 2.228996556 1.308921306 1.16075687 0.629297694 0.536937329 0.103046115 0.0542348 1.009946883 0.0271174 2.60466507 0.390627503 0.227786132 5.755546121
1/25/2015 5.993947499 0.650900492 3.340371445 1.950259122 0.565405629 1.860751658 1.601864389 1.522475871 3.547726655 5.3587724 2.762685769 0.645679704 0.629603847 0.042680231 0.101346293 1.147857646 0.015581551 1.120723219 0.576348945 0.368247167 7.265552788
2/1/2015 6.172596076 0.540314628 2.636813624 1.216201913 0.633777831 2.029434836 5.412010764 0.83137474 3.251391753 6.669332339 3.435646953 0.524663977 0.368852025 0.036356945 0.457111054 0.612974715 0.015581551 1.746721891 0.353252205 0.171397002 4.237097571
2/8/2015 5.536279484 0.912232559 4.340607172 1.367398563 0.258809067 0.844670169 2.131984037 0.808549562 2.965133341 5.168387621 1.571427617 0.305394707 1.273992824 0.046585628 0.051761816 0.533303115 0.015528538 1.305663097 0.28987126 0.19670285 3.750439792
2/15/2015 6.30523675 0.601970186 2.703171389 0.935326775 0.494354133 0.908555012 1.835525568 0.881480017 3.918482553 4.864731028 1.365800742 0.274123661 0.456821377 0.021493662 0.161203514 0.531968039 0 0.483608136 0.365423606 0.220444982 5.603341976
2/22/2015 5.95076925 0.614436995 3.63718503 1.725336098 1.354533518 0.666263597 2.047545168 1.073376014 4.29361255 6.871633611 1.893827938 0.447863698 0.51546685 0.036436289 0.135334788 0.692289519 0 0.83306359 0.432090031 0.520679463 4.649834252
3/1/2015 16.01900513 0.766823274 8.925508988 1.346413086 0.583661182 0.823602954 2.74096279 1.042539564 2.812992842 4.432652745 1.812020841 0.58887244 0.375263896 0.198027908 0.119858999 0.609945209 0 0.375210758 0.218937551 0.208450424 4.000572858
3/8/2015 30.11879421 0.886880331 3.421351627 1.484731602 0.602127469 0.833234014 1.889200348 1.253104245 2.553814566 3.124342717 1.286763165 1.679367202 0.408324302 0.311615918 0.150435274 0.473063357 0 0.365342795 0.231037081 0.494491819 4.071599264
3/15/2015 13.00017364 0.577706916 2.245062934 3.148916917 0.51826956 0.718263131 1.876700137 0.977646148 2.239385456 2.65371187 1.167808394 0.442776345 0.664228784 0.129567396 0.091776898 0.367147088 0 0.529218606 0.188952442 0.507596875 4.121517629
3/22/2015 10.1823947 0.823848696 2.782623628 73.76936783 0.405847418 0.657071774 3.116075798 1.631820597 3.107644072 2.811539088 1.284753905 0.381974046 0.710609144 0.190987017 0.107430195 0.537150998 0 0.668811097 0.56102437 0.44178569 3.859679019
3/29/2015 10.28228647 0.852393932 1.707698756 9.129663691 2.785375305 0.841467067 1.594917123 1.89411423 1.875142602 2.137316969 1.236413161 0.336457978 0.527077303 0.297178657 0.095307242 0.426209944 0 0.375622648 0.308445755 0.269110699 3.184421782
4/5/2015 16.80732983 0.950418083 2.175978544 6.597893692 1.139731998 0.61698052 30.05631888 2.160429555 4.07472904 3.341862852 1.1402089 0.516678284 0.939346272 0.222227219 0.088890882 0.550175657 0.788948276 0.544683348 0.32778515 0.400150318 3.171366266
4/12/2015 97.77778143 1.852041239 3.511229768 9.335412578 2.116995646 1.112825671 13.36989398 31.26217989 5.715894806 2.877956361 3.443324236 0.523135708 0.561389906 0.594457383 0.143068319 0.633005158 0.775978485 0.720930675 0.484353488 0.687967681 3.786486133
4/19/2015 27.49329085 1.415770616 2.357419449 5.132890731 2.274347152 0.867402611 5.689532187 5.831559119 3.287708599 3.590540597 2.768799788 1.268261142 2.295380338 0.346631906 0.081232144 0.492895766 0.297851198 1.310909212 0.964280641 0.530785406 3.128065804
4/26/2015 18.84059608 22.74967779 2.262906408 4.274861262 0.8947482 0.74176772 3.759440265 2.462946296 2.751567942 1.853651648 2.180859788 0.398167527 0.665350016 0.654580371 0.196313629 0.47446994 0.338014422 0.51247348 0.523697972 0.561634871 4.510520178
5/3/2015 14.29196986 13.34667758 22.17177101 3.249880272 13.26219819 5.992766069 2.929196813 2.23935169 2.864376496 2.423425897 1.814370483 0.592156653 1.049354862 0.276353059 0.078954221 0.699715292 0.214341207 0.383621331 0.434322251 0.434443887 3.339409904
5/10/2015 12.62495984 6.510423887 5.65096153 3.432331067 2.304396383 1.399791067 2.920900917 3.472338764 6.772278811 1.865613669 2.317376632 0.256818715 0.59364737 0.154091229 0.308182458 0.639255244 0.182626648 0.325303702 0.26257244 0.296945177 3.38876178
5/17/2015 16.0440488 7.859410843 3.653801862 3.281958348 1.108773975 2.064131155 6.988294311 2.448384904 3.720463886 1.926204894 1.519933837 1.601950365 1.016628545 0.161610214 0.26550249 0.698640278 0.126979447 1.229949204 0.519740942 0.254029309 3.207093676
5/24/2015 14.30575281 13.54127978 3.4767493 3.229778072 2.080479499 2.314171398 5.869765483 2.223517086 2.41083907 1.939949114 1.502750741 0.831707487 6.371164745 0.862507738 3.428974092 0.717732538 0.222978113 0.928260795 0.651190834 0.337560252 3.339927419
5/31/2015 13.77848834 12.30859532 2.941103902 4.843100244 1.626804312 2.569186435 7.186714849 2.770739835 3.243712764 2.704605632 4.088189376 6.777537201 2.527999968 0.963754237 0.727279427 6.56924159 2.23078115 0.869316202 0.584979519 0.336827075 3.880627832
6/7/2015 15.16941711 9.749116204 3.022976212 2.736172337 1.9137305 0.943739417 3.188291018 4.353699866 4.33732583 2.544717559 3.719414939 3.833976239 1.74328156 0.228223777 0.444647769 2.016005258 0.613238563 0.492540286 0.498488784 0.38441522 3.507531018
6/14/2015 21.29750455 17.0666387 4.434164991 2.253973907 1.907011686 0.877466852 4.805274312 3.749509133 34.19376712 2.496298662 2.782527257 2.699109976 1.365531101 0.923199999 0.39440275 2.687158375 0.351596519 0.83161173 0.730267055 0.346230485 100
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.ui{
font-family: sans-serif;
margin-left:3em;
}
rect{
fill:#B22234;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<div class="ui">
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
<script>
var margin = {top: 20, right: 20, bottom: 130, left: 50},
width = window.innerWidth*0.9 - margin.left - margin.right,
height = 900 - margin.top - margin.bottom;
var widthScale = d3.time.scale()
.range([ 0, width ]);
var heightScale = d3.scale.linear()
.range([ 0, height ]);
var root;
//var dateFormat = d3.time.format("%m/%d/%Y");
var dateFormat = d3.time.format("%x");
var xAxis = d3.svg.axis()
.scale(widthScale)
.orient("bottom")
.ticks(11)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
console.log(d);
return widthScale(dateFormat.parse(d.week));
})
.y(function(d) {
console.log(d);
return heightScale(+d.rank);
});
var svg = d3.select('body').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
var d = [];
var weekCount = 0;
var candidates = ["Hillary Clinton", "Bernie Sanders", "Ben Carson", "Ted Cruz", "Carly Fiorina", "Mike Huckabee", "Rand Paul", "Marco Rubio", "Jeb Bush", "Scott Walker", "Chris Christie", "Lindsey Graham", "Rick Santorum", "Martin O'Malley", "George Pataki", "Rick Perry", "Lincoln Chafee", "Bobby Jindal", "John Kasich", "Jim Webb", "Donald Trump"];
var weeks = [];
var dataset = [];
var counter = 0;
for(var i = 0;i<candidates.length;i++){
dataset.push({
candidate: candidates[i],
ranks: []
});
}
console.log(dataset);
d3.csv("data.csv",function(root){
root = root;
root.forEach(function(data){
for(var k in data){
counter ++;
if (data.hasOwnProperty(k)) {
if(k=="Week"){
var da = data[k];
var dater = (da.substring(0,da.indexOf("/"))<10)?"0"+da.substring(0,da.indexOf("/")):da.substring(0,da.indexOf("/"));
dater= dater+"/"+da.substring(da.indexOf("/")+1,da.length);
weeks.push(dater);
}else{
console.log(k);
for(var i = 0; i<dataset.length; i++){
if(dataset[i].candidate == k){
dataset[i].ranks.push({
week: dater,
rank: data[k]
});
}
}
}
}
}
})
update(dataset);
});
function update(_data){
widthScale.domain([
d3.min(weeks, function(d) {
return dateFormat.parse(d);
}),
d3.max(weeks, function(d) {
return dateFormat.parse(d);
})
]);
heightScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.ranks, function(d) {
return +d.rank;
});
}),
0
]);
//Make a group for each country
var groups = svg.selectAll("g")
.data(_data)
.enter()
.append("g");
//Append a title with the candidate name (so we get easy tooltips)
groups.append("title")
.text(function(d) {
return d.candidate;
});
//Within each group, create a new line/path,
//binding just the rank data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.ranks ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", randomColor)
.attr("stroke-width", 2);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0 ," + (height) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis);
}
var randomColor = (function(){
var golden_ratio_conjugate = 0.618033988749895;
var h = Math.random();
var hslToRgb = function (h, s, l){
var r, g, b;
if(s == 0){
r = g = b = l; // achromatic
}else{
function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
};
return function(){
h += golden_ratio_conjugate;
h %= 1;
return hslToRgb(h, 0.5, 0.60);
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment