JSFiddle - React, Tailwind, and code Playground

HTML

<div id="icon"><div>

JavaScript

var dataset = [
        {"id": 1,  "selection": true},
        {"id": 2,  "selection": true},
        {"id": 3,  "selection": true},
        {"id": 4,  "selection": false},
        {"id": 5,  "selection": false},
        {"id": 6,  "selection": true},
        {"id": 7,  "selection": false},
        {"id": 8,  "selection": true}
    ];

    var rectsize = 30;

    var svg = d3.select("#icon")
            .append("svg")
            .attr("height", rectsize*dataset.length)
            .attr("width", rectsize*(dataset.length + 1));

    svg.selectAll("rect")
            .data(dataset).enter()
            .append("rect")
            .attr("width", rectsize)
            .attr("height", rectsize)
            .attr("x", function(d, i) { return  i*(rectsize + 2); })
            .attr("y", function(d, i) { return rectsize; })
            .style("fill", "yellow")
            .style("stroke", "grey")
            .style("stroke-width", ".5px");

    svg.selectAll("circle")
            .data(dataset).enter()
            .append("circle")
            .attr("r", rectsize/4)
            .attr("cx", function(d, i) { return rectsize*0.5 + i*(rectsize + 2); })
            .attr("cy", function(d, i) { return rectsize*1.5; })
            // color if selected
            .style("stroke", function(d) { return d.selection ? "grey" : "none"})
            .style("fill", "none")
            .style("stroke-width", "2px");