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

Built with blockbuilder.org

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

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>

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

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