좌표와 그래프: 데이터 시각화의 기초

       y축
        |
        |    • (3, 4)
        |
   -----+------ x축
        |
   • (-2, -1)
        |

import matplotlib.pyplot as plt
import numpy as np

# y = 2x + 1
def linear(x, a=2, b=1):
    return a * x + b

x = np.linspace(-5, 5, 100)
y = linear(x)

plt.plot(x, y, label='y = 2x + 1')
plt.axhline(0, color='gray', linewidth=0.5)
plt.axvline(0, color='gray', linewidth=0.5)
plt.grid(True, alpha=0.3)
plt.legend()
plt.title('1차 함수 — 직선 그래프')
plt.show()


# 핵심 속성
# - 기울기 a: x가 1 증가할 때 y가 a 만큼 변화
# - y절편 b: x=0일 때 y의 값
# - x절편: y=0일 때 x = -b/a
print(f"기울기: 2 (x가 1↑일 때 y가 2↑)")
print(f"y절편: 1 (x=0일 때 y=1)")
print(f"x절편: {-1/2} (y=0일 때 x=-0.5)")

def quadratic(x, a=1, b=-2, c=1):
    return a * x**2 + b * x + c

x = np.linspace(-3, 5, 100)
y = quadratic(x)

plt.plot(x, y, label='y = x² - 2x + 1')
plt.axhline(0, color='gray', linewidth=0.5)
plt.grid(True, alpha=0.3)
plt.legend()
plt.title('2차 함수 — 포물선')
plt.show()


# 꼭짓점: x = -b/(2a) = -(-2)/(2*1) = 1
# 최솟값: f(1) = 1 - 2 + 1 = 0
print(f"꼭짓점: ({-(-2)/(2*1)}, {quadratic(1)})")

import numpy as np
import matplotlib.pyplot as plt

# 가상 데이터: 광고비 vs 매출
ad_spend = np.array([10, 20, 30, 40, 50, 60, 70, 80, 90, 100])
revenue = np.array([15, 32, 45, 62, 79, 95, 112, 130, 145, 158])


# 최소제곱법으로 직선 a*x + b 의 a, b 찾기
n = len(ad_spend)
x_mean = np.mean(ad_spend)
y_mean = np.mean(revenue)

a = np.sum((ad_spend - x_mean) * (revenue - y_mean)) / np.sum((ad_spend - x_mean) ** 2)
b = y_mean - a * x_mean

print(f"y = {a:.2f} * x + {b:.2f}")
# y ≈ 1.59 * x + 0.0
# → 광고비 1 증가 시 매출 약 1.59 증가


# 시각화
plt.scatter(ad_spend, revenue, label='실제 데이터')
plt.plot(ad_spend, a * ad_spend + b, color='red', label=f'y = {a:.2f}x + {b:.2f}')
plt.xlabel('광고비')
plt.ylabel('매출')
plt.legend()
plt.title('광고비 vs 매출 — 선형 회귀')
plt.show()


# 미래 예측
ad_120 = a * 120 + b
print(f"광고비 120일 때 예상 매출: {ad_120:.0f}")

// canvas-graph.js — 브라우저에서 직접 그래프 그리기
const canvas = document.getElementById('graph');
const ctx = canvas.getContext('2d');
const W = canvas.width = 500;
const H = canvas.height = 400;
const cx = W / 2, cy = H / 2;
const scale = 20;

// 좌표축
ctx.strokeStyle = '#888';
ctx.beginPath();
ctx.moveTo(0, cy); ctx.lineTo(W, cy);  // x축
ctx.moveTo(cx, 0); ctx.lineTo(cx, H);  // y축
ctx.stroke();

// y = 2x + 1 그래프
ctx.strokeStyle = '#6366f1';
ctx.beginPath();
for (let x = -10; x <= 10; x += 0.1) {
  const y = 2 * x + 1;
  const px = cx + x * scale;
  const py = cy - y * scale;  // y축 뒤집기 (canvas는 아래가 +y)
  if (x === -10) ctx.moveTo(px, py);
  else ctx.lineTo(px, py);
}
ctx.stroke();