Создание карты гистограммы процентов

Question

Извините, я не знаю, как назвать такую ​​диаграмму. Я уже сделал карту с квадратной сеткой, прямоугольник расположен на каждом центроиде. (рис 1)

Рис 1

Сейчас я хочу сделать как бы процентную карту (изотип?), Но не знаю, как это сделать. (рис 2- фотошоп)

Рис 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, но я хочу знать, как это сделать из динамического ввода. Я хочу погуглить, но понятия не имею или не знаю ключевого слова. Благодарность