JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>

JavaScript

var scale = d3.scale.linear()
		  .domain([1, 5])   // Data space
		  .range([0, 200]); // Pixel space

		var svg = d3.select("body").append("svg")
		  .attr("width", 250)
		  .attr("height", 250);

		function render(data, color) {
			var rects = svg.selectAll("rect").data(data);

			// Enter
			rects.enter().append("rect")
			  .attr("y", 50)
			  .attr("width", 20)
			  .attr("height", 20);

			// Update
			rects
			  .attr("x", scale)
			  .attr("fill", color);

			// Exit
			rects.exit().remove();
		}

		setTimeout(function () { render([1, 2, 2.5], "red"); }, 1000);
		setTimeout(function () { render([1, 2, 3, 4, 5], "blue"); }, 2000);
		setTimeout(function () { render([1, 2], "green"); }, 3000);
		setTimeout(function () { render([3, 4, 5], "cyan"); }, 4000);
		setTimeout(function () { render([4, 5], "magenta"); }, 5000);