Does anyone know how to create filtering of bounding boxes using legend and d3 in JavaScript. I found many instances where it’s being done in scatter plot but I don’t understand as I want to do the filtering by toggling it outside of the image and result should appear on the image where only the selected color and class of bounding boxes should be visible .

Can anyone please help so that I can understand Because I am new to legend and D3.

var bb = d3.select(template).append("svg")
  .attr("width", width)
  .attr("height", height),
  poly = [{
    "x": x1,
    "y": y1
  },
  {
    "x": x2,
    "y": y2
  },
  {
    "x": x3,
    "y": y3
  },
  {
    "x": x4,
    "y": y4
  }
  ];

bb.selectAll("polygon")
  .data([poly])
  .enter().append("polygon")
  .attr("points", function (d) {
    return d.map(function (d) {
      return [d.x, d.y].join(",");
    }).join(" ");
  })
  .attr("stroke", "red")
  .attr("fill", "none");