Wookang makes AI

● 지진 연도별 발생 횟수 시각화 작업 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. 벡터 기반이라 아무리 확대해도 이미지가 깨지지 않는다. 멋지다!

● 우리동네 장애인 주차구역 불법 주차 통계

> 들어가는 말

1. 지난 2017년 8월 27일부터 오늘 2017년 11월 6일까지 현재 거주하고 있는 오피스텔의 장애인 주차구역 불법 주차 차량들에 대해 조사했다. 물론 생활불편신고 앱으로 실제 신고하고 '처리'가 완료된 차들로만 정리했다.

2. 전체 기간은 약 100일이지만 실제 찍은 날짜는 약 60일 가량이다. 

3. 추석 연휴에도 찍지 못했다.

4. 거의 대부분 새벽시간에 신고했다. 따라서 신고날짜가 '토요일'로 표시된 것은 사실상 '금요일'에 불법 주차된 차량이다.

5. 차량번호는 공개할 수 없어 차 브랜드로 대신했다.

> 차량별 신고 건수 (총 66건)

1. 신고를 하며 제일 놀란 것은 '계속 신고'해도 '계속 불법주차'한다는 것이다.

2. 위 표는 해당 기간동안 불법주차한 차들의 적발 건수이다.

3. 총 20대가 불법 주차했으며 한번만 불법주차한 차량이 10대, 2번이상 불법주차한 차량이 똑같이 10대이다.

4. 아우디 차량이 10번으로 단독질주하고 있다. 해당 차량은 리스차량으로 이미 수백만원의 과태료가 부과되었는데 현재 연락이 되지 않는다고 한다. 하지만 우리 오피스텔에는 정기적으로 꾸준히 장애인 구역 불법주차하고 있다.

5. 위 표에서 바이크는 더 이상 불법주차하지 않는다.

6. 나머지 n번의 불법 전과 차량들은 지금도 성실히 불법주차중이다.

> 브랜드별 적발 건수

1. 아우디와 기아는 1.2등 차량이 독보적으로 많기도 했지만 다른 차량들의 불법주차도 많았다. (체감적으로는 기아가 1등, 아우디가 2등이었다)

2. 그에 반해 벤츠와 현대는 3,4등 차량을 제외하고 거의 불법주차가 없었다.

> 요일별 적발 건수

1. 역시 금요일 밤에 불법주차가 제일많았고(위에서 이미 언급했지만 새벽에 찍어 날짜가 하루씩 밀렸다) 다음이 토요일 밤 그리고 다음이 일요일 밤 순이다.

> 결론

1. 일단은 데이터를 엑셀로 정리했다.

2. 이 오피스텔에 얼마나 있을지 모르겠지만 있는 동안은 계속 신고할 생각이다.

4. 데이터만 있다면 시도별 불법주차 현황이나 기간별 추이같은 걸 시각화하거나 만들어보고 싶은데,

4. 데이터가 없다 ㅋ

5. 끝.