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

▶ d3.js 튜토리얼 :: ⑦ CSS규칙을 적용하는 일반적인 방법 세 가지이 글에서는, HTML문서에 CSS 스타일 규칙을 적용하는 일반적인 방법 세 가지에 대하여 살펴보려고한다.이 역시 D3를 활용하기위해 알아야할 기본적인 개념이기 때문에, 확실히 알고있는 사람이 아니라면 한번 쭉 읽어보는 것이 좋을 것 같다. HTML문서에 CSS스타일 규칙을 적용하는 방법 3가지스캇머레이(2014)는 CSS스타일규칙을 적용하는 방법을 3가지로 나누어 설명하고있으며, 그내용은 다음과 같다. CSS스타일 규칙을 적용하는 방법 3가지 ① CSS를 HTML에 넣기② 스타일시트 파일을 HTML에서 참조하기③ HTML에 인라인 스타일 추가하기 [ 자료 : 스캇 머레이 지음, 변치훈 옮김, 『D3.js : 쉽고 빠른 인터랙티브..

▶ d3.js 튜토리얼 :: ⑥ CSS의 구성과 선택자 CSS(Cascading Style Sheets)CSS는 DOM의 시각적 표현을 꾸미는 데 사용한다. CSS의 구성CSS는 선택자(Selector)와 프로퍼티(property)로 구성된다. 선택자 뒤에는 중괄호로 감싼 프로퍼티 목록이 따 온다. 프로퍼티 목록 내 각 프로퍼티 명과 그 값은 콜론(:), 각 라인은 세미콜론(;)으로 구분한다.이처럼 중괄호로 감싼 프로퍼티 코드 덩어리를 CSS 규칙(CSS rule)이라고 말한다. CSS의 선택자(Selector)스캇머레이(2014)는 D3가 필요한 문서를 찾을때 CSS의 선택자를 사용하기때문에, 이에대한 사용법을 이해해 두는 것이 중요하다고 말했다. 선택자는 어떻게 활용할 수 있을까? 선택자는 스타일을 ..

▶ d3.js 튜토리얼 :: ⑤ 웹브라우저의 개발자도구 & 렌더링 크롬, 사파리, 파이어폭스 등과 같은 웹브라우저에서 제공하는 [소스보기]기능으로 HTML의 원시코드를 보여준다. 하지만 D3나 자바스크립트 코드가 실행 된 상태에서는 형재 DOM 상태가 동적으로 완전히 달라지기도 한다. 이런 경우 [소스보기]는 유용하지 않다. 34쪽. 브라우저의 [개발자 도구]를 사용하면 DOM의 현재 상태 보기가 가능. ▶크롬 : [보기] - [개발자 정보] - [개발자 도구]▶파이어폭스 : [도구] - [웹 개발자 도구] - [개발자 도구]▶사파리 : 먼저 개발자 도구를 사용하도록 설정하고, [Safari] - [환경설정] - [고급] 위와 같이 각 웹브라우저 별 [개발자 도구]탭을 클릭하여 [웹 속성보기]를 클릭한다..

▶d3.js 튜토리얼 :: ④ HTML의 속성과 DOM 이해하기 이번 글에서는 저번 글에서 말한대로, 속성(attribute)에 대한 내용을 정리해보고자 한다. 이번 내용은 《D3.js :: 쉽고 빠른 인터랙티브 데이터 시각화》의 내용을 참고했다. 속성은. 프로퍼티명과 프로퍼티 값으로 되어있다.복잡해보이는 문서요소도 자세히 살펴보면 아주 단순한 "기준"같은 것이존재한다. 이번에 살펴보고자하는 "속성"역시 마찬가지이다. 프로퍼티 명 뒤에는 등호(=)가 오고 값은 큰 따옴표로 감싼다.문서요소에는 각기 다른 속성이 적용된다. 예를들어 a 태그에는 링크를 위해 URL을 지정하는 href속성을 쓸 수 있다.*href는 'HTTP reference'의 약자이다. The D3 website 물론 id와 class처럼..

▶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에서 전체 코드를 다운로드받..

▶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패키지의 문법은 데이터기반으로 기하학적 객체들(점, 선, 막대 등)에 미적 특성(색상, 모양,크기)를..