I have an update() function that runs initially and displays all the data by creating some circles using the distance, angle, and colour. The initial data is an array of objects. The structure is shown below.

[
{
  Category: {string}
  SubCategory: {string}
  Technology: {string}
  Distance: {string | int} 0 - 100
  Angle: {string | int} 0 - 100
  Colour: {string}
  Description: {string}
 },
...
]

The end result is to have some checkbox filters available and to be able to hide and show certain categories. For testing purposes, I have created a few buttons in my application to help do this. There is a global variable called filterArray that initially contains all Category names as strings.

One of the buttons updates this array to contain 2 Category names. One of the buttons updates this array to contain 3 Category names. The last button is what I'm using to update the circles. This last button finds all the circles and removes them and then the update function is run again with the updated filterArray to display the updated list of circles.

The issue that occurs is if you click the 3 Category names button and then click the update button, it displays the correct circles. If you then click the 2 Category names button and click the update button it displays the correct circles. If you then click the 3 Category names button again and click the update button it still only shows 2 categories of circles for some reason.

The application can be viewed over here: https://o4buh.csb.app/

The code for the application can be viewed here: https://codesandbox.io/s/d3-tech-impact-magic-quadrant-o4buh?file=/src/index.js

Any insight or advice would be very much appreciated. Thank you.