Embedding csv in HTML for use with D3.js

Question

In D3.js, one usually loads data from an external csv file. This is very efficient for large data, and avoids changing the code when the data changes.

However, there are two situations (only using small csv data) where I want to embed csv directly in an HTML page:

• A page that can be loaded locally (i.e. from file:///), without requiring to run a local HTTP server.
• A small jsfiddle example explaining a D3.js question for use on stackoverflow.

Answer 1

This is the solution I have come up with, using the example from the D3.js API.

Embedding the csv data:

<pre id="csvdata">
    Year,Make,Model,Length
    1997,Ford,E350,2.34
    2000,Mercury,Cougar,2.38
</pre>

Hidding the raw data on the page:

#csvdata {
    display: none;
}

Parsing it:

var raw = d3.select("#csvdata").text();
var parsed = d3.csv.parse(raw);

Optionally, show the result:

d3.select("#parsed").text(JSON.stringify(parsed));
// Assuming <div id="parsed"></div> somewhere on the page

If think this is flawed, or if you have a more elegant solution, I will gladly accept your answer!

EDIT: see it in action in this fiddle