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

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

▶R의 시각화 패키지 :: The Lattice Plotting System The Lattice Plotting System in R - R의 Lattice 플로팅 시스템(이하 Lattice)은 R에서 기본 플로팅시스템과 작동방법이 많이 다르다. - Lattice는 다차원의 데이터를 사용하려고 할 때, 한번에 많은 플롯을 생성할 수 있다는 점에서 유용하다. 또한 Lattice에서는 기본 플로팅 시스템의 방법을 'mfrow'와 'mfcall'이라는 인수를 통해 활용할 수 있다. - Lattice는 높은 밀도의 플롯을 효과적으로 그려내는데 최적화 되어있으며, 그밖에 여러 목적에 따라 활용되고있다. 이글에서 'Lattice'에 대해서 다루고있는 내용 - Lattice 시스템의 기능 - Lattice 시스템의..

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

▶Processing :: 프로세싱의 오디오기능 - Minim라이브러리 이번에 살펴볼 것은 프로세싱에서의 오디오기능입니다. 어려운것은 아니고 가장 기초적인것인데, 어떤 메커니즘인지 정리해둘 필요가 있을 것 같았습니다. 먼저 이번 예제에서 사용할 audio샘플을 함께 첨부하겠습니다. 따르르릉하고 짧게 울리는 벨소리이며 wav형식이며, 프로세싱작업 파일 내 data폴더에 넣어두시면 됩니다. 프로세싱 실행후 가장 먼저, 이번예제에서 적용해볼 Minim라이브러리를 로드해줍니다. 그다음으로 살펴볼 것은 setup부분입니다. 뒤에서 볼 수 있겠지만, bell클래스는 bell(x, y, r, filename)의 형태로 이루어져있습니다.따라서 이번 예제에서 벨은 화면 중심에서(width/2, height/2) 반지름이..

▶함께배우는 프로세싱 : 대한민국 와이파이 지도 만들기 안녕하세요 오늘은 프로세싱을 활용하여 '대한민국 와이파이지도'를 만드는 과정에대해서 살펴보려고합니다. 완성된 동영상을 먼저 확인해보겠습니다. [프로세싱으로 만든 우리나라 와이파이지도] 흰배경에 다른색상으로 표시할 수도 있었지만 개인적으로는 검은색배경에 흰색으로 표시하는것이 가장 보기에 편한 것 같았습니다. 사용한 데이터는 공공데이터포털에서 얻었습니다. 미래창조과학부에서 공개한 이 데이터에는 각 와이파이의 위치정보, 지역명, 용도 등 다양한 정보가 정리되어있습니다. 공공데이터포털에서 'WIFI DB'를 검색하시면 다운로드받으실 수 있습니다^^ 다운로드 받은 파일을 열어보시면 총 288,762개의 와이파이에 대한 정보가 들어있습니다. 이 중에서 위 사진..