Political Popularity Scatterplot

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>

<div class="ui">
	<h1>The most searched candidates and relative popularity</h1>
    <p>This visualization shows the most popular presidential candidates every week from the end of last year to June 14th 2015.</p>
    <p>The most searched candidate is highlighted, and the relative search engine popularity is mapped to the size of the circles</p>
</div>

var margin = {top: 20, right: 80, bottom: 130, left: 120}, 
   width = window.innerWidth*0.9 - margin.left - margin.right,
	height = 600 - margin.top - margin.bottom;

var widthScale = d3.scale.ordinal()
                   // .range([ 0, width ]);
                    .rangeRoundBands([ 0, width ], 0.1);

var heightScale = d3.scale.ordinal()
                    .rangeRoundBands([ 0, height ], 0.1);

var xAxis = d3.svg.axis()
                .scale(widthScale)
                .orient("bottom");

var yAxis = d3.svg.axis()
                .scale(heightScale)
                .orient("left");

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 = [];

d3.csv("data.csv",function(root){

root.forEach(function(data){
console.log("one");
        for(var k in data){
            if (data.hasOwnProperty(k)) {
                if(k=="Week"){
                   var week = {"week":data[k],"ranks":[]};
                }else{
                   week["ranks"].push({"name":k,"rank":+data[k]});
                }
            }
        }

week["ranks"].sort(function(a, b) {
            return d3.descending(a.rank, b.rank);
        });

d.push(week);

})

update(d);

});

function update(_data){

console.log(_data);

widthScale.domain(_data.map(function(d) {  return d.week; } ));

heightScale.domain(_data.map(function(d) { return d.ranks[0].name; } ));

svg.select(".x.axis").remove();
    svg.select(".y.axis").remove();

var circles = svg.selectAll("circle")
                    .data(_data)
                    .enter()
                    .append("circle");

circles.attr("cx", function(d) {
            return widthScale(d.week);
        })
        .attr("cy", function(d) {
            return heightScale(d.ranks[0].name)+20;
        })
        .attr("r", 0)
        .attr("fill", "rgba(178, 34, 52,0.5)")
        .append("title")
        .text(function(d) {
            return d.ranks[0].name +": "+ d.ranks[0].rank;
        });

circles.transition().duration(3000).delay(function(d,i){ return i*500 }).attr("r", function(d){ return d.ranks[0].rank  })

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);

}

</script>
</body>
</html>

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