title: Creating map of Africa using d3.js and topoJSON
body: <p>i want to create map of Africa using d3.js and topoJSON. I have that datasource <a href="https://gist.githubusercontent.com/bricedev/3905007f1794b0cb0bcd/raw/ad5c995f6990f7c3c7fad5c6206bc6fd5462f1fb/africa.json" rel="nofollow noreferrer">https://gist.githubusercontent.com/bricedev/3905007f1794b0cb0bcd/raw/ad5c995f6990f7c3c7fad5c6206bc6fd5462f1fb/africa.json</a></p>
  
  <p>That is my code. How i can get properties and create correct map? Please help me where is the error?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name="description" content="D3byEX 12.15" /&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &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;
      &lt;script&gt;
      var width = 1000, height = 728;
  
  
      var svg = d3.select("body").append("svg")
          .attr({ width: width, height: height });
      var mainGroup = svg.append("g");
      mainGroup.style({ stroke: "white", "stroke-width": "2px", "stroke-opacity": 0.0 });
  
      var projection = d3.geo.mercator();
  
      var path = d3.geo.path().projection(projection);
  
      var url = 'https://gist.githubusercontent.com/bricedev/3905007f1794b0cb0bcd/raw/ad5c995f6990f7c3c7fad5c6206bc6fd5462f1fb/africa.json';
      d3.json(url, function (error, africa) {
          var countries = topojson.feature(africa, africa.objects.countries).features;
          var neighbors = topojson.neighbors(africa.objects.countries.geometries);
  
          var color = d3.scale.category20();
          mainGroup.selectAll("path", "countries")
              .data(countries)
              .enter().append("path")
              .attr("d", path)
              .style("fill", function (d, i) {
                  return color(d.color = d3.max(neighbors[i],
                      function (n) { return countries[n].color; }) + 1 | 0);
              });
  
          mainGroup.selectAll("path")
              .on("mouseover", function () {
                  console.log("mouseover");
                  d3.select(this).style("stroke-opacity", 1.0);
              });
          mainGroup.selectAll("path")
              .on("mouseout", function () {
                  d3.select(this).style("stroke-opacity", 0.0);
              });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>
  </p>