select list demo

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
	
    var x = d3.scale.linear()
        .range([0, width]);

var y = d3.scale.linear()
        .range([height, 0]);
    
    var select = d3.select('body').append('select').on('change', onChange);

var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    
    var points;

function onChange(){
      var group = select.property('value');
      points.style('opacity', function(d){
        return d.group == group ? 1:0;
      });
    }

d3.csv("data.csv", function(error, data) {
      if (error) throw error;

// Coerce the strings to numbers.
      data.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
      });
      
      var groups = d3.set(data.map(function(d){ return d.group; })).values();
      console.log(groups);
      
      // create group filtering select list
      select.selectAll('option')
				.data(groups)
  			.enter().append('option').text(function(d){ return d });
			
      select.property('value', 1);

// Compute the scales’ domains.
      x.domain(d3.extent(data, function(d) { return d.x; })).nice();
      y.domain(d3.extent(data, function(d) { return d.y; })).nice();

// Add the x-axis.
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.svg.axis().scale(x).orient("bottom"));

// Add the y-axis.
      svg.append("g")
        .attr("class", "y axis")
        .call(d3.svg.axis().scale(y).orient("left"));

// Add the points!
      points = svg.selectAll(".point")
        .data(data)
        .enter().append("path")
          .attr("class", "point")
          .attr("d", d3.svg.symbol().type("triangle-up"))
          .attr("transform", function(d){ return "translate("+x(d.x)+","+y(d.y)+")";});
  });
    
  
  </script>
</body>

https://d3js.org/d3.v3.min.js