D3 : Colours 3

Colours 3 using Colorbrewer.

<!DOCTYPE html>
<html>
<head>
	<title>D3 : Colours 3 (using Colorbrewer)</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<script type="text/javascript" src="https://colorbrewer2.org/export/colorbrewer.js"></script>
	<style type="text/css">
		#chartarea {
			height: 400px;
			width: 600px;
		}
		.bar {
			display: inline-block;
			width: 50px;
			height: 10px;
			margin-right: 2px;
			background-color: teal;
		}
	</style>
</head>
<body>
	<div id="chartarea"></div>

var colors = colorbrewer.Set2[5];
		var colorIndex = d3.scale.linear()
			.domain([0, 1, 2, 3, 4, 5])
			.range(colors);

var svg = d3.select('#chartarea').selectAll('div')
			.data(data)
			.enter()
			.append('div')
			.attr('class', 'bar')
			.style('height', function (d) {
				return d * 400 + 'px';
			})
			.style('background-color', function (d) {
				return colorIndex(Math.round(d * 5));
			});
	</script>
</body>
</html>

Modified http://colorbrewer2.org/export/colorbrewer.js to a secure url

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

https://colorbrewer2.org/export/colorbrewer.js