I'm sorry I don't know what to call these kind of chart. I've already made a square grid map, rectangle located on every centroid. (pic 1)
Now I want to make like a percentage map (isotype?), but I don't know how to do it. (pic 2--photoshopped)
This is the code, I modified it from a simple map code
d3.json(url).then(function(dataset){
group = canvas.selectAll("g")
.data(dataset.features)
.enter()
.append("g")
areas = group.append("path")
.attr("d", path)
.attr("class","area")
.style("fill","white")
.style("opacity",0)
;
group.append("rect")
.attr("x",function (d) { return path.centroid(d)[0];})
.attr("y",function (d) { return path.centroid(d)[1];})
.attr("width",10)
.attr("height",10)
.style("fill","orange");
});
I already have an idea, by manually adding the data on the JSON, but I want to know how to do it from dynamic input. I want to google it but don't have any clue or keyword. Thanks
