Wookang makes AI

●  한반도 지진 데이터 시각화 최종 결과물   

> 개요

1. 기상청 1978년 8월부터 2018년 3월 4일 새벽 0시 52분 지진까지 모든 지진 데이터 분석.

- 총 1723회.

- 총 크롤링 시간 2분 미만. node.js 이용. 

- 조회 목록 999 제한으로 1978년부터 2011년까지 한번, 나머지 기간 다시 한번으로 분리해서 수집.

2. 지도는 여기 블로그 (danielykim.github.io)에 올린 TopoJson 파일 이용

3. d3.js로 시각화.

4. 추가로 사용한 라이브러리는 

- lodash(데이터 처리. 뒤늦게 적용하여 적극 활용x)

- d3.tip.js(마우스 클릭시 툴팁 표시)

- d3.format.js(숫자 표현 처리. 지진 에너지의 숫자가 커서 지수 도입)

- d3-queue.v3.js(지진데이터와 지도 데이터 순차적 로딩)

- topojson.v1.js(지도 데이터 처리)

- d3-scale-chromatic.v.js(지도 색깔 처리. d3.interpolateOrRd 사용)

5. 소스코드는 원하시는 분이 계시면 덧글로.

- 다만 github에 올리지 않은 이유도 같은데, 코드만 보고 이해하기 좀 어려울 수 있겠다.

5. 지진을 공부(?)하시는 분이나 연구하시는 분들에게 색다른 시각이나 어떤 도움이 되었으면 좋겠다.

> 결과물

● 한반도 지진 시각화 작업 완성   

> 들어가는 말

1. 지난 연말 시작했던 한반도 지진 시각화 작업이 일단락됐다.

> 작업 이미지

> 결과

- 실시간 기상청 지진 데이터 + 서버 까지 도메인으로 만들어 올려놓으려고 한다. 그러면 접속도 쉽고 항상 최신 데이터니 쓸만 할거다.

- 그리고 기상청과 지진을 연구하거나 공부하는 사람들에게 주소만 홍보(?)해 놓고 끝이다.

- 지도는 확대/축소 및 moving이 가능하다. 

● 한반도 지진 발생지역 1차 완성

> 개요

1. 1978년부터 2018년 1월까지 발생한 모든 지진들을 지도 하나에 표현해봤다.

2. 원의 크기는 지진의 강도를 표현한다.

3. 원의 색이 파란색에 가까울 수록 최근에 발생한 지진이다. 원의 색이 옅어 질수록 오래전에 발생한 지진이다.

- 색의 범위는 rgba( 254 ~ 0, 254 ~ 0, 255, 0.2 ) 와 같다.

- 즉 최초의 지진기록인 1978년  8월은 값이 254로 rgba( 254, 254, 255, 0.2 ) 가 되어 거의 색이 나타나지 않고 2018년 1월의 지진은 rgba( 0,0, 255, 0.2)가 되어 가장 진한 색으로 칠해진다.

- 알파가 0.2 으므로 기본적으로 색이 옅다. 따라서 비슷한 지역에 여러번 지진이 일어났을 경우 그 색이 중첩되어 진해진다.

> 결론

1. 최근에 일어나고 지진 규모가 크고 비슷한 지역에 여러번 지진이 일어났을 경우 눈에 잘띈다...

2. ..만 솔직히 잘 안띈다. 무려 40년동안 일어난 1717개의 지진을 겨우 255범위안에 그것도 파란색에 한정해서 더구나 알파 0.2를 먹여서 표현했기 때문이다.  ㅋㅋ 무언가 좋은 색 범위가 있을 것 같은데 그건 좀 더 고민해 봐야겠다. 이럴땐 정말 디자이너가 있으면 좋겠다는 생각이다.

3. 어쨌든 아래 결과를 보면 포항시와 경주시, 그리고 보령시(라지만 서해안 멀리)에 의미 있는 지진이 발생하고 있음을 알 수 있다. 그리고 북한 서해안, 저기가 어딘지는 모르겠지만 저쪽과 음, 포항시 위에 영덕군 쪽 동해안에도 지진이 꽤 크고 반복해서 발생하고 있다. 

4. 그리고 생각보다 많은 지진들이 내륙에서 일어나고 있다. 보기에 따라서는 포항,경주에서 서해안 보령, 서산까지 쭈욱 지진이 이어지는 것처럼 보인다.

> 복기

1. 아쉬운 것은 가중치를 어디에 두면 좋을지다. 내가 지진 자체에 대해 잘 모르다보니 최근에 일어난 지진에 좀 더 가중을 둬야할지 지진강도에 둬야 할지, 반복횟수에 둬야 할지 몰라 내 마음대로 주다보니 원의 색과 크기가 주는 의미가 '실제 지진이 주는 정보'를 왜곡시킬 수 있다는 약간의 걱정이다.

2. 이제 지진 줌인아웃과 원을 클릭했을 때 해당 지진에 대한 상세정보를 보여주기만 하면 끝난다. 뭔가 좀 아쉬운데, 뭐 더 추가할 거 없을까 모르겠다.

3. 게임처럼 여기에 지진 발생기능까지 넣어보려 한다. 디자인이 문제지 개발 자체는 오래 안걸릴 것 같다.

4. 다 완성되면 기상청에서 새로운 지진 데이터를 가져오는 자동 크롤링 기능까지 추가해 서버에 올릴 생각이다. 인터랙티브하게 실시간 가중치를 바꾸는 기능도 넣으면 좋겠으나, 대체 누가 그걸 바꿔보고 있겠는가! 지진을 연구하는 누군가의 요청이 아주 혹시라도 있다면 그때 만들겠다.

5. 그러면 이 프로젝트도 끝이다. 다른 또 무얼 만들어볼까나.

● 한반도 지진 지도 제작 중

> 들어가는 말

1. D3를 익히기 위해 시작한 프로젝트, 이제 지도만이 남았다.

2. 확실히 D3는 자유롭다. 하지만 그 만큼 빡시다. 지금 생각에는 아마도, 고퀄의 시각화가 필요할때는 D3, 일반적인 상황에서는 구글 챠트를 사용할 것 같다.

3. 그럼에도 빅데이터 시각화에는 D3가 필요하다. 원하는 시각화가 본적이 없는 시각화일때 특히 그러하다.

> 작업 중

1. 일단 지도 만들고 위도, 경도에 맞춰 지진 발생지역들을 몽땅 찍어봤다.

2. 북한에서 일어난 지진은 (당연히) 나오지 않는다. 남한지도기 때문이다;;

3. 지역 이름이 좀 이상하게 나왔다. 원하는 지역을 다 표시하면 지도가 까맣게 나올 정도로 이름이 많고 시군면 지도기 때문에 필터처리를 해도 같은 제주시 X면, 제주시 X면 처럼 중복된 이름이 많다. 그래서 같은 지역이름이 여러개일 경우 하나만 나오게 했더니 아래 이미지처럼 제주도가 북으로 한껏 올라가 버렸다. 이건 뭐 논리적으로 어떻게 할 수가 없다. 데이터 자체가 그렇게 생겨먹었으니까. 보기좋게 하려면 일일이 커스터마이징해야하는데 그건 포기 ㅋ

> 확인

- 한반도 전역이 지진 지역으로 보인다. 그나마 강원도와 경기 서울에 지진이 제일 적다.

- 동해 서해 남해 가릴 것 없다. 

- 클릭해서 지진을 일으킨 후 그 강도에 따라 서울에 전해지는 지진의 효과까지 만들어보고 싶은데, 다른 개발할 것도 많고, 문서작업도 좀 있고, 언제까지 끝낼 수 있을지 모르겠다. 아마 3월 말까지는 개발완료하지 않을까 싶다.

● 지역별 지진 발생수 시각화

> 들어가는 말

1. D3 라이브러리 R&D도 중반에 접어든 기분?이다.

2. 이번에는 이제까지 어느 지역에 지진이 가장 많이 발생했는지 시각화해 보았다.

> 결과

● 지진 규모별 원형 챠트

> 들어가는 말

1. 언제나 느끼는 거지만 데이터 가공이 훨씬 더 힘들다.

2. 어떤 개발이든 '예제'와 '실전'은 다르다. 겉으로 보기에는 큰 차이 없지만 '실제'로 내가 '원하는' 것 을 만들때, '예제'를 적용할 수 있는 부분은 거의 없다.

> 일단 결과

> 반성

1. 공부는 실전으로 해야한다. 자전거는 엎어져 가며 배워야 하고, 주식은 돈을 잃어가며 배워야 하며, 사람들에게 많이 배신 당해야만 제대로 된 사람을 만날 수 있다. 코딩도 마찬가지. 좋은 버그가 강한 코드를 만든다. 코딩계에 만연한 백문이 불여일'타'는 잘못된 말이다. 단순하게 코드만 읽는 것보다 조금 나을 뿐이지, 결코 좋은 방법이 아니다.

그보다는 해당 코드를 일단 돌려보고 난 다음, 한줄한줄 주석처리하거나 인자를 바꾸거나. 메서드 안에 console.log, printf, cout을 찍어가며 살펴보는 거다. 최신 버전으로 porting하는 것도 좋고 라이브러리를 이용해 다르게 만들어 보는 것도 좋다. 무엇보다 제일 좋은 방법은 내가 '넣고 싶은 기능을 추가'하는 것이다. 공부가 안될 수가 없다.

뭐 어쨌든, 

원형 챠트를 만들어보고 싶었다. 그래서 지진 데이터 중에 어떤 걸 원형 챠트로 만들면 좋을까 고민하다가

지진 강도별 발생 수를 만들게 되었다. 예를들어, 강도가 2.x인 지진이 다른 지진에 비해 얼마나 발생했고 그 지진 강도의 평균을 얼마나 또 어떤 시기의 지진들이 해당 지진을 구성하고 있는지 알아보고 싶었다. 

연출의 감이 부족해서 챠트가 좀 경박(?)하게 움직이는 것 같기는 하다. 

2. 일단 지금은 넘어가고 다음번에 '마우스를 올리면 해당 지진을 구성하는 지진의 연도별 표현도 해봐야겠다. 즉 지진 규모가 2인 지진들은 2017년에 몇개, 2016년에 몇개인자 이렇게 그 안에 한번 더 그림을 그리는 거다. 최신 일수록 파랗게 과거일수록 하얗게 색으로 표현할 수도 있겠다.

3. 지금은 좀 다음으로 넘어가고 싶다. 최근 다시 인공지능에 빠졌더니 정신이 없다. 요즘 자바스크립트 인공지능 라이브러리들이 많이 나왔다. 특히 deeplearn.js는 시간을 투자할만해 보인다. 피곤하고 졸린다.

끝.

티스토리에서 내 블로그 결산을 해줬다 ㅡ,ㅡ

www.tistory.com/thankyou/2017/tistory/2194273

지금 d3에 빠져있다보니 d3가 제일 먼저 보인다. d3의 cloud 레이아웃을 이용해 워드 클라우드를 만들었고 path로 선형 그래프를 만들었다. 기술 수준은 논할게 없고 디자인은 깔끔하니 좋다. d3를 이용해 클라우드 작업도 해봐야겠다. 이쁘다.

● 지진 에너지 그래프 작업

> 들어가는 말

1. 소스 코드를 첨부하니 방금 썼던 긴 글까지 모두 날아갔다. 그래서 데이터 파일을 분리하고 다시 글 쓴다.

2. 한번 더 정리하면, 지진은 에너지이므로 해당 년월에 발생한 지진 에너지() 그래프를 그릴 경우 어떤 모양일지 보고 싶었다. 

> 결과

> 반성

1. 클래스를 도입했다. 복수개의 그래프를 한페이지에 그리며 확장성과 재사용성이 중요해졌기 때문이다.

2. 처음에는 좀 짜증났지만 도입하고 나니 소스가 월등이 강력해(?)졌다. Nodejs를 그렇게 팠어도 이제까지 자바스크립트에 클래스를 쓴 적이 없는데 뜬금없이 d3에 클래스를 적용(해야만) 할 줄은 몰랐다. 그리고 리팩토링을 하면서 d3에 대한 이해도가 월등히 증가했다. 역시 학습 알고리즘 중 최고는 '재귀'다. 어떻게 보면 딥러닝도 곧 재귀다.

3. 그래프를 보면 에너지의 빈부 격차가 커졌다. 실제 의미있는 달은 몇 달이 되지 않았다.

4. 많은 가로 데이터( 12달 * 39년 = 480달)를 정해진 픽셀에 표현하다보니 마우스를 롤오버시켜도 선택이 되지 않아 누락되는 지진정보가 보인다. 또 x축 시간을 기준으로 d3.bisector()를 이용하여 해당하는 데이터를 뽑다보니 energy 정보가 없는 달(undefined)이 많이 보인다(svgWidth를 크게 하면 선택이 된다)

이유는 기상청에서 지진 정보만 뽑았을 때 아예 지진이 없는 달도 많았는데 이러한 경우를 빼고 그래프를 그릴 경우 정보의 왜곡이 발생한다. 그래서 지진이 없는 달들을 체크해 해당 달의 객체를 만들고 그런 달의 count와 energy에 0을 '더미'로 넣어놨는데 이렇게 지진이 없던 달이 undefined로 나오는 것이다. 어찌보면 0보다 더 맞는 말이기에 수정하지 않았다.

3. 이제 좀 다른 그래프를 그려보고 싶다. path와 circle 그래프는 구역질이 난다. 다음에는 원형챠트와 가로챠트를 그려보려 한다. 그리고 나서 지도를 만들면 웬만한 그래프 라이브러리는 다 준비가 될 것이다.

4. 으앙

● 지진 연도별 발생 횟수 시각화 작업 1차 완료

> 결과 먼저

> 들어가는 말

1. 1월 1일을 이것에 몽땅 투자했다ㅋ

2. 그래프 하나에 내가 원하는 기능들을 모두 넣어봤다.

> 기능 정리

1. 그래프 애니메이션을 넣었다. 왼쪽에서 오른쪽으로 그려진다. 나름 괜찮다.

2. 바탕에 가로세로 점선 그리드를 넣었다.

3. 지진 규모를 나타내는 원의 크기를 키웠다.

4. 각 눈금에 text를 넣었다.

5. count line에 영역 색을 칠했다.

6. 마우스 롤오버시 가로세로 가이드 선이 나타난다.

 - 가이드 선은 현재 마우스의 위치가 아닌 해당 지진의 정보를 기준으로 정확하게 가이드한다.

 - 세로 가이드선과 만나는 라인 그래프(지진횟수) 위에 조그만 원을 보여준다. 

7. 클릭시 해당 지진의 상세 정보가 툴팁으로 나타난다.

8. 툴팁은 화면을 벗어나지 않게 위치에 따라 적절하게 나타난다.

9. 만약 기상청에 해당 지진의 이미지가 있다면 보여준다.

> 반성

1. 고생은 많았지만 D3가 재밌긴 하다 ㅋ

2. 이제 원챠트와 가로챠트 라이브러리용으로 만들어놓고

3. 지도 위에도 뿌려보고

4. 지도위에 마우스를 클릭해 지진을 일으켰을 때 다른 지역에 몇의 강도로 지진의 영향이 미치는지 게임처럼 만든후

5. 그 밖에 워드 클라우드나 몇가지 이색적인 챠트를 몽땅 만들어 라이브러리화 하고

6. 경계의 경영 만들자. 1월까지 기획 완성하고 2월부터는 개발 들어가도록 하자.

7. 디자인 더미로 놓고 포폴 수준으로 2주간 개발하고

8. 나머지 2주간 서비스가 실제로 쓸만한지 이것저것 테스트해본후

9. 괜찮다 싶으면 3월 한달간 미쳐서 만들자.

10. 이번에는 처음부터 결제 모듈을 붙여 유료화 할 거다. 고객들이 행복에 겨워 결제할만한 서비스를 만들자.

11. 크하하하하하하하

● 지진 연도별 발생 횟수 시각화 2(작업중)

> 들어가는 말

1. 어제까지 작업한 것

2. 다시 봐도 엉망이다 ㅡ,ㅡ

> 실행

1. 눈금과 연도 각 스케일을 모두 맞췄다.

2. 왼쪽 눈금에는 그 달의 지진 발생수, 오른쪽 눈금에는 그 달의 최대 지진 강도를 표시했다. 원의 반지름은 지진 강도와 비례한다.

3. 그래프를 보면 70년대 말, 80년대 초에 강도가 높은 지진들이 꽤 발생했다. 그럼에도 지진의 절대수는 많지 않았다(아마 측정 기계수준이 떨어진 점도 있을 거다)

4. 2013년을 기점으로 지진의 발생수가 확실히 증가하고있다.

5. 하지만 지진횟수가 급격히 늘어난 것에 비해 최대강도의 증감 변화는 작아 보인다. 예전에도 저렇게 강한 지진이 많이 있었는지 몰랐다.

6. 데이터 원본을 보니 북한에서 일어난 지진도 꽤 된다. 다음에 클릭 이벤트에 해당 지진 정보를 넣을테니 그때 기상청에서 제공하는 이미지 파일도 같이 보여주면 좋을 것 같다.

7. 어쨌든 꽤 그럴듯해 보인다. 이제 이벤트를 걸어봐야겠다.

> 반성

1. 부끄럽게도 d3 style 이해하는데 꽤 시간이 걸렸다;

2. 연도를 내가 원하는 방식으로 연출하는데도 꽤 시간이 걸렸다.

3. 원 그리기는 이전에 지도 그릴때 해봐서 금방 끝냈다.

4. 다시 생각해봐도 정말, 전처리가 모든거다. 요리 자체는 쉽다. 재료 준비가 어렵지.

5. 재료준비가 더욱 어려운 이유는, 다양하고 짜증(?)나는 재료들을 계속 준비해야 하기 때문이다.

6. 요리는 금방 끝난다. 그런데 맛이 없다. '어? 내가 원하는 요리가 아니었네' 이런 생각이 들면 또 다른 재료를 준비해야하기 때문이다.

7. 매번 재료를 요리하기 좋게 가공해 놓는게 전처리다. 그래서 어려운거다.

8. 책에는 요리 방법 밖에 안나온다. 그것도 현실성 떨어지는 요리들. 우리 냉장고에는 없는 재료들로 만든 실제 먹을 수 없는 요리들.

9. 그래서 이렇게 나의 재료로 만들어봐야 진짜 요리를 할 수 있게 된다.

10. 어쨌든 계속가자. 재미있다.

> 실제 작업물