D3.js

D3.js로 만든 우리나라 지도

D3.js로 만든 우리나라 지도

D3.js로 만든 우리나라 지도입니다. [데모보기] 이 지도는 mbostock’s block #2206340을 보고 만든 것입니다. 지도 위에 시도별 영역을 표시하기 위해서 좌표정보를 담은 GeoJSON 파일이 필요했습니다. SGIS 통계지리정보서비스에서 행정구역경계 SHP 파일을 구한 다음 이 SHP 파일을 Quantum GIS를 사용해서 GeoJSON으로 변환하여 사용했습니다. 지명 표시를 On/Off 할 수 있고 마우스휠 또는 +/- 버튼으로 확대,축소를 할 수 있습니다. 각 시도를 클릭하면 해당 시도로 확대됩니다. »

[데이터 시각화] 2010년 서울 독거노인 현황

[데이터 시각화] 2010년 서울 독거노인 현황

2010년 서울 독거노인 현황을 D3.js를 사용해서 버블차트로 만들어 봤습니다. [차트보기] 이 버블차트는 Creating Animated Bubble Charts in D3 와 Clinical trials in Multiple Sclerosis를 보고 만든 것입니다. 원본 소스코드가 CoffeeScript로 되어 있어서 저도 CoffeeScript로 만들었는데, 서버에는 JavaScript로 컴파일을 해서 올려놓았기 때문에 커피코드는 안보이실 텐데요, 혹시 필요하신 분은 [여기]에서 보시면 됩니다. 그런데 제가 많이 이상하게 짜놔서 별로 참고가 안되실 것 같습니다. 차트를 만드는데 사용한 원본데이터는 2월말 서울에서 진행되었던 Open Data Day 참가팀 중 복지팀이 만든 데이터 입니다. [원본 데이... »

D3.js Fahey projection

D3.js Fahey projection

D3.js로 만든 Fahey projection 입니다. 원본은 여기에 있습니다. (저는 Fahey projection 이 뭔지 잘모릅니다.) Check out this Pen! »

[D3.js 예제] SVG Basic Shapes

[D3.js 예제] SVG Basic Shapes

Check out this Pen! [출처] http://www.dashingd3js.com/svg-basic-shapes-and-d3js »

[D3.js 예제] data로 circle 만들기 (JSON data)

[D3.js 예제] data로 circle 만들기 (JSON data)

Check out this Pen! [출처] http://www.dashingd3js.com/using-json-to-simplify-code »

Page 1 of 212