A very simple csv example

3,218 views
Skip to first unread message

Curiouslearn

unread,
Feb 10, 2012, 11:21:35 AM2/10/12
to d3...@googlegroups.com
Hi All,

I think due to my lack of knowledge about servers and javascript, I am
finding this difficult.

Can someone please give a very simple example of how CSV data stored
in a local csv file can be loaded and converted to javascript array
format using D3.js?

For example, suppose I have the same data as used for an example by
Mike in D3 API.

Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38

Suppose, this is stored in a local file called carInfo.csv

How do I use this file and get the data in the following javascript
array format using D3.js?

[
{"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
{"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]

Do I need to have a server running for this? Can I do it without the
server? I would really appreciate if you can show this. The examples I
have seen on the web that use csv data are doing a lot of other things
and hence, are difficult to understand.

Thanks in advance for your help.

Kai Chang

unread,
Feb 10, 2012, 7:31:02 PM2/10/12
to d3...@googlegroups.com
I have a working example of this here. The code that does the upload and converts to a js object is inline.


To get the local upload working, I use the new FileReader api. Unfortunately it isn't supported in IE/Safari, but great for prototyping in Chrome/FF:


I use readAsText to get the text of the CSV, and then d3's csv.parse to turn it into JS:

curiouslearn

unread,
Feb 10, 2012, 9:56:50 PM2/10/12
to d3-js
Thanks very much Kai. Will look into the links you sent.

Specifically, I need to see that if I add the csv data file as one of
the files on a static website, and if the viewers access the website
using FF or Chrome then whether they will the be able to see the
visualization that is drawn using the csv data.

Meanwhile, I think that if I use data in a json format then it does
need to be on a server; and one does not even need FileReader api for
that. So that could be a possibility for what I want to do.

Thanks again for the links.

On Feb 10, 7:31 pm, Kai Chang <kai.s.ch...@gmail.com> wrote:
> I have a working example of this here. The code that does the upload and
> converts to a js object is inline.
>
> http://exposedata.com/parallel/upload.html
>
> To get the local upload working, I use the new FileReader api.
> Unfortunately it isn't supported in IE/Safari, but great for prototyping in
> Chrome/FF:
>
> https://developer.mozilla.org/en/DOM/FileReaderhttp://caniuse.com/filereader
>
> I use readAsText to get the text of the CSV, and then d3's csv.parse to
> turn it into JS:
>
> https://github.com/mbostock/d3/wiki/CSV
>
Reply all
Reply to author
Forward
0 new messages