title: D3.csv not loading data from local csv file
body: <p>I created a copy of the csv file in my local folder because i wanted to mess around with the data a little bit. When i get rid of the link and replace it with the name of my local csv file, the graph doesnt render for some reason. I have added a picture that shows my local file structure. it is in the same folder. What am i doing wrong? <a href="https://i.stack.imgur.com/BGKHH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BGKHH.png" alt="enter image description here" /></a></p>
  <pre><code>import React, {Component, useRef, useEffect} from 'react';
  import * as d3 from &quot;d3&quot;;
  import { select } from 'd3-selection'
  import { extent, max, min } from &quot;d3-array&quot;;
  
  
  class Linechart extends Component {
    constructor(props){
      super(props)
      this.createBarChart = this.createBarChart.bind(this)
    }
  
    componentDidMount() {
      this.createBarChart()
    }
  
    componentDidUpdate() {
      this.createBarChart()
    }
  
    createBarChart() {
      var margin = {top: 30, right: 30, bottom: 30, left: 60},
          width = 960 - margin.left - margin.right,
          height = 400 - margin.top - margin.bottom;
  
      var node = this.node
      var divObj = select(node)
      var svgObj = divObj
                  .append(&quot;svg&quot;)
                  .attr(&quot;width&quot;, width + margin.left + margin.right)
                  .attr(&quot;height&quot;, height + margin.top + margin.bottom)
                  .append(&quot;g&quot;)
                  .attr(&quot;transform&quot;,&quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
      
      //Read the data
      // when i replace the line below wit this line of code, it doesnt read it d3.csv(&quot;5_OneCatSevNumOrdered.csv&quot;&quot;), function(data) {
      d3.csv(&quot;https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/5_OneCatSevNumOrdered.csv&quot;, function(data) {
  
        // group the data: I want to draw one line per group
        var sumstat = d3.nest() // nest function allows to group the calculation per level of a factor
          .key(function(d) { return d.name;})
          .entries(data);
  
  
        // Define the div for the tooltip
        var tooltip = divObj
          .append(&quot;div&quot;)  
          .style(&quot;position&quot;, &quot;absolute&quot;)
          .style(&quot;z-index&quot;, &quot;10&quot;)
          .style(&quot;visibility&quot;, &quot;hidden&quot;)
          .text(&quot;I AM A TOOLTIP BOOM SHAKALAKA!! BOOM SHAKALAKA!!&quot;);       
  
        // Add X axis --&gt; it is a date format
        var x = d3.scaleLinear()
          .domain(d3.extent(data, function(d) { return d.year; }))
          .range([ 0, width ]);
        svgObj.append(&quot;g&quot;)
          .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
          .attr(&quot;stroke-width&quot;,&quot;0.3&quot;)
          .call(d3.axisBottom(x).tickSize(-height).tickFormat('').ticks(5));
        //ticks
        svgObj.append(&quot;g&quot;)
          .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)
          .call(d3.axisBottom(x).ticks(5));
  
        // Add Y axis
        var y = d3.scaleLinear()
          .domain([0, d3.max(data, function(d) { return +d.n; })])
          .range([ height, 0 ]);
        svgObj.append(&quot;g&quot;)
          .attr(&quot;stroke-width&quot;,&quot;0.3&quot;)
          .call(d3.axisLeft(y).tickSize(-width).tickFormat('').ticks(5));
        //ticks
        svgObj.append(&quot;g&quot;)
          .call(d3.axisLeft(y).ticks(5));
          
        // color palette
        var res = sumstat.map(function(d){ return d.key }) // list of group names
        console.log(res)
        var color = d3.scaleOrdinal()
          .domain(res)
          .range(['#e41a1c','#377eb8','#4daf4a','#984ea3','#ff7f00','#ffff33','#a65628','#f781bf','#999999'])
  
        // Draw the line
        svgObj.selectAll(&quot;.line&quot;)
            .data(sumstat)
            .enter()
            .append(&quot;path&quot;)
              .attr(&quot;fill&quot;, &quot;none&quot;)
              .attr(&quot;stroke&quot;, function(d){ return color(d.key) })
              .attr(&quot;stroke-width&quot;, 2.5)
              .attr(&quot;d&quot;, function(d){
                return d3.line()
                  .x(function(d) { return x(d.year); })
                  .y(function(d) { return y(+d.n); })
                  (d.values)
              })
              .on(&quot;mouseover&quot;, function(){return tooltip.style(&quot;visibility&quot;, &quot;visible&quot;);})
              .on(&quot;mousemove&quot;, function(){return tooltip.style(&quot;top&quot;, (d3.event.pageY-10)+&quot;px&quot;).style(&quot;left&quot;,(d3.event.pageX+10)+&quot;px&quot;);})
              .on(&quot;mouseout&quot;, function(){return tooltip.style(&quot;visibility&quot;, &quot;hidden&quot;);})
        })
  
      }
      render() {
        return &lt;div ref={node =&gt; this.node = node} className=&quot;example_div&quot;&gt; &lt;/div&gt;
     }
  }
  
  export default Linechart;
  </code></pre>