Loading data with D3

If you're building a real application, loading data is probably not the responsibility of D3. You're likely using a framework or library, or something like fetch to load data into your app.

D3 does provide APIs for loading data though, and they can be useful in various situations. A lot of the examples on https://bl.ocks.org/ and http://blockbuilder.org/, for example, load their own data. Why use D3 to load the data? Well, a lot of them were built before fetch existed, or at least before it was widely available, and pulling in something like jQuery just to load data is kind of silly.

Loading JSON

JSON is of course the most common format for data files these days. Unsurprising then, D3 has a method specifically for loading and parsing it. d3.json allows you to specify a URL and a callback, and will pass the parsed JSON to that callback. (Avoiding the separate async step of parsing you get with fetch.)

d3.json(someURL, (data) => {
    // data party!
})

Loading not JSON

D3 also has some methods for loading plain text and HTML, but the one you're most likely to encounter besides JSON is CSV.

d3.csv will load and parse CSV files, which are very common in certain industries. The simplest use of d3.csv mirrors that of d3.json, but the data you get back is slightly different. Take the following CSV data.

name,age
Ben,38
Hannah,35

Loading a file with these contents would result in the following structure.

[
    {name: 'Ben', age: 38},
    {name: 'Hannah', age: 35},
    columns: ['name', 'age']
]

Yea, kind of weird. It's an Array-like structure that, in addition to the parsed "rows" of data, has a columns property listing the properties each row object will have.

d3.csv also supports an optional row conversion function. This can be useful for doing custom parsing or conversion before the data reaches your code.

const rowFn = (o) => {
    return {
        name: o.name,
        isLegal: o.age > 17
    }
}
 
d3.csv(someUrl, rowFn, (data) => {
    // data party!!!
})

Every now and then you'll also see d3.tsv used, which is identical to d3.csv, just for tab separated values instead of comma separated values.

Happy hacking!