[D3.js] CSV 파일 읽는법

[D3.js] CSV 파일 읽는법

---

Data 형식이 CSV파일로 되어 있을 때 CSV 파일을 D3.js에서 읽는 실험을 간단히 해보도록 하죠. 엑셀로 DB작업을 했을 때 그 파일을 CSV 파일형식으로 변환을 많이 합니다. CSV 파일 형태로 된 데이터를 많이 다루게 됩니다. D3.js에서 CSV 파일을 어떻게 읽어오는지 알아두시면 좋겠죠.

1. 크롬 웹브라우저에서 파일 열기

---

D3.js의 결과를 보기 위해서 웹브라우저 창에서 열게 됩니다. CSV 파일을 웹브라우저에서 읽고 결과를 출력하기 위해서는 사전 세팅이 필요합니다. 제가 처음에 연습했을 때는 그냥 ATOM 편집기를 이용하여 가상 웹서버 플로그를 통해 http형식으로 열어 CSV 파일을 쉽게 열었는데 ATOM 편집기가 안깔린 노트북에서 실험을 하다 보니 크롬 웹브라우저 "file:///C:/" 열면 Cross domain 문제로 ERROR가 발생합니다. "보안 어쩌구 저쩌구" 문제로 열리지 않습니다. 그래서 크롬 속성창의 속성 정보를 수정해야 합니다.

크롬 속성창에서 대상 부분에 "--allow-file-access-from-files "를 추가하면 되는데 제 노트북에서 안되더군요. 그래서 검색을 좀 하니 저와 같은 문제를 해결한 post가 있어 겨우 크롬 문제를 해결했네요.

• 출처 : http://haru.kafra.kr/68

삽입 문장 : "--disable-web-security --user-data-dir"

삽입 할 문장은 아래 그림에서 대상 부분에 이여서 삽입문장을 복사해서 붙이시면 됩니다.

2. CSV 파일 열기

---

[data.csv]

(1) 버전 4에서 열기

---

d3.csv("data.csv", function(error, data) {
  if (error) throw error;
  console.log(data);
});

[결과] 크롬

(2) 버전 5에서 열기

---

• 변경 사항 출처 : https://github.com/d3/d3/blob/master/CHANGES.md

---

버전 5에서는 기존의 버전4 d3.csv()함수는 작동하지 않고 변경 되었네요. 위 출처에 가셔서 한번 어떤게 바뀌게 되었는지 읽어 보시기 바랍니다.

d3.csv("data.csv").then(function(data) {
  console.log(data);
});

[결과] 파이어폭스

위 코딩도 지원하는 최신 웹브라우저에서 사용이 가능 하고 구버전에서는 작동이 되지 않더군요. 좀 불편하다면 그냥 버전 4로 기존 방식을 사용하는게 좋을 듯 싶네요. 크롬 버전이 낮아서 그런지 크롬에서 정상작동하지 않아서 파이어폭스로 실행해 보았네요.

3. ATOM 편집기에서 열기

---

웹브라우저의 속성창을 수정 할 필요 없이 그냥 열 수 있습니다. 처음부터 ATOM에서 연습하시면 귀찮은 부분은 없어집니다.

다운받아서 설치하시면 그냥 단순한 편집기로 별 다른 기능은 없습니다. 패키지를 설치해야 하는데 여러분들이 공부하고 싶은 패키지를 검색하셔서 설치하시면 됩니다. 오늘 post의 실험을 하기 위해서는 preview HTML 패키지를 설치하시면 됩니다. 혹시 가상서버로 여시고 싶을 때는 Live Server 패키지를 설치하시면 됩니다. 참고로 여러가 패키지가 있는데 각자 선호하는 기능들이 다르기 때문에 구글 검색에서 ATOM 편집기에 사용하기 좋은 패키지를 한번 검색하셔서 원하는 패키지를 설치하시기 바랍니다.

(1) 버전 4 CSV 파일 열기

---

(2) 버전 5 CSV 파일 열기

---

마무리

---

버전 5에서는 CSV()함수가 좋아졌는데 좀 불편한 감이 없잖아 있네요. 계속 개선은 되는데 개선 될 때 마다 버전 별 코딩이 바뀌니깐 매번 체크해 줘야 한다는 점이 D3.js를 공부하는 장애가 되고 있네요. 현재까지 잘 사용하던 함수가 새로운 버전이 나와 바뀌게 될 경우 코딩에 에러가 발생한다는 점이 지금 써먹지 못한다면 구지 최신 버전에 맞게 공부 할 필요성이 있는지라는 코딩 의욕을 꺾는 요소가 되는 것 같아요.