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.

Ningpo

I'm not sure that you can, but there are alternative such as Bl.ocks – Mend

Plunker is another good option. – Reiko

@Ningpo : Try Plunker you might like. I have the same situation as you, and this is how it looks like in Plunker – Rootstock

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.

Sapper

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. – Sapper

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. https://mcmap.net/q/740628/-why-does-one-chart-not-filter-another-in-dc-js ... Thank You! – Ningpo

@Sapper : I tried your solution, and I still stuck at something, I hope you don't take a look at my Fiddle I have the same goal as the OP – Rootstock

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; }); – Encomiast

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

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