Home > Tutorials > D3 Tutorials > Using CSVs and other external data

Using CSVs and other external data

So far we’ve just used datasets that have been sitting inside of our HTML. Let’s say we were studying animal longetivity:

var animal_data = [
  { 'animal': 'elephant', 'age': 70 },
  { 'animal': 'camel', 'age': 50 },
  { 'animal': 'sheep', 'age': 15 },
  { 'animal': 'macaw', 'age': 50 },
  { 'animal': 'ant (queen)', 'age': 3 }
]

But what if we had like eighty animals? We’d be in t-r-o-u-b-l-e. That’s why d3 has a pleasant thing called d3.csv. As you might be able to tell, it can read in a CSV.

d3.csv takes two parameters - the name of the file to read, and a function to execute when you’re done. It can be done in one of two ways.

Passing d3 the function name

function ready(datapoints) {
  // do something with your data
}

d3.csv('data.csv', ready)

Passing d3 an anonymous function

d3.csv(‘data.csv’, function(datapoints) { // do something with your data })

Whichever one you pick is really up to you! When you get into the world of loading multiple files (let’s not talk about it just yet) you really lean toward the the separate-named-function thing, so maybe we should try using ready from here on out?

animals.csv

  animal,age
  elephant,70
  camel,50
  sheep,15
  macaw,50
  ant (queen),3

animals.html

Open example in new window

<script>
function ready(animal_data) {
  console.log(animal_data);

  d3.select("body").selectAll("p")
                    .data(animal_data)
                    .enter()
                    .append("p")
                    .text( function(d) {
                      return "A " + d['animal'] + ' can live for up to ' + d['age'] + ' years!';
                    });
}

d3.csv("/tutorials/assets/data/animals.csv", ready)
</script>

Open example in new window

A complicating factor

There’s one problem, though, and that’s if you use external data, we can’t just open the .html file in a browser. If you try, you’ll get an error message like this:

XMLHttpRequest cannot load file:///blah/blah/blah/blah.csv. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

It’s a security thing! If any ol’ file on your computer could jump around and read other files on your computer, it might end up causing some trouble. As a result, we need to run a little web server in order to open the file.

Open Terminal and browse to the directory that has your file in it, let’s call it animals.html. Then run the following command:

python -m SimpleHTTPServer

You’ll see a note come up saying

Serving HTTP on 0.0.0.0 port 8000 ...

And then you can open up http://localhost:8000 to find and view your D3.

Other file formats

D3 can natively read a ton of different data types: d3.csv has other buddies like d3.json, d3.xml, and d3.tsv. Read more over here.