Scatter Plot in HTML, CSS and JavaScript

const cars = [[12000, 24500], [45000, 19800], [78000, 15200], [101000, 12900], [130000, 9100]];
const x = m => 40 + m / 150000 * 540, y = p => 280 - p / 35000 * 260;
cars.forEach(([miles, price]) => drawCircle(x(miles), y(price), 6, '#e4572e'));

// trend line (least squares)
const n = cars.length, mx = cars.reduce((a, c) => a + c[0], 0) / n, my = cars.reduce((a, c) => a + c[1], 0) / n;
const b = cars.reduce((a, c) => a + (c[0] - mx) * (c[1] - my), 0) / cars.reduce((a, c) => a + (c[0] - mx) ** 2, 0);
const a = my - b * mx;
drawLine(x(0), y(a), x(150000), y(a + b * 150000), '#16222e', 2, '7 5');

const svg = document.querySelector('svg');
function make(tag, attrs) {
  const n = document.createElementNS('http://www.w3.org/2000/svg', tag);
  for (const k in attrs) n.setAttribute(k, attrs[k]);
  svg.appendChild(n);
  return n;
}
function drawRect(x, y, width, height, fill) { return make('rect', { x, y, width, height, fill }); }
function drawCircle(cx, cy, r, fill) { return make('circle', { cx, cy, r, fill }); }
function drawLine(x1, y1, x2, y2, stroke, width, dash) {
  return make('line', { x1, y1, x2, y2, stroke, 'stroke-width': width || 1, 'stroke-dasharray': dash || 'none' });
}
function drawText(x, y, str, anchor) {
  const t = make('text', { x, y, 'text-anchor': anchor || 'start' });
  t.textContent = str;
  return t;
}