xxxxxxxxxx
<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