Is there a way to fix and display a map in D3 v5?

Question

I am building a choropleth in D3 v5, using a JSON file for Australian states here: https://gist.githubusercontent.com/GerardoFurtado/02aa65e5522104cb692e/raw/8108fbd4103a827e67444381ff594f7df8450411/aust.json. However, when I tried to load the file in the browser, the zone where the map is supposed to be displayed was completely blank:

Here is the code that I used to make the chart:

const second_width = 900;
const second_height = 750;

const projection = d3.geoMercator().center([132, -28]) // approximate geographical center of Australia
                   .translate([second_width/2, second_height/2])
                   .scale(2450);


const second_color = d3.scaleQuantize().range(['#edf8fb','#ccece6','#99d8c9','#66c2a4','#2ca25f','#006d2c']);
    
const path = d3.geoPath().projection(projection);


const second_svg = d3.select("#chart2")
            .append("svg")
            .attr("width", second_width)
            .attr("height", second_height);

d3.csv("data/Waste_Per_State_Per_Capita(1).csv" ,function(data) {

    //Set input domain for color scale
    second_color.domain([
        d3.min(data, function(d) { return d.Total; }), 
        d3.max(data, function(d) { return d.Total; })
    ]);

    d3.json("data/aust.json",function(json) {

        for (var i = 0; i < data.length; i++) {
    
            var data_state = data[i].States;
            
            //Grab data value, and convert from string to float
            var dataValue = parseFloat(data[i].Total);
    
       
            for (var j = 0; j < json.features.length; j++) {
            
                var json_state = json.features[j].properties.STATE_NAME;
                
    
                if (data_state == json_state) {
            
                    //Copy the data value into the JSON
                    json.features[j].properties.value = dataValue;
                    
                    //Stop looking through the JSON
                    break;
                    
                }
            }       
        }

        second_svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .style("fill", function(d) {
            //Get data value
                var value = d.properties.value;
                            
                if (value) {
                    //If value exists…
                    return second_color(value);
                } else {
                    //If value is undefined…
                    return "#ccc";
                }
            });


            second_svg.selectAll("text")
                .data(json.features)
                .enter()
                .append("text")
                .attr("fill", "darkslategray")
                .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
                .attr("text-anchor", "middle")
                .attr("dy", ".35em")
                .text(function(d) {
                    return d.properties.STATE_NAME;
                });

            
            
   });
})

As for the CSV file I used, here it is:

States,Energy Recovery,Disposal,Recycling,Total
ACT,53,70,0,123
New South Wales,28,80,48,156
Northern Territory,34,203,0,237
Queensland,50,143,10,203
South Australia,36,75,7,118
Tasmania,47,138,0,185
Victoria,51,108,14,173
Western Australia,29,163,29,221

Could you find out why I cannot make the map displayed in the website (despite being loaded in a server)? And how is your solution to load a map like that in D3 v5?

Thank you!

I suggest to remove calls to `d3.csv` and `d3.json` and just put ready data objects in the code sample — Michael Rovinsky, May 17 '21 at 11:51
Map should display (scale is probably off, but you should see something). The most likely cause is you are using d3v5 or d3v6 which has a [different signature](https://stackoverflow.com/q/47664292/7106086) for d3.csv, d3.json. Alternatively, we'd need to see more of your code. — Andrew Reid, May 17 '21 at 21:18
Just following up as I realize I wasn't explicit before: the map draws for me with d3v4 and the code/data you have provided, with d3v4. Reading closely, I see you are using d3v5, in which case you need to change d3.json/d3.csv to reflect their changed signature as noted above - otherwise the code you have shared will work. — Andrew Reid, May 18 '21 at 23:31
I realised now that on d3.csv and d3.json, I have to add .then(function(data)) and it works now in D3 v5. I would like to thank both of you for your help! — Hoang Cuong Nguyen, May 19 '21 at 02:19

Is there a way to fix and display a map in D3 v5?

0 Answers0