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

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

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

▶함께배우는 프로세싱 :: 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]; //..

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

▶함께배우는 프로세싱 :: 위치데이터로 원그리기 ① 이번 포스팅에서는 VisualizingData - chapter 3: mapping부분에 대해서 정리해보았습니다. - table class- location파일의 의미 red dot예제의 결과모습입니다.미국 각 주의 위치에 원이 그려져있는 모습입니다. 여기서는 '어떻게 각 주의 위치에 그렸는지'가 중요합니다. 프로세싱에서 원을그리기가 아무리 쉽다고 하지만, 일일이 모든 좌표를 입력하기에는 무리가 있습니다. ellipse(470, 300, 9, 9);ellipse(302, 200, 9, 9);ellipse(410, 202, 9, 9).........이건 무리! 저자는 tsv형식의 'locaion'이라는 파일에서 정보를 불러왔습니다. 예제폴더내의 'data..

이번 포스팅에서 살펴보고자 하는것은 [R-studio]를 이용한 [공간시각화]입니다. 먼저 R-studio를 실행한 뒤, [maps]패키지를 불러옵니다.library(maps) 이어서 미국 코스트코의 정보데이터를 불러와줍니다.costcos