title: putting the country on drop down list using d3 via csv file
body: <p>Good day,</p>
  
  <p>I need help regarding this simple task. All i want is to insert data in drop down. when i select data in drop down the map will zoom based on the selected value. i already have the code regarding the zooming of each country. but it is in the table when the country click on country of specific tr the map will zoom and it's fine. the problem is that i want to put that value of the country inside the drop down using d3. is can any one can help me..</p>
  
  <p>here is my code.</p>
  
  <pre><code>          &lt;!DOCTYPE html&gt;
            &lt;meta charset="utf-8"&gt;
  
               &lt;style&gt;
  
           .legend {
           font-size: 10px;
             z-index:0;
  
           }
            rect {
             fill: none;
                  pointer-events: all;
             }
  
              .feature {
           fill: #ccc;
          cursor: pointer;
           }
  
           .feature.active {
             fill: orange;
         }
  
        .mesh {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
  stroke-linejoin: round;
        }
  
  .csvTable table {
      border-collapse: collapse;
      text-align: left;
      width: 100%;
  }
  
  .csvTable {
      font: normal 12px/150% Arial, Helvetica, sans-serif;
      background: #fff;
      overflow: hidden;
      border: 1px solid #069;
      -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
      border-radius: 3px;
  }
  
  .csvTable table td, .csvTable table th {
      padding: 3px 10px;
  }
  
  .csvTable table thead th {
      background: 0;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699',endColorstr='#00557F');
      background-color: #006D2C;
      color: #FFF;
      font-size: 15px;
      font-weight: 700;
      border-left: 1px solid #0070A8;
  }
  
      .csvTable table thead th:first-child {
          border: none;
      }
  
  .csvTable table tbody td {
      color: #00496B;
      border-left: 1px solid #E1EEF4;
      font-size: 12px;
      border-bottom: 1px solid #E1EEF4;
      font-weight: 400;
  }
  
      .csvTable table tbody td:first-child {
          border-left: none;
      }
  
  .csvTable table tbody tr:last-child td {
      border-bottom: none;
  }
  
  .csvTable tr:hover td {
      background-color: #069;
      color: white;
  }
  &lt;/style&gt;
  
    &lt;script src="Script/d3.v3.min.js" &gt;&lt;/script&gt;
     &lt;script src="Script/topojson.v1.min.js"&gt;&lt;/script&gt;
  
    &lt;!--&lt;script src="http://d3js.org/d3.v3.min.js" charset="utf-8"&gt;&lt;/script&gt;--&gt;
  
         &lt;body&gt;
        &lt;!-- Table to hold the Divs --&gt;
             &lt;table border="0" cellpadding="10" style="overflow-y: scroll;"&gt;
            &lt;tr&gt;
           &lt;td&gt;&lt;div id="country_select" class="csvTable"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div id="table_container" class="csvTable"&gt;&lt;/div&gt;&lt;/td&gt;
          &lt;td&gt;&lt;div id="map_container"&gt;&lt;/div&gt;&lt;/td&gt;
      &lt;/tr&gt;
       &lt;/table&gt;
  
   &lt;script&gt;
  
  
  var w = 900;
  var h = 300;
  var active;
  var jsonOutside;
  
  var projection = d3.geo.mercator()
       .center([0, 5])
       .rotate([0, 0])
       .scale(100)
       .translate([w / 2, h / 2])
       .precision(9);
  
  
  var path = d3.geo.path()
                   .projection(projection);
  
  
  var svg = d3.select("#map_container")
              .append("svg")
              .attr("width", w)
              .attr("height", h);
  
  var color_domain = [1, 50000, 250000, 70000000, 150000000, 300000000];
  var ext_color_domain = [100, 50000, 250000, 70000000, 150000000, 300000000];
  var legend_labels = ["&lt; 5000", "5000+", "100000+", "500000+", "7500000+", "&gt; 15000000"];
  // var legend_labels = ["&lt; 5000", "5000+", "15000+", "35000+", "75000+", "&gt; 150000"];
  var color = d3.scale.log()
  .domain(color_domain)
  
   .range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);
      // .range(["#adfcad", "#ccff66", "#ffff00", "#cc9933", "#0099ff", "#ff1300"])
  
        // from colorbrewer (http://colorbrewer2.org/)
           //var colours = ["#BAE4B3", "#74C476", "#31A354", "#006D2C"];
  
  
          //var colScale = d3.scale.ordinal()
           //                  .range(colours);
  
          svg.append("rect")
      .attr("width", w)
      .attr("height", h)
      .on("click", reset);
  
          var g = svg.append("g");
  
        d3.csv("data/TotalReputationBlocked.csv", function (data) {
      d3.json("data/world-population.geo.json", function (json) {
  
          json.features.forEach(function (d, i) {
              data.forEach(function (e, j) {
                  if (d.properties.name === e.Country) {
                      d.properties.value = +e.Result;
                  };
              })
          })
  
          jsonOutside = json; // pass json to a global so tableRowClicked has access
  
  
          var dispatch = d3.dispatch("load", "countrychange");
          d3.csv("data/ERSReputationBlocked.csv", type, function (error, country) {
              if (error) throw error;
              var countryById = d3.map();
              country.forEach(function (d) { countryById.set(d.id, d); });
              dispatch.load(countryById);
              dispatch.countrychange(countryById.get("Philippines"));
  
          });
          dispatch.on("load.menu", function (countryById) {
              var select = d3.select("body")
  
                .append("div")
                .append("select")
                //.on("change", function () { dispatch.countrychange(countryById.get(this.value)); });
  
                  .on("click", click)
              // .on("change", function (d) { tableRowClicked(d); });
  
              select.selectAll("option")
                .data(countryById.values())
                .enter().append("option")
                .attr("value", function (d) { return d.id; })
                .text(function (d) { return d.Country; });
  
              dispatch.on("countrychange.map", function (d) {
                  select.property("value", d)
                  //.on("click",tableRowClicked)
                 .on("click", click)
              //    //end of selection
              });
          });
          //end of selection
          //var columns = ["Country", "Result"];
          //var table = d3.select("#table_container").append("table"),
          //      thead = table.append("thead"),
          //      tbody = table.append("tbody");
  
          //// append the header row
          //thead.append("tr")
          //      .selectAll("th")
          //      .data(columns)
          //      .enter()
          //      .append("th")
          //      .text(function (column) { return column; });
  
  
          //// create a row for each object in the data
          //var rows = tbody.selectAll("tr")
          //     .data(data)
          //     .enter()
          //     .append("tr");
  
  
          //// create a cell in each row for each column
          //var cells = rows.selectAll("td")
          //     .data(function (row) {
          //         return columns.map(function (column) {
          //             return { column: column, value: row[column] };
          //         });
          //     })
          //     .enter()
          //     .append("td")
          //     .text(function (d) { return d.value; }
          //     )
          //     .on("click", function (d) { tableRowClicked(d); }); // added on click event to td         element NB you need to click on the cell with the conuty name 
  
          // add extents (max and min) from data results for choropleth
          //color.domain(d3.extent(data, function (d) { return d.Result; }));
  
  
  
                  //Bind data and create one path per GeoJSON feature
                  g.selectAll("path")
                     .data(json.features)
                     .enter()
                     .append("path")
                     .attr("d", path)
                     .attr("class", "feature")
                     .attr("id", function (d) { return d.properties.name; }) // added id so click could work on id which is common between the json and csv data
  
                      //.on("click",function (d) { tableRowClicked(d); })
                       .on("click", function (d) { click(d); })
                     .style("stroke", "white")
                     //.style("fill", function (d, i) { return colScale(d.properties.value); }); // fill based on colour scale
                   .style("fill", function (d) {
                       return color(d.properties.value);
                   });
  
                  g.append("path")
                     .data(json.features)
                     .enter()
                     .append("path")
                     .attr("class", "mesh")
                     .attr("d", path);
  
              });
          });
  
  
  
  
          function type(d) {
              d.total = d3.sum(d.value, function (k) { return d[k] = +d[k]; });
              return d;
          }
  
  
  
  var legend = svg.selectAll("g.legend")
  .data(ext_color_domain)
  .enter().append("g")
  .attr("class", "legend");
  
  var ls_w = 20, ls_h = 20;
  
  legend.append("rect")
  .attr("x", 20)
  .attr("y", function (d, i) { return h - (i * ls_h) - 2 * ls_h; })
  .attr("width", ls_w)
  .attr("height", ls_h)
  .style("fill", function (d, i) { return color(d); })
  .style("opacity", 0.8);
  
  legend.append("text")
  .attr("x", 50)
  .attr("y", function (d, i) { return h - (i * ls_h) - ls_h - 4; })
  .text(function (d, i) { return legend_labels[i]; });
  
  
  
  
  
  
  
  
  
  function click(d) {
  
      if (active === d) return reset();
      g.selectAll(".active").classed("active", false);
      d3.select("#" + d.properties.name).classed("active", active = d); // changed selection to id
  
      var b = path.bounds(d);
  
      g.transition().duration(1000).attr("transform",
          "translate(" + projection.translate() + ")"
          + "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / w, (b[1][1] - b[0][1]) / h) + ")"
          + "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
  }
  
  function reset() {
      g.selectAll(".active").classed("active", active = false);
      g.transition().duration(750).attr("transform", "");
  }
  
  function tableRowClicked(x) {
      jsonOutside.features.forEach(function (d) { // loop through json data to match td entry
          if (x.value === d.properties.name) {
              alert(x.value)
              var country = d;
              click(d); // pass json element that matches td data to click 
          };
      })
  }
  
        &lt;/script&gt;
          &lt;/body&gt;
        &lt;/html&gt;
  </code></pre>
  
  <p>this code works fine the only problem is that i cant put that country on the drop down, I hope there's some one who can help me..</p>
  
  <p>thanks coders</p>