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

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

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