[Leaflet] Interactive Choropleth Map



인터랙티브 등치 지역도

이번에는 GeoJSON과 사용자지정컨트롤을 이용하여 미국 주 인구밀도의 인터랙티브 등치 지역도를 만들어 본다.



데이터 소스

 - 미국의 주당 인구밀도의 시각화를 만들기 위해 가장 편리하고 간단한 저장 및 표시방법은 GeoJSON 이다.

 - (us-states.js 샘플파일) GeoJSON 데이터의 (일부)기능은 아래와 같으며 전체 GeoJSON데이터는 페이지 제일 하단에 있다.


기본 상태지도


색상 추가

 - 이제 인구밀도에 따라 주를 색칠한다. 색상은 ColorBrewer 사이트의 도움을 받는다.


인터랙션 추가


커스텀 컨트롤 (Info)


커스텀 컨트롤 (Legend)


전체 데이터 소스




참고: https://leafletjs.com/examples/choropleth/


댓글

댓글 쓰기

이 블로그의 인기 게시물

[Chrome] ERR_SSL_VERSION_OR_CIPHER_MISMATCH 이슈 원인 및 해결방법

이미지
증상  - 크롬을 이용해 SSL/TLS(https) 프로토콜 접속 시 아래와 같은 에러가 발생한다.  ERR_SSL_VERSION_OR_CIPHER_MISMATCH  지원되지 않는 프로토콜  클라이언트와 서버가 일반적인 SSL 프로토콜 버전 또는 암호화 제품군을 지원하지 않습니다. 원인 1. 서버(WAS)에서 낮은 버전의 SSL을 사용하는 경우 1004lucifer 2. 서버(WAS)에서 응답한 Cipher Suites를 브라우저(Chrome)에서 처리 할 수 없는경우   ( 링크 - Cipher Suites란 무엇일까? ) 해결방법 1. 서버가 낮은 버전의 프로토콜을 사용하는 경우   - 브라우저에서 낮은 버전의 프로토콜을 사용 가능하도록 옵션을 변경해 준다.   (크롬과 IE는 같은 인터넷 옵션을 사용한다.) 2. 서버에서 응답한 Cipher Suites를 브라우저(Chrome)에서 처리할 수 없는경우  1) IE, Edge, FireFox, Opera 등등 다른 브라우저를 사용해본다.   - 브라우저마다 처리할 수 있는 Cipher Suites 종류가 다르다. ( 상세내용링크 )   - 이것마저 안되면 브라우저 사용자가 더이상 할 수 있는건 없다. 1004lucifer  2) 서버관리자가 수정 할 수 있는 방법   - 최신 프로토콜(TLS)을 사용할 수 있도록 WAS를 업그레이드 하거나 설정한다.   - 대부분의 브라우저에서 지원하는 Cipher Suites를 사용하도록 셋팅한다. ( 상세내용링크 )
Read more »

[Regex] 정규표현식 특정 문자열 포함하지 않는 매칭 방법

이미지
특정 문자열이 들어있는 라인을 제외하고 어떻게 문자열을 추출할 수 있을까 하다가 알아보았다. 특정 문자열이 포함되지 않게 매칭하는 방법은 아래와 같다. 1004lucifer  ^((?!단어).)*$ https://regexr.com/4fsa8 복수개의 단어에 대해서 문자열을 제외하고 싶다면 다음과 같이 할 수 있다. 1004lucifer  ^((?!단어|단어).)*$ https://regexr.com/4fsan 1004lucifer 복수개의 단어가 동시에 없어야 한다면 다음과 같이 할 수 있다. (이 방법은 지난번 링크-정규표현식 AND 연산 사용방법  을 응용해 봤다.)  ^((?!(?=.*단어)(?=.*단어)).)*$  ^((?!(?=.*단어)(?=.*단어)(?=.*단어)(?=.*단어)).)*$ https://regexr.com/4fsb0 매칭되는 원리 1. negative lookahead 를 이용하면 해당 단어와 일치하지 않은 단어의 앞에있는 문자열이 매칭된다. 1004lucifer 2. 해당 매칭문자열에 점(.) 하나 붙여서 글자를 하나더 추가 매칭이 가능 3. 해당 문자열 앞에 단어 대신 시작(^)을 붙여서 해당 문자열로 시작되지 않는것만 매칭 4. 그룹화를 해서 해당 문자열 제외한 앞에까지 모두 매칭 5. 마지막까지 모두 매칭되면 추출 완료 정규식 참고  -  https://stackoverflow.com/questions/406230/regular-expression-to-match-a-line-that-doesnt-contain-a-word
Read more »

[CSS] 상속받은 상위 속성(style) 무효화(초기화) 하기

PS. 모든 상위속성을 무시하는 걸 원한다면 아래 링크의 라이브러리를 사용하기를 권장한다. - 10+ Best CSS Reset Stylesheets 많은 상황에서 상속받은 CSS에 대하여 depth를 이용하거나 CSS우선순위를 이용하여 덮어쓰기(!?) 하여 해결이 가능한것 같다. 하지만 다른 style을 적용하지 않고 부모 엘리먼트의 style 상속을 받지 않아야 하는 경우가 발생하여 알아보니 :not(selector) 라는 기능이 있었다. 1004lucifer 엄밀히 말하면 상속을 초기화(reset) 한다기 보다.. 부모 Element 에서 style 적용 시 특정 Element에 style이 적용되지 않도록 하는 기능이다. 예제 <div class="parent"> <span>aaaaaa</span>< br/> <p>aaaaaa</p>< br/> <span>aaaaaa</span>< br/> <span>aaaaaa</span> </div> .parent :not(p) { color:red; } 1004lucifer 아래와 같은 형식으로도 사용이 가능하니 의외로 활용성이 좀 있어 보인다. - div :not(.home) {…} - div *:not(p) em {…} - input:not([type="text"]) {…} - h2:not(.foo):not(.bar) {…} - li:not(.pingback) .comment-content p:first-child:first-line {…} - div:not(.home) h2 + p:first-letter {…} - .post:not(.f...
Read more »