Flask와 Plotly를 이용한 자동 새로 고침 데이터 시각화 대시보드 구현하기
Overview
데이터 시각화는 데이터를 이해하고 통찰력을 얻는 데 중요한 역할을 합니다. Flask와 Plotly를 이용해 자동으로 새로 고침되는 대시보드를 구현하면 사용자에게 실시간으로 변하는 데이터의 시각적 표현을 제공할 수 있습니다. 이번 포스트에서는 Flask 웹 프레임워크와 Plotly 라이브러리를 사용하여 간단한 데이터 시각화 대시보드를 구축하는 방법을 단계별로 살펴보겠습니다.
1. 필요한 도구와 라이브러리 설치
먼저, Flask와 Plotly를 사용하기 위해 필요한 라이브러리를 설치합니다. Python 환경이 필요하며, 아래의 명령어를 사용하여 설치할 수 있습니다.
pip install Flask plotly pandas2. 기본 Flask 애플리케이션 구조 설정
Flask 애플리케이션의 기본 구조를 설정합니다. 프로젝트 폴더를 만들고, 그 안에 app.py라는 파일을 생성합니다.
/my_dashboard
├── app.py
└── templates
└── dashboard.htmlapp.py는 Flask 서버를 설정하고 데이터를 가져오는 역할을 하며, dashboard.html은 대시보드의 HTML 구조를 담당합니다.
3. Flask 서버 구현
다음으로 app.py 파일을 열어 Flask 서버를 설정합니다. 아래의 코드는 기본적인 Flask 서버의 구성입니다.
from flask import Flask, render_template, jsonify
import pandas as pd
import random
import time
app = Flask(__name__)
# 더미 데이터를 생성하는 함수
def generate_data():
# 시간에 따른 랜덤 데이터 생성
timestamp = time.time()
value = random.randint(1, 100)
return {'timestamp': timestamp, 'value': value}
@app.route('/')
def index():
return render_template('dashboard.html')
@app.route('/data')
def data():
# JSON 형식으로 데이터 반환
return jsonify(generate_data())
if __name__ == '__main__':
app.run(debug=True)코드 설명
generate_data함수는 현재 시간과 랜덤 값을 생성하여 딕셔너리 형태로 반환합니다. 이 데이터를 기반으로 실시간 그래프를 업데이트할 것입니다./경로는 대시보드의 메인 페이지를 렌더링하며,/data경로는 클라이언트가 AJAX 요청을 통해 데이터를 가져올 수 있도록 설정합니다.
4. HTML 대시보드 구조 설정
templates/dashboard.html 파일을 생성하고 다음의 내용을 추가합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자동 새로 고침 대시보드</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 100%; height: 100%;"></div>
<script>
var data = [];
var layout = {
title: '실시간 데이터 시각화',
xaxis: { title: '시간' },
yaxis: { title: '값' }
};
function fetchData() {
$.getJSON('/data', function(response) {
var newTime = new Date(response.timestamp * 1000);
var newValue = response.value;
// 데이터 배열에 새로운 데이터를 추가
data.push({ x: [newTime], y: [newValue], mode: 'lines+markers', type: 'scatter' });
// 그래프 업데이트
Plotly.newPlot('myDiv', data, layout);
});
}
// 1초마다 fetchData 함수 호출
setInterval(fetchData, 1000);
</script>
</body>
</html>HTML 코드 설명
<div id="myDiv">는 Plotly로 그래프를 그릴 HTML 요소입니다.fetchData함수는/data경로에서 데이터를 요청하고, 응답받은 데이터로 그래프를 업데이트합니다.setInterval함수를 사용하여 1초마다fetchData함수를 호출하여 자동으로 데이터를 가져옵니다.
5. 애플리케이션 실행
이제 모든 코드가 준비되었으니, 아래의 명령어로 Flask 애플리케이션을 실행할 수 있습니다.
python app.py서버가 실행되면 브라우저에서 http://127.0.0.1:5000/에 접속하여 대시보드를 확인할 수 있습니다. 이때, 대시보드에는 매초 새로운 데이터가 추가되어 시각화됩니다.
6. 에러 및 문제 해결
- CORS 오류: 만약 다른 도메인에서 요청을 보내는 경우 CORS(Cross-Origin Resource Sharing) 오류가 발생할 수 있습니다. 이를 해결하기 위해 Flask-CORS를 설치하고 설정할 수 있습니다.
pip install flask-cors그런 다음 app.py에 다음 코드를 추가합니다.
from flask_cors import CORS
app = Flask(__name__)
CORS(app)- 데이터 업데이트가 이루어지지 않음: 이 경우 AJAX 요청이 실패하는지 확인하고, 서버에서 올바른 데이터를 반환하는지 로그를 통해 점검해보세요.
7. 결론
Flask와 Plotly를 사용하여 자동 새로 고침되는 데이터 시각화 대시보드를 구현하는 과정에 대해 살펴보았습니다. 이 구조를 바탕으로 다양한 데이터 소스와 복잡한 시각화 요소를 추가하여 더욱 풍부한 대시보드를 만들 수 있습니다. 앞으로 더 복잡한 기능이나 디자인을 추가해 나가는 것도 좋은 방향일 것입니다.
참고문서
'Study Information Technology' 카테고리의 다른 글
| Apache Airflow로 데이터 파이프라인 구축하기 ETL 프로세스 자동화 (0) | 2024.10.22 |
|---|---|
| 레시피 스크래퍼 만들기 다양한 웹사이트에서 요리 레시피 자동 수집 및 정리하기 (0) | 2024.10.22 |
| 웹 스크래퍼 개발하기 Beautiful Soup로 온라인 데이터 추출하기 (0) | 2024.10.22 |
| 데이터 손실 방지를 위한 자동 백업 스크립트 생성하기 (0) | 2024.10.22 |
| 웹 기반 프로젝트 관리 도구 만들기 자동화된 작업 할당 및 마감 기한 알림 시스템 (0) | 2024.10.22 |