javascript d3.js geojson topojson cartography

D3JS TopoJSON map of Australia: projection accurate but no country rendered

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.

Things to note:

I can accurately project lat/long points of cities (i.e., their spatial relationship looks correct). Therefore, I believe the projection is fine.
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.

I've created a JSFiddle here: https://jsfiddle.net/6j8sz21L/

Thank you!

Here's the D3JS code for reference (also see the JSFiddle for more detail):

<!DOCTYPE html>
<html>
  <head>
    <title>Australia</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v2.min.js"></script>
    <style type="text/css">
        .pin {
            border: 1px solid white;
        }

        svg {
            background: lightblue;
        }
    </style>
  </head>

  <body>
    <script type="text/javascript">

        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; });                  
            });
        });         
</script>

Solution

The code line that is giving you an issue is:

svg.append("path")
  .data(topojson.feature(sa2, sa2.objects.australia_adm4.geometries))
  .enter().append("path")
  .attr("d", path);

Use this instead (you can copy it directly over the line above in your fiddle):

svg.selectAll("path")
  .data(topojson.feature(sa2, sa2.objects.australia_adm4).features)
  .enter().append("path")
  .attr("d", path);

I did a little rewrite based off a similar template I had to show this working:

//map frame dimensions
var width = 960;
var height = 640;

//create a new svg element with the above dimensions
map = d3.select('#map')
  .append('svg')
  .attr('width', width)
  .attr('height', height);

//create projection
var projection = d3.geo.mercator()
  .center([0, -27])
  .rotate([-140, 0])
  .scale(Math.min(height * 1.2, width * 0.8))
  .translate([width / 2, height / 2])
  .precision(0.1);

//create svg path generator using the projection
var path = d3.geo.path()
  .projection(projection);

// locations to render
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" } }];

// render map
var url = 'https://rawgit.com/DanielGalletta/Carto/master/Data/australia_adm4_topo_id.json';
d3.json(url, renderMap);

function renderMap(error, geoData) {

  //add geometry to map			
  var mapAreas = map.selectAll('path')
    .data(topojson.feature(geoData, geoData.objects.australia_adm4).features)
    .enter() //create elements
    .append('path') //append elements to svg
    .attr('d', path) //project data as geometry in svg
  
  // add locations to map
  var cities = map.selectAll('.label')
    .data(places)
    .enter()
    .append('text', '.label')
    .attr('transform', function(d) {
      return 'translate(' + projection([d.location.longitude, d.location.latitude]) + ')';
    })
    .attr('dy', function(d) { return d.position.dy; })
    .attr('dx', function(d) { return d.position.dx; })
    .text(function(d) { return d.name; })

};

path {
  stroke-width: 1px;
  stroke: white;
  fill: lightblue;
  cursor: pointer;
}
path:hover,
path.highlighted {
  fill: steelblue;
}
.label {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  stroke-width: 0px;
  stroke: #fff
}

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v2.min.js"></script>
<div id="map"></div>

Also, here is a useful blog article on how the selectAll and append functions operate on elements.