시각화를 배우고 정리합니다

▶d3.js 튜토리얼 :: ③ HTML의 마크업형태와 문서요소 살펴보기 이글에서는 HTML의 마크업형태와, 문서요소에대한 내용을 살펴보고자한다. 내용에 들어가기에 앞서, d3.js로 시각화하는 방법을 배우러왔는데, Markup이나, DOM과 같은 당황스러운 용어먼저 짚고넢어가는 이유에 대해 살펴보는 것이 좋을 것 같다. 마크업(Markup)은 기본적으로 DOM에 문서요소(element)를 생성하기 위해서 태그(tag)를 추가하는 과정이다.그렇다면, DOM은 또 뭘까? d3.js의 저자 스캇머레이는 책에서 DOM에대해 다음과 같이 설명하고 있다. DOM 이란? DOM(Document Object Model)이란 단어는 HTML의 계층적 구조를 나타내며, 한 쌍의 각 태그(어떤 경우는 단일 태그)들은 계층구..

▶d3.js 튜토리얼 :: ② d3.js 를 배운다는 것이란? 스캇머레이(2014)는 저서《d3.js》에서, D3를 배우는 것을 "데이터를 불러오고, 엮어서, 문서요소를 변환, 전이시키기 위해 사용할 문법을 배우는과정"이라고 소개한 바 있다. 뭔가 두루뭉술한 느낌이 든다면, 조금더 세부적으로 D3의 기능에 대해서 살펴보자. 개인적으로, D3는 "어려운만큼 유연한 것"이라고 생각한다. 사실 우리는 엑셀이나 파워포인트에서도 꽤 많은 그래프를 별다른 노력없이도 그릴 수 있었다. 조금 더 나아가서는 일러스트레이터와 같은 그래픽프로그램으로 보정하여 아름다운 그래프들을 만들어낼 수 있다. 그런 편한 방법들을 뒤로하고, 이렇게 D3를 배우고자하는 이유는 무엇일까? D3의 매력은 인터랙티브한 콘텐츠를 웹상에서 구현할 ..

▶d3.js 튜토리얼 :: ① d3.js 이해 및 설치 D3는 데이터 중심의 문서(Data-Driven Documents)라는 긴 이름의 약어다. 여기서 데이터(data)는 여러분이 가진 데이터를 의미하고, 문서(document)는 HTML이나 SVG처럼 웹 브라우저에서 렌더링 할 수 있는 웹 기반 문서를 말한다. D3는 웹문서를 데이터 중심으로 다룬다(drive). D3의 공식사이트 주소 : http://d3js.org D3의 핵심개발자의 GithubD3는 여러개발자들의 힘이 모아졌지만, 그중에서도 핵심 개발자는 영국 출신의 마이크 보스탁이라고 한다.d3는 완전히 오픈소스이고 Github에서 자유롭게 받을 수 있다. 아래보이는 사진은 마이크보스탁의 Gitghub로, d3관련 저장소가 2만5천개이고, 관..