미세먼지 데이터 시각화하기까지

가 +
가 -

데이터 수집과 시각화는 별개의 작업이다. 아두이노 미세먼지 측정기가 수집한 데이터를 기사 내에 실시간 그래프로 표시하기 위해서는 부차적인 소프트웨어 개발이 필요했다. 일단 데이터 시각화 도구로 자바스크립트 라이브러리인 ‘D3’를 선택했다. D3는 <뉴욕타임스> 등 세계 유력 언론들이 데이터를 시각화할 때 가장 빈번하게 활용되는 도구다. 하지만 D3로 작성된 코드를 기사 내에 삽입하기란 쉽지 않다. 이 과정을 포함한 일련의 구축 과정을 Q&A 형태로 풀어봤다._편집자

code

1단계 : 미세먼지 농도 데이터 모으기

아두이노 미세먼지 측정기에서 보내는 데이터를 모아야 측정된 상태를 볼 수 있고, 분석도 할 수 있다. 당연히 데이터를 지속적으로, 잘 모아야 한다.

Q. 데이터는 어떤 방식으로 입력받았나?

측정기에서 값을 전달하는 방식은 http 통신을 통해 GET 방식의 요청을 하도록 구성되어 있다. 예를 들면 http://www.example.com/data_update?id=xxx 처럼 도메인 뒤에 파라미터를 통해 값을 전달한다. 리퀘스트(Request)에 대해서는 입력이 성공했을 경우 1을, 실패했을 경우에는 –1을 반환한다. 하지만 URL을 통해 값을 전달 받기 때문에 제어를 하지 않으면 손쉽게 공격받을 수 있다. 때문에 데이터를 요청하는 대상이 누구인지 확인을 해야 한다.

Q. API를 제공하는 방식은? 

구글, 애플, 페이스북, 네이버 같이 외부에서 데이터를 사용하도록 공개하는 사이트들은 각자의 API를 제공한다. 정적인 데이터 입력 환경을 구성하기 위해 <블로터> 역시 API를 제공하기로 했다. API를 제공할 때에는 일반적으로(반드시는 아니다) 키(Key)가 필요하다. API를 통해 데이터를 입력·이용하려는 대상을 인증하기 위해서다. 대체로 널리 쓰이는 방법이 공개키(Public Key)와 개인키(Private Key) 한 쌍을 발급하고 이를 통해 대상을 인증하는 방식이다. 관리자가 직접 키 쌍을 생성하고, 사용하려는 이에게 알려주는 방식을 선택했다. 많은 양의 데이터를 주고받는 형식이 아니기 때문에 관리하기 유용한 방식이라는 판단이 들었기 때문이다.

Q. 데이터 베이스 구성은 어떻게 했나? 

데이터베이스를 구성할 때는 임의의 필드를 9개로 구성하고, 각 필드의 형식은 실수 값으로 지정해주었다. 미세먼지 농도 측정값은 하나이지만, 더 많은 값들이 필요한 경우가 발생할지도 몰라서다. 예를 들면 습도, 온도와 같은 데이터, 미세먼지 농도와 함께 어디에서 측정했는지 알 수 있는 GPS데이터도 입력해 좀더 다양한 분석을 위한 데이터를 모을 수도 있다.

Q. 입력된 데이터는 어떤 식으로 제어하나?

워드프레스의 기본 테이블 구성 클래스를 이용해서 손쉽게 데이터를 보고 삭제할 수 있다. 데이터 표시는 테이블을 이용해 나열하는 방식으로 특별한 특징은 없다.

2단계 : 데이터를 시각적으로 나타내기

Q. 데이터를 표시하기 위해 어떤 라이브러리를 이용했나?

D3.js 라이브러리를 데이터 시각화 도구로 사용했다. 아직은 초보적인 수준이지만 데이터를 수치가 아닌 데이터로 표시하는 것만으로도 상태를 파악하기가 조금 더 쉬워진다. D3는 특별한 템플릿을 제공하는 것은 아니다. 하지만 워낙 다양하게 표현을 할 수 있도록 고안돼 있어서 몇 가지 예제를 살펴보면서 참고했다.

기본적인 값·시간에 관련한 그래프는 라인차트를 참고하면서 추가적인 요소들은 ‘엑스밸류 마우스오버‘를 참고했다.

Q. D3.js를 사용한 이유는? 

특별한 이유보다는 보편적인 이유다. 옵션이나 기능이 다양한 만큼 사용하기 어려운 도구이지만, 데이터를 다루는 데 있어서만큼 강력한 도구라고 생각했다. 다른 도구를 아직 사용해 보지 않은 탓이기도 하다. 정확한 비교는 어렵지만 데이터를 다루는 도구로서, 특히 동적인 데이터를 구성하는 데 매력적인 도구라고 생각했다.

네티즌의견(총 0개)