- 커리큘럼 상에 시각화 도구는 없습니다. 간단하게 방향성만 잡아드리기 위해 넣은 예제입니다.
- 여기 명시된 것 말고도 Plotly, Google Chart, leaflet 등이 더 있습니다.
- 이력서를 받아보았을 때 시각화 경험을 묻는 경우가 많아 준비한 것입니다.
- chartjs 내용이 좀 더 궁금하시다면 아래 영상을 참고해주세요.
- Canvas 내용이 더 궁금하다면 아래 영상을 참고해주세요.
Chart js
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- 1. 기본 chartjs 셈플 --> <!-- 2. chartjs.html -> AdminLTE 사이트 셈플 --> <!-- 3. livecorona sample --> <div class="container"> <div class="row"> <div class="col-md-6"> <canvas id="myChartOne"></canvas> </div> <div class="col-md-6"> <canvas id="myChartTwo"></canvas> </div> <div class="col-md-6"> <canvas id="myChartThree"></canvas> </div> <div class="col-md-6"> <canvas id="myChartFour"></canvas> </div> </div> </div> <script> const labels = [ '1월', '2월', '3월', '4월', '5월', '6월', ]; const data = { labels: labels, datasets: [{ label: '월별 매출액 현황(억원)', backgroundColor: 'rgb(255, 99, 132)', borderColor: 'rgb(255, 99, 132)', data: [1, 2, 5, 2, 2, 3, 4], }] }; const data2 = { labels: labels, datasets: [{ label: '월별 매출액 현황(억원)', backgroundColor: ['red', 'green', 'blue'], // rgba(255, 0, 0, 0.5), #000000 borderWidth: 5, borderColor: 'black', hoverBorderWidth: 8, data: [1, 2, 5, 2, 2, 3, 4], }] }; const data3 = { labels: labels, datasets: [{ label: '월별 매출액 현황(억원)', backgroundColor: ['red', 'green', 'blue'], // rgba(255, 0, 0, 0.5), #000000 borderWidth: 5, borderColor: 'black', hoverBorderWidth: 8, data: [1, 2, 5, 2, 2, 3, 4], }] }; const data4 = { labels: labels, datasets: [{ label: '월별 매출액 현황(억원)', backgroundColor: ['red', 'green', 'blue', 'pink', 'dodgerblue', 'gray', 'hotpink'], // rgba(255, 0, 0, 0.5), #000000 borderWidth: 5, borderColor: 'black', hoverBorderWidth: 8, data: [1, 2, 5, 2, 2, 3, 4], }] }; const config = { type: 'line', //pie, line, doughnut, polarArea... data: data, options: {} }; const config2 = { type: 'bar', //pie, line, doughnut, polarArea... data: data2, options: {} }; const config3 = { type: 'bar', //pie, line, doughnut, polarArea... data: data3, options: { plugins: { title: { display: true, text: '매출액!!', color: 'red', position : 'bottom', padding: { top: 10, bottom: 30 } }, legend: { display: true, position: 'right', labels: { color: 'blue' } } } } }; const config4 = { type: 'pie', //pie, line, doughnut, polarArea... data: data4, options: {} }; </script> <script> const myChartOne = new Chart( document.getElementById('myChartOne'), config ); const myChartTwo = new Chart( document.getElementById('myChartTwo'), config2 ); const myChartThree = new Chart( document.getElementById('myChartThree'), config3 ); const myChartFour = new Chart( document.getElementById('myChartFour'), config4 ); </script> </body> </html>
Canvas Api
Canvas는 HTML5부터 지원되었습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas tutorial</title> </head> <body> <canvas id="canvas"></canvas> <script> // 태그 선택 const canvas = document.getElementById('canvas'); // 캔버스에서 어떻게 그릴지(랜더링) 컨텍스트를 받아옵니다. const ctx = canvas.getContext('2d'); // 그림을 그려줍니다. function drawRect(ctx){ // x, y 좌측 상단 기준 x, y 좌표 // w는 넓이, h는 높이 let x = 10, y = 50, w = 200, h = 100; ctx.fillStyle = 'green'; ctx.fillRect(x, y, w, h); } drawRect(ctx); </script> </body> </html>
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas tutorial</title> </head> <body> <canvas id="canvas"></canvas> <script> // 태그 선택 const canvas = document.getElementById('canvas'); // 캔버스에서 어떻게 그릴지(랜더링) 컨텍스트를 받아옵니다. const ctx = canvas.getContext('2d'); // 그림을 그려줍니다. function drawRect(ctx){ // x, y 좌측 상단 기준 x, y 좌표 // w는 너비, h는 높이 let x = 10, y = 50, w = 100, h = 100; ctx.fillStyle = 'green'; ctx.fillRect(x, y, w, h); } // drawRect(ctx); function 삼각형(ctx){ //점을 하나씩 찍는 방식입니다. moveTo, lineTo를 바꾸면 삼각형 모양이 바뀝니다 ctx.beginPath() ctx.moveTo(75, 50); ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fillStyle = 'red'; ctx.fill(); } 삼각형(ctx); </script> </body> </html>
d3 js
참고사이트 : https://github.com/zziuni/d3/wiki/Gallery (공식 D3의 한국어 번역)
- Data - Driven Documents의 약자
- SVG(Scalable Vector Graphic)를 통해 다양한 해상도에서 깨짐없는 시각화 가능
- 동작과정
- Loading - 데이터 로딩
- Selecting-Binding - 코드 연동
- Transform - 그래프의 색상, 축 등 설정
- Transition - 클릭 등의 효과 지정
- 기본메서드
- d3.select : 태그 하나 선택
- d3.selectAll : 태그 전체 선택
- .data : 데이터 로딩
- .enter : 태그가 데이터에 비해 부족하면 나머지 반환
- .append : 새로운 태그 추가
- .exit : 종료
- .remove : 선택된 태그 제거
도형그리기 튜토리얼
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D3</title> <script src="https://d3js.org/d3.v7.min.js"></script> </head> <body> <div class="canvas"></div> <script> const canvas = d3.select('.canvas'); const svg = canvas.append('svg') //추가 .attr('height', 1000) // 속성 지정 .attr('width', 1000); svg.append('text') // 추가, text 형태로 추가 .attr('x', 200) .attr('y', 200) // 좌측 상단 기준 좌표 .attr('fill', 'black') .text('hello world') .style('font-weight', 'bold') .style('font-size', '34px'); // .style('font-style', 'Nanum Pen Script'); // google font style은 바로 적용 안됨 (import를 사용해서 root에 추가하는 방법으로 해결 가능) svg.append('rect') // 추가, 사각형 형태로 추가 // .attr('x', 10) // .attr('y', 10) .attr('width', 200) .attr('height', 200) .attr('fill', 'hotpink') svg.append('circle') // 추가, 원 형태로 추가 // .attr('x', 10) // .attr('y', 10) .attr('r', 50) .attr('cx', 200) // x 축 .attr('cy', 200) // y 축 .attr('fill', 'blue') svg.append('line') .attr('x1', 200) // x축 시작 .attr('y1', 200) // y축 시작 .attr('x2', 300) // x축 끝 .attr('y2', 300) // y축 끝 .attr('stroke', 'black') </script> </body> </html>
막대 그래프 그리기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg width="500" height="500"></svg> <script src="https://d3js.org/d3.v7.min.js"></script> <script> const sampleData = [100, 10, 30, 50, 10, 70, 200, 90]; const svg = d3.select("svg"); const barWidth = 30; sampleData.forEach((data, index)=>{ svg.append('rect') .attr('height', data) .attr('width', 30) .attr('x', 40 * index)//막대 생성좌표 x 막대의 좌측 .attr('y', 300 - data)//막대 생성 좌표 y 막대의 윗부분 }); </script> </body> </html>
막대그래프 색 변경/값 표시
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <svg width="500" height="500"></svg> <script src="https://d3js.org/d3.v7.min.js"></script> <script> const sampleData = [100,10,30,50,10,70,200,90]; const svg = d3.select("svg"); const barWidth = 30; sampleData.forEach((data,index)=>{ svg.append('rect') .attr('height', data) .attr('width', 30) .attr('x', 40 * index) //막대 생성좌표 x 막대의 좌측 .attr('y', 300 - data) //막대 생성 좌표 y 막대의 윗부분 .attr('fill', 'red') svg.append("text") .attr('x', 40 * index + 5) //표시할 글자 x좌표, 자릿수를 체킹해서 3자리인 경우 좀 덜 + 해야 합니다. .attr('y', 300 - data - 5) //표시할 글자 y좌표 .style("font-size", "0.85em") //글자크기 .style("color", "#222") //글자색 .text(data + ''); //넣을 문자열 }) </script> </body> </html>
- 끝으로, 한국에 D3 관련된 tutorial이 제대로 된 것이 없네요? 같이 만들어보실분 구합니다. 🙂