Icon Array

<html>
	<head>
		<style>
			.bluies { fill: #0A8BB2; }
			.greenies { fill: #1AC18B; }
			.reddies { fill: #E40E0E; }
		</style>
	</head>
	<body>
		 
		 <script src="//d3js.org/d3.v4.0.0-alpha.28.min.js" charset="utf-8"></script>
		 <script src="d3-iconarray.min.js"></script>
		 <script>
			 var width = 960,
					 height = 500,
					 rows = 30,
					 columns = 57,
					 iconWidth = 12,
					 gapSize = 1,
					 gapInterval = 6;
			 
			 var layout = d3_iconarray.layout()
			 	.widthFirst(false)
				.height(rows);
			 
			 var data = d3.range(0, 1, 1/(rows * columns))
			 	.map(function(pct) {
					 return {
						 class: pct < 0.30 ? "greenies" :
						 				pct < 0.65 ? "reddies" :
										"bluies"
					 };
				 });
			 
			 var grid = layout(data);
			 
			 var arrayScale = d3_iconarray.scale()
				.domain([0, rows])
				.range([0, height])
				.gapSize(gapSize)
				.gapInterval(gapInterval);
			 
			 var svg = d3.select("body").append("svg")
			 	.attr("width", width)
				.attr("height", height);			 
			 
			 svg.selectAll("g").data(grid)
			 	.enter().append("g")
					.attr("class", function(d) { return "icon " + d.data.class; })
					.attr("transform", function(d) {
						return "translate(" +
							arrayScale(d.position.x) + "," + 
							arrayScale(d.position.y) + ")";
					})
					.call(appendCircles);
						
				function appendCircles(selection) {
					selection.append("circle")
							.attr("cx", iconWidth/2)
							.attr("cy", iconWidth/2)
							.attr("r", 0)
						.transition().delay(function(d) { return 10 * d.position.y; }).duration(333)
							.attr("r", iconWidth/2);
				}
		 </script>
	</body>
</html>

https://d3js.org/d3.v4.0.0-alpha.28.min.js