기존에 React 프로젝트에서 지도 시각화 작업을 하기 위해서는, D3.js와 행정 경계 토지 topojson 데이터로 지도를 그리는 단계부터 시작해 A to Z 작업해야했고, 또 다른 프로젝트에 이를 사용할시 반복 작업을 해야하는 불편이 있었습니다.
위와 같은 반복 작업을 줄이고, 좀 더 효율적인 개발을 돕기 위해 D3.js를 바탕으로 React에서 사용할 수 있는 리액트 라이브러리를 제작해보았습니다.
Choropleth Map, Bubble Chart Map, Point Map, Pie Chart Map을 지원하며, Connection Map은 추후 업데이트 예정입니다.
Goals
Usage
라이브러리를 다운 받으시 후, 아래의 명령어를 입력해주세요. :)
install
npm install
Choropleth Map
Props
Prop
Type
Optional
Default
Description
data
Array<ChoroplethMapDataType>
-
각 지역별 코드와 데이터를 가진 <ChoroplethMapDataType> 타입 데이터의 배열
colors
Array<ColorDataType>
-
각 데이터 별 나타낼 <ColorDataType> 타입 데이터의 배열
defaultColor
string
✔️
-
지도 위 행정구역의 기본 색상
borderColor
string
✔️
-
지도의 경계선 색상
styledOnHover
object
✔️
-
마우스가 지도 내 지역에 올라간 상태일 때, 적용할 스타일
onRegionHover
function
✔️
-
마우스가 지도 내 지역에 올라간 상태일 때, 해당 지역 정보를 받는 콜백 함수
ChoroplethMapDataType
Prop
Type
Optional
Default
Description
regionCode
string
시/도, 시/군/구의 경우 행정지역코드, 읍/면/동의 경우 법정지역코드
level
number
✔️
-
해당 지역의 choropleth 레벨, ColorDataType의 level과 함께 사용해야함
value
number
✔️
-
해당 지역의 데이터 값, ColorDataType의 range와 함께 사용해야함
ColorDataType
Prop
Type
Optional
Default
Description
level
number
✔️
-
ChoroplethMapDataType의 level과 함께 사용
range
{start: number, end:number}
✔️
-
ChoroplethMapDataType의 value와 함께 사용
color
string
-
해당하는 level에 맞거나, range 내에 속한 데이터를 나타낼 색상
Pie Chart Map
Props
Prop
Type
Optional
Default
Description
valueType
'number'
'percentage'
-
data
Array<PieChartMapDataType>
-
PieChartMapDataType 데이터의 배열
colors
Array<PieChartColorType>
-
PieChartColorType 데이터의 배열
pieChartStyle
object
✔️
-
pieChart의 스타일
r
number
✔️
-
pieChart의 반지름, pieChart 크기를 결정
innerRadius
number
✔️
1
pieChart 중심점으로부터 내부 원의 크기 결정, 1 이상일 시 차트가 도넛 모형이 됨
onMouseOver
function
✔️
-
마우스가 pieChart에 올라간 상태일 때 호출되는 콜백 함수
onMouseOut
function
✔️
-
마우스가 pieChart에서 내려온 상태일 때 호출되는 콜백 함수
isDataSummaryVisible
boolean
✔️
-
기본 제공하는 pieChart 데이터 요약 박스으 노출 여부
PieChartMapDataType
정확한 위치 좌표(lon, lat) 혹은 지역 코드(regionCode) 둘 중 하나는 필수적으로 입력해야함.
Prop
Type
Optional
Default
Description
data
Array<PieChartDataType>
-
PieChartDataType 데이터의 배열
lon
number
✔️
장소의 경도
lat
number
✔️
-
장소의 위도
regionCode
number
✔️
-
장소의 지역 코드
regionName
string
✔️
-
장소의 이름
r
number
✔️
-
pieChart의 반지름, pieChart 크기를 결정
innerRadius
number
✔️
-
pieChart 중심점으로부터 내부 원의 크기 결정, 1 이상일 시 차트가 도넛 모형이 됨
PieChartDataType
Prop
Type
Optional
Default
Description
label
string
-
데이터 레이블
value
number
-
데이터 값
PieChartColorType
Prop
Type
Optional
Default
Description
label
string
-
pieChartDataType의 label과 맞추어 사용
color
string
-
해당하는 label에 매칭되는 데이터를 나타낼 색상
Point Map
해당 장소에 대한 좌표 데이터를 받아 스타일 대로 나타내게 됩니다. html 스타일 속성을 전달할 수 있고, image 등을 전달할 수도 있습니다.
Props
Prop
Type
Optional
Default
Description
data
Array<PointMapDataType>
PointMapDataType 데이터
pointComponent
React Node.
✔️
-
포인트 컴포넌트, 이미지 전달 가능
pointStyle
object
✔️
-
포인트 스타일
onPointHovered
function
✔️
-
마우스 이벤트 발생시 호출하는 콜백 함수, 해당 포인트의 PointMapDataType 데이터 반환
PointMapDataType
Prop
Type
Optional
Default
Description
lon
number
장소의 경도
lat
number
장소의 위도
name
string
✔️
null
장소명
description
string
✔️
null
장소 설명
Bubble Map
Props
Prop
Type
Optional
Default
Description
data
Array<BubbleMapDataType>
BubbleMapDataType 데이터
bubbleComponent
React Node
✔️
버블 컴포넌트, 이미지 전달 가능
bubbleStyle
object
✔️
버블 스타일
onBubbleHovered
function
✔️
마우스 이벤트 발생시 호출하는 콜백 함수, 해당 버블의 BubbleMapDataType 데이터 반환
BubbleMapDataType
정확한 위치 좌표(lon, lat) 혹은 지역 코드(regionCode) 둘 중 하나는 필수적으로 입력해야함.
Prop
Type
Optional
Default
Description
lon
number
✔️
버블을 나타낼 장소의 경도
lat
number
✔️
버블을 나타낼 장소의 위도
regionCode
number
✔️
버블을 나타낼 지역의 지역코드
name
string
✔️
장소명
value
number
✔️
데이터 값
component
React Node
✔️
버블 컴포넌트, 하나의 버블에만 적용됨
storybook
모든 개발 과정에서 Storybook를 적극적으로 활용하였습니다. UI를 확인하고 싶으시다면, storybook을 실행해주세요.
npm run storybook
// output: > start-storybook -p 6006
