JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<select id="sizeSection" style="width: 300px;display:block;margin:10px 0;">

</select>

<select id="colorSection" style="width: 300px;display:block;margin:10px 0;">

</select>

JavaScript

var sizedropDown = [0, 1, 2, 3, 4],
	colordropDown = ['red', 'green', 'blue'];

// default values
var section_size = 0, section_color = null;

var dropDown_size = d3.select("#sizeSection").selectAll("option")
											.data(sizedropDown)
                      .enter().append("option")
                      .text(function(d) {return d ;} )
                      .attr("value", function(d,i) { return i;} );
                      
d3.select("#sizeSection")
          .on("change", function () {
  console.log(this.value);
  var section_color = 0;
  var sect_size = document.getElementById("sizeSection");
  section_size = sect_size.options[sect_size.selectedIndex].value;
  updateSubset({},section_size,section_color);
});

var dropDown_color = d3.select("#colorSection").selectAll("option")
											.data(colordropDown)
                      .enter().append("option")
                      .text(function(d) { return d;} ).attr("value", function(d,i) {return i;} )
                      .on("change", function () {
                        var section_size = 0;
                        var sect_color = document.getElementById("colorSection");
                        section_color = sect_color.options[sect_color.selectedIndex].value;

                        updateSubset({},section_size,section_color);

                        });
                        
function updateSubset(features, section_size, section_color) {
	console.log(section_size, section_color);
}