ELECTION DATA VISUALIZATION – TIPS

CARTO CSS로 값에 따라 다른 색으로 표현하고 커스터마이징하기

2016년 미국 대선 다시보기: 교육 양극화와 대선 결과의 상관관계 포스팅의 번외편입니다. 위 포스팅에서 보여드린 등치 지역도에서는 값에 따라 다양한 컬러가 사용되었는데요. CARTO Builder에는 컬럼 값에 따라 다른 컬러를 주는 기능이 있어 편리하게 단계별 시각화를 할 수 있습니다. 하지만 선택한 컬럼의 값이 텍스트인 경우 아직까지 단색으로 밖에 표현할 수 없어 한 단계 더 나타내고 싶다면 약간의 코딩을 요합니다.

이 과정을 SPH 마케팅팀에서 만든 대선 지도를 활용하여 보여드리고자 합니다.

<2008 – 2016년 카운티 별 우세 당 득표율 인터랙티브 맵 버전 1>

<데이터 값에 따라 단계별로 색깔을 다르게 표한한 맵>

SPH 마케팅팀에서미국 대선 데이터를 사용해 2008년부터 2016년까지 정치 성향의 변화를 확인할 수 있는 맵을 만들었습니다. 역시 붉은색은 공화당, 푸른색은 민주당이 우세함을 나타내며 득표율에 따라 단계별로 옅은 색에서 짙은 색으로 표현되어 있습니다.

Step-by-Step 단계별 컬러 시각화 방법

<1. 시각화 스타일링 전 화면>

처음 데이터를 올려 정제 후 별도의 스타일링 없이 시각화 된 모습입니다. (편의상 2012, 2008 레이어는 껐습니다.) 시각화 디자인을 변경하려면 먼저 Layers 창에서 레이어 이름을 클릭합니다.

<2. 레이어 설정 창>

레이어 이름을 클릭하면 각 레이어의 설정을 바꿀 수 있는 창이 열리는데요, 화살표 부분의 STYLE 탭을 클릭합니다.

<3. STYLE – FILL – BY VALUE 클릭하기>

STYLE 탭의 FILL 기능을 클릭하면 현재 모든 데이터가 한가지 색으로만 표현된 것을 보실 수 있는데요. STYLE – FILL – BY VALUE 경로로 들어가면 컬럼의 값에 따라 색 디자인을 변경할 수 있게 됩니다.

<4. 값에 따라 색을 변경하고자 하는 컬럼 선택하기>

BY VALUE를 클릭하면 맵의 바탕이 되는 데이터 시트의 모든 컬럼 이름이 나열되어 있습니다. 값에 따라 다른 색깔을 주고 싶은 컬럼의 이름을 검색해서 선택합니다. 저의 데이터에는 각 카운티 별로 우세당을 나타내는 Major_16 컬럼이 있는데요. 공화당은 G, 민주당은 D로 텍스트 값으로 구분이 되어있습니다. 이 컬럼을 선택하니 CARTO가 자동으로 보라색과 청록색으로 나누어 시각화를 해줍니다.

<5. CARTOCSS 창 열기>

STYLE 창의 하단을 보시면 스타일 설정을 VALUE로 할지 CARTOCSS로 할 지 선택 할 수 있습니다. 클릭하면 CARTOCSS창이 열리며 해당 시각화 설정에 대한 CSS 코드를 확인할 수 있죠. 아래 코드를 보시면 major_16 이란 컬럼의 G와 D값을 가진 카운티에 각각 #5F4690, #1D6996 라는 색으로 채우도록 되어있습니다.

CSS 수정 전 코드보기

#layer {
polygon-fill: ramp([major_16], (#5F4690, #1D6996), ("G", "D"), "=");
line-width: 1;
line-color: #ffffff;
line-opacity: 0.5;
}

제가 사용한 데이터에는 max_val 이라는 열이 있는데요. 각 카운티의 우세 당의 득표율이 나열되어 있습니다. 이 득표율의 크기에 따라 색을 다르게 표현하면 되는 것이었죠. 그래서 CSS 코드로 major_16 컬럼의 값이 ‘G’인 카운티의 max_val 값이 0.2 보다 작으면, 0.2보다 크면, 0.4 보다 크면, 0.6 보다 크면, 0.8 보다 크면 각각 색깔 a, b, c, d, e 로 채우도록 설정하고 ‘D’값을 가진 컬럼에 대해서도 동일하게 설정했습니다. 코드는 아래와 같습니다.

CSS 수정 후 코드보기

#layer[major_16='G'] {
#layer[max_val < 0.2]{ polygon-fill:#F6B1C3; line-width: 0.5; line-color: #FFF; line-opacity: 0.5; } #layer[max_val > 0.2]{
polygon-fill:#F0788C;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
#layer[max_val > 0.4]{
polygon-fill:#DE264C;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
#layer[max_val > 0.6]{
polygon-fill:#BC0D35;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
#layer[max_val > 0.8]{
polygon-fill:#A20D1E;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
}
#layer[major_16='D'] {
#layer[max_val < 0.2]{ polygon-fill:#D0D3D4; line-width: 0.5; line-color: #FFF; line-opacity: 0.5; } #layer[max_val > 0.2]{
polygon-fill:#64D0E4;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
#layer[max_val > 0.4]{
polygon-fill:#008CCC;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
#layer[max_val > 0.6]{
polygon-fill:#1C1F2A;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
#layer[max_val > 0.8]{
polygon-fill:#151924;
line-width: 0.5;
line-color: #FFF;
line-opacity: 0.5;
}
}

덧붙이자면 카운티 경계의 굵기가 1로 디폴트 설정되어있었는데 줌 아웃 하면 색보다 라인이 도드러져서 0.5로 조정 했습니다. 또한, 우세당의 득표율이란 max_val의 특성상 0.4 이하의 값이 존재하지 않기때문에 색깔 설정은 해 두었지만 #F6B1C3과 #F0788C의 색이 표시되는 경우는 없습니다. 이런 부분을 고려해 색깔 단계를 더 쪼개면 한층 더 다채로운 맵이 되리라 생각합니다.

<6. APPLY 클릭하여 수정한 CSS 적용하기.>

CARTOCSS를 사용할 때에는 오른쪽 하단의 APPLY 버튼을 눌러야만 수정사항이 반영됩니다. 코드를 수정하는 과정 중간중간 버튼을 누르며 결과물을 오른쪽에서 확인하며, 잘못 적었을 땐 뒤로가기 버튼도 있어 편리하게 코드 작업을 할 수 있습니다.

<7. CARTOCSS로 STYLE을 변경하면 다시 VALUES로 돌아갈 수 없습니다>

CSS 수정이 끝나고 반영을 한 뒤, 다시 VALUES 설정 창으로 돌아가면 어떻게 될까요? 위 스크린샷에서 처럼 창이 비활성화 되고 “CARTOCSS를 편집했기 때문에 수정사항을 클리어 하지 않는 이상 다시 VALUES로 설정하는 것은 안된다”라고 안내가 뜹니다. CLEAR를 클릭해 방금 전 수정한 코드를 초기화하거나 CONTINUE를 클릭해 다시 CSS창으로 돌아갈 수 있습니다.

같은 방식으로 다른 스타일의 맵 두가지를 만들어 보았습니다.

<버전 2>

<버전 3>

SPH에서 제작한 맵에서 사용한 데이터의 출처는 이곳입니다.

문의가 있으시다면 언제든지 help@sphinfo.co.kr 로 주시기 바라며 로케이션인텔리전스에 대한 최신 소식과 트렌드, 데이터 시각화 꿀팁이 가득 담긴 뉴스레터를 구독하실 분들께서는 여기에서 신청해 주시기 바랍니다. 감사합니다!