jkeohan/data.csv

## data.csv

          
            Location
            2002
            2003
            2004
            2005
            2006
            2007
            2008
            2009
            2010
            2011
            2012

            
              Australia
              6.2
              6
              5.8
              5.7
              5.8
              5.8
              5.8
              4.6
              4.8
              5.1
              4.6

            
              Austria
              21.3
              18.7
              19.7
              21
              22.1
              24.1
              25.3
              27.8
              27.2
              26.6
              29.5

            
              Belgium
              1.3
              1.5
              1.6
              2
              2.3
              2.7
              3.1
              3.8
              4.2
              4.9
              5.1

            
              Brazil
              39.4
              42
              42.3
              42.9
              43.3
              44.4
              44.5
              45.8
              44
              42.7
              42.2

            
              Canada
              16.9
              15.6
              15.6
              15.9
              15.7
              16.2
              16.8
              17.5
              17.1
              18
              17.9

            
              Chile
              26.2
              24.8
              24.2
              25.1
              25.3
              23.5
              24.4
              26.1
              22
              23.1
              24.1

            
              China (People's Republic of)
              18.4
              16.2
              14.5
              13.7
              12.8
              12.5
              12.6
              12.1
              11.4
              10.7
              9.8

            
              Czech Republic
              3.7
              3.4
              3.8
              4
              4.2
              4.7
              4.9
              5.8
              6.3
              6.9
              7.5

            
              Denmark
              11
              11.9
              13.6
              15
              14.2
              16.1
              16.7
              17.8
              20
              22.2
              24.4

            
              Estonia
              11.7
              11.2
              11.4
              11.4
              10.5
              10.7
              11.9
              15.2
              15.3
              14.8
              14.5

            
              Finland
              22.4
              21.3
              23.4
              23.6
              23.3
              23.5
              25.8
              24
              25.4
              26.1
              29.1

            
              France
              5.8
              5.8
              5.8
              5.7
              5.9
              6.3
              7.1
              7.5
              7.9
              7.2
              7.9

            
              Germany
              3.2
              3.8
              4.4
              5
              5.8
              7.9
              8
              8.8
              9.9
              10
              10.7

            
              Greece
              4.9
              5.3
              5.3
              5.4
              5.9
              5.7
              5.6
              6.4
              7.7
              7.9
              8.7

            
              Hungary
              3.4
              3.5
              3.6
              4.3
              4.5
              5.1
              6
              7.4
              7.6
              7.6
              8

            
              Iceland
              75
              75.2
              74.8
              75.9
              78.4
              81.6
              81.3
              81.8
              82.5
              83.8
              84.7

            
              India
              33.2
              32.9
              31.7
              31.2
              30.4
              29.9
              28.9
              26.8
              26.5
              26.5
              26.4

            
              Indonesia
              37.3
              37.4
              35.5
              34.9
              34.7
              35.3
              36.2
              34.8
              33.9
              33.6
              33.4

            
              Ireland
              1.8
              1.7
              2
              2.5
              2.9
              3.2
              3.9
              4.6
              4.7
              6.2
              6.1

            
              Israel
              3.6
              3.5
              3.8
              4
              3.7
              3.7
              4.7
              5
              5
              4.9
              4.8

            
              Italy
              5.8
              6
              6.6
              6.3
              6.9
              6.7
              7.7
              9.7
              10.6
              11.9
              13.2

            
              Japan
              3.2
              3.4
              3.3
              3.2
              3.4
              3.2
              3.3
              3.4
              3.9
              4.2
              4.2

            
              Korea
              0.4
              0.5
              0.5
              0.5
              0.6
              0.6
              0.6
              0.7
              0.7
              0.7
              0.7

            
              Luxembourg
              1.1
              1
              1.2
              1.6
              1.8
              3.1
              3.1
              3.3
              3.1
              2.9
              3.2

            
              Mexico
              10.2
              10.2
              10.4
              10.3
              9.9
              9.9
              10
              9.5
              9.8
              9.3
              8.7

            
              Netherlands
              1.9
              1.8
              2.1
              2.7
              3
              3
              3.5
              4
              3.8
              4.3
              4.3

            
              New Zealand
              29.8
              29.7
              31.3
              31.6
              32
              32.2
              32.9
              35.8
              38.9
              40.4
              38.3

            
              Norway
              49.5
              38.2
              40
              48.5
              42.6
              46.5
              44.9
              40.9
              36.1
              42.8
              46.9

            
              Poland
              4.7
              4.6
              4.7
              4.8
              4.8
              5
              5.7
              6.7
              7.2
              7.8
              8.8

            
              Portugal
              13.7
              16.9
              14.7
              13.1
              17.1
              17.7
              17.7
              19.9
              23.3
              22.3
              21.2

            
              Russia
              2.8
              2.7
              2.9
              2.9
              2.8
              2.9
              2.6
              2.8
              2.5
              2.4
              2.3

            
              Slovak Republic
              4
              3.5
              4
              4.3
              4.5
              5.3
              5.1
              6.8
              7.4
              7.4
              7.6

            
              Slovenia
              10.5
              10.3
              11.5
              10.6
              10.5
              10.1
              11
              14.2
              14.7
              13.1
              13.9

            
              South Africa
              12.1
              11.3
              10.5
              10.7
              11
              10.2
              9.7
              10.1
              10.3
              10.5
              10.6

            
              Spain
              5.4
              6.9
              6.3
              5.9
              6.5
              7
              7.6
              9.7
              11.7
              11.7
              11.9

            
              Sweden
              25.3
              24.5
              25
              28.8
              28.7
              30.5
              31.5
              34.8
              33.9
              32.1
              35.6

            
              Switzerland
              16.8
              16.8
              16.4
              16
              15.5
              17.8
              17.8
              17.8
              19
              18.1
              20.5

            
              Turkey
              13.5
              12.9
              13.3
              12
              11.1
              9.6
              9.5
              10.2
              11.1
              10
              10.2

            
              United Kingdom
              1.2
              1.2
              1.5
              1.8
              1.9
              2.2
              2.6
              3.2
              3.3
              4.1
              4.5

            
              United States
              4
              4.3
              4.4
              4.5
              4.8
              4.7
              5.1
              5.4
              5.6
              6.1
              6.3

            
              European Union (28 countries)
              5.7
              5.9
              6.3
              6.5
              6.9
              7.6
              8.2
              9.2
              10
              10.2
              10.5

            
              World
              12.7
              12.6
              12.4
              12.4
              12.4
              12.5
              12.7
              13.1
              13
              13
              13

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Loading CSV Data with D3</title>
		<!-- // <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> -->
		<script type="text/javascript" src="http://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>

				<ul>
				<li class="title">2012</li>
				<li class="odd">84.7%</li>
				</ul>

				<ul>
				<li class="title secondary">2002</li>
				<li class="odd secondary">75</li>
				</ul>
			</div>
		</div> -->
		<div class="line-graph"></div>
		<div id="compare"></div>

		<script type="text/javascript">

			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)

      	var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
				.text(function(d) { return d})
				.attr("class", function(d) { if( d === currentYear ) return "button selected"; else return "button" } )
				.on("click", function(d) {
					d3.selectAll(".tooltip").transition().duration(1000).style("opacity",0)
					if(activeCircle) { activeCircle.attr("r", 4).style("fill",oldColor) }
					if(innerCircle) { d3.select(".innerCircle").remove()}
					year = d;
					clearInterval(playInterval); update(d)
					})

         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>
Location	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012
Australia	6.2	6	5.8	5.7	5.8	5.8	5.8	4.6	4.8	5.1	4.6
Austria	21.3	18.7	19.7	21	22.1	24.1	25.3	27.8	27.2	26.6	29.5
Belgium	1.3	1.5	1.6	2	2.3	2.7	3.1	3.8	4.2	4.9	5.1
Brazil	39.4	42	42.3	42.9	43.3	44.4	44.5	45.8	44	42.7	42.2
Canada	16.9	15.6	15.6	15.9	15.7	16.2	16.8	17.5	17.1	18	17.9
Chile	26.2	24.8	24.2	25.1	25.3	23.5	24.4	26.1	22	23.1	24.1
China (People's Republic of)	18.4	16.2	14.5	13.7	12.8	12.5	12.6	12.1	11.4	10.7	9.8
Czech Republic	3.7	3.4	3.8	4	4.2	4.7	4.9	5.8	6.3	6.9	7.5
Denmark	11	11.9	13.6	15	14.2	16.1	16.7	17.8	20	22.2	24.4
Estonia	11.7	11.2	11.4	11.4	10.5	10.7	11.9	15.2	15.3	14.8	14.5
Finland	22.4	21.3	23.4	23.6	23.3	23.5	25.8	24	25.4	26.1	29.1
France	5.8	5.8	5.8	5.7	5.9	6.3	7.1	7.5	7.9	7.2	7.9
Germany	3.2	3.8	4.4	5	5.8	7.9	8	8.8	9.9	10	10.7
Greece	4.9	5.3	5.3	5.4	5.9	5.7	5.6	6.4	7.7	7.9	8.7
Hungary	3.4	3.5	3.6	4.3	4.5	5.1	6	7.4	7.6	7.6	8
Iceland	75	75.2	74.8	75.9	78.4	81.6	81.3	81.8	82.5	83.8	84.7
India	33.2	32.9	31.7	31.2	30.4	29.9	28.9	26.8	26.5	26.5	26.4
Indonesia	37.3	37.4	35.5	34.9	34.7	35.3	36.2	34.8	33.9	33.6	33.4
Ireland	1.8	1.7	2	2.5	2.9	3.2	3.9	4.6	4.7	6.2	6.1
Israel	3.6	3.5	3.8	4	3.7	3.7	4.7	5	5	4.9	4.8
Italy	5.8	6	6.6	6.3	6.9	6.7	7.7	9.7	10.6	11.9	13.2
Japan	3.2	3.4	3.3	3.2	3.4	3.2	3.3	3.4	3.9	4.2	4.2
Korea	0.4	0.5	0.5	0.5	0.6	0.6	0.6	0.7	0.7	0.7	0.7
Luxembourg	1.1	1	1.2	1.6	1.8	3.1	3.1	3.3	3.1	2.9	3.2
Mexico	10.2	10.2	10.4	10.3	9.9	9.9	10	9.5	9.8	9.3	8.7
Netherlands	1.9	1.8	2.1	2.7	3	3	3.5	4	3.8	4.3	4.3
New Zealand	29.8	29.7	31.3	31.6	32	32.2	32.9	35.8	38.9	40.4	38.3
Norway	49.5	38.2	40	48.5	42.6	46.5	44.9	40.9	36.1	42.8	46.9
Poland	4.7	4.6	4.7	4.8	4.8	5	5.7	6.7	7.2	7.8	8.8
Portugal	13.7	16.9	14.7	13.1	17.1	17.7	17.7	19.9	23.3	22.3	21.2
Russia	2.8	2.7	2.9	2.9	2.8	2.9	2.6	2.8	2.5	2.4	2.3
Slovak Republic	4	3.5	4	4.3	4.5	5.3	5.1	6.8	7.4	7.4	7.6
Slovenia	10.5	10.3	11.5	10.6	10.5	10.1	11	14.2	14.7	13.1	13.9
South Africa	12.1	11.3	10.5	10.7	11	10.2	9.7	10.1	10.3	10.5	10.6
Spain	5.4	6.9	6.3	5.9	6.5	7	7.6	9.7	11.7	11.7	11.9
Sweden	25.3	24.5	25	28.8	28.7	30.5	31.5	34.8	33.9	32.1	35.6
Switzerland	16.8	16.8	16.4	16	15.5	17.8	17.8	17.8	19	18.1	20.5
Turkey	13.5	12.9	13.3	12	11.1	9.6	9.5	10.2	11.1	10	10.2
United Kingdom	1.2	1.2	1.5	1.8	1.9	2.2	2.6	3.2	3.3	4.1	4.5
United States	4	4.3	4.4	4.5	4.8	4.7	5.1	5.4	5.6	6.1	6.3
European Union (28 countries)	5.7	5.9	6.3	6.5	6.9	7.6	8.2	9.2	10	10.2	10.5
World	12.7	12.6	12.4	12.4	12.4	12.5	12.7	13.1	13	13	13
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Loading CSV Data with D3</title>
	<!-- // <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> -->
	<script type="text/javascript" src="http://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>

	<ul>
	<li class="title">2012</li>
	<li class="odd">84.7%</li>
	</ul>

	<ul>
	<li class="title secondary">2002</li>
	<li class="odd secondary">75</li>
	</ul>
	</div>
	</div> -->
	<div class="line-graph"></div>
	<div id="compare"></div>

	<script type="text/javascript">

	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)

	var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
	.text(function(d) { return d})
	.attr("class", function(d) { if( d === currentYear ) return "button selected"; else return "button" } )
	.on("click", function(d) {
	d3.selectAll(".tooltip").transition().duration(1000).style("opacity",0)
	if(activeCircle) { activeCircle.attr("r", 4).style("fill",oldColor) }
	if(innerCircle) { d3.select(".innerCircle").remove()}
	year = d;
	clearInterval(playInterval); update(d)
	})

	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>