How can I load a local json file using d3?

Question

I am trying to create a map and I have been using this tutorial https://newmedia.report/classes/coding/2018/mapping-in-d3/. I think the problem is that I can't load local files, but I am not sure how to fix it.

I have looked at other StackOverflow answers but keep getting the same problem. I tried setting up a dev server but it still isn't working. I also tried in firefox with the same code and got the error The Same Origin Policy disallows reading the remote resource at the file. (Reason: CORS request not HTTP). Then an error saying TypeError: NetworkError when attempting to fetch resource.

I am using all the same code from the tutorial but it isn't working.

    Promise.all([
      d3.json("ccc_precinct_topo.json"), 
      d3.csv("CCC_Primary_results.csv") 
    ])
    .then(function(data){

URL scheme must be "HTTP" or "HTTPS" for CORS request. I keep getting an error like this for both files.

Did you have a look here? https://stackoverflow.com/questions/17214293/importing-local-json-file-using-d3-json-does-not-work — gothmogg, Jun 07 '19 at 11:23
@gothmogg yes I have looked at many of the stackoverflow posts and tried that but I am stilling having problems — I. Jones, Jun 07 '19 at 11:26
you know you can't load a local file via ajax, and you have to use an HTTP server, right? — Noam, Jun 07 '19 at 11:48
@Noam I think I tried to change that. Maybe I did it wrong. What is the best way to do that? And also why would the tutorial say to do it this way if it doesn't work? — I. Jones, Jun 07 '19 at 12:39
They probably assume you are using a server, after all, they teach you to use d3.js, and do not teach js from scratch. do you have python or PHP installed on your computer? — Noam, Jun 09 '19 at 20:49

score 0 · Answer 1 · answered Jun 07 '19 at 13:55

The recommended way would be to install a web server on your development system, e.g. XAMPP for a Windows or LAMP for a Linux system. Otherwise whenever you test something using AJAX calls you will run into problems of some sort.

Just for demonstration purposes you could save the JSON and CSV data as local variables. To do so, copy the contents of the JSON file "ccc_precinct_topo.json" into array data[0]:

var data= [];
data[0]= [...]; // contents of "ccc_precinct_topo.json"

In a second step, save the contents of the CSV file "CCC_Primary_results.csv" as a string into a new variable and use d3.csv.parse() to convert it into an array structure:

var csvContent= 'String|With|CSV|Values';
data[1]= d3.csv.parse(csvContent);

Now to see if you get correct values, send the data to the console:

console.log(data);

Open the Developer Tools (Hit F12) and refresh the page. In the Console section you should see an array with two elements, both should be array structures.

Instead of using Promises and d3.json(), d3.csv(), continue with the code you find below the .then(function(data){.

P.S. In most cases someone writing a tutorial about web services or pages assumes that the shown code will be used as part of a web project and thus will be loaded by a web server. But you are right, it could have been mentioned as a prerequisite, e.g. "Before you start, set up LAMP or XAMPP on your development system".

How can I load a local json file using d3?

1 Answers1