728x90
728x90

넘파이 난수 생성

import numpy as np

numpy.random.rand(d0,d1,...)

>>> a = np.random.rand()
>>> a

0.8265127132486283

>>> b = np.random.rand(10)
>>> b

array([0.52378504, 0.35727214, 0.35869626, 0.58862312, 0.39184057,
       0.49020887, 0.64360582, 0.08130151, 0.12713493, 0.42913997])
       

numpy.random.randn(d0, d1, ..., dn)

>>> c = np.random.randn()
>>> c
0.21423335992324902


>>> d = np.random.randn(10)
>>> d
array([-1.28840094, -2.03541272, -1.08534621, -0.3659988 ,  2.13054496,
       -0.37173855,  0.19194732,  0.91521406, -0.85081639, -0.68821558])

>>> e = np.random.randn(10,1)
>>> e
array([[-0.17924635],
       [ 1.09098268],
       [ 1.10546769],
       [-0.78903644],
       [ 1.29073505],
       [-1.08213603],
       [-1.08580595],
       [-0.34082787],
       [ 0.10444354],
       [ 0.08724687]])

 

numpy.random.randint(low, high=None, size=None, dtype='l')

>>> np.random.randint(5, size=(2, 4))
array([[4, 0, 2, 1],
       [3, 2, 2, 0]])

- 0,1로 이루어진 난수 생성

>>> np.random.randint(2, size=10)
array([1, 0, 0, 0, 1, 1, 0, 0, 1, 0])

 

https://docs.scipy.org/doc/numpy-1.15.0/index.html
728x90
728x90

파이프 라인 - PipeLine

- 데이터 처리 컴포넌트(Component)들이 연속되어 있는것

 

데이터 수집

- 데이터 다운로드

- 크롤링

- 데이터 저장소 API 사용

 

데이터 구조 확인

- 판다스(Pandas) DataFrame의 메소드들을 활용 ex)head() , info() describe()등

- 그래프를 활용 ex) matplotlib , seaborn 등

 

데이터 훈련 / 테스트 셋 분리 - train test split

- 사이킷런 train_test_split

- 데이터 스누핑 : 기대성능이 나오지 않을 가능성이 있음

- 계층적 샘플링 : 데이터셋 샘플링에서 발생할 수 있는 편향을 계층이라는 그룹핑을 통해 하위 데이터셋을 계층 비율에 맞춰 샘플링

 

 

데이터 이해를 위한 탐색과 시각화

- matplotlib을 활용

- 상관계수 조사 

- 판다스 plot 산점도 행렬을 이용한 히스토그램 확인

- 특성 조합으로 확인

 

데이터 정제

- 특성값이 없는 경우 

- 해당 구역을 제거

- 전체 특성을 삭제

- 어떤 값으로 채움 (0, 평균, 중간값 등)

- 사이킷런 SimpleImputer

- 텍스트와 범주형 특성

- 특성 스케일링 : StandardScaler() , MinMaxScaler()

 

모델 선택과 훈련

- 훈련세트에서 훈련하고 평가 : LinearRegression() 

- 훈련 세트에 대한 모델 RMSE : mean_squared_error()

- 사이킷런의 k-겹 교차 검증 : k-fold cross-validation

- 교차검증을 사용한 평가 : cross_val_score()

 

모델 세부 튜닝

-적은 수의 조합 탐색 그리드 탐색 : GridSearchCV()

-탐색 공간이 클때 RandomizedSearchCV)-

- 앙상블

- 최상의 모델과 오차 분석 : feature_importances_

 

728x90
728x90

계층적 샘플링 - Stratified sampling

- 모집단을 여러개의 층으로 구분하여, 각 층에서 n개씩 랜덤하게 추출하는 방법

- 순수한 무작위 샘플링 방식은 데이터의 크기가 충분히 크지 않은 상황 등 샘플링 편향이 발생할 수 있는 가능성이 생길수 있습니다. 

- 전체 데이터를 계층별 그룹으로 나눈뒤 . 테스트 세트가 전체 데이터의 각 계층의 계수 비율 만큼 샘플링 합니다.

 

 

사이킷 런 계층적 샘플링 - sklearn.model_selection.StratifiedShuffleSplit

- 사이킷 런에서 제공하는 API 참고 자료의 예제를 통해 알아 보겠습니다.(*사이런을 먼저 설치 합니다.)

 

StratifiedShuffleSplit(n_splits=10, *, test_size=None, train_size=None, random_state=None

- 사용할 수 있는 parameter 들입니다.

n_splits int , default = 10
분리할 데이터 셋의 개수를 지정합니다.
test_size float, int, default = None
테스트 셋의 비율을 지정합니다.
train_size float, int, defalt = None
훈련 셋의 비율을 지정합니다.
random_state int or RandomState instance, defalt = None
생성된 훈련 및 데스트 셋 난수를 지정

예제

- 파이썬 numpy를 이용해 ndarray를 생성합니다.

- 사이킷런 StratifiedShuffleSplit 을 사용해 계층적 샘플링을 진행합니다.

>>> import numpy as np
>>> from sklearn.model_selection import StratifiedShuffleSplit

>>> X = np.array([[1,2],[3,4],[1,2],[3,4],[1,2],[3,4]])
>>> y = np.array([0,0,0,1,1,1])

>>> print('X : \n', X)
>>> print('y : \n', y)

X : 
 [[1 2]
 [3 4]
 [1 2]
 [3 4]
 [1 2]
 [3 4]]
y : 
 [0 0 0 1 1 1]

- 5개 계층으로 나누고, 테스트 셋 비율을 0.5 로 지정합니다.

split = StratifiedShuffleSplit(n_splits = 5 , test_size = 0.5, random_state = 0)

StratifiedShuffleSplit Methods 

- 사용할수 있는 함수로는 get_n_splits() 와 split() 함수가 있습니다.

- get_n_splits() 함수는 X , y의 arguments 로 features 데이터 셋와 labels 등 데이터 셋을 대입하면, return 값으로 n_plits 을 반환합니다.

>>> split.get_n_splits(X, y)
5

- split() 함수는 데이터를 훈련 및 테스트 세트로 분할하기 위한 인덱스를 생성해 반환합니다.

>>> for train_index , test_index in split.split(X,y):
		print('train_index : ', train_index, 'test_index : ', test_index)

train_index :  [5 2 3] test_index :  [4 1 0]
train_index :  [5 1 4] test_index :  [0 2 3]
train_index :  [5 0 2] test_index :  [4 3 1]
train_index :  [4 1 0] test_index :  [2 3 5]
train_index :  [0 5 1] test_index :  [3 4 2]

 

Scikit learn API Reference
https://scikit-learn.org/stable/modules/generated/sklearn.model_selection.StratifiedShuffleSplit.html

 

 

 

728x90
728x90

  jQuary 적용하기  

- 각 스킬들의 게이지 크기를 각각 적용 시키기 위해 Jquery를 사용하기로 했습니다.

- jQuary 를 설치하는 방법은 js파일을 다운로드하여 웹 디렉토리안에 저장하거나 CDN 방법이 있습니다.

- 저는 다운로드하여 디렉토리에 저장한 후 사용하기로 했습니다.

- jQuary는 아래의 링크를 통해 접속하면 받을 수 있습니다.

jquery.com/

 

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

- 다운로드 받은 파일을 static > js 디렉토리안에 넣어 줍니다.

- <head> 태그 안에 아래의 명령어로 js 파일을 적용 시킵니다.

<script src='../static/js/jquery-3.5.1.min.js'></script>

  jQuary 적용 확인   

- static > js 디렉토리에 common.js 파일을 생성해서 간단한 예제코드로 잘 적용 되었는지 확인해 보겠습니다.

- common.js를 index.html에 불러 옵니다.

{% extends 'layout.html' %}
{% block content %}
<script src='../static/js/common.js'></script>
<div id='maintext'>Welcome to My PortFolio</div>
<div id="mainsubtext">
    <p>Breath</p>
    <p>- Everything will be made by me.</p>
</div>
<div id='mainimg'>
    <img src="../static/img/main/main_img.jpg" alt="MainImage">
</div>
{% endblock %}

- common.js 파일 안에 아래의 명령어를 입력해 index페이지에 접속시 알림창이 나오도록 합니다.

$(document).ready(function(){
    alert("Hello World");
})

- index페이지에 접속 합니다.

- 알림창이 나온 것 을 확인 할 수 있습니다.

- 이제 jQuary를 이용해서 프로그레스 바를 완성 시켜 보겠습니다.

 

  프로그레스바 - 게이지 - jQuery 코드 작성  

  게이지 크기 지정  

- 모든 스킬들의 프로그레스바 게이지들을 span태그로 만들어지고 class = "gauge" 로 정의 되어 있습니다.

- span.gauge 의 속성 per의 값은 게이지의 크기값을 가지고 있습니다.

<span class="gauge"  per="95">
</span>

- about.html 의 스킬들의 per값을 각각 지정해 줍니다.

- jQuery 선택자로 gauge 를 선택 합니다.

- 이때 모든 span.gauge에 css를 적용하기 위해서 each() 함수를 사용하고 이 안에 funtion(){} 을 사용합니다.

- 각각의 span.gauge를 선택 하기 위해서 $(this)를 사용합니다.

- $(this)로 선택된 태그의 속성 per의 값을 가져옵니다.

- 속성값을 변수에 저장하고 css()를 사용해서 width 값을 지정해줍니다.

$(document).ready(function () {
    $('.gauge').each(function () {
        var $this = $(this);
        var per = $this.attr('per');
        $this.css('width', per + "%");
    });
});

- 이제 확인해 보겠습니다.

- 각 속성값에 맞게 들어 크기가 변했습니다.

- 이제 animation / 애니메이션을 적용 시켜 보겠습니다.

  jQuery 애니메이션(Animation) 적용  

- about 페이지 접속시 게이지가 정해놓은 퍼센트 만큼 차츰 커지는 애니메이션을 적용시키려고 합니다.

- 먼저 게이지의 시작점을 잡아주기 위해 css 파일에 지정해놓은 span.gauge의 width 값을 10%로 변경합니다.

#myskills > .skill > .progressbar > .gauge {
    display: inline-block;
    width:10%;
    height: 21px;
    background-color: #3abff7;
    border-radius: 10px;
    transition: 1s linear;
}

- common.js 에서 css()부분을 삭제하고 animation()을 사용하겠습니다.

- $this를 사용하여 태그들을 선택하고 각 태그들의 per 속성값을 width값으로 지정해서 animation을 적용합니다.

$(document).ready(function () {
    $('.gauge').each(function () {
        var $this = $(this);
        var per = $this.attr('per');
        $this.animate({
            width: per + "%"
        });
    });
});

- 잘 적용 되었는지 확인해 보겠습니다.

- gif 파일이라 조금 끊겨 보이지만 웹에서는 잘 작동 하고 있습니다.

- about 페이지가 완겅 되었습니다.

- 다음포스팅부터 Portfolio 페이지를 진행해 보겠습니다.

728x90
728x90

  프로그레스바 progress bar  

- 프로젝트의 진행 정도나 내 스킬 숙련도를 나타내기 위한 방법으로 프로그레스바 progress bar를 넣어주려고 합니다.

 

  span 태그 추가  

- 프로그레스 바를 만들기 위해 span.progressbar태그와 추가적으로 이 태그 안에 span.guage 태그를 만들어 줍니다.

        <span class="progressbar">
            <span class="gauge">
                gauge
            </span>
        </span>

 

  css 스타일 추가  

- css 에서 값을 지정해 주겠습니다.

- span.gauge의 속성은 display를 inline-block 으로 만들고 width 값을 숙련도에 맞게 줍니다. Python 에는 95%를 주었습니다.

- 높이 값은 span.progressbar의 높이와 똑같이 줍니다.

- background-color #3abff7 색상 코드를 입력해 줍니다.

- 게이지의 크디가 잘 보이기 위해 span.progressbar 의 백그라운드 색상코드 값으로 #d6d3d3을 주고 border값을 삭제 하겠습니다.

 

#myskills > .skill > .progressbar {
    display: inline-block;
    width: 520px;
    height: 21px;
    background-color: #d6d3d3;
}

#myskills > .skill > .progressbar > .gauge {
    display: inline-block;
    width: 95%;
    height: 21px;
    background-color: #3abff7;
}

 

- span 의 모양이 사각형입니다.

- 모서리 부분을 둥글게 만들어 줘야 합니다.

- span.progreebar 와 span.gauge 에 border-radius 값으로 10px;을 지정해 주겠습니다.

#myskills > .skill > .progressbar {
    display: inline-block;
    width: 520px;
    height: 21px;
    border: 3px solid blue;
    border-radius: 10px;
}

#myskills > .skill > .progressbar > .gauge {
    display: inline-block;
    width: 95%;
    height: 21px;
    background-color: #3abff7;
    border-radius: 10px;
}

- 이제 각 스킬들이 들어 가는 부분에 span.gauge들을 추가해 주겠습니다.

- 모두 잘 적용 되었습니다.

- 그런데 각 수치 마다 게이지의 크기가 달라져야 합니다.

- css nth-child 나 선택자를 통해서 정해 줄 수 있지만, 코드가 너무 길어 질거 같습니다.

- JavaScipt 를 통해서 지정해 주면 좋을것 같습니다.

- 이부분은 다음 포스팅에서 구현해 보도록 하고,  css animation 효과를 적용 시켜보겠습니다.

 

728x90
728x90
728x90

+ Recent posts