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

▶ d3.js 튜토리얼 :: ⑧ clipPath로 문서요소 다루기이번에 살펴볼 것은 clipPath()기능이다. "클립패스"라는 이름에서 포토샵이나 일러스트에서 활용하는 "클리핑 마스크"를 떠올린 사람이있을 것이다. 그렇다. 이 clipPath는 포토샵이나 일러스트레이터에서 클리핑마스크라고 불리는 기능과 동일하게 기능하는 메서드이다. D3에서 clipPath는 SVG문서요소이며, 이 메서드를 적용하면, 메서드가 적용된 부분(영역)만 화면에 출력되게 된다.포토샵이나 일러스트를 몰라도 상관없다. 용어가 복잡해 이해가 어렵다면 아래에서 clipPath 전&후 비교사진을통해 다룰 내용을 어렵지않게 추측해볼 수 있을것이다. 여기서 중요한 것 "clipPath가 적용되면, clipPath로 덮인 픽셀만(부분만) 화..

▶ISSUE:: 기상청 기상데이터 부분유료 공개?지난 3월 11일, 기상청은 '기상산업진흥법' 하위 시행령 및 시행규칙 일부개정안을 입법예고했다. 이번 개정으로 올해 8월부터는 일반인도 기상청의 위성·레이더 자료 등의 기상데이터를 이용할 수 있게되었다. 그동안 이 데이터는 비공개되어왔던 것은 아니고, 기상분야의 민간사업자에게 제공되던 것을 일반이용자에게까지 이용범위를 넓히는 상황이다. 기상청은 일반이용자의 이용수수료를 민간사업자에게 부과하던 수수료와 동일하게 산정했다. 따라서 일반이용자들이 이를 이용하기위해서는 각 서비스에 따라 10만원 안팍의 이용료를 기상청에 지불하여야한다. 여기서 말하는 서비스이용료란, '1개월 이용료'를 의미하고, 기상데이터의 세부영역별로 금액이 별도로 산정되어있기때문에, 단순한 ..

▶ 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의 계층적 구조를 나타내며, 한 쌍의 각 태그(어떤 경우는 단일 태그)들은 계층구..

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

▶Design :: 데이터시각화와의 사례 - 나이팅게일과, P&G의 데이터시각화 이번 글에서 살펴볼 내용은 데이터시각화(Data Visualization)의 사례이다. 많은 데이터시각화 사례들이있겠지만, 그중에서도 오늘은 나이팅게일의 로즈다이어그램(Rose diagram)과 P&G의 비즈니스스피어(Business Sphere)에 대해서살펴보고자한다. 데이터시각화의사례 - 나이팅게일의 로즈다이어그램(Rose diagram) 언뜻보면 파이차트와 비슷한 로즈다이어그램. 그런데 조금만 살펴보면 파이차트와는 분명히 어딘가 분명히 다르다는 것을 눈치챌 수 있었을것이다. 파이차트가 데이터의 퍼센테이지를 각도로 표현해내는 반면, 로즈다이어그램(나이팅게일차트)는 여기에 더하여 ‘면적’에 다라 데이터를 비교해볼 수 있도록..

▶시각화노트 :: 데이터시각화 기술의 활용 분야 및 활용사례 '아톰시대에서 비트의 시대로'패러다임이 변화하면서, 지식정보사회에서 '정보'의 중요성이 더욱더 커지고 있습니다. 이러한 시대적 흐름 속에서 우리가 어렵지 않게 찾아볼 수 있는 변화라고 한다면 '시각화 기술의 진화 및 발전'을 이야기할 수 있습니다. 이번 포스팅에서는 시각화기술의 관련 개념 을 먼저 살펴본 뒤, 데이터시각화의 여러가지 방향을 정리하고, 마지막으로 사례를 이야기 해보려고합니다. 구글트렌드에서 data visualization을 검색한 결과입니다. 국가별 검색량을 상대적으로 나타내기때문에 전세계적인 검색량을 골고루 알 수 있는 것은 아니지만, 많은 나라중에서 우리나라가 특히 관심을 갖고 있다는 것을 알아볼 수 있습니다. 또한 검색엔진..