title: path fill color in d3
body: <p>Good day,</p>
  
  <p>Coder, I am new to d3 and json. i want to create a simple map projection that will identify the population of each country that was saved in csv file. </p>
  
  <p>I already created the map projection and now i am stock for almost a week on how to fill the country based on the population on my csv file..</p>
  
  <p>In that code below it can identified the highest or lowest population of the world by using the circle, but i dont like to use circle simply because it can overlap each other, all i want is to fill the country either green,blue or red red being the highest and green being the lowest. </p>
  
  <p>here is my sample csv file</p>
  
  <p>country,    population,lat,  lon
  PHILIPPINES,10,        13,   122
  CANADA,     2000,      60,   -95
  JAPAN,      500,       36,   138
  AFGHANISTAN, 200,       33,   65
  CHINA,      2000,      35,   105</p>
  
  <p>here is my code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
   &lt;style&gt;
  
  path {
    fill: silver;
  }
  
  div.tooltip {   
     position: absolute;           
     text-align: center;           
     width: 140px;                  
     height: 45px;                 
     padding: 2px;             
   font: 12px sans-serif;        
    background: lightsteelblue;   
    border: 0px;      
    border-radius: 8px;           
   pointer-events: none; 
   z-index:50;        
  }
  
  .overlay {
   fill: none;
   pointer-events: all;
   }
  
     .state {
      fill: #aaa;
     }
  
    .county-border,
    .state-border {
  fill: none;
   stroke: #fff;
   stroke-linejoin: round;
   stroke-linecap: round;
  }
  
  
   .frame {
      stroke: #333;
      fill: none;
    pointer-events: all;
    }
  .feature {
      stroke: #ccc;
     }
  
    &lt;/style&gt;
   &lt;body&gt;
   &lt;!--&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
   &lt;script src="http://d3js.org/topojson.v1.min.js"&gt;&lt;/script&gt;--&gt;
  &lt;script src="Script/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="Script/topojson/topojson.js"&gt;&lt;/script&gt;
  &lt;script src="Script/queue-master/queue.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
       // &lt;script src="http://d3js.org/d3.v2.js"&gt;&lt;/script&gt;
  
  
       &lt;div id="d"&gt;&lt;/div&gt;
      &lt;script&gt;
  
  
       var MalwareCountry = [
       // "Australia", "Algeria",
        //"Brunei", "Cameroon",
            "Canada", "Cyprus",
           "Philippines", "Manila",
          // "United States of America", "Washington D.C",
          //"Mexico", "Mexico",
         //"New Zealand",
  //"Hong Kong",
  //"India",
  //"Indonesia",
  "China","Beijng",
  "Japan", "Tokyo",
  "Afghanistan"
  //"Singapore",
  //"South Korea",
  //"Taiwan",
  //"Thailand",
  //"Vietnam",
  //"Austria",
  //"Belgium",
  //"France",
  //"Germany",
  //"Iran",
  //"Ireland",
  //"Israel",
  //"Italy",
  //"Luxembourg",
  //"Netherlands",
  //"Russia",
  //"Saudi Arabia",
  //"Spain",
  //"Switzerland",
  //"Turkey",
  //"United Arab Emirates",
  //"United Kingdom",
  //"Albania",
  //"Bosnia and Herzegowina",
  //"Crotia",
  //"Czech Republic",
  //"Hungary",
  //"Denmark",
  //"Finland",
  //"Iceland",
  //"Macedonia",
  //"Montenegro",
  //"Norway",
  //"Poland",
  //"Romania",
  //"Serbia",
  //"Slovenia",
  //"Slovakia",
  //"Sweden",
  //"Bulgaria",
  //"Malaysia", "Mozambique"
  
    ];
  
      var div = d3.select("div")
       .append("div")
        .attr("class", "tooltip")
         .style("opacity", .1);
  
  var coldomain = [50, 150, 350, 750, 1500]
  var extcoldomain = [10, 50, 150, 350, 750, 1500]
  var legendary_labels = ["&lt; 50", "50+", "150+", "350+", "750+", "&gt; 1500"]
       var color = d3.scale.threshold()
         // .domain(coldomain)
          //.range(["#adfcad", "#ffcb40", "#ffba00", "#ff7d73", "#ff4e40", "#ff1300"]);
  
  
  
           var color = d3.scale.category20b()
  
  
  
  
  
     function getColorForCountry(name){
      if (MalwareCountry.indexOf(name) &lt; 0) {
          return "#FFFFFF";
          //return "#bbb";
      }else {
  
          return color();
      }
  }
  
  var margin = {
      top: 0,  right: 0,
      bottom: 0,  left: 0
  },
    width = 960 - margin.left - margin.right,
    height = 480 - margin.top - margin.bottom;
  
  var projection = d3.geo.equirectangular()
      .center([0, 5])
      .scale(150)
      .translate([width / 2, height / 2])
      .rotate([0, 0])
      .precision(.9);
  
  var path = d3.geo.path()
    .projection(projection);
  var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height, 10 * height])
    .on("zoom", move);
  
  
  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 + ")")
    .call(zoom);
  
  
  var feature = svg.append("g")
    .selectAll(".feature");
  
  svg.append("rect")
    .attr("class", "frame")
    .attr("width", width)
    .attr("height", height);
  
  
  d3.json("Script/topojson/examples/worldmap-100.json", function(data) {
     feature = feature
        .data(data.features)
        .enter().append("path")
        .attr("class", "feature")
        .attr("d", path)
        .style("fill", function (d) { return getColorForCountry(d.properties.name) });
  });
  
  var g = svg.append("g");
  d3.csv("data/s.csv", function (error, data) {
  
      var circle = g.selectAll("circle")
      .data(feature)
      .enter()
      .append("circle")
  
      .attr("cx", function (d) { return projection([d.lon, d.lat])[0]; })
      .attr("cy", function (d) { return projection([d.lon, d.lat])[1]; })
      .attr("r", function (d) { return Math.sqrt(d.population) / 2 })
          .style("fill", function (d) {
              if (d.population &gt;= 500 &amp;&amp; d.population &lt;= 800) {
                  return "blue"
              }
  
              else if (d.population &gt;= 800) {
                  return "red"
              }
              else {
                  return "green"
              }
          })
  })
  
  function move() {
      projection.translate(d3.event.translate).scale(d3.event.scale);
      feature.attr("d", path);
  }
  
  var legend = svg.selectAll("g.legend")
    .data(extcoldomain)
    .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 height - (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 height - (i * ls_h) - ls_h - 4; })
  .text(function (d, i) { return legendary_labels[i]; });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>is there any trick that can help me regarding this problem. </p>
  
  <p>thanks</p>