FGIS/Pro AgeView :: 행정경계별 노후도 및 통계맵 소스오픈

[공공칠빵]

FGIS/Pro AgeView :: 행정경계별 노후도 및 통계맵 소스오픈

http://www.gisapplication.kr/FGIS_AgeView/

FGIS/Pro AgeView :: 행정경계별 노후도

시군구 라벨보기 시군구를 클릭하면 자동으로 읍면동을 필터/로딩합니다.

www.gisapplication.kr

"지도 데이터 시각화 라이브러리" 느낌으로 만든 JavaScript 소스파일입니다

단순한 SVG 예제가 아니라 행정구역 GeoJSON을 D3로 실시간 렌더링하는 컴포넌트 수준입니다.

첨부파일

FGIS_AgeView_open.zip

소스를 한곳에서 관리하기 위해 링크건 글에서 다운로드 받으세요

https://cafe.naver.com/gisapplication/1266

FGIS/Pro AgeView :: 행정경계별 노후도 및 통계맵 소스오픈

간단히 설명하면, 예전 게시 "[지도작업] 서울시 전체는 노후도가 약 69%"

*참조글 : https://cafe.naver.com/gisapplication/1249

전국 행정구역별 건축물 노후도 데이터를 만들어 시스템에 사용하고, 시간이나서 시각적으로 표시하는 프로그램을 만들어 보았습니다.

이 부산물인 소스를 공유합니다.

소스 중요 포인트는

1. 기존 힘들게 SVG(Scalable Vector Graphics)를 각각의 시도,시군구,읍면동으로 한땀한땀 만들고 스타일 입히는 노가다를

개발소스로 만들고 수정 및 유지보수하는데 장점이 있어서 만든것 입니다.

2. GeoJSON 데이터를 이용하여 시도, 시군구, 읍면동을 렌더링하며, 확대/축소 없이도 선명한 벡터 지도를 제공하고. 통계 데이터를

연계하여 Choropleth Map, 라벨, 툴팁, 클릭 이벤트 등을 쉽게 구현할 수 있도록 D3.js 라이브러리를 사용한 예제입니다.

- D3.js(Data-Driven Documents)는 웹 브라우저에서 데이터를 기반으로 SVG, Canvas, HTML을 동적으로 생성하고 조작할 수 있는 JavaScript 라이브러리입니다

3. 노후도 뿐만아니라 여러 통계를 json으로 만들어 추가라였고, 실시간 조회도 넣었습니다.

건축노후도, 인구비율, 인구증감률, 1인가구수비율, 1인가구증감률, 천명당주택비율, 아파트비율, 연립다세대비율, 빈집현황,

주간매매변동률, 월간매매변동률, 실거래매매건수증감율, 주간전세변동률, 월간전세변동률, 실거래전세건수증감율, 전세가율,

매매평당가, 전세평당가 등

* 행정구역 변동(2026. 7. 1) 반영으로

- 광주광역시, 전라남도 → 전남광주통합특별시

- 인천광역시 행정구역 변동반영 (단, 기존 인구증감률, 1인가구증감률, 아파트비율, 연립다세대비율은 구 행정구역 통계 임)

* 대한민국 행정구역 GeoJSON 렌더링 : 인천은 기존 통계 사용을 위해 2026.7월 이전과 이후 시군구 구역이 자동 선택됩니다.

* 실시간 통계 데이터 시각화(Choropleth Map)

* 자동 라벨 배치 및 Leader Line

* Tooltip 및 마우스 인터랙션

* Drill-down(시도 → 시군구 → 읍면동)

* 실시간 SVG 업데이트

4. 주요 특징

SVG 기반의 벡터 그래픽을 사용하므로 확대·축소 시에도 품질이 유지되며,

CSS와 JavaScript를 이용한 세밀한 스타일링과 인터랙션을 지원합니다.

데이터 기반(Data-Driven) DOM 조작

SVG / Canvas / HTML 지원

강력한 데이터 바인딩(Data Binding)

애니메이션 및 Transition 지원

GeoJSON을 이용한 지도 시각화 지원

다양한 차트 및 대시보드 구현 가능

높은 커스터마이징 자유도