Demos

데모를 등록하고 싶으신 분은 Contact 로 연락해 주십시오

[데이터 시각화] 각 지역 평균 기온과 평균 강수량

[데이터 시각화] 각 지역 평균 기온과 평균 강수량

서울, 부산, 광주의 평균 기온과 평균 강수량을 차트로 만들었습니다. 2008년 1월부터 2012년 5월까지의 자료를 json파일로 만들어서 데이터로 사용하고 있습니다. [데모보기] [소스코드] 차트를 그릴 때 amCharts라는 라이브러리를 사용했습니다. amCharts는 차트의 상단에 amCharts 링크를 포함하면 무료로 사용할 수 있고, 구매할 경우 링크표시없이 사용할 수 있습니다. amCharts는 다양한 샘플을 제공해주고 있습니다. 평균 기온 차트는 http://www.amcharts.com/javascript-charts/smoothed-line/, 평균 강수량 차트는 http://www.amcharts.com/javascript-charts/3d-stacked-column/를 보고 만들었습니다... »

D3.js 로 만든 Area Chart

D3.js 로 만든 Area Chart

D3.js를 사용해서 만든 Area Chart 입니다. [데모보기] [소스보기] http://www.recursion.org/d3-for-mere-mortals/ 를 보고 그대로 만들었습니다. 데이터는 2011년도 서울의 매월 1일, 11일, 21일의 일출, 일몰시각을 검색해서 json파일로 만들어서 사용했습니다. 모든 날짜를 다입력하면 더 정확한 데이터가 될텐데, 시간이 많이 걸려서 월당 3일씩만 조사했습니다. 차트의 가로축은 1월부터 12월까지의 기간이 되고, 세로축은 0시부터 23시59분까지의 시간입니다. 일출시각을 area chart로 만들고 일몰시각도 area chart로 만들면 가운데 비는 부분이 타원모양의 볼록한 형태가 되는데 이 부분의 높이가 일몰시각에서 일출시각을 뺀 것이 되므로 낮의 길이가... »

D3.js 로 만든 Bar Chart2

D3.js 로 만든 Bar Chart2

D3.js를 사용해서 만든 두 번째 Bar Chart 입니다. [데모보기] [소스보기] »

D3.js 로 만든 Bar Chart

D3.js 로 만든 Bar Chart

D3.js 는 자료를 시각화하는데 사용할 수 있는 자바스크립트 라이브러리 입니다. SVG를 사용해서 차트와 그래프, 그리고 이외에 다양한 형태를 가진 모양을 만들어낼 수 있습니다. D3.js로 SVG뿐 아니라 div, li 등 다른 HTML 엘리먼트를 사용할 수도 있지만 SVG를 사용하면 circle, line 등 차트나 그래프를 그리는데 필요한 다양한 모양을 사용할 수 있습니다. D3.js를 사용해서 만든 다양한 example들 을 보면 D3.js의 활용범위를 가늠하실 수 있으실 것 같습니다. D3.js에서 D3는 Data-Driven Documents를 의미합니다. 여기서 Document는 HTML Document, DOM을 의미합니다. D3.js는 자료를 받아서 해당자료 하나하나를 DOM 엘리먼트로 만... »

Page 3 of 3123