d3.js - Loading external csv file in jsfiddle

Question

I am trying to create a jsfiddle for one of the dc.js examples. I am not able to load an external file using a URL and d3.csv().

Can someone please suggest how to load a csv file using d3.csv in jsfiddle.

Answer 1

The approach I usually use for CSV data in JSFiddle examples is

a. Put the data in a <pre> block at the end of the HTML mark-up, usually with the id "data".

b. Add pre {display:none;} to the CSS.

c. Replace the d3.csv(filename, callback) function call with a d3.csv.parse(text) call, using the text content of the <pre> block as the input to the parse function.

Because the parse function doesn't use a callback, it just returns the data array, you need to save that output in a variable of the same name as your callback data parameter.

In other words, if your example looks like

d3.csv("data.csv", function(error, data) {

   if(error){console.log("Could not read " + "data.csv");

   /* Do something with `data` here */

});

The JSFiddle-friendly version would look like:

//d3.csv("data.csv", function(error, data) {

//   if(error){console.log("Could not read " + "data.csv");

var data = d3.csv.parse( d3.select("pre#data").text() );

   /* Do something with `data` here */

//});

If you would rather have a full working example that uses the file-reading methods as intended, there are other options as mentioned in the comments. Tributary also allows external data files I think.