Canvas를 사용한 그래픽 그리기

HTML5의 <canvas> 요소는 자바스크립트를 통해 그래픽을 동적으로 생성할 수 있는 도구입니다. 기본 크기는 300×150픽셀이며, 스타일 속성이 아닌 width와 height 속성으로 크기를 지정해야 합니다. 캔버스 내부에 텍스트나 HTML 요소를 직접 삽입해도 렌더링되지 않으며, 모든 그리기는 JavaScript를 통해 수행되어야 합니다.

<canvas id="myCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');

  // 선 그리기
  ctx.moveTo(50, 50);
  ctx.lineTo(50, 150);
  ctx.lineTo(150, 50);
  ctx.closePath();

  ctx.strokeStyle = '#8a2be2';
  ctx.lineWidth = 4;
  ctx.stroke();

  ctx.fillStyle = '#ff6347';
  ctx.fill();
</script>

사각형과 원 그리기

캔버스에서는 사각형을 쉽게 그릴 수 있습니다. strokeRect()는 외곽선만, fillRect()는 색상으로 채워진 사각형을 생성합니다.

// 외곽선 사각형
ctx.strokeRect(100, 100, 80, 60);

// 채워진 사각형
ctx.fillStyle = '#00ffff';
ctx.fillRect(200, 100, 80, 60);

원은 arc() 메서드로 그립니다. 중심 좌표, 반지름, 시작 및 종료 각도, 그리고 방향(시계/반시계)을 인자로 받습니다.

ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI * 2, false);
ctx.fillStyle = '#dc143c';
ctx.fill();
ctx.strokeStyle = '#000';
ctx.stroke();

텍스트 표시 및 영역 지우기

캔버스에 텍스트를 추가하려면 fillText() 또는 strokeText()를 사용합니다. 폰트 스타일은 font 속성으로 설정합니다. 특정 영역을 지우려면 clearRect()를 사용합니다.

// 텍스트 스타일 설정
ctx.font = '24px "Microsoft YaHei", sans-serif';
ctx.fillStyle = '#000';

// 텍스트 그리기
ctx.fillText('데이터 시각화 입문', 30, 40);

// 특정 영역 지우기
ctx.clearRect(30, 40, 200, 30);

SVG를 이용한 벡터 그래픽 표현

SVG는 XML 기반의 벡터 이미지 형식으로, 직선, 다각형, 원 등을 정의할 수 있습니다. HTML 내에 직접 포함되며, CSS로 스타일링이 가능합니다.

<svg width="500" height="300">
  <line x1="50" y1="50" x2="200" y2="50" stroke="red" stroke-width="2"/>
  <polyline points="60,80 100,60 140,100 180,40" fill="none" stroke="blue"/>
  <rect x="220" y="30" width="100" height="60" fill="pink" />
  <circle cx="100" cy="120" r="30" fill="orange" />
</svg>

SVG는 해상도에 독립적이며 확대/축소 시에도 선명하게 유지됩니다. 다양한 형태를 조합해 복잡한 UI 요소를 만들 수 있습니다.

ECharts를 통한 고급 데이터 시각화

ECharts는 Apache에서 개발한 강력한 JavaScript 시각화 라이브러리로, 다양한 차트 유형을 제공합니다. 사용을 위해 먼저 라이브러리를 로드하고, DOM 컨테이너에 차트 인스턴스를 초기화합니다.

<div id="chartContainer" style="width:700px;height:400px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script>
  const container = document.getElementById('chartContainer');
  const chart = echarts.init(container);

  chart.setOption({
    title: {
      text: '매출 분석',
      subtext: '분기별 실적',
      left: 'center',
      textStyle: { color: '#2e8b57' }
    },
    xAxis: {
      type: 'category',
      data: ['Q1', 'Q2', 'Q3', 'Q4']
    },
    yAxis: {
      type: 'value',
      axisLine: { show: true },
      axisTick: { show: true }
    },
    series: [{
      name: '수익',
      type: 'bar',
      data: [120, 180, 150, 200],
      itemStyle: { color: '#ffa500' }
    }]
  });
</script>

데이터셋과 인코딩 매핑

ECharts는 dataset을 사용해 다차원 데이터를 효율적으로 관리할 수 있습니다. 여러 시리즈가 동일한 데이터 소스를 공유하며, encode를 통해 각 축에 어떤 열을 매핑할지 지정할 수 있습니다.

const rawData = [
  ['제품', '판매량', '목표', '카테고리', '점유율'],
  ['A', 120, 100, '디지털', 30],
  ['B', 90, 110, '생활', 25],
  ['C', 150, 140, '패션', 45]
];

chart.setOption({
  dataset: { source: rawData },
  series: [
    { type: 'bar', encode: { x: '제품', y: '판매량' }, color: '#8fbc8f' },
    { type: 'line', encode: { x: '제품', y: '목표' }, color: '#ff6347' },
    {
      type: 'pie',
      encode: { itemName: '카테고리', value: '점유율' },
      radius: '30%',
      center: ['75%', '30%']
    }
  ]
});

차트 구성 요소 활용

ECharts는 다양한 UI 구성 요소를 제공합니다. tooltip은 마우스 오버 시 데이터 정보를 표시하고, legend는 시리즈 전환을 지원합니다. toolbox는 차트 조작 기능(저장, 타입 전환 등)을 제공하며, dataZoom은 대량 데이터의 일부를 확대하여 확인할 수 있게 해줍니다.

chart.setOption({
  tooltip: { trigger: 'axis', textStyle: { fontSize: 14 } },
  legend: { data: ['판매량', '목표'] },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {},
      magicType: { type: ['line', 'bar'] },
      dataView: { readOnly: false }
    }
  },
  grid: { left: '10%', right: '5%' }
});