[D3.js] Bar Chart 온라인에디터

---

• Bar chart code generator and online editor :
  http://www.d3-generator.com/

---

오늘은 D3.js 관련 자료들을 검색하다가 재밌는 온라인에디터가 있어 짧게 소개합니다. Bar Chart만 온라인 상에서 쉽게 만들고 완성된 차트의 소스를 복사해 올 수 있으면 따로 외부로 차트를 보낼 수도 있는 에디터인데 초보분들에게 있서 코딩 공부용으로 좋을 것 같아서 소개합니다.

Bar Chart 온라인에디터

---

위 링크 주소로 가면 메인 창은 보시는 것 같이 딱 한페이지로 구성되어 있어서 따로 설명드릴 것은 없는 것 같아요.

위 그림에서 보시는 것 처럼 Data Editor와 Bar Chart configuration 부분만 수정하거나 지정하면 다음과 같은 형태로 출력이 이루어지네요.

보시면 2번의 Bar Chart coniguration에 지정한 뒤에서 Generate Chart 버턴을 누르면 3번 Source Code Editor 부분의 코딩이 자동으로 생성 됩니다. 4번 Preview에 차트가 만들어 지네요. 그리고 3번 Source Code Editor에 자동으로 생성 된 코딩을 직접 수정할 수 도 있네요. 그리고 Export HTML로 넘어가시면 다음과 같은 창이 뜹니다.

이처럼 복사하거나 HTML로 차트를 출력되게 해놓았네요.

마무리

---

별다른 기능은 없고 딱 Bar Chart에 대해서 공부하기에 좋은 에디터이고 이 틀을 기반으로 정리를 잘해놓으면 다른 다양한 차트도 쉽게 만들 수 있을 것 같네요. 오늘은 월요일이고 별다른 내용은 없고 딱 한페이지짜리 사이트를 소개 합니다.

한번 링크가 걸린 주소로 가셔서 간단하게 수정하거나 지정해주고 나서 자동으로 코딩이 어떻게 생성이 되었는데 소스를 분석해보시고요 data 값을 수정하여 차트가 어떻게 바뀌는지 체험해보는 시간을 가져 주세요.

---

_{Sponsored ( Powered by dclick )}