Problems loading CSV data in D3. svg.selectAll(...).data(...).enter is not a function

Question

I am trying to load a CSV data set into d3 by assigning it to a variable, but it seems that I keep receiving an error saying that enter() is not a function. I think the issue lies in the way I'm loading the CSV data.

For reference, I'm following this tutorial: http://duspviz.mit.edu/d3-workshop/scatterplots-and-more/

Here is my code for reference.

var ratData = [];

d3.csv("rat-data.csv", function(d) {
    return {
        city : d.city, // city name
        rats : +d.rats // force value of rats to be number (+)
    };
}, function(error, rows) { // catch error if error, read rows
    ratData = rows; // set ratData equal to rows
    console.log(ratData);
    createVisualization(); // call function to create chart
});

function createVisualization(){
    // Width and height of SVG
    var w = 150;
    var h = 175;

    // Get length of dataset
    var arrayLength = ratData.length; // length of dataset
    var maxValue = d3.max(ratData, function(d) { return +d.rats;} ); // get maximum
    var x_axisLength = 100; // length of x-axis in our layout
    var y_axisLength = 100; // length of y-axis in our layout

    // Use a scale for the height of the visualization
    var yScale = d3.scaleLinear()
        .domain([0, maxValue])
        .range([0, y_axisLength]);

    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h);

    // Select and generate rectangle elements
    svg.selectAll( "rect" )
        .data( ratData )
        .enter()
        .append("rect")
        .attr( "x", function(d,i){
            return i * (x_axisLength/arrayLength) + 30; // Set x coordinate of rectangle to index of data value (i) *25
        })
        .attr( "y", function(d){
            return h - yScale(d.rats); // Set y coordinate of rect using the y scale
        })
        .attr( "width", (x_axisLength/arrayLength) - 1)
        .attr( "height", function(d){
            return yScale(d.rats); // Set height of using the scale
        })
        .attr( "fill", "steelblue");

    // Create y-axis
    svg.append("line")
        .attr("x1", 30)
        .attr("y1", 75)
        .attr("x2", 30)
        .attr("y2", 175)
        .attr("stroke-width", 2)
        .attr("stroke", "black");

    // Create x-axis
    svg.append("line")
        .attr("x1", 30)
        .attr("y1", 175)
        .attr("x2", 130)
        .attr("y2", 175)
        .attr("stroke-width", 2)
        .attr("stroke", "black");

    // y-axis label
    svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .text("No. of Rats")
        .attr("transform", "translate(20, 20) rotate(-90)")
        .attr("font-size", "14")
        .attr("font-family", "'Open Sans', sans-serif");
}; // end of function

Hi Andrew! Thank you so much for the response. I am using downloaded version of d3.v5.min in my node.js web application. Can be found here: https://d3js.org/d3.v5.js — Samantha, Oct 29 '19 at 15:25
Your example uses d3v4: d3.json behaves differently in d3v5, see this [question](https://stackoverflow.com/a/49769027/7106086). Generally the error you see is when no data is passed to `.data()` - which is the case here as `rows` should be empty. If you need help adapting the example to v5 I can provide more info. — Andrew Reid, Oct 29 '19 at 15:44
Thank you very much Andrew! Further elaboration isn't needed. Your reply has got me on the right track for debugging. Thanks once again!!! — Samantha, Oct 29 '19 at 20:36

Problems loading CSV data in D3. svg.selectAll(...).data(...).enter is not a function

0 Answers0