Search Engine Popularity Line Chart

Election-2016-Search-Engine-Popularity

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

data source here

<!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>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js