ginseng666/index.html

## 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>
		<style>

		.allContent {
			width:1000px;
		}

		.barGraph-title h2{
			text-align: center;
		}
		.barGraphText{

			position:absolute;
			top:0px;
			right:200px;
		}
		.buttonContainer {
				margin:0 auto;
				display: inline-block;
				text-align: center;
				width:100%;
				overflow:hidden;
		}
		.button {
			display: inline-block;
			margin-left: 10px;
			font-size: 18px;
			border: 1px solid black;
			padding:5px;
			cursor:pointer;
		}
		.button.selected {
			font-weight: bold;
			border: 3px solid green;
			color:#296629;
		}
		.clearfix {
			clear:both;
		}

		</style>
	</head>
	<body>
		<div class="allContent">
			<div class="barGraph-title"></div>
			<div class="buttonContainer"></div>
			<div class="clearfix"</div>
			<div class="barGraph"></div>
		</div>
		<script type="text/javascript">

			var margin = {top:10,right:0,bottom:50,left:40},
			width = 1000 - margin.left - margin.right,
			height = 800 - margin.top - margin.bottom,
			datastore;  //a variable to use the data in the function below
		  	var color = d3.scale.linear()
				 .range(['#66FF66',  '#296629'])

 			var tempColor;
 			var years = [2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]
 			var year = 2002;

 			var barGraphTitle = d3.select(".barGraph-title")
 			var buttonYears = d3.select(".buttonContainer")
			var svg = d3.select('.barGraph').append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.append("g")
					.attr("width", width)
					.attr('height', height)
					.attr("transform","translate(20,30)")

			var xScale = d3.scale.linear()
			var yScale = d3.scale.ordinal()

			barGraphTitle .insert("h2").text("Renewable Energy (%) of Total Energy Generation")

      d3.csv("renewable-energy-perc-of-total-energy-generation.csv", function(data) {

	    datastore=data;  //storing the data for use below

		//Update scales
      	color.domain([9,datastore.length])
      	xScale.range([0,width - 250])
      	yScale.rangeBands([0,height], .1)

      	var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
		.text(function(d) { return d})
		.attr("class", function(d) { if( d === year ) return "button selected"; else return "button" } )
		.on("click", function(d) { change (d) })  //call change instead of update

	function mouseover (d) { tempColor = this.style.fill;
          	d3.select(this).style('opacity', .5).style('fill', 'steelblue')}

        function mouseout (d) {
        	d3.select(this).style('opacity', 1).style('fill', tempColor)}

        update(year)

        function update(year) {

      		d3.select(".selected").classed("selected", false)
      		buttons.attr("class", function(d) { if (d === year ) return "button selected"; else return "button"})

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


		xScale.domain([0,d3.max(datastore, function(d) { return +d[year] } ) ] )
	      	yScale.domain(datastore.map(function(d){return d.Location;}))  //use the name of the locations as domain

	      	//Data Join
		var rect = svg.selectAll("rect").data(datastore)
	      	var text = svg.selectAll("text").data(datastore)

		      //Update
	      	rect.attr('width', 0)
	      	text.style("opacity", 0)

		      //Enter
	      	rect.enter().append('rect')
	      		.attr("x",250)
	      		.attr("width", 0)
	      		.attr("y", function(d,i) { return yScale(d.Location) })  //change the yScale according to the scale from i to d.Location
	      		.attr("height", yScale.rangeBand())
	      		.attr("fill", function(d,i) { return color(i) })
	      		.on("mouseover", mouseover)
	      		.on("mouseout", mouseout)

	      	rect.transition().duration(function(d,i) {return i * 20 }).delay(function(d,i) { return i * 40 } )
	      		.attr("width", function(d) { return xScale(+d[year])})

	      	text.enter().append("text")
	      		.attr("x", 240)
	      		.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	      		.attr("font-size", 15)
	      		.attr("text-anchor", "end")
	      		.attr("font-weight", "bold")

	      	text.transition().duration(function(d,i) { return i * 20 }).delay(function(d,i) { return i * 40 })
	      		.text(function(d) { return d["Location"] + " " + +d[year] + "%"})
	      		.attr("y", function(d,i) { return yScale(d.Location) + 12 })
	      		.style("opacity",.9)

				}
			});

function change(year)
{
datastore = datastore.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);});  //sort the data for the year

yScale.domain(datastore.map(function(d){return d.Location;}));  //change the y-scale

svg.selectAll("rect").data(datastore, function(d){return d.Location;}).transition().duration(2000).attr("y",function(d){ return yScale(d.Location);}).attr("width",function(d){return xScale(+d[year]);}).attr("fill", function(d,i) { return color(i) });  //change the location of the bar - note that you have to use a function in data to tell d3 which is the constant identifier of the data

svg.selectAll("text").data(datastore, function(d){return d.Location;}).transition().duration(2000).attr("y",function(d){ return yScale(d.Location)+12;});

svg.selectAll("text").data(datastore, function(d){return d.Location;}).transition().delay(2000).duration(0).text(function(d) { return d["Location"] + " " + +d[year] + "%"});
}

		</script>

	</body>
</html>

## renewable-energy-perc-of-total-energy-generation.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
	<!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>
	<style>

	.allContent {
	width:1000px;
	}

	.barGraph-title h2{
	text-align: center;
	}
	.barGraphText{

	position:absolute;
	top:0px;
	right:200px;
	}
	.buttonContainer {
	margin:0 auto;
	display: inline-block;
	text-align: center;
	width:100%;
	overflow:hidden;
	}
	.button {
	display: inline-block;
	margin-left: 10px;
	font-size: 18px;
	border: 1px solid black;
	padding:5px;
	cursor:pointer;
	}
	.button.selected {
	font-weight: bold;
	border: 3px solid green;
	color:#296629;
	}
	.clearfix {
	clear:both;
	}

	</style>
	</head>
	<body>
	<div class="allContent">
	<div class="barGraph-title"></div>
	<div class="buttonContainer"></div>
	<div class="clearfix"</div>
	<div class="barGraph"></div>
	</div>
	<script type="text/javascript">

	var margin = {top:10,right:0,bottom:50,left:40},
	width = 1000 - margin.left - margin.right,
	height = 800 - margin.top - margin.bottom,
	datastore; //a variable to use the data in the function below
	var color = d3.scale.linear()
	.range(['#66FF66', '#296629'])

	var tempColor;
	var years = [2002,2003,2004,2005,2006,2007,2008,2009,2010,2011,2012]
	var year = 2002;

	var barGraphTitle = d3.select(".barGraph-title")
	var buttonYears = d3.select(".buttonContainer")
	var svg = d3.select('.barGraph').append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("width", width)
	.attr('height', height)
	.attr("transform","translate(20,30)")

	var xScale = d3.scale.linear()
	var yScale = d3.scale.ordinal()

	barGraphTitle .insert("h2").text("Renewable Energy (%) of Total Energy Generation")

	d3.csv("renewable-energy-perc-of-total-energy-generation.csv", function(data) {

	datastore=data; //storing the data for use below

	//Update scales
	color.domain([9,datastore.length])
	xScale.range([0,width - 250])
	yScale.rangeBands([0,height], .1)

	var buttons = buttonYears.selectAll("div").data(years).enter().append("div")
	.text(function(d) { return d})
	.attr("class", function(d) { if( d === year ) return "button selected"; else return "button" } )
	.on("click", function(d) { change (d) }) //call change instead of update

	function mouseover (d) { tempColor = this.style.fill;
	d3.select(this).style('opacity', .5).style('fill', 'steelblue')}

	function mouseout (d) {
	d3.select(this).style('opacity', 1).style('fill', tempColor)}

	update(year)

	function update(year) {

	d3.select(".selected").classed("selected", false)
	buttons.attr("class", function(d) { if (d === year ) return "button selected"; else return "button"})

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


	xScale.domain([0,d3.max(datastore, function(d) { return +d[year] } ) ] )
	yScale.domain(datastore.map(function(d){return d.Location;})) //use the name of the locations as domain

	//Data Join
	var rect = svg.selectAll("rect").data(datastore)
	var text = svg.selectAll("text").data(datastore)

	//Update
	rect.attr('width', 0)
	text.style("opacity", 0)

	//Enter
	rect.enter().append('rect')
	.attr("x",250)
	.attr("width", 0)
	.attr("y", function(d,i) { return yScale(d.Location) }) //change the yScale according to the scale from i to d.Location
	.attr("height", yScale.rangeBand())
	.attr("fill", function(d,i) { return color(i) })
	.on("mouseover", mouseover)
	.on("mouseout", mouseout)

	rect.transition().duration(function(d,i) {return i * 20 }).delay(function(d,i) { return i * 40 } )
	.attr("width", function(d) { return xScale(+d[year])})

	text.enter().append("text")
	.attr("x", 240)
	.attr("y", function(d,i) { return yScale(d.Location) + 12 } )
	.attr("font-size", 15)
	.attr("text-anchor", "end")
	.attr("font-weight", "bold")

	text.transition().duration(function(d,i) { return i * 20 }).delay(function(d,i) { return i * 40 })
	.text(function(d) { return d["Location"] + " " + +d[year] + "%"})
	.attr("y", function(d,i) { return yScale(d.Location) + 12 })
	.style("opacity",.9)

	}
	});

	function change(year)
	{
	datastore = datastore.sort(function(a, b) {return d3.ascending(+a[year], +b[year]);}); //sort the data for the year

	yScale.domain(datastore.map(function(d){return d.Location;})); //change the y-scale

	svg.selectAll("rect").data(datastore, function(d){return d.Location;}).transition().duration(2000).attr("y",function(d){ return yScale(d.Location);}).attr("width",function(d){return xScale(+d[year]);}).attr("fill", function(d,i) { return color(i) }); //change the location of the bar - note that you have to use a function in data to tell d3 which is the constant identifier of the data

	svg.selectAll("text").data(datastore, function(d){return d.Location;}).transition().duration(2000).attr("y",function(d){ return yScale(d.Location)+12;});

	svg.selectAll("text").data(datastore, function(d){return d.Location;}).transition().delay(2000).duration(0).text(function(d) { return d["Location"] + " " + +d[year] + "%"});
	}

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