[D3.js] CSV 데이터 불러오기

CSV란 콤마로 구분된 데이터를 의미하며 엑셀을 이용하여 쉽게 만들 수 있습니다.

Food,Deliciousness

Apples,9

Green Beans, 5

Egg Salad Sandwich,4

Cookies,10

Vegemite,0.2

Burrito,7

위와 같은 CSV 파일을 만들었다.

CSV 파일의 각 줄에는 필요한 개수 만큼의 값이 있고 위 파일은 두 개의 값을 가지고 있다.

값은 콤마로 구분이 되며 파일의 첫 줄은 데이터의 "컬럼 명"을 제공하는 헤더가 되기도 한다.

자 이제 위 CSV 파일을 D3를 이용해서 데이터를 불러와 보겠다.

CSV() 메소드는 두 개의 전달 인자를 받는다. 

CSV 파일을 불러올 경로를 나타내는 문자열과 콜백 함수로 사용될 익명 함수이다.

콜솔에 출력 된 배열을 살펴 보면 아래와 같습니다.

에러를 확인 하고 싶다면 아래와 같은 코드를 사용하면 된다.

만약에 가지고 있는 데이터가 탭으로 분리된 TSV 파일 이라면 d3.csv 가 아닌 d3.tsv메소드를 사용하면 된다.