Wookang makes AI

• 터미널 열기 단축키

• 설정>키보드에 들어간다.

• 원하는 키를 세팅한다

1. Super + E : 탐색기 열기 ## 추가

2. Alt + C : 크롬 열기 ## 추가

3. Super + D : 바탕화면 보기 ## 추가. 그런데 잘 먹히지 않는다;;

4. Alt + T : 바탕화면에서 터미널을 실행 ## 추가

5. Ctrl + Shift + T : 터미널내에서 새탭으로 터미널을 실행

6. Ctrl + Shift + N : 터미널내에서 새로운 터미널을 실행

7. Ctrl + Shift + W : 탭으로 실행된 터미널을 종료

8. Ctrl + Shift + Q : 현재 터미널을 종료(탭포함)

9. Ctrl + Shift + F : 터미널내에 문자열검색

10. Alt + 숫자 : 탭간에 이동

11. Ctrl + PageUp/PageDown : 다음/이전 탭으로 이동

• 숨김 파일 보기

1. ctrl + H

2. ls -a

• 파일 위치 확인

1. 크로미움 브라우저를 확인한다면

2. which chromium-browser

3. 결과 : /usr/bin/chromium-browser

• 내 현재 디렉터리 위치 확인

• pwd

• 설치한 프로그램의 위치

1. 일반적으로

• /usr/bin

2. 해당 폴더에서 검색한 후 비슷한 이름을 찾는다. 없더라도 .sh 파일안에 실행파일이 숨겨져 있다.

3. sublime의 경우 subl 이란 스크립트 쉘 파일이 있으며 그 안에 위치는 아래와 같다.

• /opt/sublime_text/sublime_text

우분투 설정 정리

• 프로그램 설치 (파일이 .deb 일때)

1. 다운 받은 파일의 위치에서 터미널을 연다.

2. sudo dpkg -i 패키지명.deb

3. 예를 들어, 아래는 vs code의 설치방법이다.

4. sudo dpkg -i code_1.19.2-1515599945_amd64.deb

• 파일 내용확인. 패키지에 대한 정보 제공

• sudo dpkg --info XXX.deb

+ (curl 이나 apt-get이 있을 때) 노드 설치

• 아마존 환경이 아닌 PC의 우분투에는 curl이 깔려 있지 않아 curl부터 설치해야 한다.

• sudo apt-get install curl

• sudo curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -

• sudo apt-get install -y nodejs

• 위와 같이 하면 최선 버전의 노드가 설치된다.

• 프로그램 삭제

1. 어느 위치든

2. sudo dpkg -P 패키지명.deb (--purge, 패키지 삭제 및 설정파일까지 삭제)

3. sudo dpkg -r XXX.deb (--remove, 패키지 삭제)

• 설치한 프로그램의 위치

1. 일반적으로

• /usr/bin

2. 해당 폴더에서 검색한 후 비슷한 이름을 찾는다. 없더라도 .sh 파일안에 실행파일이 숨겨져 있다.

3. sublime의 경우 subl 이란 스크립트 쉘 파일이 있으면 그 안에 위치는 아래와 같다.

• /opt/sublime_text/sublime_text

• 파일 패키지 확인

1. 아래와 같이 dpkg -L (꼭 대문자를 써야한다)로 확인

2. dpkg -L chromium-browser

• 파일 압축 풀기

확장자가 tar일경우 : tar xvf FILENAME.tar

확장자가 tar.gz일경우 : tar xvzf FILENAME.tar.gz

확장자가 tar.bz2일경우 :  use tar xvjf FILENAME.tar.bz2

1. tar.gz 압축 풀기. 아래는 로보몽고 압축풀기. 해당 폴더로 이동 후

2. tar -xzvf robo3t-1.1.1-linux-x86_64-c93c6b0.tar.gz

• 압축 파일 설치

1. 먼저 압축이 풀린 폴더 안으로 이동한 후

2. 그 안에 config 폴더가 있는지 확인한다. 그게 있다면

3. ./configure

4. make

5. sudo make install

6. 이렇게 설치가 가능하다.

7. configure가 없을 경우 일반적으로

8. 해당 폴더를 /usr/local/bin/ 에 새로 폴더를 만들어 이동시킨 후 실행파일을 찾아 실행한다.

9. 예를들어

• Download 폴더에 있는 압축 파일을 풀고

• tar -xzvf robo3t-1.1.1-linux-x86_64-c93c6b0.tar.gz

• 다음 압축이 풀린 폴더로 이동한 후,

• 이동시킬 폴더를 먼저 만들고

• sudo mkdir /usr/local/bin/robomongo

• cd /usr/local/bin/robomongo/bin 아래에 모든 파일을 이동시킨다.

• 예) sudo mv robo3t-1.1.1-linux-x86_64-c93c6b0/* /usr/local/bin/robomongo/

• 다음 robomongo아래에 bin폴더로 이동하여 robot3t를 실행시키다(혹은 더블클릭)

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

> 들어가는 말

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

> 실제 작업물