d3.js에서 참고로 해온 데이터를 보여주는 방법과 이야기

소개

이걸 d3.js 사용한 지 1년 가까이 지났습니다.
그만큼 d3.js 힘은 오르지 않지만, d3.js의 만남으로 인생 레벨에서 여러가지 바뀌어 온 이 1년이었다고 생각합니다.

그런 d3.js는 무엇이 대단하다고,
템플릿이 아니기 때문에 할 수 있는 인터랙티브한 표현력이라고 생각합니다.
다만, d3.js의 표현력도 단지 표시한 것만으로는 효과는 반감입니다.
움직이지 않는 스토리가 없는 그래프라면 엑셀이나 파와포의 그래프라도 좋을 것입니다.

엔지니어라면 언제나 내용을 만드는 것만으로 의식이 가는 경우도 있다고 생각합니다만,
데이터를 어떻게 보여줄까! 이것이 가장 중요하다고 생각합니다.
그런 데이터를 보여주는 방법으로 참고해 온 것을 소개합니다.

Four Ways to Slice Obama’s 2013 Budget Proposal

조금 낡습니다만, 오바마 정권의 2013년도의 예산을 어떻게 사용하는지를 가시화한 것입니다.

h tp // w w. ny 치메 s. 코 m/인테라 c치ゔぇ/2012/02/13/우 s/포티 cs/2013-부두 tp 로포사 lg 등 p 히c. HTML? _r=0

1 페이지째 전체를 부감

예산의 크기는 전체적으로 어느 정도인지 이 그래프 1장으로 확실히 알 수 있습니다.
또한 작년도보다 예산을 늘린 부분이 녹색, 줄어든 부분이 빨강으로 되어 있어
2012년도와의 차이도 분명해집니다.

2페이지 지출의 종류로 이 제안의 특징

왼쪽이 법률에 의해 정해져 있는 예산, 오른쪽이 재량을 가지고 정해지는 부분의 예산이 됩니다. 2013년도에는 재량이 있는 부분에서 군사적 예산을 2012년도보다 줄이는 경향이 있음을 알 수 있습니다.

3페이지 재량 있는 예산에 대해 자세히 알아보기

방금 전의 원의 크기와 색만으로는 표현으로서는 이해하기 어렵기 때문에,
세로축을 전년대비의 증감으로 해, 더욱 알기 쉽게 하고 있습니다.

4페이지 마지막으로 분야별 예산

마지막으로 분야별로 예산을 세밀하게 표시하고,
각 분야에서 얼마나 사용하고 있는지, 증감의 경향을 알고,
이 예산안의 방향성이 분명하게 보입니다.

The Facebook Offering: How It Compares

　

h tp // w w. ny 치메 s. 코 m/인테라 c치ゔぇ/2012/05/17/부시넷 s/로 아보오 k/호 w-테ぇ-후아세보오 k오후후린 g-코 m파레 s. HTML

결론

흠.
이번은 오바마 정권의 기사만의 소개가 되어 죄송합니다.
앞두고 쓰는 것만으로 비교적 시간이 없어져 버렸습니다.

Facebook도 굉장히 참고하고 있습니다.
공표할 수 있는 데이터로 스토리가 있는 시각화하고 싶네요~