시각화 134

▶프로세싱 활용노트④ :: 시간관련 함수들 - time, day, hour 등

▶프로세싱 활용노트④ :: 시간관련 함수들 - time, day, hour 등이번글에서는 프로세싱의 함수 중에서 시간과 관련된 함수에 대해서 살펴보려고 한다. 시간 관련함수 "들"이라고 적어놨지만, 우리가 이미 알고있듯이 기본적으로 시간은 '년, 월, 일, 시, 분, 초", 그리고 조금 더 세부적으로 들어가 "밀리세컨드"라고 불리는 천분의 일초까지만 사용한다. (여기서 살펴볼 함수는 그리 많지 않다는 것이다.) 프로세싱에서제공하고 있는 시간관련 함수종류day()hour()millis()minute()month()second()year()종류는 위와 같으며, 각각의 함수들은 심플하게 자신의 이름에 걸맞는 값들만 반환한다. day() 작업을 처리하는 컴퓨터의 시계를 기준으로 하며, 1부터 31까지의 값을 반..

▶함께배우는 프로세싱 :: KEY의 활용

▶함께배우는 프로세싱 :: KEY의 활용이번글에서는 프로세싱에서 KEY를 활용하는 방법에 대해 살펴보려고 한다. 프로세싱에서는 사용자의 key입력신호를 바탕으로 시각화하는데 사용할 수 있도록, 여러가지 관련함수를 제공하고 있다. 프로세싱 시각화 콘텐츠에서 key값은 여러가지 용도로 사용된다. 1. 시각화결과물에 사용자가 탐색을 할 수 있도록 하는 경우2. 콘텐츠 제작중에 제작자가 여러가지 형태나, 범위를 보고자 할 경우 1번의 경우는 최종적인 결과물에 사용자가 조작가능하도록 key 기능을 포함시키는 것이다. 예를들어 키보드 화살표 '↑↓→←'를 통해 전체적인 구조를 살펴볼 수 있도록 하거나, 특정 키 값('+', '-'등)을 직접 지정하여 줌인아웃하는 경우등이 있다. 다른 글에서 살펴봤던 kepler시각..

▶함께 배우는 프로세싱 :: Processing - bezierVertex

▶함께 배우는 프로세싱 :: Processing - bezierVertex이번 글에서 살펴볼 내용은 프로세싱으 도형관련 함수 중 bezierVertex()이다. 이 bezierVertex()는 인자로 앵커포인트와 제어점, 시작점등의 인자를 포함하고 있어야 한다는 점에서 다른 도형함수들보다 활용하기 어려운 함수로 꼽힌다. rect()등의 기본함수의 경우 굳이더 설명할 필요가 없겠지만, bezierVertex()함수라면, 꼼꼼하게 정리해둘 필요가 있겠다는 생각이 들었다. bezierVertex()vertex Bezier 곡선 좌표를 지정한다.이 bezierVertex()를 호출 할 때마다 선 또는 모양에 새로운 선분을 추가하는데 추가되는 내용은 다음과 같다. bezierVertex()함수를 호출 할 때 추가..

▶ d3.js 튜토리얼 :: ⑧ clipPath로 문서요소 다루기

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

시각화/D3.js 2015.03.13

this의 사용

xScale과 yScale에서의 .domain()의 사용방법 xScale에서는 .domain( value )형태로 사용되었고, yScale에서는 .domain( [a,b])의 형태로 사용되었다. 이렇게 구분해서 사용한 이유는 표현하고자하는 방법에 차이가 있기 때문이다. xScale에서의 사용법이 예제에서는 x축을 '분절된 이산범위'로 활용하고자 d3.scale().ordinal()을 명시했다. 이에따라 .domain( ***)안에는 수열을 생성하는 d3.range(dataset.length)가 들어가게 된 것이다. 여기에 더해 함께 설명하자면, .rangeRoundBands([0,w], 0.05)는 d3.range(data.length)로 데이터셋크기만큼의 수열을 정의역으로 설정하였기에, 화면에 출력할 ..

시각화/D3.js 2015.03.13

▶ISSUE:: 기상청 기상데이터 부분유료 공개?

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

시각화/D3.js 2015.03.12

▶ d3.js 튜토리얼 :: ⑦ CSS규칙을 적용하는 일반적인 방법 세 가지

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

시각화/D3.js 2015.03.09

▶ d3.js 튜토리얼 :: ⑥ CSS의 구성과 선택자

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

시각화/D3.js 2015.03.09

▶ d3.js 튜토리얼 :: ⑤ 웹브라우저의 개발자도구 & 렌더링

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

시각화/D3.js 2015.03.09

▶d3.js 튜토리얼 :: ④ HTML의 속성과 DOM 이해하기

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

시각화/D3.js 2015.03.07