njgheorghita · November 17, 2016 17:47
diff --git a/final_song_data.csv b/final_song_data.csv
diff --git a/index.html b/index.html
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <style>
    body{
 	font-family: 'Anton', cursive;
 	background: #91b8f7;
 }
 .positive{
 		fill: white;
 		fill-opacity: 0.9;
 	}
 .negative{
 		fill: darkred;
 		fill-opacity: 0.9;
 	}
 .axis path,
 .axis line {
 			fill: none;
 			stroke: white;
 			shape-rendering: crispEdges;
 	}
 .axis text {
 			font-family: sans-serif;
 			font-size: 10px;	
 	}
 div.tooltip {   
 	  position: absolute;     
 	  text-align: center;
 	  vertical-align: middle;   
 		margin-left:120px;
    margin-top:-100px;
 	  width: 500px;                  
 	  height: 480px;                 
 	  padding: 5px; 
 	  color: white;          
 	  font-size: 20px;     
 	  background: #498fff;
 	  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
 	  border: 2px;  
 	  border-radius: 8px;  
 	  pointer-events: none;   
 		overflow:hidden;               
 	} 
 li{
 	overflow:hidden;
 	display: inline-block;
 	font-size:30px;
 }
 input[type=checkbox] {width:50px; height:50px;}
 ul{
 	padding-right: 0;
  color:white;
 }
 #chart-container{
  margin-top: -80px;
 	float:left;
 }
 #header-table{
  width:100%;
 }
    </style>
  </head>

  <body>
  <script>
        var dataset;

 //Define bar chart function 
 	function barChart(dataset){	

 		//Set width and height as fixed variables
 		var w = 390;
 		var h = 390;
 		var padding = 40;

 		//Scale function for axes and radius
 		var yScale = d3.scale.linear()
 						.domain(d3.extent(dataset, function(d){return d.score;}))
 						.range([w+padding,padding]);

 		var xScale = d3.scale.ordinal()
 						.domain(dataset.map(function(d){ return d.id;}))
 						.rangeRoundBands([padding,h],.5);

 		//To format axis as a percent
 		var formatPercent = d3.format("%1");

 		//Create y axis
 		var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5).tickFormat(formatPercent);

 		//Define key function
 		var key = function(d){return d.id};

 		//Define tooltip for hover-over info windows
 		var div = d3.select("body").append("div")   
  							.attr("class", "tooltip")               
  							.style("opacity", 0);

 		//Create svg element
 		var svg = d3.select("#chart-container").append("svg")
 				.attr("width", w).attr("height", h + padding)
 				.attr("id", "chart")
 				.attr("viewBox", "0 0 " +w+ " "+h)
 				.attr("preserveAspectRatio", "xMinYMin");
 		
 		//Resizing function to maintain aspect ratio (uses jquery)
 		var aspect = w / h;
 		var chart = $("#chart");
 			$(window).on("resize", function() {
 			    var targetWidth = $("body").width();
 			   	
 	    		if(targetWidth<w){
 	    			chart.attr("width", targetWidth); 
 	    			chart.attr("height", targetWidth / aspect); 			
 	    		}
 	    		else{
 	    			chart.attr("width", w);  
 	    			chart.attr("height", w / aspect);	
 	    		}

 			});


 		//Initialize state of chart according to drop down menu
 		var state = d3.selectAll("option");

 		//Create barchart
 		svg.selectAll("rect")
 			.data(dataset, key)
 			.enter()
 		  	.append("rect")
 		    .attr("class", function(d){return d.score < 0 ? "negative" : "positive";})
 		    .attr({
 		    	x: function(d){
 		    		return xScale(d.id);
 		    	},
 		    	y: function(d){
 		    		return yScale(Math.max(0, d.score)); 
 		    	},
 		    	width: xScale.rangeBand(),
 		    	height: function(d){
 		    		return Math.abs(yScale(d.score) - yScale(0)); 
 		    	}
 		    })
 		    .on('mouseover', function(d){
 							d3.select(this)
 							    .style("opacity", 0.2)
 							    .style("stroke", "black")
 					
 					var info = div
 							    .style("opacity", 1)
 							    .style("left", 300 + "px")
 							    .text(d.year + " // " + d.track + " // " + d.artist)
 									.append("p")
 							    	.text("score: " + d.score)
 									.append("p")
 										.style("font-size","15px")
 										.text(d.lyrics);
 					})
 				.on('mouseout', function(d){
 					d3.select(this)
 						.style({'stroke-opacity':0.1,'stroke':'white'})
 						.style("opacity",1);
 				});

 		//Add y-axis
 		svg.append("g")
 				.attr("class", "y axis")
 				.attr("transform", "translate(40,0)")
 				.call(yAxis);

 		//Sort data when sort is checked
 		d3.selectAll(".checkbox").
 		on("change", function(){
 			var x0 = xScale.domain(dataset.sort(sortChoice())
 			.map(function(d){return d.id}))
 			.copy();

 			var transition = svg.transition().duration(750);
 			var delay = function(d, i){return i*10;};

 			transition.selectAll("rect")
 			.delay(delay)
 			.attr("x", function(d){return x0(d.id);});

 		})

 		//Function to sort data when sort box is checked
 		function sortChoice(){
 				var sort = d3.selectAll(".checkbox");

 				if(sort[0][0].checked){
 					var out = function(a,b){return b.score - a.score;}
 					return out;
 				}
 				else{
 					var out = function(a,b){return a.year - b.year;}
 					return out;
 				}
 		};

 		//Change data to correct values on input change
 			d3.selectAll("select").
 			on("change", function() {
 			
 				var value= this.value;

        if(value=="demand"){
 					var x_value = function(d){return d.score;};
 					var color = function(d){return d.score < 0 ? "negative" : "positive";};
 					var y_value = function(d){
 			    		return yScale(Math.max(0, d.score)); 
 			    	};
 			    	var height_value = function(d){
 			    		return Math.abs(yScale(d.score) - yScale(0)); 
 			    	};	
 				}

 				//Update y scale
 				yScale.domain(d3.extent(dataset, x_value));

 				//Update with correct data
 				var rect = svg.selectAll("rect").data(dataset, key);
 				rect.exit().remove();

 				//Transition chart to new data
 				rect
 				.transition()
 				.duration(2000)
 				.ease("linear")
 				.each("start", function(){
 					d3.select(this)
 					.attr("width", "0.2")
 					.attr("class", color)
 				})
 				.attr({
 			    	x: function(d){
 			    		return xScale(d.id);
 			    	},
 			    	y: y_value,
 			    	width: xScale.rangeBand(),
 			    	height: height_value
 							
 				});

 				//Update y-axis
 				svg.select(".y.axis")
 					.transition()
 					.duration(1000)
 					.ease("linear")
 					.call(yAxis);
 			});
 		
 	};
 	      
 	//Load data and call bar chart function 
 		d3.csv("final_song_data.csv", function(error,data){
 				if(error){
 					console.log(error);
 				}
 				else{
 					data.forEach(function(d) {
 						d.score = +d.score;
 					});
 					dataset=data;
 					barChart(dataset);
 				}
 			});
    </script>
  <div class ="description">
            <table id="header-table">
        <tr>
            <td>
                <ul>
                  <li><input type="checkbox" class="checkbox" name="check" value="sort"></li>
                  <li>sort by year / score</li>
                  <br>
                  <p style="margin-left:65px;"> &#8595; scroll over for song analysis &#8595; </p>
                </ul>
            </td>
        </tr>
          </table>
      </div>
      <br>
      <div id="chart-container"></div>
    </div>
  </body>
  </html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
	<style>
	body{
	font-family: 'Anton', cursive;
	background: #91b8f7;
	}
	.positive{
	fill: white;
	fill-opacity: 0.9;
	}
	.negative{
	fill: darkred;
	fill-opacity: 0.9;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: white;
	shape-rendering: crispEdges;
	}
	.axis text {
	font-family: sans-serif;
	font-size: 10px;
	}
	div.tooltip {
	position: absolute;
	text-align: center;
	vertical-align: middle;
	margin-left:120px;
	margin-top:-100px;
	width: 500px;
	height: 480px;
	padding: 5px;
	color: white;
	font-size: 20px;
	background: #498fff;
	box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
	border: 2px;
	border-radius: 8px;
	pointer-events: none;
	overflow:hidden;
	}
	li{
	overflow:hidden;
	display: inline-block;
	font-size:30px;
	}
	input[type=checkbox] {width:50px; height:50px;}
	ul{
	padding-right: 0;
	color:white;
	}
	#chart-container{
	margin-top: -80px;
	float:left;
	}
	#header-table{
	width:100%;
	}
	</style>
	</head>

	<body>
	<script>
	var dataset;

	//Define bar chart function
	function barChart(dataset){

	//Set width and height as fixed variables
	var w = 390;
	var h = 390;
	var padding = 40;

	//Scale function for axes and radius
	var yScale = d3.scale.linear()
	.domain(d3.extent(dataset, function(d){return d.score;}))
	.range([w+padding,padding]);

	var xScale = d3.scale.ordinal()
	.domain(dataset.map(function(d){ return d.id;}))
	.rangeRoundBands([padding,h],.5);

	//To format axis as a percent
	var formatPercent = d3.format("%1");

	//Create y axis
	var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5).tickFormat(formatPercent);

	//Define key function
	var key = function(d){return d.id};

	//Define tooltip for hover-over info windows
	var div = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);

	//Create svg element
	var svg = d3.select("#chart-container").append("svg")
	.attr("width", w).attr("height", h + padding)
	.attr("id", "chart")
	.attr("viewBox", "0 0 " +w+ " "+h)
	.attr("preserveAspectRatio", "xMinYMin");

	//Resizing function to maintain aspect ratio (uses jquery)
	var aspect = w / h;
	var chart = $("#chart");
	$(window).on("resize", function() {
	var targetWidth = $("body").width();

	if(targetWidth<w){
	chart.attr("width", targetWidth);
	chart.attr("height", targetWidth / aspect);
	}
	else{
	chart.attr("width", w);
	chart.attr("height", w / aspect);
	}

	});


	//Initialize state of chart according to drop down menu
	var state = d3.selectAll("option");

	//Create barchart
	svg.selectAll("rect")
	.data(dataset, key)
	.enter()
	.append("rect")
	.attr("class", function(d){return d.score < 0 ? "negative" : "positive";})
	.attr({
	x: function(d){
	return xScale(d.id);
	},
	y: function(d){
	return yScale(Math.max(0, d.score));
	},
	width: xScale.rangeBand(),
	height: function(d){
	return Math.abs(yScale(d.score) - yScale(0));
	}
	})
	.on('mouseover', function(d){
	d3.select(this)
	.style("opacity", 0.2)
	.style("stroke", "black")

	var info = div
	.style("opacity", 1)
	.style("left", 300 + "px")
	.text(d.year + " // " + d.track + " // " + d.artist)
	.append("p")
	.text("score: " + d.score)
	.append("p")
	.style("font-size","15px")
	.text(d.lyrics);
	})
	.on('mouseout', function(d){
	d3.select(this)
	.style({'stroke-opacity':0.1,'stroke':'white'})
	.style("opacity",1);
	});

	//Add y-axis
	svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(40,0)")
	.call(yAxis);

	//Sort data when sort is checked
	d3.selectAll(".checkbox").
	on("change", function(){
	var x0 = xScale.domain(dataset.sort(sortChoice())
	.map(function(d){return d.id}))
	.copy();

	var transition = svg.transition().duration(750);
	var delay = function(d, i){return i*10;};

	transition.selectAll("rect")
	.delay(delay)
	.attr("x", function(d){return x0(d.id);});

	})

	//Function to sort data when sort box is checked
	function sortChoice(){
	var sort = d3.selectAll(".checkbox");

	if(sort[0][0].checked){
	var out = function(a,b){return b.score - a.score;}
	return out;
	}
	else{
	var out = function(a,b){return a.year - b.year;}
	return out;
	}
	};

	//Change data to correct values on input change
	d3.selectAll("select").
	on("change", function() {

	var value= this.value;

	if(value=="demand"){
	var x_value = function(d){return d.score;};
	var color = function(d){return d.score < 0 ? "negative" : "positive";};
	var y_value = function(d){
	return yScale(Math.max(0, d.score));
	};
	var height_value = function(d){
	return Math.abs(yScale(d.score) - yScale(0));
	};
	}

	//Update y scale
	yScale.domain(d3.extent(dataset, x_value));

	//Update with correct data
	var rect = svg.selectAll("rect").data(dataset, key);
	rect.exit().remove();

	//Transition chart to new data
	rect
	.transition()
	.duration(2000)
	.ease("linear")
	.each("start", function(){
	d3.select(this)
	.attr("width", "0.2")
	.attr("class", color)
	})
	.attr({
	x: function(d){
	return xScale(d.id);
	},
	y: y_value,
	width: xScale.rangeBand(),
	height: height_value

	});

	//Update y-axis
	svg.select(".y.axis")
	.transition()
	.duration(1000)
	.ease("linear")
	.call(yAxis);
	});

	};

	//Load data and call bar chart function
	d3.csv("final_song_data.csv", function(error,data){
	if(error){
	console.log(error);
	}
	else{
	data.forEach(function(d) {
	d.score = +d.score;
	});
	dataset=data;
	barChart(dataset);
	}
	});
	</script>
	<div class ="description">
	<table id="header-table">
	<tr>
	<td>
	<ul>
	<li><input type="checkbox" class="checkbox" name="check" value="sort"></li>
	<li>sort by year / score</li>
	<br>
	<p style="margin-left:65px;"> ↓ scroll over for song analysis ↓ </p>
	</ul>
	</td>
	</tr>
	</table>
	</div>
	<br>
	<div id="chart-container"></div>
	</div>
	</body>
	</html>