I am just trying to use D3.js for a map and have a scenario where I want to create multiple marker in different color for same location. For an example location New York has 2 category item listed and I category marker in red and another one is in green. How to achieve that. No matter whatever I do it only rendering one circle.

svg.selectAll(".countries").data(countries).enter().append("path").attr("class", "countries").attr("d", path);
    svg.selectAll(".circles")
        .data(listMapData)
        .enter()
        .append("circle")
        .attr("class", "circles")
        .attr("r", function (d) {
            return 13;
        })
        .attr("cx", function (d) {
            let coords = projection([d.Coordinates.Longitude, d.Coordinates.Latitude]);
            return coords[0];
        })
        .attr("cy", function (d) {
            let coords = projection([d.Coordinates.Longitude, d.Coordinates.Latitude]);
            return coords[1];
        })
        .attr("fill", function (d, i) {
            debugger;
            if (d.Category.indexOf("Market Survey") >= 0) return "yellow";
            else if (d.Category.indexOf("Investigation") >= 0) return "red";
            else if (d.Category.indexOf("Lead") >= 0) return "green";
            else if (d.Category.indexOf("Raid") >= 0) return "#943126";
            else if (d.Category.indexOf("Custom Seizure") >= 0) return "#4633FF";
            else if (d.Category.indexOf("Online Investigation") >= 0) return "green";
            else return "#34495E";
        })