bars

<!DOCTYPE html>
<html lang = "en">
	<head>
		<meta charset = "utf-8">
		<title>D3 Bars Test</title>
		<script type = "text/javascript" src = "d3/d3.v3.js"></script>
		<style type = "text/css">
			div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;
				background-color: teal;
				margin-right: 2px;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			svg text { 
				pointer-events: none;
			}
			rect {
				-moz-transition: all 0.3s;
				-o-transition: all 0.3s;
				-webkit-transition: all 0.3s;
				transition: all 0.3s;
			}
			rect:hover {
				fill: yellow;
			}
		</style>
	</head>
	<body>
		<p id="add"><a href="#">Click here to add more happy little bars.</a></p>
		<p id="remove"><a href="#">Click here to remove the happy little bars.</a></p>
		<script type = "text/javascript">
			
			//Width and height
			var w = 600;
			var h = 250;
			
			var dataset = 
			[ 	{ key: 0, value: 5 },
                { key: 1, value: 10 },
                { key: 2, value: 13 },
                { key: 3, value: 19 },
                { key: 4, value: 21 },
                { key: 5, value: 25 },
                { key: 6, value: 22 },
                { key: 7, value: 18 },
                { key: 8, value: 15 },
                { key: 9, value: 13 },
                { key: 10, value: 11 },
                { key: 11, value: 12 },
                { key: 12, value: 15 },
                { key: 13, value: 20 },
                { key: 14, value: 18 },
                { key: 15, value: 17 },
                { key: 16, value: 16 },
                { key: 17, value: 18 },
                { key: 18, value: 23 },
                { key: 19, value: 25 } ];
            var xScale = d3.scale.ordinal()
							.domain(d3.range(dataset.length))
							.rangeRoundBands([0,w], 0.05)
							;
			var yScale = d3.scale.linear()
							.domain([0, d3.max(dataset, function(d) {return d.value;})])
							.range([0,h])
							;
			var key = function(d) {return d.key;};
			var sortOrder = false;
			var sortBars = function(d) {
				sortOrder = !sortOrder;
				svg.selectAll('rect')
					.sort(function(a,b) {
						if (sortOrder) {return d3.ascending(a.value,b.value);}
						else {return d3.descending(a.value,b.value);};})
					.transition()
					.delay(function(d,i) {return i*50;})
					.duration(1000)
					.attr('x', function(d,i) {return xScale(i);})
					;
				svg.selectAll('text')
					.sort(function(a,b) {
						if (sortOrder) {return d3.ascending(a.value,b.value);}
						else {return d3.descending(a.value,b.value);};})
					.transition()
					.delay(function(d,i) {return i*50;})
					.duration(1000)
					.attr('x', function(d,i) {return xScale(i) + xScale.rangeBand()/2;})
					;
				};
			//Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", w)
						.attr("height", h)
						;
			
			svg.selectAll("rect")
				.data(dataset, key)
				.enter()
				.append("rect")
				.attr("x", function(d, i) {
				   		return xScale(i);
				   })
				.attr("y", function(d) {
				   		return h - yScale(d.value);
				   })
				.attr("width", xScale.rangeBand())
			 	.attr("height", function(d) {
				   		return yScale(d.value);
				   })
				.attr("fill", function(d) {
						return "rgb(0, 0, " + (d.value * 10) + ")";
				   })
				// .on("mouseover", function() {
				// 	d3.select(this)
				// 		// .transition()
				// 		// .duration(250)
				// 		.attr('fill', 'yellow')
				// 		;})
				// .on('mouseout', function() {
				// 	d3.select(this)
				// 		.transition()
				// 		.duration(250)
				// 		.attr('fill', function(d) {return "rgb(0, 0, " + (d.value * 10) + ")";})
				// 		;})
				.on('click', function() {sortBars();})
			   ;
			svg.selectAll("text")
			   .data(dataset, key)
			   .enter()
			   .append("text")
			   .text(function(d) {
			   			return d.value;
			   		})
			   .attr("text-anchor", "middle")
			   .attr("x", function(d, i) {
			   			return xScale(i) + xScale.rangeBand()/2;
			   		})
			   .attr("y", function(d) {
			   			return h - yScale(d.value) + 14;
			   		})
			   .attr("font-family", "sans-serif")
			   .attr("font-size", "11px")
			   .attr("fill", "white")
			   ;
		   
			d3.selectAll("p")
		   		.on("click", function() {
		   			var paragraphID = d3.select(this).attr("id");
		   			if (paragraphID == "add") {
		   				var n = dataset.length;
			   			var maxValue = 25;
			   			var newNumber = Math.floor(Math.random()*maxValue);
			   			var lastKeyValue = dataset[dataset.length - 1].key;
			   			console.log(lastKeyValue);
			   			dataset.push({key: lastKeyValue + 1, value: newNumber});
			   			}
		   			else if (paragraphID == 'remove') {dataset.shift();}
		   			;
		   			
			   		xScale.domain(d3.range(dataset.length));
		   			yScale.domain([0, d3.max(dataset, function(d) {return d.value;})]);
		   			var bars = svg.selectAll("rect")
							.data(dataset, key)
							;
					var labels = svg.selectAll("text")
			   						.data(dataset, key)
			   						;
					
					bars.enter()
				   		.append("rect")
				   		.attr("x", w)
				   		.attr("y", function(d) {return h-yScale(d.value);})
				   		.attr("width", xScale.rangeBand())
						.attr("height", function(d) {return yScale(d.value);})
						.attr("fill", function(d) {return "rgb(0,0," + (d.value*10) + ")";})
					   	// .on("mouseover", function() {d3.select(this).attr('fill', 'yellow');})
				   		// .on('mouseout', function() {d3.select(this).attr('fill', function(d) {return "rgb(0, 0, " + (d.value * 10) + ")";});})
						.on('click', function() {sortBars();})
			   			;
					bars.transition()
						.duration(500)
						.attr("x", function(d,i) {return xScale(i);})
						.attr("y", function(d) {return h-yScale(d.value);})
						.attr("width", xScale.rangeBand())
						.attr("height", function(d) {return yScale(d.value);})
						;
					bars.exit()
						.transition()
				   		.duration(500)
				   		.attr("x", -xScale.rangeBand())
				   		.remove()
				   		;
			   		
					
			   		labels.enter()
						.append("text")
						.attr("x", w + xScale.rangeBand()/2)
						.attr("y", function(d) {return h-yScale(d.value) + 14;})
						.text(function(d) {return d.value;})
						.attr("text-anchor", "middle")
						.attr("x", function(d, i) {return xScale(i) + xScale.rangeBand()/2;})
						.attr("y", function(d) {return h - yScale(d.value) + 14;})
						.attr("font-family", "sans-serif")
						.attr("font-size", "11px")
						.attr("fill", "white")
						;
					labels.transition()
						.duration(500)
			   			.text(function(d) {return d.value;})
						.attr("x", function(d,i) {return xScale(i) + xScale.rangeBand()/2;})
						.attr("y", function(d) {return h - yScale(d.value) + 14;})
						;
					labels.exit()
						.transition()
				   		.duration(500)
			   			.attr("x", -xScale.rangeBand()/2)
			   			.remove()
			   			;
				});
		   		
			
		
		</script>
		
	</body>
</html>