制作百分比条形图

Question

对不起，我不知道该怎么称呼这种图表。我已经制作了一个正方形网格图，每个质心上都有一个矩形。 （图片1）

Pic 1

现在我想制作一个百分比图（同种型？），但是我不知道该怎么做。 （图片2-photoshopped）

Pic 2

这是代码，我从一个简单的地图代码中对其进行了修改

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");


});

我已经有了一个想法，通过在JSON上手动添加数据，但是我想知道如何从动态输入中做到这一点。我想用谷歌搜索，但没有任何线索或关键字。 谢谢