Using CSV (and Text) Files with D3

This tutorial is in response to a request by someone who wanted to know how to use data from CSV (Comma Separated Values) files with D3. Interestingly enough, you will also see how the data can be stored into and read from a simple text file (instead) along the way.

The CSV file format is commonly used in spreadsheets, and it's pretty well known to programmers as one of the easiest formats to read and write data with. Why? Take a look at what a CSV file's contents could be:

2345, 345, sdfgsd, 3453,
wgdg, 34, fsg, dgd, 34534.634,

sfsfggsdfgsdfgsdfh, 4, "hello",
-2

If you look past the stupidity of the bogus "data" I used in that example, you'll see that it's fairly simplistic! Every value is separated by a comma - hence, Comma Separated Values (CSV).

Before I show you how to use CSV, you should know that I made an "Introduction to D3" tutorial earlier. I highly recommend that you read it first.

Introduction to D3

This tutorial is in response to a request by someone who wanted a basic introduction to D3. I've never used D3 before, but I've learned a bit about it so far and this is just an introduction to get you started anyways.

Basically, what I've found is that D3 is a lot like JQuery in many regards. You can select existing (and not-yet-existing) elements, manipulate them graphically, perform animations, etc. The best aspect of D3 seems to be that although the learning curve is rather steep for anyone who's a beginning coder, it actually ends up making most tasks of displaying/arranging data on a web page very simple and easy - you just have to know how. :)