[짧막한 인삿말]
안녕하세요 저 살아있습니다 하하.. 복습 블로그를 절대 미루지 않기로 약속했지만.. ADSP자격증과 SQLD 자격증을 연달아 잡고난 후 지난 주에 급 SQL을 미친듯이 공부한다고 복습+ 복습블로그 + SQL 공부까지 돌릴 자신이 없어 블로그를 잠시 쉬어가자 했어요ㅠㅠㅠ 그리고 시험은 넘흐나 어려웠고 아직 SQL어린이는 더 공부해 다음 시험을 맞이하는 것으로 경험 쌓았다 생각했답니다..
(2개 연달아 신청한 과거의 나 반성해)
1. 태블로(Tableau)
태블로 회원가입을 해주고 다운로드 해줍니다! 저는 14일 무료가 있어서 이걸로 받았어요 (대학생분들은 꼭 학생인증 받으시고 1년 동안 무료로 사용하세요- ★ )
초기 화면이 뜨면 사용할 데이터를 연결해줍니다. 해당 데이터를 불러온 후 워크시트로 이동하면
[필드 배치] 열에 일(날짜)로 드래그 행은 판매량으로 드래그 한후 막대 그래프로 설정
그래프는 막대 그래프 이외에도 히트맵, 파이 차트 등 선택할 수 있어요!
● 파이 그래프(비율 그래프) 그리기
제가 하면서도 가장 헷갈렸던게 파이 그래프 그리기인데요! 복습하면서 다시 순서를 잡아보려고 합니당!
① 마크 유형을 먼저 파이 차트로 눌러주기
( 1 → 3번 순서대로 진행하면 됩니다)
② 상품 필드를 색상에 드래그 해주기
③ 매출 필드를 각도 영역에 드래그 해주기
④ 매출 필드를 레이블 영역에 드래그 해주기
- 값은 큌 테이블 계산 → 구성비율 선택하면 %로 표시됨!
● 대시보드 만들기
대시보드를 눌러준 후 시트에서 열심히 만든 그래프들을 끌어서 대시보드로 만들 수 있어요!
처음 하는 거라 신기하면서도 어떻게 하면 더 잘 꾸밀 수 있을지 고민을 계속 했던거 같아요,,
그렇게 계속 시트 만들고 대시보드 만들기를 반복했어요..^__^ 태블로를 하루만에 배워 머리가 어질어질하지만 그래도 눈에 보이는 거라 그런가 흥미로웠어요!! 복습 블로그 쓰고 난 후에도 조금 더 연습해볼까 싶어요?!!
2. 웹사이트를 만들어보아요
오늘 강사님의 속도는 ktx, 로켓이였는데요 하하 노트북으로 이리저리 열심히 따라가본 것을 복습으로 잘 적어보려고 합니다!.!
<!DOCTYPE html> # html5문서임
<html lang="ko"> # 언어는 한국어
<head> #문서의 메타데이터(문서의 제목, 외부 CSS파일, JavaScript파일을 연결)를 포함
<meta charset="UTF-8"/> # 문서의 문자 인코딩: UTF-8
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> #반응형 웹 디자인을 위해 뷰포트 설정
<title>Financial Report</title> # 제목 설정
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel= "stylesheet" href="{{url_for('static', filename='style.css')}}"/>
</head>
<body>
<header>
<div>
<div class="title">Management BigData Analysis</div>
<div class="subtitle">Programed by Gabkeun, Choi., Ph.D</div>
</div>
<div class="report-title">Financial Report</div>
</header>
html 파일은 report.html로 만들어 저장하고, css파일은 style.css로 해당 파일을 저장합니다. 그리고 app.py 또한 저장해준 후에
ㅇ사진에 맞게 SSH 실행한 후 financial_report, static, templates 파일 만들고 권한 다 풀어준 후 저장한 파일들을 해당 위치에 옮겨줬어요. 그리고 cd financial_report 한 후 python3 app.py를 실행 시켜줍니다!
ㄹ외부포트:5000 을 입력하면
쫘잔 이렇게 뜹니다. html안에 내용을 건드리면 저 글이나 표 모든 걸 바꿀 수 있어요! 수업 중에는 제목들과 안에 내용, 그래프 값 등등을 변경했는데요?! 그걸 한번 수업때 배웠던대로 복습해보려고 합니다!
1) 데이터 추가 및 시각화
첫번째는 2024년 데이터를 기존 데이터 배열에 추가하고, 이를 반영해 차트를 업데이트 하는 것을 해보려고 합니다.
// 2024년 데이터 추가
profitabilityData.periods.push('2024-Q1', '2024-Q2', '2024-Q3', '2024-Q4');
profitabilityData.operatingProfitMargin.push(16, 17, 15, 18);
profitabilityData.netProfitMargin.push(14, 15, 13, 16);
solvencyData.debtToEquityRatio.push(33, 30, 29, 28);
solvencyData.currentRatio.push(210, 215, 220, 225);
efficiencyData.assetTurnover.push(0.7, 0.72, 0.74, 0.75);
efficiencyData.roe.push(23, 24, 25, 26);
// 차트 업데이트
// 기존 차트를 삭제하고, 새 데이터를 반영하여 다시 생성합니다.
운영 효율성 분석 데이터 밑에 2024년 데이터를 넣어주면 밑에 그림처럼 2024년 데이터가 다 추가된 채로 업데이트가 됩니다! 업데이트를 할땐 push..! 기억하기 (저도 html은 옛날에 조금 하고 처음이라,, 이거 하면서 쪼오금씩 배우고 있어요)
2) 새로운 지표 추가 및 시각화
만약 새로운 이자보상배율 데이터를 추가하고 이를 시각화하고 싶다면!
저는 크게 3가지로 나눠서 생각을 했는데요
① 데이터를 추가 ② 차트를 생성 ③ 해당 html 추가
// 이자보상배율 데이터 추가 <script>
const interestCoverageData = {
interestCoverageRatio: [
8.5, 9.0, 8.8, 9.2, 9.3, 9.5, 9.1, 9.6, 9.8, 10.0, 9.7, 10.2,
10.4, 10.6, 10.3, 10.7, 11.0, 11.2, 11.1, 11.3
]
};
// 이자보상배율 차트 생성
const interestCoverageCtx = document.getElementById('interestCoverageChart').getContext('2d');
new Chart(interestCoverageCtx, {
type: 'line',
data: {
labels: profitabilityData.periods, // 기존에 업데이트된 periods 데이터 사용
datasets: [
{
label: '이자보상배율',
data: interestCoverageData.interestCoverageRatio,
borderColor: 'rgba(255, 206, 86, 1)',
fill: false
}
]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: '기간'
}
},
y: {
title: {
display: true,
text: '비율'
}
}
}
}
});
<!- 이자보상배율 Html 추가 ->
<section>
<h2>4. 이자보상배율 분석</h2>
<div class="description">
<p>
◆ 이자보상배율: 영업이익이 이자비용을 얼마나 충분히 커버하는지를 나타냅니다.
이 수치가 높을수록 채무 상환 능력이 높다고 볼 수 있습니다.
</p>
</div>
<div class="chart-container">
<div class="chart-box">
<canvas id="interestCoverageChart"></canvas>
</div>
</div>
</section>
3) 데이터 비교분석
2023년, 2024년의 데이터를 비교해 두 해의 영업이익률, 순이익률, 부채비율 등등을 분석하고 시각적으로 표현해보는 걸 했습니다.
이것도 위에랑 똑같이 3가지로 나눴어요 ① 데이터 선택 ② 차트 생성 ③ html 추가
① 데이터 선택
// 2023년과 2024년의 데이터만 선택
const comparisonData = {
periods: ['2023-Q1', '2023-Q2', '2023-Q3', '2023-Q4', '2024-Q1', '2024-Q2', '2024-Q3', '2024-Q4'],
operatingProfitMargin: [15, 14, 13, 10, 16, 17, 15, 18],
netProfitMargin: [13, 12, 11, 8, 14, 15, 13, 16],
debtToEquityRatio: [41, 40, 38, 35, 33, 30, 29, 28],
currentRatio: [190, 195, 200, 205, 210, 215, 220, 225],
assetTurnover: [0.66, 0.67, 0.68, 0.69, 0.7, 0.72, 0.74, 0.75],
roe: [19, 20, 21, 22, 23, 24, 25, 26]
};
② 차트 생성
// 비교 차트 생성
const comparisonCtx = document.getElementById('comparisonChart').getContext('2d');
new Chart(comparisonCtx, {
type: 'line',
data: {
labels: comparisonData.periods,
datasets: [
{
label: '영업이익률 (%)',
data: comparisonData.operatingProfitMargin,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
},
{
label: '순이익률 (%)',
data: comparisonData.netProfitMargin,
borderColor: 'rgba(255, 99, 132, 1)',
fill: false
},
{
label: '부채비율 (%)',
data: comparisonData.debtToEquityRatio,
borderColor: 'rgba(54, 162, 235, 1)',
fill: false
},
{
label: '유동비율 (%)',
data: comparisonData.currentRatio,
borderColor: 'rgba(153, 102, 255, 1)',
fill: false
},
{
label: '자산 회전율',
data: comparisonData.assetTurnover,
borderColor: 'rgba(255, 159, 64, 1)',
fill: false
},
{
label: 'ROE (%)',
data: comparisonData.roe,
borderColor: 'rgba(75, 192, 192, 1)',
fill: false
}
]
},
options: {
responsive: true,
scales: {
x: {
title: {
display: true,
text: '기간'
}
},
y: {
title: {
display: true,
text: '비율 (%)'
}
}
}
}
});
③ html 추가
<!- 비교 Html 추가 ->
<section>
<h2>5. 2023년 vs 2024년 비교분석</h2>
<div class="description">
<p>
◆ 2023년 2024년 비교분석
</p>
</div>
<div class="chart-container">
<div class="chart-box">
<canvas id="comparisonChart"></canvas>
</div>
</div>
</section>
밑에는 완성본 입니다! 위의 코드를 실행시켜주면 밑에 처럼 만들어져요!! 얼마나 신기하던지,, 그치만 이 과정이 무척이나 힘들었지만.. 잘 해냈습니다 ㅠㅠ
# [멋사 그로스마케팅 부트캠프 DAY21] 후기 & 회고
푹 쉬고 오랜만에 수업을 하니 나는 누구인가~ 했지만 확실히 오늘 수업이 태블로라 그런가 집중은 잘 됐다. 하지만.. 중간에 파이 차트 만들 때 멘붕이 와서 왜 나는 비율이 안떠!!! 를 외치며 칭구한테 스트레스 받아 보냈던 카톡.. 가장 속상했던건 내 머리와 손꾸락 왜 나는 태블로를 이해하지 못해서 못만드는 것인가!
그래도 오늘 복습 블로그 쓰면서 파이 차트 만드는 순서를 다시 기억하고 이대로 다시 만드니 못만든 것도 만들어졌다. 나머지 것도 복습 블로그 다 쓴 후에 한번 만들어봐야겠다. 오늘도 웹 구현을 했는데 오랜만에 하는 거라 재밌었지만 중간에 한번 놓치면 따라가는 건 정말 힘들었다. 그래도 다행인건 완성본을 만들었고 회고조 팀원분도 도와줬다는 - ★ 괜시리 뿌듯했당.. 정말 회고조 팀원들 덕에 하루하루 버티는거 같다. 다들 화이팅도 넘치시구 본받을 점도 많고 조원분들이 다 잘됐으면 좋겠고 행복했으면 좋겠고.. ♡
자격증 시험들이 겹쳐 복습을 했지만 집중해서 하지 못했는데 이젠 올인할 수 있으니 복습을 더 열심히 해봐야겠다😉