벡터(vector)란?

선형대수학에서 가장 기본인 개념으로, 다차원 공간에서는 data point로 생각할 수 있다.

벡터를 묘사하는 3가지 방법

1. (6, 4)
2. 평면 상에서 원점에 상대적인 점
3. 특정 방향과 길이의 화살표

2차원 벡터

2차원 벡터는 원점에 상대적인, 평면 상의 점이다.
2차원 벡터를 그리기 위해서는 수직 위치, 수평 위치, 참조점이 필요하며 참조점을 원점이라고 부른다.

2차원 벡터로 공룡 표현하기

자바스크립트의 d3.js 라이브러리로 축(x,y), 원점이 있는 평면을 통해 공룡을 표현해보았습니다.

 const svg = d3.select("svg"),
    margin = { top: 50, right: 50, bottom: 50, left: 50 },
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  // 스케일 설정
  const x = d3.scaleLinear().domain([-10, 10]).range([0, width]);
  const y = d3.scaleLinear().domain([-10, 10]).range([height, 0]);

  // 축 생성
  const xAxis = d3.axisBottom(x).ticks(5);
  const yAxis = d3.axisLeft(y).ticks(5);

  // 축 그리기
  g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + y(0) + ")")
    .call(xAxis);

  g.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + x(0) + ",0)")
    .call(yAxis);

  // 공룡을 그리기 위한벡터 설정
  // 편의를 위해 첫 벡터만 (x1, y1) (x2, y2) 좌표를 입력하고,
  // 두 번째 벡터부터는 (x2, y2) 좌표만 입력
  const vectors = [
    [
      [-1, 0],
      [-3, 1],
    ],
    [[-5, 0]],
    [[-7, 1]],
    [[-4, 1.5]],
    [[-7, 1.5]],
    [[-7, 2]],
    [[-6, 3]],
    [[-5, 3]],
    [[-4, 4]],
    [[-3, 4]],
    [[1, 1.5]],
    [[3, 0.5]],
    [[6, 4]],
    [[5, 0.5]],
    [[3, -1.5]],
    [[1, -2.5]],
    [[3, -3]],
    [[2.5, -4]],
    [[-1, -4]],
    [[0, -3]],
    [[-1, 0]],
  ];

  // 벡터 그리기
  vectors.forEach((vector, index) => {
    const line = g.append("line");
    if (index === 0) {
      line
        .attr("x1", x(vector[0][0]))
        .attr("y1", y(vector[0][1]))
        .attr("x2", x(vector[1][0]))
        .attr("y2", y(vector[1][1]));
    } else {
      line
        .attr("x1", x(vectors[index - 1][1]?.[0] ?? vectors[index - 1][0][0]))
        .attr("y1", y(vectors[index - 1][1]?.[1] ?? vectors[index - 1][0][1]))
        .attr("x2", x(vector[0][0]))
        .attr("y2", y(vector[0][1]));
    }

    line.attr("stroke-width", 2).attr("stroke", "black");
  });

Reference

[도서] (개발자에게 필요 없는 수학은 없다) 프로그래머를 위한 수학 with 파이썬