D3 Examples - Political Popularity Scatterplot

xxxxxxxxxx
 
<!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>
​
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js'></script>
<script>
​
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>
​
​
    