Bar Update Pattern

Use D3's general update pattern to animate bar chart transitions.

forked from HarryStevens's block: Bar Update Pattern

<!DOCTYPE html>
<html>
<head>
	<style>
		body {
			margin: 0;
		}
		text {
			font-family: "Helvetica Neue", sans-serif;
			fill: #fff;
		}
	</style>
</head>
<body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/jeezy/lib/jeezy.min.js"></script>
	<script>
		var alpha = "abcdef".split("");

var setup = d3_marcon({top: 10, bottom: 10, left: 10, right: 10, width: window.innerWidth, height: window.innerHeight, element: "body"});

var width = setup.width, height = setup.height, svg = setup.svg;

var x = d3.scaleBand()
			.rangeRound([0, width])
			.domain(alpha)
			.padding(.1);

var y = d3.scaleLinear()
			.range([height, 0])
			.domain([0, 10]);

var color = d3.scaleOrdinal(["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"]);

redraw(random_data());

d3.interval(function(){
			redraw(random_data());
		}, 1000);

function redraw(data){

// join
			var bar = svg.selectAll(".bar")
				.data(data, function(d){ return d.name; });

var amount = svg.selectAll(".amount")
				.data(data, function(d){ return d.name; });

// update
			bar
				.transition()
					.attr("y", function(d){ return y(d.value); })
					.attr("height", function(d){ return height - y(d.value); });

amount
				.transition()
					.attr("y", function(d){ return y(d.value); })
					.text(function(d){ return d.value; });

// enter
			bar.enter().append("rect")
					.attr("class", "bar")
					.attr("x", function(d){ return x(d.name); })
					.attr("y", function(d){ return y(d.value); })
					.attr("width", x.bandwidth())
					.attr("height", function(d){ return height - y(d.value); })
					.attr("fill", function(d){ return color(d.name); });

amount.enter().append("text")
					.attr("class", "amount")
					.attr("x", function(d){ return x(d.name) + x.bandwidth() / 2; })
					.attr("y", function(d){ return y(d.value); })
					.attr("dy", 16)
					.text(function(d){ return d.value; });

}

// Options
		// top, left, bottom, right, width, height, element
		function d3_marcon(options){
			var margin = {top: options.top, bottom: options.bottom, left: options.left, right: options.right},
				width = options.width - margin.left - margin.right,
				height = options.height - margin.top - margin.bottom,
				svg = d3.select(options.element).append("svg")
						.attr("width", width + margin.left + margin.right)
						.attr("height", height + margin.top + margin.bottom)
					.append("g")
						.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

return {
				margin: margin,
				width: width,
				height: height,
				svg: svg
			}
		}

function random_data(){
			return alpha.map(function(d){
				return {
					name: d,
					value: jz.num.randBetween(1, 10)
				}
			});
		}

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

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

https://unpkg.com/jeezy/lib/jeezy.min.js