Search code examples
javascriptd3.jsqueue.js

Uncaught Reference Error: queue is not defined


I am getting the error

Uncaught Reference Error: queue is not defined

but I do not understand why I am getting the error. I am trying to draw a map of the USA using D3 and I am/was using this guide but it does not exactly match with the most modern version of D3. Here is my code/the code from the video:

(function (){

var width = 400;
var height = 300;

var svg = d3.select('#d3mapUS')
        .append("svg")
        .attr("width", width)
        .attr("height", height);

var projection = d3.geoAlbersUsa()
        .scale(1280)
        .translate([width/2, height/2]),
    path = d3.geoPath()
        .projection(projection);

var stateIDMap = d3.map({

});

queue()
    .defer(d3.json, "us.json")
    .await(function (err, US) {
        var states = svg.append("g")
                .attr("class", "states")
                .selectAll("g")
                .data(topojson.feature(US, US.objects.states).features)
                .enter()
                .append("g");

        states.append("path")
                .attr("d", path);
    });
})();

Solution

  • If you are using D3 v4.x, the correct syntax is d3.queue. So, it should be:

    d3.queue()
        .defer(d3.json, "us.json")
        .await(function (err, US) {
            var states = svg.append("g")
                .attr("class", "states")
                .selectAll("g")
                .data(topojson.feature(US, US.objects.states).features)
                .enter()
                .append("g");
    
            states.append("path")
                .attr("d", path);
    });
    

    Check the API: https://github.com/d3/d3-queue#queue