데이터 시각화를 위해 Plotly와 Dash를 사용하는 방법

이 기사 는 Lemony Hug가 작성한 " Plotly 및 Dash를 사용하여 데이터 시각화 및 생산 환경 배포 실현을 위한 데이터에서 배포까지 "에서 Huawei Cloud 커뮤니티에서 공유한 것입니다.

데이터 시각화는 데이터 분석의 중요한 부분으로, 데이터를 보다 직관적으로 이해하고 숨겨진 패턴과 추세를 발견하는 데 도움이 됩니다. Python에는 데이터 시각화를 위한 강력한 도구가 많이 있으며, Plotly와 Dash가 널리 사용되는 두 가지 도구입니다. Plotly는 다양한 대화형 그리기 기능을 제공하는 반면 Dash는 대화형 웹 애플리케이션을 구축하기 위한 Python 프레임워크입니다. 이 기사에서는 데이터 시각화를 위해 Plotly와 Dash를 사용하는 방법을 소개하고 사례 코드를 통해 해당 응용 프로그램을 보여줍니다.

Plotly와 Dash 설치

먼저 Plotly 및 Dash 라이브러리를 설치해야 합니다. 다음 명령으로 pip를 사용하여 설치할 수 있습니다.

pip 설치 플롯 대시

설치가 완료되면 이 두 라이브러리를 사용할 수 있습니다.

사례 코드: 간단한 데이터 시각화 애플리케이션

간단한 예부터 시작하겠습니다. 판매 데이터의 CSV 파일이 있고 이 데이터를 시각화하고 웹 애플리케이션으로 배포하기 위한 대화형 차트를 만들고 싶다고 가정해 보겠습니다. 먼저 필요한 라이브러리를 가져와야 합니다.

대시 가져오기
대시 가져오기 dcc, html에서
Plotly.express를 px로 가져오기
팬더를 PD로 가져오기

# 데이터 읽기
df = pd.read_csv('sales_data.csv')

#대시 애플리케이션 만들기
앱 = dash.Dash(__name__)

# 레이아웃
app.layout = html.Div([
    html.H1("판매 데이터 시각화"),
    dcc.그래프(
        id='판매-그래프'
    )
])

# 콜백
@app.콜백(
    dash.dependent.Output('판매-그래프', '그림'),
    [dash.dependent.Input('판매-그래프', '값')]
)
def update_graph(선택된_연도):
    Filtered_df = df[df['연도'] == selected_year]
    fig = px.bar(filtered_df, x='월', y='판매액', title=f'판매 데이터-{selected_year}')
    무화과 반환

# 신청 시작
__name__ == '__main__'인 경우:
    app.run_server(디버그=True)

이 예에서는 먼저 sales_data.csv라는 CSV 파일을 읽은 다음 Dash 애플리케이션을 만들었습니다. 애플리케이션의 레이아웃에서 제목과 빈 차트 영역을 정의합니다. 그런 다음 사용자가 다른 연도를 선택하면 차트가 업데이트되어 해당 연도의 판매 데이터를 표시하도록 콜백 함수를 설정합니다. 마지막으로 run_server 메소드를 호출하여 애플리케이션을 시작합니다.

코드가 제대로 실행될 수 있도록 sales_data.csv 파일에 필요한 데이터 필드(예: 연도, 월, 매출)가 포함되어 있는지 확인하세요.

사례 코드: 고급 데이터 시각화 및 상호 작용

이전 사례에서는 Dash와 Plotly를 사용하여 간단한 데이터 시각화 애플리케이션을 만드는 방법을 보여주었습니다. 이제 더 많은 상호작용성 및 사용자 정의 추가와 같은 몇 가지 고급 기능을 더 자세히 살펴보겠습니다.

판매 데이터의 추세를 표시하고 사용자가 다양한 제품 카테고리를 선택하여 다양한 추세를 볼 수 있도록 하려고 한다고 가정해 보겠습니다. 다음 코드를 통해 이 기능을 구현할 수 있습니다.

대시 가져오기
대시 가져오기 dcc, html에서
Plotly.express를 px로 가져오기
팬더를 PD로 가져오기

# 데이터 읽기
df = pd.read_csv('sales_data.csv')

#대시 애플리케이션 만들기
앱 = dash.Dash(__name__)

# 레이아웃
app.layout = html.Div([
    html.H1("판매 데이터 추세"),
    dcc.드롭다운(
        id='제품-드롭다운',
        옵션=[
            {'라벨': '제품 A', '값': '제품 A'},
            {'라벨': '제품 B', '값': '제품 B'},
            {'라벨': '제품 C', '값': '제품 C'}
        ],
        value='제품 A'
    ),
    dcc.그래프(
        id='판매-추세'
    )
])

# 콜백
@app.콜백(
    dash.dependent.Output('판매 추세', '그림'),
    [dash.dependent.Input('product-dropdown', 'value')]
)
def update_trend(선택된_제품):
    filtered_df = df[df['제품'] == selected_product]
    fig = px.line(filtered_df, x='월', y='판매액', title=f'{selected_product}판매 추세')
    무화과 반환

# 신청 시작
__name__ == '__main__'인 경우:
    app.run_server(디버그=True)

이 예에서는 사용자가 다양한 제품 카테고리를 선택할 수 있는 드롭다운 메뉴를 추가했습니다. 사용자가 다른 제품을 선택하면 차트가 업데이트되어 선택한 제품의 판매 추세를 표시합니다. 이를 통해 사용자는 다양한 제품의 판매를 더 유연하게 탐색할 수 있습니다.

단순한 선 차트 외에도 Plotly는 보다 복잡한 시각화 요구 사항을 충족하기 위해 다양한 차트 유형과 사용자 정의 옵션을 제공합니다. Dash를 사용하면 대화형 웹 애플리케이션을 구축하고 콜백 기능을 통해 차트를 동적으로 업데이트하여 사용자에게 더 나은 경험을 제공할 수 있습니다.

상호 작용 및 스타일 추가

위의 경우 Dash와 Plotly를 사용하여 데이터 시각화 애플리케이션을 만들고 기본적인 대화형 기능을 제공하는 방법을 보여주었습니다. 이제 앱을 더욱 매력적이고 사용하기 쉽게 만들기 위해 몇 가지 추가 상호 작용 및 스타일을 추가해 보겠습니다.

대시 가져오기
대시 가져오기 dcc, html, callback_context에서
Plotly.express를 px로 가져오기
팬더를 PD로 가져오기

# 데이터 읽기
df = pd.read_csv('sales_data.csv')

# 고유한 제품 목록을 가져옵니다.
available_products = df['제품'].unique()

#대시 애플리케이션 만들기
앱 = dash.Dash(__name__)

#스타일 적용
app.layout = html.Div([
    html.H1("판매 데이터 추세", style={'textAlign': 'center'}),
    html.Div([
        html.Label("제품 선택:"),
        dcc.드롭다운(
            id='제품-드롭다운',
            옵션=[{'label': 제품, 'value': 제품} available_products의 제품],
            값=available_products[0]
        )
    ], 스타일={'width': '50%', 'margin': 'auto', 'textAlign': 'center'}),
    dcc.그래프(
        id='판매-추세',
        config={'displayModeBar': False} # 차트의 모드 표시줄을 비활성화합니다.
    )
], 스타일={'padding': '20px'})

# 콜백
@app.콜백(
    dash.dependent.Output('판매 추세', '그림'),
    [dash.dependent.Input('product-dropdown', 'value')]
)
def update_trend(선택된_제품):
    filtered_df = df[df['제품'] == selected_product]
    fig = px.line(filtered_df, x='월', y='판매액', title=f'{selected_product}판매 추세')
    무화과 반환

# 신청 시작
__name__ == '__main__'인 경우:
    app.run_server(디버그=True)

이 예에서는 앱이 더욱 매력적으로 보이도록 몇 가지 스타일을 추가했습니다. 제목을 중앙에 배치하고 제품 드롭다운 주위에 공백을 추가하여 레이아웃의 미학을 추가했습니다. 또한 사용자 인터페이스를 단순화하기 위해 차트의 모드 표시줄을 비활성화했습니다.

이러한 개선을 통해 우리 앱은 이제 강력한 대화형 데이터 시각화 기능을 제공할 뿐만 아니라 더 나은 모양과 사용자 경험을 제공합니다. 이를 통해 사용자는 우리 앱을 사용하여 데이터를 탐색하고 그로부터 귀중한 통찰력을 얻을 의향이 더 커질 것입니다.

프로덕션 환경에 배포

데이터 시각화 애플리케이션 개발을 완료한 후 일반적으로 다른 사용자가 액세스하고 사용할 수 있도록 애플리케이션을 프로덕션 환경에 배포하려고 합니다. 이 섹션에서는 Dash 애플리케이션을 프로덕션 서버에 배포하는 방법에 대해 설명합니다.

Gunicorn 및 Nginx 사용

Gunicorn은 웹 애플리케이션의 HTTP 요청을 처리할 수 있는 Python WSGI(HTTP 서버) HTTP 서버입니다. Nginx는 고성능 HTTP 및 역방향 프록시 서버로 일반적으로 정적 파일 처리 및 로드 밸런싱에 사용됩니다.

먼저 Gunicorn과 Nginx를 설치해야 합니다.

pip 설치 건니콘
sudo apt-get nginx 설치

다음으로 Gunicorn을 사용하여 Dash 애플리케이션을 실행합니다.

gunicorn -w 4 -b 0.0.0.0:8050 your_app:app

그러면 Gunicorn 서버가 로컬로 시작되고 포트 8050에서 Dash 애플리케이션이 실행됩니다. 다음으로 Nginx를 역방향 프록시로 구성하여 HTTP 요청을 Gunicorn 서버로 전달해야 합니다.

Nginx 구성

Nginx의 구성 파일에 다음 내용을 추가합니다.

서버 {
    들어라 80;
    서버_이름 your_domain.com;

    위치 / {
        프록시패스 http://127.0.0.1:8050;
        Proxy_redirect 꺼짐;
        Proxy_set_header 호스트 $host;
        Proxy_set_header X-Real-IP $remote_addr;
        Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        Proxy_set_header X-Forwarded-Proto $scheme;
    }
}

your_domain.com을 도메인 이름으로 바꾸세요. 그런 다음 Nginx 구성을 다시 로드합니다.

sudo systemctl reload nginx

이제 귀하의 Dash 애플리케이션이 프로덕션 환경에 성공적으로 배포되었으며 귀하의 도메인 이름을 통해 액세스할 수 있습니다.

HTTPS 사용

보안을 강화하기 위해 HTTPS 프로토콜을 사용하도록 Nginx를 구성할 수도 있습니다. SSL 인증서를 얻어 Nginx에 구성해야 합니다. 쉬운 방법은 Let's Encrypt를 사용하여 무료 SSL 인증서를 얻는 것입니다. 다음은 간단한 구성 예입니다.

서버 {
    들어라 80;
    서버_이름 your_domain.com;

    위치 / {
        301 https://$host$request_uri를 반환합니다.
    }
}

서버 {
    443 SSL을 들어보세요;
    서버_이름 your_domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    위치 / {
        프록시패스 http://127.0.0.1:8050;
        Proxy_redirect 꺼짐;
        Proxy_set_header 호스트 $host;
        Proxy_set_header X-Real-IP $remote_addr;
        Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        Proxy_set_header X-Forwarded-Proto $scheme;
    }
}

이러한 방식으로 구성되면 Dash 애플리케이션은 HTTPS 프로토콜을 통해 제공되고 모든 HTTP 요청은 HTTPS로 리디렉션됩니다.

통합 사용자 인증 및 권한 관리

경우에 따라 데이터 시각화 응용 프로그램에 대한 액세스를 특정 사용자 또는 사용자 그룹으로 제한할 수도 있습니다. 이를 달성하기 위해 사용자 인증과 권한 관리 시스템을 통합할 수 있습니다.

기본 인증 사용

간단한 방법은 기본 인증을 사용하는 것입니다. 사용자가 애플리케이션에 액세스하기 전에 사용자 이름과 비밀번호를 제공하도록 요구하도록 Nginx에서 기본 인증을 구성할 수 있습니다. 다음은 샘플 Nginx 구성입니다.

서버 {
    443 SSL을 들어보세요;
    서버_이름 your_domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    위치 / {
        auth_basic "접근 제한";
        auth_basic_user_file /etc/nginx/.htpasswd;

        프록시패스 http://127.0.0.1:8050;
        Proxy_redirect 꺼짐;
        Proxy_set_header 호스트 $host;
        Proxy_set_header X-Real-IP $remote_addr;
        Proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        Proxy_set_header X-Forwarded-Proto $scheme;
    }
}

이 구성에서는 auth_basic 지시문을 사용하여 기본 인증을 활성화하고 비밀번호 파일 /etc/nginx/.htpasswd를 지정합니다. 이 비밀번호 파일을 생성하고 여기에 사용자 이름과 비밀번호를 추가하려면 htpasswd 도구를 사용해야 합니다.

OAuth 인증 사용

또 다른 일반적인 방법은 OAuth 인증을 사용하는 것입니다. OAuth를 통해 사용자의 인증 프로세스를 Google, GitHub 등과 같은 타사 ID 공급자에 위임할 수 있습니다. 사용자가 제3자 ID 공급자를 통해 성공적으로 인증되면 애플리케이션에 액세스할 수 있습니다.

Dash의 dash-auth 라이브러리를 사용하여 OAuth 인증을 구현할 수 있습니다. 이 라이브러리는 여러 OAuth 공급자를 통합하고 Dash 애플리케이션에 대한 액세스를 제한하는 쉬운 방법을 제공합니다.

권한 관리 추가

인증 외에도 사용자에게 특정 데이터나 기능에 대한 액세스 권한이 있는지 확인하도록 권한을 부여할 수도 있습니다. 일반적인 접근 방식은 애플리케이션에 역할 기반 액세스 제어(RBAC) 시스템을 구현하는 것입니다. RBAC를 사용하면 사용자를 다양한 역할에 할당하고 애플리케이션의 다양한 역할에 대한 액세스를 제한할 수 있습니다.

Dash 애플리케이션에 RBAC 시스템을 구현하여 사용자가 자신의 역할에 따라 특정 작업을 수행할 권한이 있는지 확인할 수 있습니다. 여기에는 사용자가 로그인할 때 사용자의 역할을 확인하고 역할에 따라 앱의 기능과 데이터 액세스를 동적으로 조정하는 작업이 포함될 수 있습니다.

로깅 및 오류 처리

프로덕션 환경에 애플리케이션을 배포할 때 로깅 및 오류 처리는 매우 중요합니다. 좋은 로깅은 애플리케이션의 작동을 추적하고 적시에 문제를 감지하고 해결하는 데 도움이 될 수 있습니다. 오류 처리를 통해 애플리케이션 안정성을 향상하고 오류로 인한 서비스 중단을 줄일 수 있습니다.

로깅 구성

먼저 애플리케이션에 대한 로깅을 구성해 보겠습니다. Dash 애플리케이션은 일반적으로 로그를 stdout 또는 stderr로 출력합니다. 이러한 로그를 파일로 리디렉션하여 기록할 수 있습니다. 또한 Python의 로깅 모듈을 사용하여 고급 로깅을 구현할 수도 있습니다.

수입 로깅

login.basicConfig(파일 이름='app.log', 수준=logging.INFO)

위의 코드를 Dash 애플리케이션에 추가하면 app.log라는 파일에 로그가 기록되고 로깅 수준이 INFO로 설정됩니다. 필요에 따라 로그 수준을 조정하여 다양한 수준의 정보를 기록할 수 있습니다.

오류 처리

또 다른 중요한 측면은 오류 처리입니다. 애플리케이션에서 오류가 발생하면 사용자에게 친숙한 오류 메시지를 제공하면서 이러한 오류를 캡처하고 기록할 수 있기를 원합니다.

Dash 애플리케이션에서는 try-Exception 블록을 사용하여 예외를 포착하고 오류 페이지를 반환하거나 예외가 발생할 때 친숙한 오류 메시지를 표시할 수 있습니다.

@app.server.errorhandler(예외)
def handler_error(e):
    logging.error(f'오류가 발생했습니다: {str(e)}')
    return html.H1("죄송합니다! 문제가 발생했습니다."), 500

위의 코드에서는 모든 예외를 포착하는 오류 처리 함수인 handler_error를 정의합니다. 예외가 발생하면 오류 메시지를 기록하고 오류 메시지가 포함된 페이지를 사용자에게 반환합니다.

좋은 로깅 및 오류 처리를 통해 우리는 애플리케이션의 작동을 더 잘 이해할 수 있으며 오류가 발생할 경우 적절한 조치를 취하여 애플리케이션의 안정성과 신뢰성을 보장할 수 있습니다.

모니터링 및 성능 최적화

마지막으로 애플리케이션이 프로덕션 환경에 배포되면 정기적으로 애플리케이션 성능을 모니터링하고 성능을 최적화하기 위한 조치를 취해야 합니다. 여기에는 애플리케이션의 응답 시간, 메모리 사용량, CPU 로드 및 기타 지표를 모니터링하고 모니터링 결과를 기반으로 한 최적화가 포함됩니다.

Prometheus, Grafana 등과 같은 모니터링 도구를 사용하여 애플리케이션 성능 지표를 모니터링하고 모니터링 결과에 따라 조정 및 최적화를 수행할 수 있습니다.

요약하다

이 기사에서는 Dash 애플리케이션을 프로덕션 환경에 배포하기 위한 주요 단계와 필요한 조치에 대해 자세히 설명합니다. 먼저 Gunicorn과 Nginx를 사용하여 Dash 애플리케이션을 배포하는 방법을 논의하고 HTTPS 프로토콜을 통해 애플리케이션 보안을 향상시키는 방법을 보여주었습니다. 다음으로, 사용자 인증과 권한 관리 시스템을 통합하는 방법과 로깅 및 오류 처리를 구성하여 애플리케이션 안정성과 신뢰성을 향상시키는 방법을 살펴보았습니다. 마지막으로 모니터링과 성능 최적화의 중요성을 강조하고 몇 가지 모니터링 도구와 최적화 방법을 제안합니다. 이러한 조치를 통해 우리는 Dash 애플리케이션을 프로덕션 환경에 배포하고 프로덕션 환경에서 더욱 강력하고 안정적으로 만들며 사용자에게 고품질 서비스와 경험을 제공할 수 있습니다.

화웨이 클라우드의 신기술에 대해 빨리 알아보고 팔로우하려면 클릭하세요~