5월, 2016의 게시물 표시

D3의 창시작인 엠보스톡의 워크샵 정리하기

링크 :  https://bost.ocks.org/mike/d3/workshop/#0 D3 Workshop - Mike Bostock 서문 D3는 표준인 HTML과 SVG를 이용하여 새로운 시각화를 쉽게 만드는 것입니다. 따라서 현재 사용되고 있는 도구들인 CSS나 디버거들을 모두 자유롭게 사용할 수 있습니다.  시각화는 데이터로부터 DOM( Document Object Model-W3C )을 생성하는 것입니다. 또한 DOM은 데이터가 변화하는 것과 연동하여 업데이트되어야 합니다. D3는 데이터와 엘리먼트 간의 맵핑(mapping)을 도와줄 수 있습니다.  D3를 배우는 것은 Web 표준을 배우는 것이며, Web 표준을 배울 수 있는 방법은 상당히 많습니다.  HTML5 HTML5 스펙 은 많은 도움을 줍니다. 또한 스펙들은 기술들을 이해하는데도 많은 도움을 줄 수 있습니다. SVG SVG(Scalable Vector Graphics) 는 브라우저상에서 벡터 그래픽을 그리는데 사용됩니다. 여러분들은 오직 HTML만을 가지고 간단한 바 차크를 만들수 있습니다만, 여러분 대부분은 데이터를 시각화하는데 SVG를 사용하길 원할 겁니다.  SVG의 간단한 예제는 다음과 같습니다: <!DOCTYPE html> <meta charset="utf-8"> <svg width="960" height="500"> <text y="12"> Hello, world! </text> </svg> HTML의 이미지 태그처럼 HTML 내에서 바로 SVG를 사용할 수 있습니다. 물론 D3를 사용하면, JavaScript에 의해 SVG가 생성될겁니다. 때때로, 여러분이 수동으로 SVG를 사용할 수도 있습니다.  CSS HTML이나 SVG와는 달리, CSS(Casca