공부정리

이전 시간에 D3__Data Driven Document에 대해 알아보고 간단한 코드를 사용하여 데이터를 가져와 보았다. 이번에도 이와 비슷한 코드를 가지고 실습을 해보며 익숙해져보고 데이터가 어떻게 동작하는지 알아보자. 아래 코드를 보자. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 var arr = [5, 4, 78, 98, 2.3, "ABC"]; var arr2 = [1,2,3,2.1534,"BCD"]; d3.select("body").selectAll("p").data(arr).enter().append("p").text(function (d) { return "real Data is "+d ..

자바스크립트 라이브러리 중 하나인 D3.js는 데이터 시각화에 사용되는 라이브러리이다. 웹브라우저상에서 동적이고 Interactive한 정보 시각화를 구현하기 위한 자바스크립트 라이브러리이며, 자바스크립트 문법을 취하고, 웹 표준인 HTML, SVG, CSS와 결합하여 강력한 접근성을 제공한다. 자세한 내용은 공식 사이트 https://d3js.org 와 https://github.com/d3/d3/wiki 이곳에서 자세한 래퍼런스와 내용을 공부할 수 있다. 그렇다면 D3를 시작해보자. CSS, HTML, Javascript에 대해 어느정도 알고 있는 상황에서 시작한다. 실습을 할때, 로컬 웹 서버를 통해 페이지에 접근해야 좋다. 필자는 node.js 의 npm을 사용하였다. d3는 체인 문법을 사용한다..