웹개발에 필요한 정보: HTML, CSS, JavaScript, etc.
지도 위에서 3D 건물모양을 만들어 높이와 색상으로 데이터 시각화에 사용할 수 있는 데모입니다. [데모보기] 위 데모는 OSM Buildings라는 라이브러리를 사용해서 만들었고 지도는 Leaflet으로 만들었습니다. 건물모양을 만드는데 사용할 데이터는 서버에서 생성해서 가져오는 방법과 GeoJSON을 사용하는 방법이 있는데 저는 GeoJSON을 사용했습니다. 각 구별로 값을 주고 그 값이 클 수록 입체모양의 높이가 높고 색상을 진하게 표현하였습니다. 사용된 데이터는 어떤 실제 값이 아니라 데모를 만들어 보려고 5000~20000 사이의 임의의 값을 넣어주었습니다. OSM Buildings는 지도 위에 건물모양을 만들 수 있게 해줍니다. Canvas 2D를 사용해서 구현되었습니다. 건물모양을 만들수 있고 이... »
D3.js로 만든 우리나라 지도입니다. [데모보기] 이 지도는 mbostock’s block #2206340을 보고 만든 것입니다. 지도 위에 시도별 영역을 표시하기 위해서 좌표정보를 담은 GeoJSON 파일이 필요했습니다. SGIS 통계지리정보서비스에서 행정구역경계 SHP 파일을 구한 다음 이 SHP 파일을 Quantum GIS를 사용해서 GeoJSON으로 변환하여 사용했습니다. 지명 표시를 On/Off 할 수 있고 마우스휠 또는 +/- 버튼으로 확대,축소를 할 수 있습니다. 각 시도를 클릭하면 해당 시도로 확대됩니다. »
![[데이터 시각화] 시도별 임가수 (2010)](http://codefactory.kr/wp-content/uploads/2013/05/arcgis3_small.png)
시도별 임가수 현황을 지도위에서 파이차트로 볼 수 있도록 만들어 봤습니다. [시도별 임가수 (2010) 보기] 데이터는 임업통계연보에서 구했습니다. 지도는 ArcGIS API for JavaScript를 사용했고, 파이차트는 Chart.js를 사용했습니다. 데이터를 각 시도의 중심지점 위에 파이차트로 올리기위해서 각 시도의 좌표가 필요했습니다. 16개 시도의 좌표는 수동으로 직접 구해서 소스코드에 넣었습니다. 그리고 파이차트를 올려본 후 차트가 겹치지 않도록 좌표를 수정하였습니다. “ArcGIS API for JavaScript” 자체적으로는 지도 위에 차트를 올리는 도구는 따로 제공하지 않는 것 같았습니다. 인포윈도우 팝업 안에서 차트를 보여주는 예제는 찾았는데 지도 위에 직접 올리는... »
시도별 산지이용 구분현황을 히트맵(Heat Map)으로 볼 수 있도록 만들어 봤습니다. [산지이용 구분현황 (2007~2011) 보기] 데이터는 임업통계연보 38호~42호에서 최근 5년간의 데이터를 구했습니다. 히트맵은 데이터를 테이블 형태로 표시한 다음 각 셀의 배경색을 조절하여 사용자에게 시각화하여 보여주는 방법입니다. 보통 높은 값의 경우 짙은 색, 낮은 값의 경우 옅은 색을 사용하여 수치가 높은 경우 진하게 나타나도록 합니다. 이 데모는 Create a Flexible Data Heat Map이라는 글에 나와있는 방법을 사용하여 만들었습니다. 5년치 데이터라 총 5개의 테이블을 만들었는데, 일단 가장 최근 연도의 테이블만 보이게 하고 나머지는 가린 뒤 사용자가 연도를 선택하면 해당 연도의 테이블이 보... »
시도별 산림면적과 산림율을 파이차트로 만들고 정렬할 수 있는 프로그램을 만들어 봤습니다. [시도별 산림면적과 산림율 (2011년) 보기] 데이터는 임업통계연보 2012를 보고 http://linkit.kr/demos/forest-crops/data/forest_rate.js의 형태로 만들어서 사용하였습니다. 데이터에는 각 시도의 산림면적과 국토면적이 있습니다. 국토면적에서 산림면적을 빼서 비산림면적을 구한다음 산림면적과 비산림면적으로 파이차트를 만들었습니다. 파이차트에서 녹색이 산림면적을 나타냅니다. 파이 차트는 Chart.js라는 라이브러리를 사용해서 만들었습니다. 정렬기준을 선택할 때마다 파이차트들이 이동하는 기능은 Isotope를 사용해서 만들었습니다. »
Recent Comments