Uncaught ReferenceError: data is not defined when loading .csv file in d3.js

Question

I am trying to make a simple scatterplot using data stored in a .csv file. I have tried to follow this resource but I receive the following error:

(index):35 Uncaught ReferenceError: data is not defined at (index):35

Here is the code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TEST</title>
    <script src="https://d3js.org/d3.v5.min.js">></script>
    <script src="https://d3js.org/d3-dsv.v1.min.js"></script>
    <script src="https://d3js.org/d3-fetch.v1.min.js"></script>
    <style>
        .main {
            font-size: xx-large;
        }</style>
</head>
<body>

<h1>Resultater</h1>
<div>data here: </div>
</body>


<script>
d3.csv("cool.csv").then(function(data) {
  console.log(data);
});


    let w = 800;
    let h = 800;

    let svg = d3.select('body')
        .append('svg')
        .attr('width', w)
        .attr('height', h);

    let bib = d3.selectAll('circle')
        .data(data)
        .enter()
            .append('circle')
            .attr('cx', function(d) { return d.FINISH * 2; })
            .attr('cy', 300)
            .attr('r', 40);
</script>


</html>

Can someone please help me understand why I am receiving this error?

Best, Christian Magelssen

It's because `d3.csv` is asynchronous and returns a `Promise`, so you need to move all your code inside the callback function for `then`. — goto, Jul 20 '20 at 11:58
Thank you! Like this: ```d3.csv("cool.csv").then(function(data) { Then my code here? ``` — Cmagelssen, Jul 20 '20 at 12:09

Uncaught ReferenceError: data is not defined when loading .csv file in d3.js

0 Answers0