색상자(ColorScale)

시리즈 데이터 값에 따라 지도 영역의 색상을 결정하고, 색상 구간을 지도 옆에 표시한다.

주로 맵 아래 표시되지만 좌우에 수직 구간으로 표시할 수도 있다.

설정

colorScale 항목에 설정한다. 둘 이상의 스케일을 배열로 지정할 수도 있다(시리즈 연결 참조).

색상을 정하는 방식은 두 가지다.

연속 그라디언트 — minColor에서 maxColor까지 값에 비례한 색으로 채색한다. stepCount, integralSteps, logBase로 구간 분할을 조정한다. 구간 경계를 직접 정하지 않아도 되므로 데이터 분포를 미리 알 수 없을 때 적합하다.
steps 직접 지정 — 구간의 값 범위와 색상을 하나씩 지정한다. "1,000 미만 / 1,000~3,000 / 3,000 이상"처럼 업무 기준 구간이 정해져 있을 때 적합하다. steps를 지정하면 stepCount 등 자동 구간 관련 속성은 무시된다.

두 방식 모두 solidFill을 true로 지정하면 구간 내 그라디언트 없이 구간마다 단일 색으로 채색된다. 구간을 한눈에 구분해야 하는 지도에서는 solidFill을 켠다.

아래 예제 3개는 지도·데이터·스케일을 모두 포함하고 있어 그대로 복사해 실행할 수 있다. 차트 생성은 반드시 createChartAsync를 사용해야 한다 (동기 createChart는 url 옵션을 무시한다).

예제 — 대한민국 시도

구간을 직접 지정한 steps로 시도별 인구밀도를 채색한다.

const config = {
    title: '시도별 인구밀도',
    map: {
        url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json',
    },
    colorScale: {
        title: { text: '인구밀도 (명/km²)' },
        solidFill: true,
        steps: [
            { from: 0,    to: 300,   color: '#d5deef' },
            { from: 300,  to: 1000,  color: '#b1c9ef' },
            { from: 1000, to: 3000,  color: '#8aaee0' },
            { from: 3000, to: 10000, color: '#628ecb' },
            { from: 10000,           color: '#395886' },
        ],
    },
    series: {
        data: [
            { id: '11', name: '서울특별시', value: 15709 },
            { id: '21', name: '부산광역시', value: 4328 },
            { id: '22', name: '대구광역시', value: 2711 },
            { id: '23', name: '인천광역시', value: 2766 },
            { id: '24', name: '광주광역시', value: 2945 },
            { id: '25', name: '대전광역시', value: 2747 },
            { id: '26', name: '울산광역시', value: 1059 },
            { id: '29', name: '세종특별자치시', value: 777 },
            { id: '31', name: '경기도', value: 1335 },
            { id: '32', name: '강원특별자치도', value: 90 },
            { id: '33', name: '충청북도', value: 220 },
            { id: '34', name: '충청남도', value: 264 },
            { id: '35', name: '전북특별자치도', value: 222 },
            { id: '36', name: '전라남도', value: 144 },
            { id: '37', name: '경상북도', value: 139 },
            { id: '38', name: '경상남도', value: 314 },
            { id: '39', name: '제주특별자치도', value: 363 },
        ],
        tooltipText: '${name}: ${value}명/km²',
    },
};
 
const chart = await RealMap.createChartAsync(document, 'realmap', config);

데이터의 id를 지도의 지역 아이디와 매칭해 채색한다. RealMap Collection 국내 지도의 지역 아이디는 지역 아이디 페이지를 참조한다.
첫 step의 from을 생략하면 최소값부터, 마지막 step의 to를 생략하면 최대값까지로 처리한다.
어느 step에도 포함되지 않는 값은 시리즈 기본 색상으로 표시된다. 단, 스케일 최소값 이하의 값은 첫 step의 색으로, 최대값 이상의 값은 마지막 step의 색으로 표시된다.

예제 — 대한민국 시군

시군 지도에 연속 그라디언트(stepCount)를 적용한다. 데이터에 없는 지역과 값이 null인 지역이 어떻게 다르게 표시되는지도 보여준다.

const config = {
    title: '주요 시군 인구밀도',
    map: {
        url: 'https://unpkg.com/realmap-collection/kr-sigun-low.geo.json',
    },
    colorScale: {
        minColor: '#e8f0fe',
        maxColor: '#1a4fa0',
        stepCount: 5,
        solidFill: true,
        nullStep: {
            visible: true,
            gap: 16,
            color: '#e5e5e5',
            label: '자료 없음',
        },
    },
    series: {
        data: [
            { id: '32010', name: '춘천시', value: 255 },
            { id: '32020', name: '원주시', value: 412 },
            { id: '32030', name: '강릉시', value: 205 },
            { id: '32050', name: '태백시', value: null },
            { id: '32060', name: '속초시', value: 783 },
            { id: '32070', name: '삼척시', value: null },
            { id: '33020', name: '충주시', value: 213 },
            { id: '35030', name: '익산시', value: 221 },
            { id: '36010', name: '목포시', value: 4232 },
            { id: '36020', name: '여수시', value: 540 },
            { id: '36030', name: '순천시', value: 309 },
            { id: '36060', name: '광양시', value: 324 },
            { id: '37020', name: '경주시', value: 190 },
            { id: '37040', name: '안동시', value: 103 },
            { id: '37050', name: '구미시', value: 670 },
            { id: '38030', name: '진주시', value: 487 },
            { id: '38070', name: '김해시', value: 1160 },
            { id: '38090', name: '거제시', value: 597 },
            { id: '39010', name: '제주시', value: 504 },
            { id: '39020', name: '서귀포시', value: 211 },
        ],
        tooltipText: '${name}: ${value}명/km²',
    },
};
 
const chart = await RealMap.createChartAsync(document, 'realmap', config);

최소~최대 범위를 stepCount개 구간으로 균등 분할하고, minColor→maxColor 사이의 색을 구간마다 배정한다.
nullStep을 visible: true로 지정하면 스케일에 별도 step이 추가되고, 태백시·삼척시처럼 데이터에 있지만 값이 null인 지역이 nullStep.color로 채색된다. 데이터에 아예 포함되지 않은 지역은 nullStep이 아니라 시리즈 기본 색상으로 표시된다.

예제 — 세계지도

세계지도의 지역 아이디는 ISO 3166-1 alpha-3 국가 코드다(KOR, USA, JPN, ...). 데이터의 id도 alpha-3 코드로 지정해야 매칭된다.

const config = {
    title: '국가별 인구밀도',
    map: {
        url: 'https://unpkg.com/realmap-collection/world-low.geo.json',
    },
    colorScale: {
        title: { text: '인구밀도 (명/km²)' },
        minColor: '#fff3e0',
        maxColor: '#e65100',
        stepCount: 5,
        solidFill: true,
    },
    series: {
        data: [
            { id: 'KOR', value: 515 },
            { id: 'JPN', value: 327 },
            { id: 'CHN', value: 148 },
            { id: 'IND', value: 473 },
            { id: 'IDN', value: 145 },
            { id: 'VNM', value: 305 },
            { id: 'THA', value: 137 },
            { id: 'USA', value: 37 },
            { id: 'CAN', value: 4 },
            { id: 'MEX', value: 65 },
            { id: 'BRA', value: 25 },
            { id: 'ARG', value: 17 },
            { id: 'GBR', value: 281 },
            { id: 'FRA', value: 123 },
            { id: 'DEU', value: 240 },
            { id: 'ITA', value: 196 },
            { id: 'ESP', value: 96 },
            { id: 'RUS', value: 8 },
            { id: 'AUS', value: 3 },
            { id: 'EGY', value: 112 },
            { id: 'NGA', value: 246 },
            { id: 'ZAF', value: 50 },
            { id: 'TUR', value: 111 },
            { id: 'SAU', value: 17 },
        ],
        tooltipText: '${value}명/km²',
    },
};
 
const chart = await RealMap.createChartAsync(document, 'realmap', config);

시리즈 연결

스케일은 기본적으로 첫 번째 map 시리즈의 값 범위로 색을 계산하고, 그 시리즈를 채색한다.
시리즈 쪽에서 series.colorScale에 스케일의 index나 name을 지정하면 해당 스케일에 연결할 수 있다.
스케일 쪽에서는 colorScale.series로 값 범위를 계산할 시리즈를 지정할 수 있다.

버블 시리즈도 colorScale을 지정하면 버블 크기와 별개로 버블 색을 스케일로 결정할 수 있다. 아래는 스케일 두 개를 배열로 지정하고, 지도 시리즈와 버블 시리즈를 각각 다른 스케일에 연결한 예다.

const config = {
    title: '시도 인구밀도와 고령화율',
    map: {
        url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json',
    },
    colorScale: [
        {
            name: 'density',
            title: { text: '인구밀도 (명/km²)' },
            minColor: '#e8f0fe',
            maxColor: '#1a4fa0',
            stepCount: 4,
            solidFill: true,
        },
        {
            name: 'aging',
            title: { text: '고령화율 (%)' },
            location: 'right',
            minColor: '#fff3e0',
            maxColor: '#e65100',
            stepCount: 4,
            solidFill: true,
        },
    ],
    series: [
        {
            // 지도 면 색 — 'density' 스케일로 채색
            colorScale: 'density',
            data: [
                { id: '11', name: '서울특별시', value: 15709 },
                { id: '31', name: '경기도', value: 1335 },
                { id: '32', name: '강원특별자치도', value: 90 },
                { id: '36', name: '전라남도', value: 144 },
            ],
        },
        {
            // 버블 색 — 'aging' 스케일로 채색
            type: 'bubble',
            colorScale: 'aging',
            minSize: 24,
            maxSize: 24,
            data: [
                { id: '11', name: '서울특별시', value: 19 },
                { id: '31', name: '경기도', value: 16 },
                { id: '32', name: '강원특별자치도', value: 25 },
                { id: '36', name: '전라남도', value: 27 },
            ],
        },
    ],
};
 
const chart = await RealMap.createChartAsync(document, 'realmap', config);

logBase

인구밀도처럼 최댓값이 크게 튀는 데이터에 기본 그라디언트를 그대로 쓰면, 최댓값 지역을 제외한 대부분 지역이 minColor(기본 흰색)에 가까운 색으로 표시된다. 위 시도 데이터로 colorScale: {}만 지정해 보면 서울(15,709)을 제외한 모든 지역이 흰색에 가깝게 표시된다.

이럴 때 logBase를 지정하면 값을 log 스케일로 변환해 구간을 나눈다. 분포를 미리 몰라도 적용할 수 있다.

colorScale: {
    logBase: 10,
    stepCount: 5,
    solidFill: true,
    minColor: '#e8f0fe',
    maxColor: '#1a4fa0',
},

steps를 직접 지정해도 같은 문제를 해결할 수 있다. 위 시도 예제처럼 구간 경계를 값 분포에 맞춰 잡으면 된다.

logBase를 steps와 함께 쓰면 데이터 값이 log로 변환된 후 각 step의 from/to와 비교되므로, from/to도 log 변환된 값으로 지정해야 한다. 보통은 둘 중 하나만 쓴다.

표시 옵션

display — 'legend'로 지정하면 scale bar 대신 color step을 범례 항목으로 표시한다. 'both'는 양쪽 모두 표시한다. nullStep을 표시하도록 지정했으면 그 항목도 color step 앞에 함께 표시한다.
tick — 구간 경계의 tick 선과 라벨을 설정한다. minVisible/maxVisible을 false로 지정하면 최소/최대 경계의 tick 선과 라벨을 숨길 수 있다.
marker — 마우스를 올린 데이터포인트의 값 위치를 scale bar 위에 마커로 표시한다.
nullStep — 값이 null인 지역을 표시하는 별도 step. 위 시군 예제를 참조한다.