add native range charts

/**
 * Creates a range bar chart using Plotly.js.
 *
 * @param {Object} data - The dataset, with keys as categories (e.g., cities) and values as arrays of measurements.
 * @param {Array} labels - The labels for each measurement (e.g., temperature metrics).
 * @param {string} containerId - The ID of the HTML container to render the chart.
 * @param {string} title - The title of the chart.
 */
function rangeChart(data, labels, containerId, title) {
  const categories = Object.keys(data); // Extract categories (e.g., cities)

  // Generate bar traces for each label
  const barTraces = labels.map((label, index) => {
    const bases = categories.map((category) =>
      index === 0 ? data[category][index] : data[category][index - 1]
    ); // base, i.e. the previous value
    const heights = categories.map(
      (category) => data[category][index] - bases[categories.indexOf(category)]
    ); // Height relative to the base, i.e. the current value
    return {
      x: categories,
      y: heights, // Bar heights
      base: bases, // Starting points for each bar
      name: label,
      type: "bar"
    };
  });

  // Layout for the chart
  const layout = {
    title: title,
    barmode: "overlay", // Overlapping bars to show ranges
    xaxis: { title: "Category" },
    yaxis: { title: "Value" }
  };

  // Render the chart
  Plotly.newPlot(containerId, barTraces, layout);
}

const ranges = {
  Ontario: [-9, 3, 8, 13, 27],
  England: [3, 8, 12, 16, 24],
  Kentucky: [-3, 8, 14, 20, 30]
};

const labels = [
  "Winter mean low",
  "Annual mean low",
  "Annual mean",
  "Annual mean high",
  "Summer mean high"
];

rangeChart(
  ranges,
  labels,
  "rangePlot",
  "Temperature Ranges in Three Londons (range)"
);

// Data for the three Londons
const ranges = {
  Ontario: [-9, 3, 8, 13, 27],
  England: [3, 8, 12, 16, 24],
  Kentucky: [-3, 8, 14, 20, 30]
};

const labels = [
  "Winter mean low",
  "Annual mean low",
  "Annual mean",
  "Annual mean high",
  "Summer mean high"
];
const cities = Object.keys(ranges);

// Scatter plot traces
const scatterTraces = labels.map((label, index) => ({
  x: cities,
  y: cities.map((city) => ranges[city][index]),
  mode: "markers",
  name: label,
  type: "scatter"
}));

const scatterLayout = {
  title: "Temperature Ranges in Three Londons (scatter)",
  xaxis: { title: "City" },
  yaxis: { title: "Temperature" }
};

Plotly.newPlot("scatterPlot", scatterTraces, scatterLayout);

// Bar plot traces
const barTraces = labels.map((label, index) => ({
  x: cities,
  y: cities.map((city) => ranges[city][index]),
  name: label,
  type: "bar"
}));

const barLayout = {
  title: "Temperature Ranges in Three Londons (overlay)",
  barmode: "overlay",
  xaxis: { title: "City" },
  yaxis: { title: "Temperature" }
};

Plotly.newPlot("barPlot", barTraces, barLayout);

// Bar plot traces
const stackedBarTraces = labels.map((label, index) => ({
  x: cities,
  y: cities.map((city) => ranges[city][index]),
  name: label,
  type: "bar"
}));

const stackedBarLayout = {
  title: "Temperature Ranges in Three Londons (stacked)",
  barmode: "stack",
  xaxis: { title: "City" },
  yaxis: { title: "Temperature" }
};

Plotly.newPlot("stackedBarPlot", stackedBarTraces, stackedBarLayout);