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.

I'm not sure that you can, but there are alternative such as Bl.ocks — user1614080
– user1614080, Commented Apr 6, 2014 at 10:06
@Andy897 : Try Plunker you might like. I have the same situation as you, and this is how it looks like in Plunker — code-8
– code-8, Commented Mar 24, 2015 at 17:27

AmeliaBR · Accepted Answer · 2014-04-06 15:34:31Z

29

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.

answered Apr 6, 2014 at 15:34

AmeliaBR

27.6k6 gold badges90 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

AmeliaBR Over a year ago

P.S. Here's an example using the above technique; it's from this Q&A. Here's another example, which originally had four different data files -- all are plunked into the fiddle as separate <pre> blocks; you can also see the original file-reading calls commented out in the code. That example came from this Q&A.

Andy897 Over a year ago

Hi Amelia, Kudos to you for the great reply. Seems like you work actively with d3 and other child libraries like nvd3 and dc. Here is another doubt of mine, if you can please have a look when you get a chance. stackoverflow.com/questions/22897142/grouping-charts-in-dc-js ... Thank You!

ChrisGuest Over a year ago

A slight syntactical variant, I replaced: d3.csv("data.csv", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; });

ChrisGuest Over a year ago

with: var data = d3.csv.parse( d3.select("pre#data").text() ); data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; });

Christian-G Over a year ago

For version 4 of d3 use: d3.csvParse(d3.select("pre#data").text());

|

Collectives™ on Stack Overflow

Loading external csv file in jsfiddle

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related