How to update the scatter plot with two dropdowns?

I am trying to create a scatter plot that has two dropdown menus. So the first dropdown filters the scatter plot well. However, the second dropdown (legendary) seems odd. Where do I need to fix it? I think the code below is the part that is not working for two dropdowns... how can I make both work?

function makePlot(csvData) {
    data = csvData.filter((data) => {return data["Sp. Def"] != "NA"&& data.Total != "NA"})

    let dropDown = d3.select("#filter").append("select")
        .attr("name", "Generation");

    let dropDown2 = d3.select("#filter2").append("select")
        .attr("name", "Legendary");

    let distinctYears = [...new Set(data.map(d => d.Generation))];
    let defaultYear = 1;

    let distinctLegendary = [...new Set(data.map(d => d.Legendary))];
    let defaultLegendary = true;

    let options = dropDown.selectAll("option")
           .data(distinctYears)
           .enter()
           .append("option")
           .text(function (d) { return d; })
           .attr("value", function (d) { return d; })
           .attr("selected", function(d){ return d == defaultYear; })

    showCircles(dropDown.node());//this will filter initially
    dropDown.on("change", function() {
        showCircles(this)
    });

    let options2 = dropDown2.selectAll("option")
           .data(distinctLegendary)
           .enter()
           .append("option")
           .text(function (d) { return d; })
           .attr("value", function (d) { return d; })
           .attr("selected", function(d){ return d == defaultLegendary; })   

    showCircles2(dropDown2.node());//this will filter initially
        dropDown2.on("change", function() {
            showCircles2(this)
    });

}

function showCircles(me) {
    let selected = me.value;
    displayOthers = me.checked ? "inline" : "none";
    display = me.checked ? "none" : "inline";

    svgContainer.selectAll(".circles")
        .data(data)
        .filter(function(d) {return selected != d.Generation;})
        .attr("display", displayOthers);

    svgContainer.selectAll(".circles")
        .data(data)
        .filter(function(d) {return selected == d.Generation;})
        .attr("display", display);
}

function showCircles2(me) {
    let selected = me.value;
    displayOthers = me.checked ? "inline" : "none";
    display = me.checked ? "none" : "inline";

    svgContainer.selectAll(".circles")
        .data(data)
        .filter(function(d) {return selected != d.Legendary;})
        .attr("display", displayOthers);

    svgContainer.selectAll(".circles")
        .data(data)
        .filter(function(d) {return selected == d.Legendary;})
        .attr("display", display);
}

pokemon.csv is like

 #,Name,Type 1,Type 2,Total,HP,Attack,Defense,Sp. Atk,Sp. Def,Speed,Generation,Legendary
364,Sealeo,Ice,Water,410,90,60,70,75,70,45,3,False
365,Walrein,Ice,Water,530,110,80,90,95,90,65,3,False
366,Clamperl,Water,,345,35,64,85,74,55,32,3,False
367,Huntail,Water,,485,55,104,105,94,75,52,3,False
368,Gorebyss,Water,,485,55,84,105,114,75,52,3,False
369,Relicanth,Water,Rock,485,100,90,130,45,65,55,3,False
370,Luvdisc,Water,,330,43,30,55,40,65,97,3,False
371,Bagon,Dragon,,300,45,75,60,40,30,50,3,False
372,Shelgon,Dragon,,420,65,95,100,60,50,50,3,False
373,Salamence,Dragon,Flying,600,95,135,80,110,80,100,3,False
373,SalamenceMega Salamence,Dragon,Flying,700,95,145,130,120,90,120,3,False
374,Beldum,Steel,Psychic,300,40,55,80,35,60,30,3,False
375,Metang,Steel,Psychic,420,60,75,100,55,80,50,3,False
376,Metagross,Steel,Psychic,600,80,135,130,95,90,70,3,False
376,MetagrossMega Metagross,Steel,Psychic,700,80,145,150,105,110,110,3,False
377,Regirock,Rock,,580,80,100,200,50,100,50,3,True
378,Regice,Ice,,580,80,50,100,100,200,50,3,True
379,Registeel,Steel,,580,80,75,150,75,150,50,3,True
380,Latias,Dragon,Psychic,600,80,80,90,110,130,110,3,True
380,LatiasMega Latias,Dragon,Psychic,700,80,100,120,140,150,110,3,True
381,Latios,Dragon,Psychic,600,80,90,80,130,110,110,3,True
381,LatiosMega Latios,Dragon,Psychic,700,80,130,100,160,120,110,3,True
382,Kyogre,Water,,670,100,100,90,150,140,90,3,True
382,KyogrePrimal Kyogre,Water,,770,100,150,90,180,160,90,3,True
383,Groudon,Ground,,670,100,150,140,100,90,90,3,True
383,GroudonPrimal Groudon,Ground,Fire,770,100,180,160,150,90,90,3,True