D3 Examples - Treemaps: Popular Presidential Campaign Videos

Treemaps: Popular Presidential Campaign Videos

This viz is a visual way of showing how various official presidential campaign videos are peforming on youtube in terms of view count, like count, dislike count, favorite count and comment count. Its a quick way and visual way to compare how the candidate's offical campaign ads on youtube are preforming.

This viz uses d3 to build up treemap nodes that are iframes.

The size of each treemap node is determined by numeric value of view count, like count, dislike count, favorite count, or comment count (whatever the use selects from the radio button form). When a user selects a different option, the size of the tree map nodes are recomputed and a reconfigured tree map appears.

Files in this project are:

index.html - the main beef of this project

tooltip.js - helper functions for the tooltip.

Youtube_flare.json contains the actual data for the viz. The youtube api was used to get the data in this viz.

Helpful tool for building your Youtube API Calls

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
<style>
​
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 1200px;
  height: 1200px;
}
​
form {
 padding-left:20px; bottom-margin:-30px; font-size:20px;
}
​
.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}
  .header{font-size: 30px; padding-top:50px; padding-bottom: 20px; 
    padding-left:20px;}
 .formDescription {padding-left:20px}
  
   .explanation{ padding-left:20px; padding-bottom:20px; 
     padding-right:320px; }
</style>
</head>
​
<body>
  <div class="header"> 
    Most Popular Official Presidential Campaign Youtube Videos 
  </div>
    <div class="explanation">
     This treemap  is a visual way of showing how various official presidential     
    campaign videos are peforming on youtube in terms of view count, like count, 
    dislike count, favorite count and comment count.
  </div>
  <form>
  <label>
    <input type="radio" name="mode" value="viewCount" checked> View Count     
  </label>
  <label>
    <input type="radio" name="mode" value="likeCount"> Like Count
  </label>
  <label>
    <input type="radio" name="mode" value="dislikeCount"> Dislike Count
  </label>
  <label>
    <input type="radio" name="mode" value="favoriteCount"> Favorite Count
  </label>
   <label>
    <input type="radio" name="mode" value="commentCount"> Comment Count
  </label>
</form>
​
<p class="formDescription"> The larger frame size of a cell indicates greater number of views, likes, dislikes, favorites, or comments </p>
​
​
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="tooltip.js"></script>
<script>
  
  //set up the margins
  var margin = {top: -3, right: 10, bottom: 10, left: 20},
  width = 800 - margin.left - margin.right,
  height = 2000 - margin.top - margin.bottom;
​
    var color = d3.scale.category20c();
  
  //set up the tree map
    var treemap = d3.layout.treemap()
    .size([width, height])
    .sticky(true)
    .value(function(d) { return d.viewCount; });
    
  //set up the main d3 item
    var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
​
    //we are loading the data here and creating nodes for the treemap. Using d3, 
  //we can chain together various html things to create a tree node that is   
  //actually an iframe object!
    d3.json("youtube_flare.json", function(error, root) {
    var node = div.datum(root).selectAll(".node")
      .data(treemap.nodes)
      .enter().append("div")
      .append("foreignObject")
      .append("iframe")
      .attr("class", "node")
      .call(position)
        //this sets the defaults to display the youtube video
      .attr("src", function(d) {  return "https://www.youtube.com/embed/" + d.id +                       "?showinfo=0&iv_load_policy=3&controls=0autoplay=true";})
      .attr("frameborder", "0")
​
      .call(d3.helper.tooltip()
                .attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
                .style({color: '#ffcc00'})
                .text(function(d, i){ return    'candidate: ' +                                                                                             d.candidate +';</br>' +
                                     'title: ' + d.title + ';</br>'+
                                    'video dt: ' +  d.publishedAt.substring(0,10) + ';</br>' +
                                      'view count: '+  d.viewCount + ';</br>' +
                        'like count: '+  d.likeCount + ';</br>' +
                       'dislike count: '+  d.dislikeCount + ';</br>' +
                      'favorite count: '+  d.favoriteCount + ';</br>' +
                       'comment count: '+  d.commentCount + ';</br>'; })
            )
      .on('click', function(d) {window.location.href = 
             "https://www.youtube.com/watch?v=" + d.id;})
  
    var toolTipString = function maketooltipText(d){
     
      return tooltipSting
  };
  //this is the function that actually filters the data in the tree map when the       //user clicks on a radio button form; here, I'm changing what values 
  //that tree nodes take
  //Set a transition on the change to the tree map cells to 1500 milliseconds
  d3.selectAll("input").on("change", function change() {
    console.log(this.value);
    var value;
    if(this.value === "viewCount"){
      value = function(d) { return d.viewCount; };
    }
    else if (this.value === "likeCount"){
        value =  function(d) { return d.likeCount; };
    }
    else if (this.value === "dislikeCount"){
     value = function(d) { return d.dislikeCount; };
    }
    else if (this.value === "favoriteCount"){
     value = function(d) { return d.favoriteCount; };
    }
    else if (this.value === "commentCount"){
     value = function(d) { return d.commentCount; };
    }
    node
      .data(treemap.value(value).nodes)
      .transition()
      .duration(1500)
      .call(position);
        });
    });
  
  
  //Set background-image based on youtube url. 
    var getBackgroundStyle = function(d) {
    return 'url(' + d.url + ') ';
    };
  
    function position() {
    this.style("left", function(d) { return d.x + "px"; })
    .style("top", function(d) { return d.y + "px"; })
    .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
    .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
    }
​
</script>
​
</body>
​
    