Wookang makes AI

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

> 들어가는 말

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

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

> 결과

어제 늦은 밤, 12시가 넘어 내 데스크탑이 정신줄을 놨다.

처음에는 하드 중 하나가 날아갔으리라 대수롭지(?) 않게 생각했는데 의심이 가는 하드 연결을 끊고 재부팅을 해도 저 유명한 파란창을 띄우며 부팅이 안되는 거다.

의아해하며 하드들을 차례차례 끊어가며 테스트를 하는데 이게 한두개가 맛간게 아니었다.

때마침 윈도우USB도 맛이 간 상태였다.

노트북으로 윈도우 부팅usb를 다시 만들며 하드 및 ssd 데이터 체크를 해보니

1테라짜리 한녀석과 500gb짜리 한녀석이 '이미' 죽어있었다.

수십년 이쪽 분야에 있으며 단 한번도 경험해 본적 없는 하드 디스크의 연쇄 죽음이었다.

이 뿐만이 아니라 SSD도 덜덜덜 거리며 정신이 왔다갔다했다.

정말 아주 갑자기!

잠시전까지 잘돌아가던 데스크탑이 갑자기 E드라이브에 들어가지지 않기에 - 다른 모든 기능은 다 잘되고 단지 E drive에 들어가지 않기에 - 재부팅했을 뿐인데 그걸로 내 PC는 영원히 맛이 가버린 것이다.

SSD에 윈도우를 설치해도 잠깐 뿐이었다. 재부팅을 하면 다시 파란색 창이 뜨며 '지금 저는 맛이 갔으니 알아서 하세요' 메시지가 떴다. 같은 상황에서 어쩔 때는 돌아가고 어쩔 때는 죽는 것이 메인보드의 문제로 보였다.. 만 예전같이 데스크 탑이 여러대 있는게 아니니 확인해 볼 수 없었다. 

그러고보니 이 녀석도 오랫동안 고생했구나. 새벽 6시가 다 되어 나는 녀석을 보내주었다.

그래, 사고 싶었으나 살 핑계가 없었던 lg그램을 지를 핑계가 생겼다. 또 윈도우에서 돌아가지 않는 mecab같은 라이브러리도 사용해야 할때가 왔다. 또 아마존 서버는 우분투인데 내 pc는 윈도우다 보니 우분투에 익숙해지지 않고 매번 처음쓰는 것처럼 공부하며 사용해야 한다는 것도 답답했다.

나는 삼성 노트북을 싫어한다. 소프트웨어를 못하는 아이들이 만든 전형적인 제품이다. 삼성 전용 소프트웨어는 하나같이 X같고 키보드 구성은 컴맹수준이다. 나는 맥북을 더욱 싫어한다. 일단 드럽게 무겁고 엄청나게 무거우며 스펙도 후진놈이 가격이 비싸다. 구성은 말할것도 없고 mac os를 좋아하는 사람들이 많지만 난 이 녀석이 윈도우보다 나은게 무엇인지 도대체 모르겠다. 유일한 장점은 리눅스를 쓸 수 있다는 건데 그것 하나 때문에 지르기에는 너무 무겁다. 난 정말 무거운 노트북이 싫다. 맥북프로 레티나 머시기 200 얼마주고 한 1년쓰다가 구석에 던져버리곤 열어보지도 않았다.

예전에는 후지쯔나 소니, IBM 노트북을 썼는데 소니는 삼성만큼 소프트웨어가 그지 같으며 또 많아(더 많아) 질려버렸고 후지쯔는 더 이상 제품이 안나오는거 같고 IBM은 정말 나와 딱 맞는데, 레노버로 넘어간 후 품질이 엉망이 됐다. 그래도 지금 쓰는 lg그램으로 넘어오기 직전까지 열심히 썼다. 어쨌든 그 전까지 구입했던 모든 노트북은 평균가가 250만원 정도로 하드엔드 급이었는데 가장 싼게 지금의 lg그램이다.

hp나 dell의 탱크주의와 정반대에 위치한 가벼움, 한없는 가벼움. 고급스럽지 않은 디자인. 조금만 세게 쳐도 부서지는 키보드;; 덕지덕지 붙은 lg마크. 하지만 내가 시키는 대로 잘돌아가고 가볍다. 어댑터도 가볍다. 최고 스펙으로 업그레이드해도 가격이 150만원 수준이다.

어쨌든 그래서 오늘 일어나자마자 바로 구입하고 용산에 가서 받아왔다.

부품만 가지고 있던 SSD 512와 공짜로 주는 4GB 메모리도 노트북 뒷면까서 직접 설치했다.

이제 os를 설치해야 한다.

● 지진 규모별 원형 챠트

> 들어가는 말

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. 어쨌든 계속가자. 재미있다.

> 실제 작업물

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

> 들어가는 말

1. 생각보다 빡시다.

2. D3 버전이 v4로 바뀌며 메서드 이름과 방식이 한두가지 바뀐게 아니다. 현재 v4가 적용된 책은 한권도 없다. 어쩔 수 없이 예전 책으로 공부 하다보니 에러가 뜰때마다 구글링하며 잡고 있다.

3. 전처리할 게 이리 많을 줄 몰랐다. 전처리에 시간 다 날리고 있다. 아무리 json 형태라도 내가 원하는 값이 딱하니 들어있는게 아니어서 꽤 많은 가공이 필요하다.

4. 많이 써보진 않았지만 d3와 파이썬의 여러 시각화 라이브러리는 많이 다른 것 같다. d3는 정말 raw 하다. 날것이다.

5. 눈금표 제대로 그리는 것도 만만치 않더라 ㅋ

> 실행

1. 1978년 8월부터 2017년 12월까지 매월 발생한 지진횟수를 카운트 했다(검은선). 분명히 최근에 지진이 자주 발생하고 있다.

2. 파랑색선은 해당월의 최대 지진강도를 표현한 것이다. 지진규모가 최소 2를 넘어야 측정되고 최대 규모라 해봐야 5.4, 5.8이므로 갭차이가 작다. 이 간격을 좀더 구별해야겠다.

> 추가 작업

1. 대충 만들어 놓은거라 추가 작업할 것이 무척 많다.

2. 일단 axisRight()와 axisBottom() 로 눈금표를 만들어야 한다. 눈금표가 없으니 알아볼 수 가 없다.

3. 그리드 표시도 해야겠다. 데이터가 많다보니 그리드 없이 읽기가 어렵다.

4. 지진 규모는 라인이 아니라 원형으로 강도표시할거다.

5. 지진 횟수도 선 아래에 색을 칠해 영역을 보여주는게 더 인지하기 쉽겠다.

6. 마우스 오버시 해당 지진의 정보도 보여줄 거다.

7. 연도 범위를 조절할 수게 게이지 바를 넣어 컨트롤 하도록 하겠다.

8. 모바일에서도 자연스럽게 보이는 방법을 고민 중이다.

> 마무리

1. 아직 많이 허접하다.

2. 일단 저 그래프 하나에 모든 걸 적용해 만든 후,

3. 다음부터는 이번에 만든 모듈을 이용해 그래프를 찍어낼 수 있는 시스템을 만들겠다.

4. 저 그래프도 처음 봤을 때는 와하고 나름 놀랐는데 확실히 시각화에는 뭔가 힘과 매력이 숨어 있는 것 같다.

5. 애니메이션이 들어가면 또 달라질 것이다. 계속 가자. 

> 추가

1. 이전 기상청 크롤링 때 딱 1분 걸렸는데 다시 해보니 1분 6초가 걸렸다. 

● 세계주요도시 인구지도

> 자료 준비

1. http://curran.github.io/screencasts/introToD3/examples/viewer/#/94

2. 위 코드는 D3 3.5버전이라 최신 4버전에서 돌아가지 않는다. 메서드 뿐 아니라 많은 것들이 바뀌었다.

3. 그래서 v4로 바꾸고 es6를 적용하며 코드를 익혔다.

4. csv파일을 읽어오기 때문에 서버가 필요하다. 서버는 노드로 띄웠다.

5. csv는 https://github.com/curran/data/tree/gh-pages/geonames 에 있는 cities100000.csv 파일이다.

> 코딩

1. 총 4273개의 도시의 인구를 원의 크기로, 경도(longitude)를 X축, 위도(latitude)를 Y축으로 그린다.

> 결과

1. 단지 위도, 경도를 range로 잡아 원만 그렸을 뿐인데 세계지도가 나타난다.

2. 모든 인류가 '물'을 중심으로 발전했다는 것을 증빙한다(?)

3. 참고로 서울이 16위고 부산이 67위다. 정확하게 언제적 자료인지는 못 찾았다. github에 올라와 있는 data는 3년전 것이다.

> 반성

1. D3관련 유튜브 강연들을 보고 책도 한권 읽었는데 아직 뭔가 뚜렷하게 잡히지 않는다.

2. 나만의 라이브러리집을 만들어 놓고 추후 필요할 때마다 copy&paste 할 수 있도록 기반을 닦는디.

3. 이미 지진 정보는 d3로 만들 수 있다. 그래도 뭔가 서비스가 될 수 있도록 만들어보자.

> 실행

1. 아래는 위 코드를 조금만 바꿔 실제로 돌린 svg 페이지다. 위 스샷과 비교해 이미지가 얼마나 선명한지 확인할 수 있다.

2. 벡터 기반이라 아무리 확대해도 이미지가 깨지지 않는다. 멋지다!