title: Change color on a map D3
body: <p>I'm a beginner in Js and I'm trying to change the color of a specific country (function <strong>colorCountry</strong>) by its Id using D3.js. However, doesn't matter what color I choose. The result will always show the map highlighted in orange. What could I do to solve this? </p>
  
  <p>My code follows below.</p>
  
  <p>Thanks.</p>
  
  <p>The json file can be downloaded here - <a href="https://gist.githubusercontent.com/d3noob/5193723/raw/6e1434b2c2de24aedde9bcfe35f6a267bd2c04f5/world-110m2.json">https://gist.githubusercontent.com/d3noob/5193723/raw/6e1434b2c2de24aedde9bcfe35f6a267bd2c04f5/world-110m2.json</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt;
  
      body {
          background: #fcfcfa;
      }
  
      .stroke {
          fill: none;
          stroke: #000;
          stroke-width: 3px;
      }
  
      .fill {
          fill: #fff;
      }
  
      .graticule {
          fill: none;
          stroke: #777;
          stroke-width: .5px;
          stroke-opacity: .5;
      }
  
      .land {
          fill: #888;
      }
  
      .boundary {
          fill: none;
          stroke: #fff;
          stroke-width: .5px;
      }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script src="//d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;script src="//d3js.org/topojson.v1.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
      var countryCode = 840;   //36: AUSTRALIA * 643: RUSSIA * 76: BRAZIL * 840: USA
  
      var width = 960,
              height = 580;
  
      var color = d3.scale.category10();
  
      var projection = d3.geo.mercator()
              .scale(170)
              .translate([width / 2, height / 2])
              .precision(.1);
  
      var path = d3.geo.path()
              .projection(projection);
  
      var graticule = d3.geo.graticule();
  
      var svg = d3.select("body").append("svg")
              .attr("width", width)
              .attr("height", height);
  
      svg.append("defs").append("path")
              .datum({type: "Sphere"})
              .attr("id", "sphere")
              .attr("d", path);
  
      svg.append("use")
              .attr("class", "stroke")
              .attr("xlink:href", "#sphere");
  
      svg.append("use")
              .attr("class", "fill")
              .attr("xlink:href", "#sphere");
  
      svg.append("path")
              .datum(graticule)
              .attr("class", "graticule")
              .attr("d", path);
  
  
  
      d3.json("world-110m2.json", function(error, world) {
          if (error) throw error;
  
          var countries = topojson.feature(world, world.objects.countries).features,
                  neighbors = topojson.neighbors(world.objects.countries.geometries);
          svg.selectAll(".country")
                  .data(countries)
                  .enter().insert("path", ".graticule")
                  .attr("class", "country")
                  .attr("d", path)
                  .style("fill", function(d) { if (d.id == countryCode) { return color(colorCountry(d, d.id));} });
  
          svg.insert("path", ".graticule")
                  .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
                  .attr("class", "boundary")
                  .attr("d", path);
  
          console.log("value : " + countries[99].id);
          console.log("value : " + countries[12].id);
          console.log("value : " + countries[108].color);
  
      });
  
      /*HERE*/
      function colorCountry(country, countryId) {
          if (country.id == countryId) {
              return color(country.color = "#FF0000");
          }
      }
  
      d3.select(self.frameElement).style("height", height + "px");
  
  &lt;/script&gt;
  </code></pre>