소사이어티

사람들

arrow_downward최신기사

D3.JS

[IT열쇳말] 자바스크립트

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(HyperText Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다. HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다. 자바스크립트는 크로스 플랫폼, 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다. 예를 들어 자바스크립트를 이용하면 ‘버튼을 클릭하면 밑에 날짜를 보여줘’라는 식의 명령을 내릴 수 있다. 자바스크립트를 이용하면 웹에 풍부한 효과를 넣을 수 있지만, 2000년대 초반만 해도 자바스크립트는 개발자들에게 무시당하는 언어였다. 별다른 기능도 없고, 성능도 별로 좋지 않았기 때문이다. 하지만 최근 몇 년 사이에 다양한 자바스크립트 프레임워크와 라이브러리가 생기면서 자바스크립트 생태계는 크게 확장되고 있으며, 그 위상도 점점 높아지고 있다. 1995년 탄생한 동적 언어 프로그래밍 입문자들은 자바스크립트와...

D3.JS

[디블로터] ⑨네이버가 좋아하는 뉴스, 분석해보니

한 주를 건너뛰고 돌아온 디블로터입니다. 저번 주에 놀진 않았고요. 'SDF 넥스트 미디어 챌린지' 행사 참가로 2주간 자리를 비운 황유덕 씨가 오랜만에 돌아와서 그간 배웠던 내용들 복습했습니다. 단순선형회귀 모델 세워보는 연습도 해 봤습니다. 이번 주 디블로터는 ‘네이버 뉴스 스크래퍼’ 제작입니다. 우선 결과물 먼저 보겠습니다. 위 그래프는 11월 한 달간 네이버 주요 뉴스로 배열된 기사의 노출 시간 총합을 그래프로 나타낸 것입니다. 단위는 ‘초’입니다. 수치가 높을수록 네이버에서 주요뉴스로 노출이 많이 됐다는 뜻입니다. 위 그래프를 읽으면서 참고해야 할 사항은 다음과 같습니다 위 그래프는 평균노출 시간이 아니라 노출 시간의 총합입니다. 기사 생산량을 고려하진 않았습니다. 방송사의 경우는 저녁에 주요뉴스가 나오고, 다음 날 아침에 내려가는 경우가 많으므로...

D3.JS

[IT열쇳말] D3.js

주목받고 있는 데이터 시각화 빅데이터가 화두가 되면서 데이터를 표현하는 방법의 하나인 ‘시각화’도 함께 주목받고 있다. 데이터 시각화는 분석과 전달 두 가지 용도로 주로 활용된다. 데이터가 단순히 데이터로서만 존재하면 그 의미를 파악하는 데 시간이 오래 걸리거나 거의 불가능한 일이 되기 십상이다. 수백, 수천만개 데이터를 숫자와 문자로만 확인한다면 데이터가 어떤 흐름을 보여주는지, 어떤 의미를 가지고 있는지 이해하기 어렵다. 데이터 시각화는 데이터의 전체적인 흐름과 경향성을 보여줘 그 함의를 한눈에 파악하게 돕는다. 이처럼 데이터 시각화는 분석의 측면에서 숨겨진 상태로 존재했던 규칙과 동향을 알려주는 데 유용한 방법이다. 데이터 시각화는 표현 면에서도 강력한 도구다. 표현력이 강한 시각화를 방법론으로 이용하기 때문에 수용자에게 짧은 시간에 의견을 전달하기 용이하다....

D3.JS

"꿈꾸는 데이터 디자이너들, 모였어요"

코딩 열풍이다. 디지털-모바일 시대를 맞아 개발 능력의 수요가 증가하면서 코딩 능력도 강조되고 있다. 디자이너도 코딩을 배워야 한다고 하고, 기획자도 개발 지식이 필요하다고 한다. 예전과 다르게 기획자나 디자이너가 코딩을 배워야 하는 이유는 무엇일까? 융합형 인재인 ‘데이터 디자이너’가 모여 있는 스타트업 뉴로어소시에이츠에서 답을 엿보자. 데이터는 더 많은 소통을 일으킬 수 있다 김윤이 뉴로어소시에이츠 대표는 사회에 이바지하기 위해 스타트업을 시작했다고 밝혔다. 김윤이 대표는 “유학도 하고 사회 경험을 하다 보니 높은 자리에 올라가서 뭔가 해보는 건 어렵겠다고 생각했다”라며 “지금부터 눈에 보이는 걸 바꿔가는 게 필요하다”라고 뉴로어소시에이츠의 탄생 배경을 설명했다. 이 과정에서 처음 눈에 들어왔던 게 데이터 시각화다. 김윤이 대표는 "데이터가 책이나 지면에 머물러 있기...

D3.JS

데이터 시각화, 문과생이 직접 도전해봤습니다

문디(Moon.D)는 '디지털 저널리즘+데이터 저널리즘+D3.js'를 공부하는 스터디 모임입니다. 주로 문과생들이 참여하고 있습니다. 그래서 이름도 '문과생들의 디지털 미디어'를 뜻하는 '문디'입니다. 이곳에서 저는 친구들과 함께 위 3가지를 공부하고 있습니다. 지난달까지는 'D3.js'라는 자바스크립트 기반 데이터 시각화 라이브러리를 중점적으로 공부했는데요. 책을 한 권 떼고 나서 새로운 유형을 익히기 위해 다양한 템플릿을 이용한 시각화에 도전했습니다. 우선 전달하고자 하는 내용이 있고, 어울리는 도구를 선택하는 과정에서 시각화를 고르는 게 일반적인 방법입니다. 그러나 목적이 시각화 실습이었던 만큼 ‘시각화에 어울리는 이야기’를 고려했습니다. 모여서 회의를 하던 중 생각난 게 야구였습니다. 야구는 매 상황과 결과가 숫자로 저장될 수 있는 경기이고, 기록의 스포츠라 불리기도 합니다. 선수 평가의 기준은 철저히 숫자에 기반을 두고 있으며,...

D3.JS

d3.js 만든 마이크 보스톡, '뉴욕타임스' 떠난다

데이터 시각화의 대가 마이크 보스톡이 <뉴욕타임스>를 떠난다. 마이크 보스톡은 5월4일 자신의 트위터에서 “시각화 도구에 매진하기 위해 뉴욕타임스를 떠난다”고 밝혔다. 마이크 보스톡은 미국 스탠포드대 박사 재학 시절 'd3.js'라는 데이터 시각화 전용 자바스크립트 라이브러리를 직접 개발했다. https://twitter.com/mbostock/status/595252571658260481 d3.js는 전세계 언론사들이 인터랙티브 데이터 시각화 보도에 가장 많이 활용하고 있는 라이브러리다. <뉴욕타임스>는 d3.js를 공동 개발한 마이크 보스톡을 영입해 다양한 데이터 저널리즘을 시도해왔다. ‘미국 전역의 가뭄 확산 지도’, ‘집, 월세가 나을까 매매가 나을까’ 등이 대표 사례다. 마이크 보스톡은 <뉴욕타임스>를 떠나 오픈소스 데이터 시각화 도구를 개발하는 프로젝트에 집중할 계획이다. 그는 트위터에서 “뉴욕타임스에서 보도 데드라인을 맞춰가며 오픈소스 프로젝트를 꾸준히 개발하는 작업은 힘들었다”고 털어놓은 뒤 “시각화 도구 분야는...

D3.JS

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

데이터 수집과 시각화는 별개의 작업이다. 아두이노 미세먼지 측정기가 수집한 데이터를 기사 내에 실시간 그래프로 표시하기 위해서는 부차적인 소프트웨어 개발이 필요했다. 일단 데이터 시각화 도구로 자바스크립트 라이브러리인 'D3'를 선택했다. D3는 <뉴욕타임스> 등 세계 유력 언론들이 데이터를 시각화할 때 가장 빈번하게 활용되는 도구다. 하지만 D3로 작성된 코드를 기사 내에 삽입하기란 쉽지 않다. 이 과정을 포함한 일련의 구축 과정을 Q&A 형태로 풀어봤다._편집자 1단계 : 미세먼지 농도 데이터 모으기 아두이노 미세먼지 측정기에서 보내는 데이터를 모아야 측정된 상태를 볼 수 있고, 분석도 할 수 있다. 당연히 데이터를 지속적으로, 잘 모아야 한다. Q. 데이터는 어떤 방식으로 입력받았나? 측정기에서 값을 전달하는 방식은 http 통신을 통해 GET 방식의...