moving bars (from jkeohan)

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

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

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

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