0

I am able to load a csv file if it is in the same working directory for example:

.defer(d3.csv,"data.csv", function(d) { .. })

but if the file is in another directory and I pass the absolute path the file isn't loaded:

.defer(d3.csv,"/home/path/data.csv", function(d) {..})

I get code 404, message File not found

I am already running a local web server

EDIT

I am following this tutorial:

https://www.d3-graph-gallery.com/graph/choropleth_basic.html this is index.html

<script>

    // The svg
    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
    
    // Map and projection
    var path = d3.geoPath();
    var projection = d3.geoMercator()
      .scale(70)
      .center([0,20])
      .translate([width / 2, height / 2]);
    
    // Data and color scale
    var data = d3.map();
    var colorScale = d3.scaleThreshold()
      .domain([10, 30, 40, 50, 70, 100])
      .range(d3.schemeBlues[7]);
    
    // Load external data and boot
    d3.queue()
      .defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
      .defer(d3.csv, "data.csv", function(d) { data.set(d.codice, d.rtt); })
      .await(ready);
    
    function ready(error, topo) {
    
      // Draw the map
      svg.append("g")
        .selectAll("path")
        .data(topo.features)
        .enter()
        .append("path")
          // draw each country
          .attr("d", d3.geoPath()
            .projection(projection)
          )
          // set the color of each country
          .attr("fill", function (d) {
            d.total = data.get(d.id) || 0;
            return colorScale(d.total);
          });
        }
    
    </script>

Which is working if the file data.csv is the same directory of index.html, but it isn't working if it is in another directory and I get:

code 404, message File not found

Uncaught TypeError: topo is undefined
    ready http://localhost:8000/:43
    _call https://d3js.org/d3.v4.js:11174
    maybeNotify https://d3js.org/d3.v4.js:11251
    abort https://d3js.org/d3.v4.js:11244
    end https://d3js.org/d3.v4.js:11218
    call https://d3js.org/d3.v4.js:792
    respond https://d3js.org/d3.v4.js:11397

EDIT 2

Trying to directly loading a csv file without download it before in this way, but not working:

if (rows.length == 5) {
   createmap(createcsv(rows))
}
function createcsv(rows) {

    let csvContent = "data:text/csv;charset=utf-8,";

    csvContent ="codice,rtt"+"\r\n";

    rows.forEach(function(rowArray) {

        let row = rowArray.join(",");

        csvContent +=row+"\r\n";

    });

    return csvContent;

}


function createmap(map) {
d3.queue()
          .defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
          .defer(d3.csv, mappa, function(d) { data.set(d.codice, d.rtt); })
          .await(ready)
}
stackfac
  • 57
  • 8

1 Answers1

0

Few things here:

  1. Ensure that your data.csv and dat.csv nomenclature is not an issue.

  2. Are you trying to access directories not in scope of permission for the localhost? You need to allow www-data to have access to the path. It seems you are trying to access /home/path/ which most probably is not under scope of www-data's access. Or simply try placing data.csv somewhere within the /var/www/yourapplication/path/. It may help.

JALO - JusAnotherLivngOrganism
  • 1,236
  • 1
  • 13
  • 27
  • Hey, thank you! I think the problem was the second one. But what if I don't want to read the csv file from the outside the application, but directly from inside? Because I have a function which create the csv and then download it then load it with d3.csv, but I would not to download the csv file. I am going to do a second edit to show you – stackfac Jul 14 '20 at 09:04
  • If you were trying to load the file from Home directory then certainly the second one is the reason. You can always add a user (www-data in this case) as owner/access holder for any path. Not sure about your precise intention, however, downloading to client is not needed if it is already being written somewhere in the server. Simply point to the path where you are writing the file. If you meant that a csv string or json object is being created by a function in the javascript, then that's a different question with multiple ways to approach. – JALO - JusAnotherLivngOrganism Jul 14 '20 at 09:11
  • I mean that I have a function which create a csv file, second edit createcsv, before I was downloading the csv file and then loading again in d3.csv. Now I would like not downloading the csv file, indeed createcsv return the content of csv – stackfac Jul 14 '20 at 09:18
  • and how can I directly write somewhere in the server? Thank you! – stackfac Jul 14 '20 at 09:25
  • you could use a server side language like php to call through ajax and do the file creation process at server end. After receiving the response, d3.csv may be called. However, you can simply create a json object and pass that directly to d3.json. You should create a separate specific question for this for clarity and avoid confusion for anyone reading this page for assistance related to your first question. – JALO - JusAnotherLivngOrganism Jul 14 '20 at 09:35
  • ok, just a last thing. Why with the json I am not going to have problems? – stackfac Jul 14 '20 at 09:37
  • You will get issues if directly passing csv/json content to d3.json or d3.csv functions which essentially make ajax requests to server for accessing files. If you create a json object then d3 code being used inside the d3.json call can directly use the already parsed or well formatted json. Use d3.csvparse if you wish to pass a csv formatted string. You may also refer to this: https://stackoverflow.com/questions/10934853/d3-js-loading-json-without-a-http-get – JALO - JusAnotherLivngOrganism Jul 14 '20 at 09:52