D3_Course_Mod5_ScatterPlot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
		<style>
		h1 {
			border-bottom: 2px solid green;
			width: auto;
		}
		.axis line {
			stroke: #000;
			stroke-width: .1;
		}
		.axis path {
			display:none;
		}
		.axis text {
			font-size: 14px;
		}
		.allContent {
			float:left;
			width:800px;
		}
		
		.barGraph-title h2 {
			/*Text-align won't work with inline*/
	
			text-align: center;
		}

.barGraph-title p {
			text-align: center;
			font-size: 20px;
		}

.barGraphText{
			position:absolute;
			right:200px;
			top:0px;
		}
		.button {
			border: 1px solid black;
			cursor:pointer;
			display: inline-block;
			font-size: 17px;
			margin-left: 10px;
			padding:5px;
		}
		.buttonContainer {
				display: inline-block;
				margin:0 auto;
				overflow:hidden;
				text-align: center;
				width:100%;
		}
		.button.selected {
			border: 3px solid green;
			color:#296629;
			font-weight: bold;
		}
		.clearfix {
			clear:both;
		}
		.countryName{ 
			font-size:18px;
			font-weight: bold;
		}
		.date{ 
		font-size:15px;
		}
		.moreInfo { 
			float:left;
			left:800px;
			position:absolute;
			top: 125px;
			width:400px;
		}
		.playAll {
			cursor:pointer;
			margin-left:12%;
			margin-bottom:5px;
		}
		.source {
			margin-left:215px;
		}
		.switch {
			display:inline;
			font-size: 20px;
			margin-left:190px;
			margin-top: 5px;
		}
		.radio { 	
			height:1.3em;		
			width:1.3em; 
			}
		.tooltip {
		  position: absolute;
			padding: 5px;
		  pointer-events: none;
		  border: 1px solid green;
		  border-radius: 12px;
			line-height: 20px;
		  opacity: .07;
		  background-color:white;
		}
		.table{
			background:None;
		}
		.table ul{
			float:left;
			margin:0px;
			padding:0px;
		}
		.table ul li{
			list-style:none;
			padding:4px 9px; 
			text-align: center;
		}
		.table ul li.title{
			font-weight:bold;
			background:#fff;
			color:#000;
		}
		.table ul li.even{
			background:#fff;
		}
		.table ul li.odd{
			color: black;
			background-color: rgba(102, 255, 51, 0.09);
		}
		.value {
			font-size:15px;
			font-weight: bold;
		}

.line-graph {
			float:left;
			left:800px;
			position:absolute;
			top: 125px;
			width:400px;
		}

#compare { 
			float:left;
			left:800px;
			position:absolute;
			top: 600px;
			width:400px;
		}
		
		table {
			text-align:center;
		}
		
		td {
			width:120px;
		}
		
		</style>

</head>
	<body>
		<div class="allContent">
			<div class="barGraph-title">
				<h2>Renewable Energy </h2><p>Percent of total engery generation from 2002 - 2012</p>
			</div>
			<div class="playAll">
					<div class="switch"></div>
			</div>
			<div class="buttonContainer"></div>
			<div class="clearfix"></div>
			<div class="barGraph">
			
			</div>
			<div class="source"
				<span>Source:</span><a href="https://data.oecd.org/energy/renewable-energy.htm#indicator-chart">https://data.oecd.org/energy</a>
			</div>
		</div>
<!-- 		<div class="moreInfo">
			<h1 class="headline">Outliers</h1>
			<p class="textbox">The following country(s) have been removed from the scatter plot as to decrease the x\y axes maximum range values and thereby provide a better visual mapping of the remaing countries</p>
			<div class="table">
				<ul>
				<li class="title">Country</li>
				<li class="odd">Iceland</li>
				</ul>

var margin = {top:50,right:80,bottom:50,left:40};
			var width = 780 - margin.left - margin.right;
			var height = 700 - margin.top - margin.bottom;

var color = d3.scale.linear().range(['#B8B800','#296629'])

var tempColor, playInterval, worldTotal;
 			var activeCircle,innerCircle,tooltipcolor,oldColor;
 			var icelandData;
 			var years = [2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]
 			var currentYear = 2002;	
			var chartType = ["BAR","SCATTER PLOT"]

//var source = d3.select("body")
 			var barGraphTitle = d3.select(".barGraph-title")
 			var playAll = d3.select(".playAll")
 			var buttonYears = d3.select(".buttonContainer")
 			var chartOptions = d3.select(".switch")
			var svg = d3.select(".barGraph").append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)		
				.append("g").attr("transform","translate(90,30)")

//Scales
			var xScale = d3.scale.linear()
			var yScale = d3.scale.linear()
			//Axis
			var xAxis = d3.svg.axis()
			var yAxis = d3.svg.axis()

// barGraphTitle.insert("h2").text("Renewable Energy (%) of Total Energy Generation")
			barGraphTitle.insert("h2").attr("class", "worldTotal").text("World Total: " )
			playAll.text("▶ PLAY ALL YEARS");

var chartOptions = d3.select(".switch")
			chartOptions.selectAll("options").data(chartType).enter()
			.append("label").text(function(d) { return d})
			.append("input").attr("type", "radio").attr("name","chartType").attr("value", function(d) { return d })
			.attr("checked", function(d) {  if(d === "BAR") return  true } )
			.attr("class","radio")

//CSV.......

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

dataWorld = data

//Update scales
      	color.domain([9,data.length])
      	//xScale.range([0,width ]).domain([0,d3.max(data)])//, function(d) { return +d[currentYear] + 5} ) ] )

var filteredData = data.filter(function(d) { return !(d["Location"] === "World") } )//  && !(d["Location"] === "Iceland") })
      	xScale.range([0,width ]).domain([0,d3.max(filteredData, function(d) { return +d[currentYear]} ) ] )
      	yScale.range([height,0]).domain([0,d3.max(filteredData, function(d) { return +d[2012]})])

xAxis.scale(xScale).orient("bottom").ticks(12).tickSize(-(height)).tickFormat(function(d) { return d + "%" } )
      	yAxis.scale(yScale).orient("left").ticks(12).tickSize(-(width)).tickFormat(function(d) { return d + "%" } )

svg.append('g').attr("class", "x axis").call(xAxis).attr("transform", "translate(0," + height + ")")
      		.append("text").style("text-anchor", "end")
      		.attr({  class: "xlabel", x: width - 10, y: -10})
      	svg.append('g').attr("class", "y axis").call(yAxis)
      		.append("text").style("text-anchor","end")
      		.attr({ class: "ylabel", y: 12, x: -10, dy: ".71em" })
      		.attr("transform", "rotate(-90)")	
      		.text("2012 DATA").style("font-size",20)

playAll.on("click", function() {
         		var i;
         	 if(activeCircle) { activeCircle.transition().duration(1000).attr("r",4) }
         	 if(innerCircle) { d3.select(".innerCircle").remove()}
         	 if( currentYear === 2002 ) { i = 2; 	update(years[1]) 
         	 	} else { i = 1; update(years[0]) }

playInterval = setInterval(function() {
           		if(activeCircle) { activeCircle.attr("r", 4).style("fill",oldColor) }
							if(innerCircle) { d3.select(".innerCircle").remove()}
           		d3.selectAll(".tooltip").transition().duration(1000).style("opacity",0)
            	update(years[i]);
            i++;
            if(i > years.length - 1) { clearInterval(playInterval);}
           }, 3000);
          });

update(currentYear)

//UPDATE FUNCITON......
				function update(year) {

currentYear = year

total = dataWorld.filter(function(d) { 
        		var total = d["Location"] === "World";
        		return total}) 
      
        	worldTotal = total[0][year]

barGraphTitle.select(".worldTotal").html("World Total: "  + worldTotal + "%")
       
      		d3.select(".selected").classed("selected", false)
      		buttons.attr("class", function(d) { if (d === year ) return "button selected"; else return "button"})

if(!icelandData) { icelandData = data.filter(function(d) { return d["Location"] === "Iceland"}) }

d3.select(".title.secondary").html( year )
					d3.select(".odd.secondary").html( icelandData[0][year] + '%')

data = data.filter(function(d) { return !(d["Location"] === "World") }) // && !(d["Location"] === "Iceland") })

var adata = data.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);});

xScale.domain([0,d3.max(data, function(d) { return +d[year] + 5} ) ] )
					yScale.domain([0,d3.max(data, function(d) { return +d[2012] + 5} ) ] )

svg.select(".xlabel").text(year + " DATA").style("font-size",20)

var tooltip = d3.select("body").data(data).append("div") 
						.attr("class","tooltip")

var circle = svg.selectAll("circle").data(data)
		
					 //Update
	      	circle.transition().duration(1000)//.ease("bounce")
	      		.attr("cx", function(d,i) { return xScale(+d[year]) })
	      		.attr("cy", function(d,i) { return yScale(+d[2012])})
	      		.attr("fill", function(d,i) { return color(i) })

//ENTER
					circle.enter().append("circle")
						.attr("cy", function(d) { return yScale(+d[2012])}) 
						.attr("cx", function(d) { return xScale(+d[year])})
						.attr("r", 4)
						.style("fill", "white")
						.on("mouseover", mouseover)
						.on("mouseout", mouseout)
						.transition().duration(250).delay(function(d,i) { return i * 25 } )
						.style("fill", function(d,i) { return color(i)})
				
				  	var temp=[];
				  function mouseout(d) {
          	tooltip.transition().duration(1000).style('opacity',0)
				  				if(activeCircle) { 	
				  				activeCircle.transition().duration(500).attr("r", 4).style("fill",tooltipcolor)
				  							.attr("stroke-width",0)
				  						}
				  				if(innerCircle) { d3.select(".innerCircle").transition().attr("r",0) }
				  				activeCircle = false;
        	}//mouseout

function mouseover (d) {
				  				temp.push(d);
				  			tooltipcolor = this.style.fill 
								var oldColor = tooltipcolor; 
				  	
				  				if(activeCircle) { 	activeCircle.transition().duration(500).attr("r", 4).style("fill",oldColor)  }
				  				activeCircle = d3.select(this)
				  	
				  				d3.select(this).transition().duration(1000)//.ease("bounce")
					  				.attr("cy", this.cy.animVal.value)
					  				.attr("cx", this.cx.animVal.value)
					  				.attr("r", 15)
					  				.attr("stroke-width",10)
					  				.attr("stroke","rgba(239, 239, 239, .8)")

tooltipcolor = this.style.fill
				  				tooltip.style("opacity",0)
				  				tooltip.style("border" , "3px solid " + tooltipcolor ).transition().duration(1000).style("opacity",1)
          				tooltip.html(
									'<span class="countryName">' + d.Location + '</span><br/>' + 
									'2012: <span class="value">' + d[2012] + '%</span><br/>'  + 
									currentYear + ": " + '<span class="value">' + d[currentYear] + '%</span>')
								.style("left", (d3.event.pageX + 20) + "px")
								.style("top", (d3.event.pageY -35 ) + "px")
						
						if (temp.length>0) { //construct the table
						 if (temp.length>2) { //if the table has already 2 countries, delete the first one
									temp.shift();
							}
							d3.selectAll("table").remove();
							var tab="<table class=\"tab\"><th></th>";
							for (i=0;i<temp.length;i++) {
								tab=tab+"<th>"+temp[i].Location+"</th>";
								}
							for (i=0;i<years.length;i++) {
								tab=tab+"<tr><td>"+years[i]+"</td>";
								for (k=0;k<temp.length;k++) {
								tab=tab+"<td>"+temp[k][years[i]]+"</td>";
								}
								tab=tab+"</tr>";
							}
							tab=tab+"</table>";
							d3.select("#compare").html(tab);
						}
          }
				}
			});
		</script>
	</body>
</html>

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

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