Horizontal Bar Chart

<!DOCTYPE html>
<html>
<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
		fill:none;
		stroke:#000;
	}
	#xaxis text, #yaxis text {
		font-size: 12px;
	}
	</style>
</head>
<body>
	<div id="wrapper">
	</div>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		var categories= ['','taille_bilan', 'totaldepot', 'capitaux_propres', 'total_credit', 'credit_conso_par','credit_habitat','credit_snf','credit_bail_snf','credit_bail_par','actif_titre','actif_interbancaire','passif_interbancaire'];

var dollars = [213,209,190,179,156,209,190,179,213,209,190,179];

var colors = ['#0000b4','#0082ca','#0094ff','#0d4bcf','#0066AE','#074285','#00187B','#285964','#405F83','#416545','#4D7069','#6E9985','#7EBC89','#0283AF','#79BCBF','#99C19E'];

var grid = d3.range(25).map(function(i){
			return {'x1':0,'y1':0,'x2':0,'y2':480};
		});

var tickVals = grid.map(function(d,i){
			if(i>0){ return i*10; }
			else if(i===0){ return "100";}
		});

var xscale = d3.scale.linear()
						.domain([10,250])
						.range([0,722]);

var yscale = d3.scale.linear()
						.domain([0,categories.length])
						.range([0,480]);

var colorScale = d3.scale.quantize()
						.domain([0,categories.length])
						.range(colors);

var canvas = d3.select('#wrapper')
						.append('svg')
						.attr({'width':900,'height':550});

var	xAxis = d3.svg.axis();
			xAxis
				.orient('bottom')
				.scale(xscale)
				.tickValues(tickVals);

var	yAxis = d3.svg.axis();
			yAxis
				.orient('left')
				.scale(yscale)
				.tickSize(2)
				.tickFormat(function(d,i){ return categories[i]; })
				.tickValues(d3.range(17));

var y_xis = canvas.append('g')
						  .attr("transform", "translate(150,0)")
						  .attr('id','yaxis')
						  .call(yAxis);

var x_xis = canvas.append('g')
						  .attr("transform", "translate(150,480)")
						  .attr('id','xaxis')
						  .call(xAxis);

var transit = d3.select("svg").selectAll("rect")
						    .data(dollars)
						    .transition()
						    .duration(1000) 
						    .attr("width", function(d) {return xscale(d); });

</script>
</body>
</html>

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

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