How to use d3.csv when you are a novice? It doesn't work, what am I doing wrong?

Question

I am novice with d3.js. I've just installed it and try to create a simple graph. The code I used is from this website : https://www.tutorialspoint.com/d3js/d3js_drawing_charts.htm

When I run the script I only get a blank page. I suppose the error is due to the d3.csv part (path?). Before using it, everything works perfectly in previous exercises. ... or is it something else ?

script type = "text/javascript"

     var svg = d3.select("svg"),
        width = svg.attr("width"),
        height = svg.attr("height"),
        radius = Math.min(width, height) / 2; 

     var g = svg.append("g")
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");


     var color = d3.scaleOrdinal([
        'gray', 'green', 'brown', 'orange', 'yellow', 'red', 'purple'
     ]);


     var pie = d3.pie().value(function(d) { 
        return d.percent; 
     });



     var path = d3.arc()
        .outerRadius(radius - 10).innerRadius(0);


     var label = d3.arc()
        .outerRadius(radius).innerRadius(radius - 80);


     d3.csv("population.csv", function(error, data) {
        if (error) {
           throw error;
        }

        var arc = g.selectAll(".arc")
           .data(pie(data))
           .enter()
           .append("g")
           .attr("class", "arc");



        arc.append("path")
           .attr("d", path)
           .attr("fill", function(d) { return color(d.data.states); });




        console.log(arc)


        arc.append("text").attr("transform", function(d) { 
           return "translate(" + label.centroid(d) + ")"; 
        })

        .text(function(d) { return d.data.states; });
     });



     svg.append("g")
        .attr("transform", "translate(" + (width / 2 - 120) + "," + 20 + ")")
        .append("text").text("Top population states in india")
        .attr("class", "title")
  </script>

What I am doing wrong? Thank you