D3OG

All examples By author By category About

jieqianzhang

Full window Github gist

Horserace tool

Built with blockbuilder.org

Horserace tool

This is a tool I built for Google News Lab to compare the Google search indexes of all presidential candidates

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Language" content="en" />
    <title>Search Ranks of Presidential Candidates</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
</head>

<style>

body {
  font-size: 12px;
  font-family: 'Abel', sans-serif;
  margin-top: 20px;
}

li{
    margin-left: 0px;
    }

.x.axis path,.x.axis line {
    fill: none;
    stroke: none;
    }

.y.axis path {
    fill: none;
    }

.y.axis line {
    fill: none;
    stroke: #eeeeee;
    shape-rendering: crispEdges;
    }

.x.axis text, .y.axis text{
      font-size: 10px;
      fill:grey;
    }

.line {
  fill: none;
  stroke-width: 2px;
}

.tick line{
    stroke: #e0e1e1;
    opacity: 1;
    }

#title, .explain{
      text-indent: 15px;
    }

#credit{
      color:grey;
      text-indent: 20px;
      line-height: 30px;
    }
 
 a:hover{
      cursor:pointer;
    }

</style>

<body>

<h1 id="title">Weekly Rankings of Presidential Candidates on Google Search</h1>
<h5 id="credit">By <a href="https://twitter.com/Jieqian_Zhang">@Jieqian_Zhang</a></h5>
<p class="explain"> · Click on a candidate's name in dropdown menus to see the search interest ranking of him/her among all candidates on Google over the past six months.</p>
<p class="explain"> · Hover over a candidate's name tag to see the search interest trend of him/her. </p>
<p class="explain"> · Click on the Replay Button to replay the race.</p>

<div class="bs-example">
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="dropdown">
        <a id="drop4" data-target="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Democrats
          <span class="caret"></span>
        </a>
        <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4">
         
          <li class="candidatename"><a data-target="#">Hillary Clinton</a></li>
          <li class="candidatename"><a data-target="#">Bernie Sanders</a></li>
          <li class="candidatename"><a data-target="#">Martin O'Malley</a></li>
          <li class="candidatename"><a data-target="#">Lincoln Chafee</a></li>
          <li class="candidatename"><a data-target="#">Jim Webb</a></li>        
        </ul>
      </li>

<li role="presentation" class="dropdown">
        <a id="drop5" data-target="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          Republicans
          <span class="caret"></span>
        </a>
        <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5">
        
          <li class="candidatename"><a data-target="#">Donald Trump</a></li>
          <li class="candidatename"><a data-target="#">Jeb Bush</a></li>
          <li class="candidatename"><a data-target="#">Rand Paul</a></li>
          <li class="candidatename"><a data-target="#">Ben Carson</a></li>
          <li class="candidatename"><a data-target="#">Marco Rubio</a></li>
          <li class="candidatename"><a data-target="#">Chris Christie</a></li>
          <li class="candidatename"><a data-target="#">Lindsey Graham</a></li>
          <li class="candidatename"><a data-target="#">Rick Perry</a></li>
          <li class="candidatename"><a data-target="#">Ted Cruz</a></li>
          <li class="candidatename"><a data-target="#">Carly Fiorina</a></li>
          <li class="candidatename"><a data-target="#">Rick Santorum</a></li>
          <li class="candidatename"><a data-target="#">Mike Huckabee</a></li>
          <li class="candidatename"><a data-target="#">Bobby Jindal</a></li>
          <li class="candidatename"><a data-target="#">John Kasich</a></li>
          <li class="candidatename"><a data-target="#">George Pataki</a></li>         
        </ul>
      </li>
      <li role="presentation" class="active" id="replay"><a data-target="#">Replay Race</a></li>
    </ul> 
  </div>

function drawGrahpics(){

var margin = {top: 90, right: 120, bottom: 30, left: 50},
    width = 1200 - margin.left - margin.right,
    height = 700 - margin.top - margin.bottom;

var speed = 500;

var x = d3.scale.linear()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(0)
    .ticks(25)
    .orient("top");

var xtickLabels = ["Dec 28, 2014","Jan 4, 2015","Jan 11, 2015","Jan 18, 2015","Jan 25, 2015","Feb 1,2015","Feb 8, 2015","Feb 15, 2015","Feb 22, 2015","Mar 1, 2015","Mar 8, 2015","Mar 15, 2015","Mar 22, 2015","Mar 29, 2015","Apr 5, 2015","Apr 12, 2015","Apr 19, 2015","Apr 26, 2015","May 3, 2015","May 10, 2015","May 17, 2015","May 24, 2015","May 31, 2015","Jun 7, 2015","Jun 14, 2015"];

xAxis.tickFormat(function(d,i){
    return xtickLabels[i]
  });

var yAxis = d3.svg.axis()
    .scale(y)
    .tickFormat(function(d) { return d;})
    .ticks(16)
    .innerTickSize(- width)
    .tickPadding(10)
    .outerTickSize(0)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.week); })
    .y(function(d) { return y(d.rank); });

var svg = d3.select("#graphic").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .call(responsivefy)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var clip = svg.append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("x","-5")
    .attr("y","-20")
    .attr("width", 0)
    .attr("height", height*1.2);

d3.csv("rankdata.csv", function(error, data) {

var color = d3.scale.category20();

color.domain(d3.keys(data[0]).filter(function(key) { return key !== "week"; }));

data.forEach(function(d) {
    d.week = +[d.week];
  });

x.domain(d3.extent(data, function(d) { return d.week; }));

y.domain([
    d3.min(candidates, function(c) { return d3.min(c.values, function(v) { return v.rank ; }); }),
    d3.max(candidates, function(c) { return d3.max(c.values, function(v) { return v.rank ; }); })
  ].reverse());

svg.append("g")
      .attr("class", "x axis")
      .attr("transform","translate(0,0)")
      .call(xAxis)
      .selectAll("text")
      .style("text-anchor","start")
      .attr("dx", "2.3em")
      .attr("dy", "-0.9em") 
      .attr("transform",function(d){
        return "rotate(-60)"});

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)

//timeline 
  svg.append("line")
        .attr(
        {
            "class":"horizontalGrid",
            "x1" : -2,
            "x2" : width,
            "y1" : y(1) - 13,
            "y2" : y(1) - 13,
            "fill" : "none",
            "shape-rendering" : "crispEdges",
            "stroke" : "#e0e1e1",
            "stroke-width" : "1px",
            "stroke-dasharray": ("3, 3")
        })
        .attr("id","dotted")
        .attr("clip-path", function(d) { return "url(#clip)"; });

//end of timeline

var candidates = svg.selectAll(".candidate")
      .data(candidates)
    .enter().append("g")
      .attr("class", "candidate");

var path = svg.selectAll(".candidate").append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
      .attr("clip-path", function(d) { return "url(#clip)"; })
      .style("stroke", colorFilter)

var circleStart = candidates.append("circle")
      .attr("cx", "0")
      .attr("cy", function(d) { return y(d.values[0].rank); })
      .style("fill", colorFilter)
      .attr("r", 2)

var circleEnd = candidates.append("circle")
      .attr("cx", function(d) { return x(d.values[0].week); })
      .attr("cy", function(d) { return y(d.values[0].rank);} )
      .style("fill", colorFilter)
      .attr("r", 2);

var timemark = candidates.append("path")
                  .attr("d", d3.svg.symbol().type("triangle-up"))
                  .style("fill", "grey")
                  .attr("transform",function(d) { return "translate(" + (x(d.values[0].week) ) + "," + (y(1)-15) + ") rotate(-30)"; })

var week = 1;

var transition = d3.transition()
    .delay(500)
    .duration(speed)
    .each("start", function start() {     
          
      label.transition()
        .duration(speed)
        .ease('linear')
      .attr("transform", function(d) { return "translate(" + (x(d.values[week].week) + 20) + "," + (y(d.values[week].rank)) + ")"; })
      .text(function(d) { return  d.name; });

ranking.transition()
        .duration(speed)
        .ease('linear')
        .attr("transform", function(d) { return "translate(" + (x(d.values[week].week) + 15) + "," + (y(d.values[week].rank) ) + ")"; })
      .text(function(d,i) { return  d.values[week].rank; });

round.transition()
        .duration(speed)
        .ease('linear')
        .attr("transform", function(d) { return "translate(" + (x(d.values[week].week) + 15) + "," + (y(d.values[week].rank)) + ")"; });
    
      circleEnd.transition()
        .duration(speed)
        .ease('linear')
        .attr("cx", function(d) { return x(d.values[week].week); })
        .attr("cy", function(d) { return y(d.values[week].rank); });

clip.transition()
        .duration(speed)
        .ease('linear')
        .attr("width", x(week+1)+5)
        .attr("height", height*1.2);

timemark.transition()
         .duration(speed)
         .ease('linear')
         .attr("transform",function(d) { return "translate(" + (x(d.values[week].week) ) + "," + (y(1)-15) + ") rotate(-30)"; })

week+=1;

if (week !== data[0].length){

transition = transition.transition().each("start", start);}     
      });

$(".candidatename").on("click",function(){
      var nameOfCandidate = $(this).text();
        candidates.style("opacity",0.1);
        candidates.filter(function(path) {
          return path.name === nameOfCandidate;
        }).style("opacity",1);
      });

});

function responsivefy(svg) {

var container = d3.select(svg.node().parentNode),
            width = parseInt(svg.style("width")),
            height = parseInt(svg.style("height")),
            aspect = width / height;

svg.attr("viewBox", "0 0 " + width + " " + height)
            .attr("perserveAspectRatio", "xMinYMid")
            .call(resize);

d3.select(window).on("resize." + container.attr("#graphic"), resize);

function resize() {
            var targetWidth = parseInt(container.style("width"));
            svg.attr("width", targetWidth * 0.8);
            svg.attr("height", Math.round(targetWidth /aspect * 0.8));
        }  
    }

}

</script>

</body>

drawGrahpics()

d3.select("#replay")
    .on("click", function(){
      location.reload()
    })

</script>

</html>

Modified http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js to a secure url

Modified http://d3js.org/d3.v3.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js

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

https://d3js.org/d3.v3.js