Built with blockbuilder.org
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
.M rect {
fill: steelblue;
}
.S rect {
fill: red;
}
.MP rect {
fill: green;
}
rect.transparent {
fill: #c8c8c8;
}
</style>
</head>
<body>
<script>
// Feel free to change or delete any of the code you see in this editor!
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 700)
const width = 10;
const height = 10;
const size = 10;
const scores = [
{party:'M', value:72},
{party:'S', value:72},
{party:'MP', value:72},
];
let i = 1;
scores.forEach((score, scoreIndex) => {
const waffle = svg.append("g")
.classed("waffle",true)
.classed(score.party ,true)
.attr("id", "one")
.attr("transform", 'translate(' + ((height * size + 50) * (scoreIndex + 1)) + ')');
let index = 0;
for (let w=0; w<width; w++) {
for (let h=0; h<height; h++) {
waffle.append("rect")
.attr("id", index)
.attr("x", w * size)
.attr("y", h * size)
.attr("width", size - 1)
.attr("height", size -1)
.classed("transparent", index >= score.value)
index++;
}
}
waffle.append("text")
.text(score.party + " " + score.value + "%")
.attr("y", height * size)
.attr("x", 0)
.attr("font-size", 36)
.attr("font-family", "monospace")
.style("dominant-baseline", "hanging")
})
</script>
</body>
https://d3js.org/d3.v4.min.js