dictionary - 制作百分比条形图

Question

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

图一

现在我想做一个百分比图（同型？），但我不知道该怎么做。（图2--photoshop）

图二

这是代码，我从一个简单的地图代码修改它

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 上手动添加数据，但我想知道如何从动态输入中做到这一点。我想用谷歌搜索，但没有任何线索或关键字。谢谢

标签： dictionaryd3.jsgridsquarewaffle-chart