18

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.

Gordon
  • 19,811
  • 4
  • 36
  • 74
Andy897
  • 6,915
  • 11
  • 51
  • 86

1 Answers1

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.

AmeliaBR
  • 27,344
  • 6
  • 86
  • 119
  • 4
    P.S. [Here's an example using the above technique](http://fiddle.jshell.net/NYpHG/2/); it's from [this Q&A](http://stackoverflow.com/a/21567970/3128209). [Here's another example](http://jsfiddle.net/KjrGF/12/), which originally had four different data files -- all are plunked into the fiddle as separate `
    ` blocks; you can also see the original file-reading calls commented out in the code. That example came from [this Q&A](http://stackoverflow.com/a/21923560/3128209).
     – AmeliaBR Apr 06 '14 at 15:40
  • 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. http://stackoverflow.com/questions/22897142/grouping-charts-in-dc-js ... Thank You! – Andy897 Apr 06 '14 at 17:04
  • @AmeliaBR : I tried your solution, and I still stuck at something, I hope you don't take a look at my [Fiddle](https://jsfiddle.net/bheng/b0z5hc71/1/) I have the same goal as the OP – code-8 Mar 24 '15 at 17:00
  • 1
    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 Oct 01 '15 at 04:26
  • 1
    with: var data = d3.csv.parse( d3.select("pre#data").text() ); data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; }); – ChrisGuest Oct 01 '15 at 04:26
  • 6
    For version 4 of d3 use: `d3.csvParse(d3.select("pre#data").text());` – Christian-G Nov 01 '16 at 10:27