<body></body>
body {
	background-color: #CCD1D1;
}

svg {
	background-color: white;
	// rect {
	// 		fill: SteelBlue;
	// 		transition: fill 0.2s ease-in;
	// 	&:hover {
	// fill: #82E0AA;
	// }
	// }
	// .highlight {
	// 		fill: DarkOrange;
	// }
}

g.bar text {
			font-family: sans-serif;
			font-size: 11px;
			fill: white;
			font-style: bold;
			text-anchor: middle;
}

.axis {
	path, line {
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}
	text {
		font-family: sans-serif;
		font-size: 11px;
	}
}
View Compiled
var dataset = [ 17.8, -2.0, 2.3, 9.4, 27.1, 8.7, 12.2, 8.2, 16.4];

		//Width, height, padding
		var w = 600;
		var h = 250;
		var padding = 25;
		
		//Configure x and y scale functions
		var xScale = d3.scale.ordinal()
						.domain(d3.range(dataset.length))
						.rangeRoundBands([ padding, w - padding ], 0.15);

		var yScale = d3.scale.linear()
						.domain([ 0, d3.max(dataset) ])
						.rangeRound([ h - padding, padding ]);

		//Configure y axis generator
		var yAxis = d3.svg.axis()
						.scale(yScale)
						.orient("left")
						.ticks(5);
		
		//Create SVG element
		var svg = d3.select("body")
					.append("svg")
					.attr("width", w)
					.attr("height", h);

		//Create groups
		var groups = svg.selectAll("g")
						.data(dataset)
						.enter()
						.append("g")
						.attr("class", "bar")
						.attr("transform", function(d, i) {
					  		return "translate(" + xScale(i) + ",0)";
						})
						.on("mouseover", function() {
							d3.select(this).select("rect")  //Selects the rect in this group
								.attr("fill", "#82E0AA");
						})
						.on("mouseout", function() {
							d3.select(this).select("rect")  //Selects the rect in this group
								.attr("fill", function(d) {
								if (d > 20) {
									return "DarkOrange";
								}
								return "#AED6F1";
								});
						});

		//Add bar to each group
		var rects = groups.append("rect")
						  .attr("x", 0)  //All rects are at zero, relative to their groups
						  .attr("y", function(d) {
						  		return h - padding;
						  })
						  .attr("width", xScale.rangeBand())
						  .attr("height", 0)
						  .attr("fill", "#AED6F1");

		//Add label to each group
		groups.append("text")
			.attr("x", xScale.rangeBand() / 2)
			.attr("y", function(d) {
				return yScale(d) + 20;
			})
			.text(function(d) {
				return d;
			})

		//Transition rects into place
		rects.transition()
			.delay(function(d, i) {
				return i * 100;
			})
			.duration(1200)
			.attr("y", function(d) {
				return yScale(d);
			})
			.attr("height", function(d) {
				return h - padding - yScale(d);
			})
			// .filter(function(d) {
			// 	if (d > 20) {
			// 		return true;
			// 	}
			// 	return false;
			// })
			// .attr("fill", "DarkOrange")
;

		//Create y axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + padding + ",0)")
			.attr("opacity", 0)
			.call(yAxis)
			.transition()
			.delay(2000)
			.duration(1500)
			.attr("opacity", 1.0);


Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js