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

▶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의 매력은 인터랙티브한 콘텐츠를 웹상에서 구현할 ..

▶함께배우는 프로세싱 :: Kepler2012 이번글에서는 프로세싱을 이용하여 데이터시각화를 제작한 예인 "kepler2012"코드를 하나 하나 뜯어보고자한다. kepler2012 시각화소개데이터시각화 전문가 Jer Thorp이 미 항공우주국(NASA)의 케플러 프로젝트의 일환으로 제작한 것이다. 제작자는 2012년에 Kepler2012라는 이름으로 1,236개에 달하는 행성데이터를 바탕으로 인터랙티브한 시각화를 제작하였으며, 부지런(?)하게도, 이후 1,091개의 행성을 업데이트했다. 이번예제에서 다룰 것은 "kepelr2012"로, 2012년 버전이다. 제작자의 Github주소 : http://github.com/blprnt/Kepler-Visualization 위의 url에서 전체 코드를 다운로드받..

▶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천개이고, 관..

▶함께배우는 프로세싱 :: generative design M6.1 Spring 이번 글에서는 generative design에서 제공하고있는 예제 중 각 노드를 spring으로 연결하는 예제를 살펴보고자 한다. 이 예제를 통해 확인할 수 있는 결과는 아래의 영상과 같다. SPRINGS AS CONNECTIONS. 연결된 노드들을 연결하는 것은 "Force directed layout'에서 두 번째로 중요한 요소이다.이러한 연결들(connections)은 일정 길이를 초과하지않도록 스스로 제한 하도록 해야한다. 스프링(SPINRG)의 개념은 이러한 목적을 위해 일반적으로 사용되는 방법중 하나이다. 알고리즘 위에서 설명한 이유로, 스프링의 알고리즘은 멀리떨어져 있다면 각각의 대상이 서로를 향해 이동하도록 ..

▶R의 데이터시각화 패키지 :: Color Package 활용하기 이번글에서는 우리가 R에서 plotting을 할 때, 색상관련기능들을 어떻게 효과적으로 활용할지에 대해서 정리해보고자 한다. R에서 기본적으로 제공하고있는 색상 구성표에 대하여 R에서 제공하는 기본적인 색상 구성표는 끔찍하다. 사실, 기본적으로 R이 통계프로그램이라는 점에서보면 그리 놀랄일도 아니다. 다행히도, 최근까지 R은 다양한 plot, graph 등의 색상을 다루거나 명확하게하는 부분에 있어서 많은 개발이 이루어져왔다는 점이다. 또한, 이밖에도 R에서는 기본 색상표를 가뿐히 능가하는 다양한 외부 패키지를 불러올 수 있기때문에 적어도 우리가 색상에 관심을 갖고 있는 한, R의 기본 구성표로인해 애를 먹을일은 없다. Colors 1, ..

▶EDA :: 계층적 클러스터링[Hierarchical clustering] 이번 글에서는 계층적 클러스터링[Hierarchical clustering]에 대하여 살펴보고자한다. 계층적 군집방법 [Hierarchical Clustering] 고차원 또는 다차원 데이터를 시각화하는 데 있어 기본적인 방법 중 하나이며, 사용하기에 매우 간단하다. 아이디어가 대부분의 사람들에게 매우 직관적이며, 고차원의 데이터 셋에서 어떤 일이 일어나고 있는 지에 대해 빠르게 확인할 수 있는 방법이다. 군집분석[Cluster Analysis]의 사전적 정의균일한 하부 그룹에서 여러 개체들을 그들의 상호 유사성이나 계층 관계 등에 기초하여 배열하는 절차를 말한다. 출처 : [네이버지식백과] 군집분석, 지구과학사전, 2009.8..

▶R의 데이터시각화 패키지 :: ggplot2 ① ggplot2는 R의 그래픽패키지이다. 《R로 만드는 데이터시각화》의 저자인 전희원씨도 ggplot을 자주 활용하고 있고, Oreilly에서 펴낸 《R Graphics Cookbook》에는 ggplot2에 대한 내용이 따로 한 챕터를 구성하고 있을 만큼, R에서 시각화를 다룰때 있어서 보편적으로 많이 다루고 있는 패키지라고 할 수 있다. ggplot패키지를 개발한 것은 해들리위캠(Hadley Wichkam)교수이다. 한 특강에서 듣기로, R은 해들리위캠의 ggplot이 만들어지기 '이전'과 '이후'로 나눠질정도라고한다. ggplot2이란? 이 ggplot2패키지의 문법은 데이터기반으로 기하학적 객체들(점, 선, 막대 등)에 미적 특성(색상, 모양,크기)를..

▶R의 시각화 패키지 :: The Lattice Plotting System The Lattice Plotting System in R - R의 Lattice 플로팅 시스템(이하 Lattice)은 R에서 기본 플로팅시스템과 작동방법이 많이 다르다. - Lattice는 다차원의 데이터를 사용하려고 할 때, 한번에 많은 플롯을 생성할 수 있다는 점에서 유용하다. 또한 Lattice에서는 기본 플로팅 시스템의 방법을 'mfrow'와 'mfcall'이라는 인수를 통해 활용할 수 있다. - Lattice는 높은 밀도의 플롯을 효과적으로 그려내는데 최적화 되어있으며, 그밖에 여러 목적에 따라 활용되고있다. 이글에서 'Lattice'에 대해서 다루고있는 내용 - Lattice 시스템의 기능 - Lattice 시스템의..

▶함께배우는 프로세싱 :: generative design P.2.2.3 Shape from agents 이번 글에서는 generative design에서 제공하고있는 예제를 살펴보려고합니다. 마우스를 클릭하면 그 지점을 기준으로 새롭게 agent들의 위치가 설정됩니다. (클릭위치에 도형생성) 이렇게 설정된 위치에 curveVertex()로 꼭짓점을그리게 되고, 각 꼭짓점은 유연한 곡선으로 이어지며 형태를 이룹니다. // 기본 세팅 부분int formResolution = 15; // 출력형태 해상도설정float[] x = new float[formResolution]; // formResolution에서 설정한 수 만큼 배열 생성float[] y = new float[formResolution]; //..