{
  const n = 80;  // More points for better scatter
  let data;
  
  if (data_pattern === "Linear") {
    const x = d3.range(n).map(i => (i / n) * 10 + 2 + (Math.random() - 0.5) * 0.5);
    const base_y = x.map(xi => 2 * xi + 10);
    const noise_factor = Math.sqrt((1 - correlation_strength * correlation_strength) / (correlation_strength * correlation_strength)) * 3;
    const y = base_y.map(yi => yi + (Math.random() - 0.5) * noise_factor * 8);
    data = x.map((xi, i) => ({x: xi, y: y[i]}));
  } else {
    const x = d3.range(n).map(i => (i / n) * 8 + 1 + (Math.random() - 0.5) * 0.3);
    const base_y = x.map(xi => Math.pow(xi - 4, 2) + 5);
    const noise_factor = 2;
    const y = base_y.map(yi => yi + (Math.random() - 0.5) * noise_factor);
    data = x.map((xi, i) => ({x: xi, y: y[i]}));
  }
  
  // Calculate actual correlation
  const mean_x = d3.mean(data, d => d.x);
  const mean_y = d3.mean(data, d => d.y);
  const r = d3.sum(data.map(d => (d.x - mean_x) * (d.y - mean_y))) / 
           Math.sqrt(d3.sum(data.map(d => (d.x - mean_x) ** 2)) * d3.sum(data.map(d => (d.y - mean_y) ** 2)));
  
  const marks = [Plot.dot(data, {x: "x", y: "y", fill: "steelblue", r: 4})];
  
  // ALWAYS show linear regression line, even for curves (to show it looks "wrong")
  marks.push(
    Plot.linearRegressionY(data, {x: "x", y: "y", stroke: "red", strokeWidth: 2, strokeDasharray: "5,5"})
  );
  
  return Plot.plot({
    marks: marks,
    x: {label: "Variable X"},
    y: {label: "Variable Y"},
    grid: true,
    caption: data_pattern === "Curved" ? 
      `Linear line looks WRONG on curved data! r = ${r.toFixed(3)} (misleading for curves)` :
      `Actual correlation: r = ${r.toFixed(3)} | r only measures LINEAR relationships!`
  });
}

{
  const n = 60;
  const base_x = [2.5, 3.1, 3.8, 4.2, 4.9, 5.3, 5.8, 6.4, 6.9, 7.5, 8.1, 8.6, 9.2, 9.8, 
                  2.8, 3.4, 4.1, 4.6, 5.1, 5.7, 6.2, 6.7, 7.3, 7.8, 8.4, 8.9,
                  3.2, 3.7, 4.4, 4.8, 5.4, 5.9, 6.5, 7.1, 7.6, 8.2, 8.7, 9.3,
                  2.9, 3.5, 4.0, 4.7, 5.2, 5.8, 6.3, 6.8, 7.4, 7.9, 8.5, 9.0,
                  3.0, 3.6, 4.3, 4.9, 5.5, 6.0, 6.6, 7.2, 7.7, 8.3];
  
  let data_original = base_x.map((xi, i) => {
    const true_y = -1.5 * xi + 25;
    const y = true_y + (Math.sin(i * 0.5) * residual_variance * 2);
    return {x: xi, y: y};
  });
  
  let data = (show_approach === "Correlation view" && swap_axes.length > 0) ? 
    data_original.map(d => ({x: d.y, y: d.x})) : 
    data_original;
  
  const marks = [Plot.dot(data, {x: "x", y: "y", fill: "steelblue", r: 4})];
  
  if (show_approach === "Correlation view") {
    marks.push(
      Plot.linearRegressionY(data, {x: "x", y: "y", stroke: "gray", strokeWidth: 2, strokeDasharray: "8,4"})
    );
  } else {
    marks.push(
      Plot.linearRegressionY(data, {x: "x", y: "y", stroke: "red", strokeWidth: 4})
    );
  }
  
  const mean_x = d3.mean(data, d => d.x);
  const mean_y = d3.mean(data, d => d.y);
  const r = d3.sum(data.map(d => (d.x - mean_x) * (d.y - mean_y))) / 
           Math.sqrt(d3.sum(data.map(d => (d.x - mean_x) ** 2)) * d3.sum(data.map(d => (d.y - mean_y) ** 2)));
  
  const x_label = (show_approach === "Correlation view" && swap_axes.length > 0) ? "Mental Wellbeing" : "Hours of Sleep";
  const y_label = (show_approach === "Correlation view" && swap_axes.length > 0) ? "Hours of Sleep" : "Mental Wellbeing";
  
  return Plot.plot({
    marks: marks,
    x: {label: `Predictor (x) - ${x_label}`},
    y: {label: `Outcome (y) - ${y_label}`},
    grid: true,
    width: 700,
    height: 400,
    caption: `Gray dashed = correlation (bidirectional) | Red solid = regression (directional) | r = ${r.toFixed(3)}`
  });
}

{
  const x_data = [1, 1, 2.5, 2.5, 2.5, 4, 4, 4, 5.5, 5.5, 5.5, 7, 7, 7, 8.5, 8.5, 8.5, 10, 10, 10, 11.5, 11.5];
  const y_data = [12, 14, 8, 10, 6, 15, 13, 17, 11, 9, 13, 18, 16, 20, 14, 12, 16, 21, 19, 23, 17, 15];

  const x_line = [-1, 13];
  const y_line = x_line.map(xi => slope_better * xi + intercept_better);

  const true_slope = 1.2;
  const true_intercept = 8;
  const y_true_line = x_line.map(xi => true_slope * xi + true_intercept);

  const errors = x_data.map((xi, i) => Math.abs((slope_better * xi + intercept_better) - y_data[i]));
  const total_error = d3.sum(errors);
  const best_fit_error = d3.sum(x_data.map((xi, i) => Math.abs((true_slope * xi + true_intercept) - y_data[i])));

  const marks = [
    Plot.line([{x: x_line[0], y: y_line[0]}, {x: x_line[1], y: y_line[1]}], 
              {x: "x", y: "y", stroke: "red", strokeWidth: 3}),
    Plot.dot(x_data.map((xi, i) => ({x: xi, y: y_data[i]})), 
             {x: "x", y: "y", r: 5, fill: "steelblue", stroke: "white", strokeWidth: 1}),
    Plot.link(x_data.map((xi, i) => ({
      x1: xi, y1: y_data[i], x2: xi, y2: slope_better * xi + intercept_better
    })), {
      x1: "x1", y1: "y1", x2: "x2", y2: "y2",
      stroke: "orange", strokeWidth: 2, strokeDasharray: "3,3"
    })
  ];

  if (show_best_fit.length > 0) {
    marks.push(
      Plot.line([{x: x_line[0], y: y_true_line[0]}, {x: x_line[1], y: y_true_line[1]}], 
                {x: "x", y: "y", stroke: "green", strokeWidth: 2, strokeDasharray: "8,4", opacity: 0.8})
    );
  }

  return Plot.plot({
    marks: marks,
    x: {domain: [-1, 13], label: "x (Predictor)"},
    y: {domain: [-5, 25], label: "y (Outcome)"},
    grid: true,
    caption: `Your error: ${total_error.toFixed(1)} | Best fit: ${best_fit_error.toFixed(1)} | ${total_error < best_fit_error * 1.1 ? "🎯 Close!" : "Keep trying!"}`
  });
}

{
  const x_vals = d3.range(1, 11);
  let data_points = [];
  
  if (error_scenario === "Perfect prediction") {
    x_vals.forEach(x => {
      data_points.push({x: x, y: 2 * x + 3});
    });
  } else if (error_scenario === "Some variability") {
    x_vals.forEach(x => {
      const base_y = 2 * x + 3;
      for (let i = 0; i < 3; i++) {
        data_points.push({x: x + (Math.random() - 0.5) * 0.3, y: base_y + (Math.random() - 0.5) * 4});
      }
    });
  } else {
    x_vals.forEach(x => {
      const base_y = 2 * x + 3;
      for (let i = 0; i < 4; i++) {
        data_points.push({x: x + (Math.random() - 0.5) * 0.4, y: base_y + (Math.random() - 0.5) * 10});
      }
    });
  }
  
  return Plot.plot({
    marks: [
      Plot.line([{x: 0, y: 3}, {x: 11, y: 25}], {x: "x", y: "y", stroke: "red", strokeWidth: 3}),
      Plot.dot(data_points, {x: "x", y: "y", fill: "steelblue", r: 4, opacity: 0.7})
    ],
    x: {domain: [0, 11], label: "Study Hours (x)"},
    y: {domain: [0, 30], label: "Exam Score (y)"},
    grid: true,
    caption: error_scenario === "Perfect prediction" ? "Impossible: No human variability" :
             error_scenario === "Some variability" ? "Realistic: Some natural variability" :
             "Common: Many unmeasured factors matter"
  });
}

{
  const n = dataset_size;
  const x = d3.range(n).map(i => (i / n) * 12 + 1 + (Math.random() - 0.5) * 0.3);
  
  const slope = 3;
  const intercept = 5;
  const true_y = x.map(xi => slope * xi + intercept);
  
  const var_y = d3.variance(true_y);
  const noise_multiplier = r_squared_dramatic < 0.3 ? 8 : r_squared_dramatic < 0.6 ? 4 : 2;
  const sd_residual = Math.sqrt(var_y * (1 - r_squared_dramatic)) * noise_multiplier;
  const y = true_y.map(yi => yi + (Math.random() - 0.5) * 2 * sd_residual);
  
  const data = x.map((xi, i) => ({x: xi, y: y[i]}));
  
  const mean_y = d3.mean(y);
  const ss_tot = d3.sum(y.map(yi => (yi - mean_y) ** 2));
  const predicted_y = x.map(xi => slope * xi + intercept);
  const ss_res = d3.sum(y.map((yi, i) => (yi - predicted_y[i]) ** 2));
  const actual_r2 = Math.max(0, 1 - (ss_res / ss_tot));
  
  return Plot.plot({
    marks: [
      Plot.dot(data, {x: "x", y: "y", fill: "steelblue", r: 3, opacity: 0.7}),
      Plot.linearRegressionY(data, {x: "x", y: "y", stroke: "red", strokeWidth: 3})
    ],
    x: {label: "Predictor (x)"},
    y: {label: "Outcome (y)"},
    grid: true,
    caption: `Target R² = ${r_squared_dramatic.toFixed(2)} | Actual = ${actual_r2.toFixed(3)} | ${actual_r2 > 0.8 ? "Very tight!" : actual_r2 > 0.5 ? "Moderate" : "Loose fit"}`
  });
}

{
  const n = 70;
  const x = d3.range(n).map(i => (i / n) * 8 + 1 + (Math.random() - 0.5) * 0.3);
  const true_y = x.map(xi => beta_dramatic * xi + 20);
  
  const var_y = d3.variance(true_y);
  const scatter_factor = r2_dramatic < 0.3 ? 6 : r2_dramatic < 0.6 ? 3 : 1;
  const sd_residual = Math.sqrt(var_y * (1 - r2_dramatic)) * scatter_factor;
  const y = true_y.map(yi => yi + (Math.random() - 0.5) * 2 * sd_residual);
  
  const data = x.map((xi, i) => ({x: xi, y: y[i]}));
  
  return Plot.plot({
    marks: [
      Plot.dot(data, {x: "x", y: "y", fill: "steelblue", r: 3, opacity: 0.6}),
      Plot.linearRegressionY(data, {x: "x", y: "y", stroke: "red", strokeWidth: 4})
    ],
    x: {domain: [0, 10], label: "Predictor (x)"},
    y: {domain: [-10, 90], label: "Outcome (y)"},
    grid: true,
    caption: `β = ${beta_dramatic.toFixed(1)} (steepness) | R² = ${r2_dramatic.toFixed(2)} (tightness)`
  });
}

{
  // Regression coefficients from your slides: β = 430, intercept ≈ 500
  const slope = 430;
  const intercept = 500;
  
  const predicted_y = ice_data.map(d => slope * d.temp + intercept);
  const line_data = [{x: 15, y: slope * 15 + intercept}, 
                     {x: 40, y: slope * 40 + intercept}];
  
  // Calculate R²
  const mean_sales = d3.mean(ice_data, d => d.sales);
  const ss_tot = d3.sum(ice_data.map(d => (d.sales - mean_sales) ** 2));
  const ss_res = d3.sum(ice_data.map((d, i) => (d.sales - predicted_y[i]) ** 2));
  const r2 = 1 - (ss_res / ss_tot);
  
  return Plot.plot({
    marks: [
      // Data points
      Plot.dot(ice_data, {x: "temp", y: "sales", 
                          fill: "orange", r: 6, 
                          tip: true}),
      // Regression line
      Plot.line(line_data, {x: "x", y: "y", 
                            stroke: "red", strokeWidth: 3}),
      // Prediction point
      Plot.dot([{temp: predict_temp, sales: slope * predict_temp + intercept}],
               {x: "temp", y: "sales", 
                fill: "green", r: 10, stroke: "black", strokeWidth: 2})
    ],
    x: {label: "Temperature (°C)"},
    y: {label: "Ice Cream Sales (RM)", grid: true},
    caption: `R² = ${r2.toFixed(3)} → Temperature explains ${(r2*100).toFixed(1)}% of sales variation`
  });
}

{
  let training_data = [];
  const base_slope = 4.2;
  const base_intercept = 45;
  
  const iterations = scenario_type === "High precision" ? 60 : scenario_type === "Moderate" ? 75 : 90;
  const noise = scenario_type === "High precision" ? 6 : scenario_type === "Moderate" ? 16 : 30;
  
  for (let i = 0; i < iterations; i++) {
    const hours = (i / iterations) * 14 + 0.5 + (Math.random() - 0.5) * 0.4;
    const score = base_slope * hours + base_intercept + (Math.random() - 0.5) * noise;
    training_data.push({hours: hours, score: Math.max(0, Math.min(100, score))});
  }
  
  const predicted_score = base_slope * new_x_realistic + base_intercept;
  const ci_width = scenario_type === "High precision" ? 3 : scenario_type === "Moderate" ? 8 : 15;
  
  return Plot.plot({
    marks: [
      Plot.dot(training_data, {x: "hours", y: "score", fill: "lightblue", r: 3, opacity: 0.6}),
      Plot.linearRegressionY(training_data, {x: "hours", y: "score", stroke: "red", strokeWidth: 3}),
      Plot.dot([{hours: new_x_realistic, score: predicted_score}],
               {x: "hours", y: "score", fill: "green", r: 10, stroke: "white", strokeWidth: 2}),
      Plot.link([{x1: new_x_realistic, y1: predicted_score - ci_width, 
                  x2: new_x_realistic, y2: predicted_score + ci_width}],
                {x1: "x1", y1: "y1", x2: "x2", y2: "y2", stroke: "green", strokeWidth: 5, opacity: 0.5})
    ],
    x: {domain: [0, 15], label: "Study Hours/Week"},
    y: {domain: [0, 100], label: "Exam Score (%)"},
    grid: true,
    caption: `More scattered data = wider CI = less precise predictions`
  });
}

{
  const currency_multiplier = currency_type === "RM" ? 1 : currency_type === "$" ? 0.22 : 0.18;
  const temp_multiplier = temp_unit === "°C" ? 1 : 1.8;
  const temp_offset = temp_unit === "°C" ? 0 : 32;
  
  const base_data = [
    {temp_c: 15, sales_rm: 5000}, {temp_c: 15, sales_rm: 4800}, 
    {temp_c: 20, sales_rm: 8500}, {temp_c: 20, sales_rm: 8200},
    {temp_c: 25, sales_rm: 12500}, {temp_c: 25, sales_rm: 12100},
    {temp_c: 30, sales_rm: 17000}, {temp_c: 30, sales_rm: 16400},
    {temp_c: 35, sales_rm: 21000}, {temp_c: 35, sales_rm: 20600}
  ];
  
  const converted_data = base_data.map(d => ({
    temp: d.temp_c * temp_multiplier + temp_offset,
    sales: d.sales_rm * currency_multiplier
  }));
  
  const mean_temp = d3.mean(converted_data, d => d.temp);
  const mean_sales = d3.mean(converted_data, d => d.sales);
  const slope = d3.sum(converted_data.map(d => (d.temp - mean_temp) * (d.sales - mean_sales))) / 
                d3.sum(converted_data.map(d => (d.temp - mean_temp) ** 2));
  
  const sd_temp = Math.sqrt(d3.variance(converted_data, d => d.temp));
  const sd_sales = Math.sqrt(d3.variance(converted_data, d => d.sales));
  const standardised_beta = slope * (sd_temp / sd_sales);
  
  return Plot.plot({
    marks: [
      Plot.dot(converted_data, {x: "temp", y: "sales", fill: "orange", r: 5}),
      Plot.linearRegressionY(converted_data, {x: "temp", y: "sales", stroke: "red", strokeWidth: 3})
    ],
    x: {label: `Temperature (${temp_unit})`},
    y: {label: `Sales (${currency_type})`},
    grid: true,
    caption: `Unstandardised β = ${slope.toFixed(1)} (unit-dependent) | Standardised β = ${standardised_beta.toFixed(2)} (unit-free)`
  });
}