JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<table style="width: 50%; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>Country:
        <br>
        <select id="countrySelector"></select>
      </td>
      <td>Year:
        <br>
        <select id="yearSelector"></select>
      </td>
      <td>Gender:
        <br>
        <select id="genderSelector"></select>
      </td>
      <td>Metric:
        <br>
        <select id="metricSelector"></select>
      </td>
    </tr>
  </tbody>
</table>

JavaScript

var dual = {};
for (var j = 0; j < 2; j++) {
  dual[j] = j + 1;
}
var genderSel = d3.select("#genderSelector")
  .on("change", {}); // load was not defined

generateGenderList(dual);







function generateGenderList(genders) {
  var namedGender;
  for (var gender in genders) {
    if (gender == 1) namedGender = "male";
    if (gender == 2) namedGender = "female";
    var option = genderSel.append("option");
    option.text(namedGender)
      .attr("value", genders[gender]);

    if (namedGender == "male") option.attr("selected", true);
  }
};