title: D3JS TopoJSON map of Australia: projection accurate but no country rendered
body: <p>I am generating a TopoJSON cartogram of Australia. I have successfully generated a GeoJSON map of Australia. I then converted that data to TopoJSON but cannot render the map. </p>
  
  <p>Things to note:</p>
  
  <ul>
  <li>I can accurately project lat/long points of cities (i.e., their spatial
  relationship looks correct). Therefore, I believe the projection is fine.</li>
  <li>No paths are generated and the page is blank. But the data file looks correct when compared to successful online tutorials. Not sure why this is the case.</li>
  </ul>
  
  <p>I've created a JSFiddle here: <a href="https://jsfiddle.net/6j8sz21L/" rel="nofollow noreferrer">https://jsfiddle.net/6j8sz21L/</a></p>
  
  <p>Thank you!</p>
  
  <p>Here's the D3JS code for reference (also see the JSFiddle for more detail):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Australia&lt;/title&gt;
      &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://d3js.org/topojson.v2.min.js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
          .pin {
              border: 1px solid white;
          }
  
          svg {
              background: lightblue;
          }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;script type="text/javascript"&gt;
  
          var width = 960,
              height = 700;
  
          var projection = d3.geo.mercator()
              .center([131,25])
              .scale(900)
              .translate([400,-500]);
  
          var path = d3.geo.path()
              .projection(projection);
  
          var svg = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", height);
  
          var places = [{ name: "Adelaide", location: { latitude: -34.93, longitude: 138.6 }, position: { dy: ".35em", dx: "-4.75em" } }, { name: "Brisbane", location: { latitude: -27.47, longitude: 153.02 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Canberra", location: { latitude: -35.3, longitude: 149.13 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Darwin", location: { latitude: -12.45, longitude: 130.83 }, position: { dy: ".35em", dx: "-4em" } }, { name: "Hobart", location: { latitude: -42.88, longitude: 147.32 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Melbourne", location: { latitude: -37.82, longitude: 144.97 }, position: { dy: ".35em", dx: ".75em" } }, { name: "Perth", location: { latitude: -31.95, longitude: 115.85 }, position: { dy: ".35em", dx: "-3.25em" } }, { name: "Sydney", location: { latitude: -33.87, longitude: 151.2 }, position: { dy: ".35em", dx: ".75em" } }];
  
          //Probably best practice to reverse these calls
          d3.csv("/Australia/Data/ABS_Pop_15.csv", function(data) {
  
              //Set up fill colours
              var minimum = d3.min(data, function(d) { return d.Value; }),
                  maximum = d3.max(data, function(d) { return d.Value; });
  
              var minimumColor = "#e5f5f9", 
                  maximumColor = "#99d8c9";
  
              var color = d3.scale
                  .linear()
                  .domain([minimum, maximum])
                  .range([minimumColor, maximumColor]);               
  
              //Clean data
              var ValueById = {};
  
              data.forEach(function(d) { 
                  ValueById[d.id] = +d.Value; 
              });                                     
  
              d3.json("/Australia/Data/australia_adm4_topo_id.json", function(sa2) {
  
  
                  svg.append("path")
                      .data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
                      .enter().append("path")
                      .attr("d", path);
  
                      console.log(sa2);
  
                      svg.selectAll(".label")
                      .data(places)
                      .enter().append("text", ".label")
                      .attr("transform", function(d) {
                          return "translate(" + projection([d.location.longitude, d.location.latitude]) + ")";
                      })
                      .style("font-family", "Arial, sans-serif")
                      .style("font-size", "12px")
                      .style("font-weight", "bold")                       
                      .style("stroke-width", "0px")
                      .style("stroke", "#fff")                        
                      .attr("dy", function(d) { return d.position.dy; })
                      .attr("dx", function(d) { return d.position.dx; })
                      .text(function(d) { return d.name; });                  
              });
          });         
  &lt;/script&gt;
  </code></pre>