CSV Dataset Visualizer

2025-02-21 09:32 UTC o3-mini-high Open in ChatGPT ↗

Build a .csv dataset visualizer using the Observable Plot library. First step: We need to load a .csv file, then show all the variables as checkboxes. by default leave latitude, longitude, lat, lon, x,y,id, fid and similar variables unchecked. Then show a neat bounds slider that allows us to trim the time range of the chart. don’t plot anything just yet. start from this.

The Tree Journals: Dataset Plotter

    .chart-container {
        /*margin: 5mm 12mm 5mm 12mm;
        width: 100%;*/
    }

    #fileInputContainer {
        text-align: center;
        margin: 20px;
    }
</style>

The Tree Journals: Dataset Plotter

Below is an example implementation that does the following:

Listens for a CSV file input.
Loads the CSV using D3’s CSV parser.
Creates a set of checkboxes—one per CSV column—with a default “unchecked” state for variables such as latitude, longitude, lat, lon, x, y, id, fid (comparison is case‐insensitive).
If a time-related column (named “time”, “date”, or “datetime”) exists, it creates two HTML range inputs (a start and an end slider) to let you choose a time window.

You can paste the code below into an HTML file and open it in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    * { font-family: sans-serif; }
    #fileInputContainer { text-align: center; margin: 20px; }
    #chartContainer { margin: 20px; }
    #checkboxContainer label { margin-right: 10px; display: inline-block; margin-bottom: 5px; }
    #timeSliderContainer { margin-top: 20px; }
  </style>
</head>
<body>

  <div id="fileInputContainer">
    <h1>The Tree Journals: Dataset Plotter</h1>
    <input accept=".csv" id="csvFileInput" type="file">
  </div>

  <div id="chartContainer"></div>

  <script>
    document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

    function handleFile(event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function(e) {
        const text = e.target.result;
        const data = d3.csvParse(text);

        // Clear any previous content in the chart container
        d3.select("#chartContainer").html("");

        // Create a container for the variable selector
        const container = d3.select("#chartContainer")
          .append("div")
          .attr("id", "variableSelector");

        container.append("h2").text("Select Variables:");
        const checkboxContainer = container.append("div")
          .attr("id", "checkboxContainer");

        // List of variable names to be unchecked by default (case-insensitive)
        const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];

        data.columns.forEach(col => {
          const lowerCol = col.toLowerCase();
          const isExcluded = excluded.includes(lowerCol);
          const label = checkboxContainer.append("label");

          label.append("input")
            .attr("type", "checkbox")
            .attr("name", "variable")
            .attr("value", col)
            .property("checked", !isExcluded);

          label.append("span").text(" " + col);
        });

        // Look for a time-related column to build a time bounds slider
        const timeColumnCandidates = data.columns.filter(c =>
          ["time", "date", "datetime"].includes(c.toLowerCase())
        );

        if (timeColumnCandidates.length > 0) {
          const timeColumn = timeColumnCandidates[0];
          // Convert all entries of the time column to Date objects
          const times = data.map(d => new Date(d[timeColumn]));
          const minTime = new Date(Math.min(...times));
          const maxTime = new Date(Math.max(...times));

          const sliderContainer = container.append("div")
            .attr("id", "timeSliderContainer");

          sliderContainer.append("h2").text("Time Range:");

          // Start slider
          sliderContainer.append("label").text("Start: ");
          const startInput = sliderContainer.append("input")
            .attr("type", "range")
            .attr("min", minTime.getTime())
            .attr("max", maxTime.getTime())
            .attr("value", minTime.getTime())
            .attr("step", 86400000); // one day in milliseconds
          const startLabel = sliderContainer.append("span")
            .text(new Date(minTime).toLocaleDateString());

          sliderContainer.append("br");

          // End slider
          sliderContainer.append("label").text("End: ");
          const endInput = sliderContainer.append("input")
            .attr("type", "range")
            .attr("min", minTime.getTime())
            .attr("max", maxTime.getTime())
            .attr("value", maxTime.getTime())
            .attr("step", 86400000);
          const endLabel = sliderContainer.append("span")
            .text(new Date(maxTime).toLocaleDateString());

          // Update displayed dates when slider values change
          startInput.on("input", function() {
            const val = new Date(+this.value);
            startLabel.text(val.toLocaleDateString());
          });
          endInput.on("input", function() {
            const val = new Date(+this.value);
            endLabel.text(val.toLocaleDateString());
          });
        }
      };
      reader.readAsText(file);
    }
  </script>

</body>
</html>

How It Works

CSV Loading: When you select a CSV file using the file input, the FileReader loads and parses it using d3.csvParse().
Checkbox Generation: For every column in the CSV, a checkbox is created. The ones with names such as latitude, longitude, etc., are unchecked by default (all comparisons are done in lowercase).
Time Slider: If any column is detected with a name matching “time”, “date”, or “datetime”, two range inputs are added. Their minimum and maximum values are set to the earliest and latest date found in that column. The displayed label updates as you adjust the sliders.

This is just the first step—no chart is plotted yet. In the next steps, you could use the Observable Plot library to actually visualize the dataset using the selected variables and the trimmed time range.

Below is an updated version of the code that replaces the slider-based time range selection with a simple and elegant date range picker using two HTML date inputs. In this version, if a time-related column is detected, two date inputs are generated for the start and end dates, with their min, max, and default values set according to the dataset.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    * { font-family: sans-serif; }
    #fileInputContainer { text-align: center; margin: 20px; }
    #chartContainer { margin: 20px; }
    #checkboxContainer label {
      margin-right: 10px;
      display: inline-block;
      margin-bottom: 5px;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file">
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper function to format a Date as "YYYY-MM-DD" for the date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content in the chart container
      d3.select("#chartContainer").html("");

      // Create a container for the variable selector
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive)
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];

      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");

        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);

        label.append("span").text(" " + col);
      });

      // Look for a time-related column to build a date range picker
      const timeColumnCandidates = data.columns.filter(c =>
        ["time", "date", "datetime"].includes(c.toLowerCase())
      );

      if (timeColumnCandidates.length > 0) {
        const timeColumn = timeColumnCandidates[0];
        // Convert all entries of the time column to Date objects
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");

        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

CSV Loading: When a CSV file is selected, the file is read and parsed using d3.csvParse().
Checkbox Generation: Each CSV column gets a checkbox. Columns matching names such as latitude, longitude, lat, etc., are unchecked by default.
Date Range Picker: If a time-related column is found (named “time”, “date”, or “datetime”), two HTML date inputs are created. These inputs use the helper function formatDate() to format the earliest and latest dates from the data in a format acceptable for <input type="date">.

This updated implementation provides a cleaner, more elegant date range selection experience compared to sliders, while keeping the rest of the functionality intact.

Below is the updated version where the time-related column check now also includes “Timestamp”. This means that if your CSV contains a column named “Timestamp” (or any case-insensitive variation of it), it will be treated as the time column for the date range picker.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    * { font-family: sans-serif; }
    #fileInputContainer { text-align: center; margin: 20px; }
    #chartContainer { margin: 20px; }
    #checkboxContainer label {
      margin-right: 10px;
      display: inline-block;
      margin-bottom: 5px;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file">
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper function to format a Date as "YYYY-MM-DD" for the date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content in the chart container
      d3.select("#chartContainer").html("");

      // Create a container for the variable selector
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive)
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];

      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");

        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);

        label.append("span").text(" " + col);
      });

      // Look for a time-related column to build a date range picker
      // Now also checking for "timestamp" in addition to "time", "date", or "datetime".
      const timeColumnCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );

      if (timeColumnCandidates.length > 0) {
        const timeColumn = timeColumnCandidates[0];
        // Convert all entries of the time column to Date objects
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");

        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

CSV Loading: When a CSV file is selected, it’s loaded and parsed with d3.csvParse().
Checkbox Generation: Checkboxes are created for each column, with columns like latitude, longitude, lat, etc., unchecked by default.
Date Range Picker: The code now searches for columns named “time”, “date”, “datetime”, or “timestamp” (case-insensitive). If found, two date input fields are generated with their min and max values based on the earliest and latest dates in that column.

This implementation now recognizes “Timestamp” as a valid time column and uses it for the date range picker.

Below is an updated version that uses CSS Grid to arrange the checkboxes in an adaptive grid rather than simply stacking them. The CSS rule for #checkboxContainer now specifies a grid layout that automatically adjusts the number of columns based on the available width.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    * { font-family: sans-serif; }
    #fileInputContainer { text-align: center; margin: 20px; }
    #chartContainer { margin: 20px; }
    /* Use CSS Grid for an adaptive layout of checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file">
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper function to format a Date as "YYYY-MM-DD" for the date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content in the chart container
      d3.select("#chartContainer").html("");

      // Create a container for the variable selector
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive)
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];

      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");

        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);

        label.append("span").text(" " + col);
      });

      // Look for a time-related column to build a date range picker
      // Checking for "time", "date", "datetime", or "timestamp" (case-insensitive).
      const timeColumnCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );

      if (timeColumnCandidates.length > 0) {
        const timeColumn = timeColumnCandidates[0];
        // Convert all entries of the time column to Date objects
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");

        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

CSV Loading & Parsing: When a CSV file is chosen, it is read using a FileReader and parsed with d3.csvParse().
Adaptive Variable Grid: The #checkboxContainer now uses CSS Grid to automatically arrange the checkboxes in a neat, adaptive grid. This layout adjusts the number of columns based on the available width.
Date Range Picker: The code checks for time-related columns—including “time”, “date”, “datetime”, or “timestamp” (case-insensitive)—and if found, creates two HTML date inputs for selecting the start and end dates.

This solution provides an elegant, adaptive layout for variable selection and a simple date range picker for filtering time-related data.

Below is a complete HTML example that builds on our previous work. Once you load a CSV file, you’ll see an adaptive grid of variable checkboxes and a date range picker (using a time column such as “time”, “date”, “datetime”, or “timestamp”). When you change a checkbox or the date range, a full‐width NYT‐styled line chart is drawn for each selected variable (other than the time column) using Observable Plot. Each chart has a hoverable crosshair for precise reading.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    * { font-family: sans-serif; }
    #fileInputContainer { text-align: center; margin: 20px; }
    #chartContainer { margin: 20px; }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label { margin-right: 5px; }
    #timePickerContainer input { margin-right: 15px; }
    /* Chart title styling */
    .chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
    }
    /* Crosshair style */
    .crosshair {
      stroke: #aaa;
      stroke-width: 1;
      stroke-dasharray: 3,3;
      pointer-events: none;
      opacity: 0;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file">
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: formats a Date as "YYYY-MM-DD" for <input type="date">
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear previous chart container content
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      // Build variable checkboxes in an adaptive grid.
      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variables to be unchecked by default (case-insensitive)
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp"
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        // Process time values as Date objects.
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or date range change.
      function updateCharts() {
        // Get selected variable names.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          // Exclude the time column from being plotted as a separate line.
          .filter(v => v !== timeColumn);

        // If there's a time column, filter data by the chosen date range.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, draw a full-width line chart.
        selectedVars.forEach(variable => {
          // Add a title for the chart.
          chartsContainer.append("div")
            .attr("class", "chart-title")
            .text(variable);

          // Create the chart using Observable Plot.
          const chart = Plot.plot({
            // Let the chart be responsive.
            width: chartsContainer.node().clientWidth,
            // For crisp, rounded drawing.
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              // Format x-axis as dates if we have a time column.
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            marks: [
              // Dashed grid lines
              Plot.gridY({
                strokeDasharray: "0.75,2",
                strokeOpacity: 1
              }),
              // Y-axis without ticks and with inset labels.
              Plot.axisY({
                tickSize: 0,
                dx: 38,
                dy: -6,
                lineAnchor: "bottom",
                tickFormat: d => d
              }),
              // Rule at y=0.
              Plot.ruleY([0]),
              // The line mark: convert time column to Date and cast y value to number.
              Plot.line(filteredData, {
                x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                y: d => +d[variable],
                markerEnd: "dot",
                stroke: "steelblue"
              })
            ]
          });

          // Append the chart SVG.
          chartsContainer.node().appendChild(chart);
          // Make sure the chart spans full width.
          chart.style.width = "100%";

          // --- Add a hoverable crosshair ---
          // Create the crosshair line element.
          const crosshair = document.createElementNS("http://www.w3.org/2000/svg", "line");
          crosshair.classList.add("crosshair");
          crosshair.setAttribute("y1", 0);
          crosshair.setAttribute("y2", chart.clientHeight);
          chart.appendChild(crosshair);

          // Update crosshair on mouse move.
          chart.addEventListener("mousemove", function(event) {
            const [xm] = d3.pointer(event, chart);
            crosshair.setAttribute("x1", xm);
            crosshair.setAttribute("x2", xm);
            crosshair.style.opacity = 1;
          });
          chart.addEventListener("mouseleave", function() {
            crosshair.style.opacity = 0;
          });
        });
      }

      // Trigger an initial chart rendering.
      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

CSV Loading & Setup:
– A CSV file is loaded and parsed using D3.
– An adaptive grid of checkboxes is created for each CSV column (with columns like latitude, longitude, etc., unchecked by default).
– If a time column (including “Timestamp”) exists, two date inputs are shown as a date range picker.
Chart Updates:
– When a checkbox or the date range changes, the code gathers the selected variables (ignoring the time column) and filters the data by the chosen dates.
– For each variable, a full-width line chart is created using Observable Plot with a NYT-like style.
– Each chart features a dashed grid, inset axis labels, and a line mark drawn from the filtered data.
Hoverable Crosshair:
– For every chart, a vertical SVG line (styled as a crosshair) is appended.
– Mousemove events update its x-position, and it fades out when the mouse leaves the chart area.

This solution yields a crisp, elegant, full-width line chart for each variable with a refined NYT-like style and interactive crosshair.

Below is the complete HTML code with the requested modifications. Each chart is now wrapped in a collapsible container (using the built‑in HTML <details>/<summary> elements) so that clicking the title toggles the plot’s visibility. In addition, the CSS uses the system’s light/dark mode via the prefers-color-scheme media query so that the page adapts automatically.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Define CSS variables for light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
    /* Crosshair style */
    .crosshair {
      stroke: var(--foreground);
      stroke-width: 1;
      stroke-dasharray: 3,3;
      pointer-events: none;
      opacity: 0;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content in the chart container
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      // Build variable checkboxes in an adaptive grid.
      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp"
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        // Process time values as Date objects.
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or date range change.
      function updateCharts() {
        // Get selected variable names.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          // Exclude the time column from being plotted.
          .filter(v => v !== timeColumn);

        // Filter data by chosen date range if a time column exists.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, draw a full-width line chart.
        selectedVars.forEach(variable => {
          // Create a collapsible container for each chart.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title")
            .text(variable);

          // Create a container for the chart itself.
          const chartContainer = details.append("div").node();

          // Create the chart using Observable Plot.
          const chart = Plot.plot({
            width: chartContainer.clientWidth,
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            marks: [
              Plot.gridY({
                strokeDasharray: "0.75,2",
                strokeOpacity: 1,
                stroke: "var(--gridLine)"
              }),
              Plot.axisY({
                tickSize: 0,
                dx: 38,
                dy: -6,
                lineAnchor: "bottom",
                tickFormat: d => d
              }),
              Plot.ruleY([0]),
              Plot.line(filteredData, {
                x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                y: d => +d[variable],
                markerEnd: "dot",
                stroke: "steelblue"
              })
            ]
          });

          // Append the chart SVG to our chart container.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";

          // --- Add a hoverable crosshair ---
          const crosshair = document.createElementNS("http://www.w3.org/2000/svg", "line");
          crosshair.classList.add("crosshair");
          crosshair.setAttribute("y1", 0);
          crosshair.setAttribute("y2", chart.clientHeight);
          chart.appendChild(crosshair);

          chart.addEventListener("mousemove", function(event) {
            const [xm] = d3.pointer(event, chart);
            crosshair.setAttribute("x1", xm);
            crosshair.setAttribute("x2", xm);
            crosshair.style.opacity = 1;
          });
          chart.addEventListener("mouseleave", function() {
            crosshair.style.opacity = 0;
          });
        });
      }

      // Trigger initial chart rendering.
      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

Explanation

Collapsible Plots:
Each chart is now placed inside a <details> element with its title in a <summary> (styled with the chart-title class). Users can click the title to collapse or expand the corresponding plot.
Light/Dark Mode:
CSS variables are defined for colors. With the prefers-color-scheme media query, the page automatically adapts to the system’s light or dark mode, affecting the background, text, and grid line colors.

This implementation delivers crisp, NYT‑styled, interactive charts that are both collapsible and adaptive to your browser’s color scheme.

Below is the updated, complete HTML example. In this version:

Each chart is placed inside a collapsible container (using <details>/<summary>) so that only its title is visible until expanded.
The charts use Observable Plot’s built‑in crosshair mark (via Plot.crosshair(…)).
For each plotted variable, the y‑axis domain is trimmed to the visible data range (i.e. the filtered values) extended to one standard deviation on each side.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Define CSS variables for light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content in the chart container.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      // Build variable checkboxes in an adaptive grid.
      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp".
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        // Process time values as Date objects.
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or date range change.
      function updateCharts() {
        // Get selected variable names, excluding the time column.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        // Filter data by the chosen date range if a time column exists.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, draw a full-width line chart.
        selectedVars.forEach(variable => {
          // Compute visible values for this variable.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const mean = d3.mean(values);
          const std = d3.deviation(values) || 0;
          const yDomain = [mean - std, mean + std];

          // Create a collapsible container for each chart.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title")
            .text(variable);

          // Container for the chart.
          const chartContainer = details.append("div").node();

          // Create the chart using Observable Plot.
          const chart = Plot.plot({
            width: chartContainer.clientWidth,
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            y: {
              domain: yDomain
            },
            marks: [
              Plot.gridY({
                strokeDasharray: "0.75,2",
                strokeOpacity: 1,
                stroke: "var(--gridLine)"
              }),
              Plot.axisY({
                tickSize: 0,
                dx: 38,
                dy: -6,
                lineAnchor: "bottom",
                tickFormat: d => d
              }),
              Plot.ruleY([0]),
              Plot.line(filteredData, {
                x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                y: d => +d[variable],
                markerEnd: "dot",
                stroke: "steelblue"
              }),
              // Use Observable Plot’s built-in crosshair mark.
              Plot.crosshair({ stroke: "var(--foreground)", strokeWidth: 1, dash: "3,3" })
            ]
          });

          // Append the chart SVG and ensure full width.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      // Trigger initial chart rendering.
      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

Collapsible Charts:
Each chart is wrapped in a <details> element with a <summary> (styled as .chart-title). Clicking the summary toggles the chart’s visibility.
Light/Dark Mode:
CSS variables (e.g. --background, --foreground) are defined and switched automatically via the prefers-color-scheme media query.
Crosshair Mark:
Instead of manually tracking mouse events, the built‑in Plot.crosshair() mark is added to the marks array, providing a neat, hoverable vertical line.
Trimmed Y Domain:
For each variable, the filtered data’s values are used to compute the mean and standard deviation. The y‑axis domain is set to [mean - std, mean + std] so that extreme outliers are trimmed from view.

This solution provides a crisp, interactive, and adaptive data visualizer that meets your requirements.

Below is an updated complete example. It now does two things:

It uses Observable Plot’s built‑in crosshair mark—but configured with a custom text function so that when you hover, it displays the date (if applicable) and the y‑value at that position.
Instead of trimming the y‑domain to a narrow range (mean ± std), it now computes the full extent of the filtered values and then expands that range by 10% on both ends so that the plot isn’t “cropped.”

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Define CSS variables for light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      // Build variable checkboxes in an adaptive grid.
      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp".
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        // Convert time values to Date objects.
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or date range change.
      function updateCharts() {
        // Get selected variable names, excluding the time column.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        // Filter data by the chosen date range if a time column exists.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, draw a full-width line chart.
        selectedVars.forEach(variable => {
          // Compute the full extent of the values and add a 10% margin.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Create a collapsible container for each chart.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title")
            .text(variable);

          // Container for the chart.
          const chartContainer = details.append("div").node();

          // Create the chart using Observable Plot.
          const chart = Plot.plot({
            width: chartContainer.clientWidth,
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            y: {
              domain: yDomain
            },
            marks: [
              Plot.gridY({
                strokeDasharray: "0.75,2",
                strokeOpacity: 1,
                stroke: "var(--gridLine)"
              }),
              Plot.axisY({
                tickSize: 0,
                dx: 38,
                dy: -6,
                lineAnchor: "bottom",
                tickFormat: d => d
              }),
              Plot.ruleY([0]),
              Plot.line(filteredData, {
                x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                y: d => +d[variable],
                markerEnd: "dot",
                stroke: "steelblue"
              }),
              // Use the built-in crosshair mark configured to show date and value.
              Plot.crosshair({
                stroke: "var(--foreground)",
                strokeWidth: 1,
                dash: "3,3",
                text: d => {
                  if (!d) return "";
                  const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                  return `${xText}: ${d.y}`;
                }
              })
            ]
          });

          // Append the chart SVG to our chart container and ensure full width.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      // Trigger initial chart rendering.
      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

Crosshair Mark with Tooltip:
The Plot.crosshair mark now includes a custom text function. When you hover over the chart, it displays a label showing the x‑value (formatted as a date if a time column is used) and the corresponding y‑value.
Expanded Y‑Domain:
Instead of using a narrow range (mean ± std), the code computes the full data extent for each variable and then adds a 10% margin on each side so that the plot has room and isn’t “cropped.”
Collapsible Plots & Adaptive Layout:
Each chart is wrapped in a <details> element so you can collapse/expand them, and the overall page adapts automatically to light/dark mode using CSS media queries.

This updated solution should now meet your requirements for a crosshair that displays the date and value, as well as for more generously scaled plots.

Below is the updated complete HTML example. In this version, each curve now uses a small cubic smoothing via D3’s Catmull–Rom curve interpolation. (Specifically, we set the line mark’s curve to
d3.curveCatmullRom.alpha(0.5)). This smoothing is applied on top of all the previous functionality.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Define CSS variables for light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      // Build variable checkboxes in an adaptive grid.
      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp".
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        // Convert time values to Date objects.
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or date range change.
      function updateCharts() {
        // Get selected variable names, excluding the time column.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        // Filter data by the chosen date range if a time column exists.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, draw a full-width line chart.
        selectedVars.forEach(variable => {
          // Compute the full extent of the values and add a 10% margin.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Create a collapsible container for each chart.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title")
            .text(variable);

          // Container for the chart.
          const chartContainer = details.append("div").node();

          // Create the chart using Observable Plot.
          const chart = Plot.plot({
            width: chartContainer.clientWidth,
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            y: {
              domain: yDomain
            },
            marks: [
              Plot.gridY({
                strokeDasharray: "0.75,2",
                strokeOpacity: 1,
                stroke: "var(--gridLine)"
              }),
              Plot.axisY({
                tickSize: 0,
                dx: 38,
                dy: -6,
                lineAnchor: "bottom",
                tickFormat: d => d
              }),
              Plot.ruleY([0]),
              Plot.line(filteredData, {
                x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                y: d => +d[variable],
                markerEnd: "dot",
                stroke: "steelblue",
                curve: d3.curveCatmullRom.alpha(0.5)
              }),
              // Use the built-in crosshair mark with custom tooltip text.
              Plot.crosshair({
                stroke: "var(--foreground)",
                strokeWidth: 1,
                dash: "3,3",
                text: d => {
                  if (!d) return "";
                  const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                  return `${xText}: ${d.y}`;
                }
              })
            ]
          });

          // Append the chart SVG to our chart container and ensure full width.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      // Trigger initial chart rendering.
      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

Explanation

Cubic Smoothing:
The Plot.line mark now includes
```
curve: d3.curveCatmullRom.alpha(0.5)
```
which applies a small cubic smoothing to the plotted curve.
Expanded Y‑Domain:
The code computes the full data extent (using d3.extent) and then adds a 10% margin on both ends, ensuring that the plots are not cropped.
Crosshair Tooltip:
The built‑in Plot.crosshair mark now displays a tooltip showing the formatted date (or x‑value) and the y‑value at the hovered position.

This updated solution meets your requirements for a smoothly interpolated line chart with an informative, hoverable crosshair and generous axis margins.

Below is a full HTML example that integrates Material Design Components (MDC) for the UI. In this version:

The header (file chooser) is styled as an MDC card with a raised button for selecting a file.
The variable checkboxes are built using MDC checkbox markup.
The date inputs are wrapped in MDC “outlined” text fields.
The rest of the code (the collapsible charts, Observable Plot charting with a smooth curve, crosshair with tooltip, and expanded y‑domain) remains as before.

Simply paste the code into an HTML file and open it in a modern browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <!-- Material Components Web CSS -->
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  <!-- D3 and Observable Plot -->
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <!-- Material Components Web JS -->
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <style>
    /* Material design light/dark support using CSS variables */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: Roboto, sans-serif;
    }
    /* File input container as a Material card */
    #fileInputContainer {
      margin: 20px;
      padding: 16px;
      text-align: center;
    }
    /* Hide the native file input */
    #csvFileInput {
      display: none;
    }
    /* Container for the rest of the UI */
    #chartContainer {
      margin: 20px;
    }
    /* Grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    /* MDC Form Field spacing */
    .mdc-form-field {
      margin: 4px 0;
    }
    /* Container for the time picker inputs */
    #timePickerContainer {
      display: flex;
      gap: 20px;
      margin-top: 20px;
      align-items: center;
    }
    /* Collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<!-- File input container styled as an MDC card -->
<div id="fileInputContainer" class="mdc-card">
  <h1 class="mdc-typography--headline4">The Tree Journals: Dataset Plotter</h1>
  <label for="csvFileInput" class="mdc-button mdc-button--raised">
    <span class="mdc-button__label">Choose CSV File</span>
  </label>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<!-- Main container for the variable selectors and charts -->
<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear previous content.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      // Section header.
      container.append("h2").attr("class", "mdc-typography--headline6").text("Select Variables:");

      // Adaptive grid container for checkboxes.
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variables to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        // Create an MDC checkbox markup.
        const formField = checkboxContainer.append("div")
          .attr("class", "mdc-form-field");
        formField.html(`
          <label class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" name="variable" value="${col}" ${!isExcluded ? "checked" : ""}>
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
            <span class="mdc-checkbox__label">${col}</span>
          </label>
        `);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp".
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        // Create a time picker container.
        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("span").attr("class", "mdc-typography--subtitle1").text("Select Time Range:");

        // Start date wrapped in an MDC text field.
        const startWrapper = timePickerContainer.append("div").html(`
          <label class="mdc-text-field mdc-text-field--outlined">
            <input type="date" class="mdc-text-field__input" id="startDate" min="${formatDate(minTime)}" max="${formatDate(maxTime)}" value="${formatDate(minTime)}">
            <span class="mdc-notched-outline">
              <span class="mdc-notched-outline__leading"></span>
              <span class="mdc-notched-outline__notch"></span>
              <span class="mdc-notched-outline__trailing"></span>
            </span>
          </label>
        `);
        // End date wrapped in an MDC text field.
        const endWrapper = timePickerContainer.append("div").html(`
          <label class="mdc-text-field mdc-text-field--outlined">
            <input type="date" class="mdc-text-field__input" id="endDate" min="${formatDate(minTime)}" max="${formatDate(maxTime)}" value="${formatDate(maxTime)}">
            <span class="mdc-notched-outline">
              <span class="mdc-notched-outline__leading"></span>
              <span class="mdc-notched-outline__notch"></span>
              <span class="mdc-notched-outline__trailing"></span>
            </span>
          </label>
        `);
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or time range change.
      function updateCharts() {
        // Get selected variable names (excluding the time column).
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        // Filter data by the chosen date range if applicable.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, create a collapsible chart.
        selectedVars.forEach(variable => {
          // Compute full extent of values and expand by 10%.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Create a collapsible container using <details>.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title mdc-typography--subtitle1")
            .text(variable);

          // Chart container.
          const chartContainer = details.append("div").node();

          // Create the chart using Observable Plot.
          const chart = Plot.plot({
            width: chartContainer.clientWidth,
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            y: {
              domain: yDomain
            },
            marks: [
              Plot.gridY({
                strokeDasharray: "0.75,2",
                strokeOpacity: 1,
                stroke: "var(--gridLine)"
              }),
              Plot.axisY({
                tickSize: 0,
                dx: 38,
                dy: -6,
                lineAnchor: "bottom",
                tickFormat: d => d
              }),
              Plot.ruleY([0]),
              Plot.line(filteredData, {
                x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                y: d => +d[variable],
                markerEnd: "dot",
                stroke: "steelblue",
                curve: d3.curveCatmullRom.alpha(0.5)
              }),
              // Built-in crosshair with tooltip showing date (or x) and value.
              Plot.crosshair({
                stroke: "var(--foreground)",
                strokeWidth: 1,
                dash: "3,3",
                text: d => {
                  if (!d) return "";
                  const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                  return `${xText}: ${d.y}`;
                }
              })
            ]
          });

          // Append the chart SVG to the container.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      // Trigger initial chart rendering.
      updateCharts();

      // Initialize MDC components on dynamically added elements.
      mdc.autoInit();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

Material Design UI:
- The file chooser is hidden and replaced by an MDC‑styled raised button inside an MDC card.
- The variable checkboxes are built using the MDC checkbox markup (with each checkbox wrapped in an MDC form field).
- The date inputs are wrapped in MDC outlined text fields.
Charting and Interaction:
- When variables (other than the time column) are selected and a date range is specified, a collapsible chart is rendered for each using Observable Plot.
- Each chart features a smoothed line (using a Catmull–Rom curve with alpha 0.5), an expanded y‑domain (full data extent plus 10% margin), and a built‑in crosshair that displays the date (or x‑value) and y‑value on hover.
MDC Initialization:
- After the DOM is updated, mdc.autoInit() initializes all MDC components.

This solution brings Material Design 2 styling to your data visualizer while preserving all the charting features.

use this example to colorize all temperature variables (degrees_C)

But use a better colormap

Plot.plot({ y: {nice: true}, color: { domain: [45, 75], scheme: “turbo”, legend: true, ticks: 7, label: “temperature (°F)” }, marks: [ Plot.line(sftemp, { x: “date”, y: “high”, stroke: “url(#gradient)”, curve: “step-before” }),

(_index, { y, color }) => htl.svg`<defs>

${d3.ticks(0, 1, 10).map( (t) => htl.svg<stop offset=${t * 100}% stop-color=${color(45 * (1 - t) + 75 * t)} /> )}` ] })

Below is an example that adapts the provided code to colorize temperature variables in degrees Celsius using a more perceptually uniform colormap (here “inferno”). In this example we assume that the CSV data (referenced here as sftemp) contains a date field (“date”) and a temperature field named “degrees_C”. The plot’s color scale is defined over a domain from 0 to 40 °C, and the line is drawn with a gradient stroke that interpolates using a linear gradient definition.

Plot.plot({
  y: { nice: true },
  color: {
    domain: [0, 40],
    scheme: "inferno",
    legend: true,
    ticks: 7,
    label: "temperature (°C)"
  },
  marks: [
    Plot.line(sftemp, {
      x: "date",
      y: "degrees_C",
      stroke: "url(#gradient)",
      curve: "step-before"
    }),
    (_index, { y, color }) => htl.svg`
      <defs>
        <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
          x1=0 x2=0 y1=${y(0)} y2=${y(40)}>
          ${d3.ticks(0, 1, 10).map(t =>
            htl.svg`<stop offset="${t * 100}%" stop-color="${color(40 * t)}" />`
          )}
        </linearGradient>
      </defs>
    `
  ]
})

Explanation

Color Scale:
The color scale is set with a domain of [0, 40] (typical for degrees Celsius) and uses the “inferno” colormap—a perceptually uniform, high-contrast palette.
Line Mark:
The line mark plots the “degrees_C” field against “date”. Its stroke is defined as a gradient (“url(#gradient)”) and uses a “step-before” curve.
Gradient Definition:
A custom linear gradient is defined using an SVG <linearGradient> element. The gradient runs from y‑position corresponding to 0 °C up to 40 °C. The stops are computed from 10 ticks (using d3.ticks) and map each fraction to a color from the defined color scale.

This example will render a line chart whose color varies along the gradient from 0 to 40 °C using the “inferno” colormap, with a legend showing the temperature range.

Below is a complete HTML example that builds on our Material Design–based website. In the updateCharts function, if a variable’s name suggests it is a temperature (for example, if it includes “temp” or “degrees”), the code will render its line chart with a colorized gradient using a perceptually uniform “inferno” colormap and a legend. Non‐temperature variables are drawn with a default blue line. In the temperature case, the gradient is defined over a domain of 0–40 °C and applied to the line’s stroke via an SVG linear gradient.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <!-- Material Components Web CSS -->
  <link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  <!-- D3 and Observable Plot -->
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <!-- Material Components Web JS -->
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
  <style>
    /* Material design light/dark support using CSS variables */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: Roboto, sans-serif;
    }
    /* File input container styled as an MDC card */
    #fileInputContainer {
      margin: 20px;
      padding: 16px;
      text-align: center;
    }
    /* Hide the native file input */
    #csvFileInput {
      display: none;
    }
    /* Container for the rest of the UI */
    #chartContainer {
      margin: 20px;
    }
    /* Grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    /* MDC Form Field spacing */
    .mdc-form-field {
      margin: 4px 0;
    }
    /* Container for the time picker inputs */
    #timePickerContainer {
      display: flex;
      gap: 20px;
      margin-top: 20px;
      align-items: center;
    }
    /* Collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<!-- File input container styled as an MDC card -->
<div id="fileInputContainer" class="mdc-card">
  <h1 class="mdc-typography--headline4">The Tree Journals: Dataset Plotter</h1>
  <label for="csvFileInput" class="mdc-button mdc-button--raised">
    <span class="mdc-button__label">Choose CSV File</span>
  </label>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<!-- Main container for the variable selectors and charts -->
<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      // Section header.
      container.append("h2")
        .attr("class", "mdc-typography--headline6")
        .text("Select Variables:");

      // Adaptive grid container for checkboxes.
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variables to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        // Create an MDC checkbox markup.
        const formField = checkboxContainer.append("div")
          .attr("class", "mdc-form-field");
        formField.html(`
          <label class="mdc-checkbox">
            <input type="checkbox" class="mdc-checkbox__native-control" name="variable" value="${col}" ${!isExcluded ? "checked" : ""}>
            <div class="mdc-checkbox__background">
              <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
                <path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
              </svg>
              <div class="mdc-checkbox__mixedmark"></div>
            </div>
            <span class="mdc-checkbox__label">${col}</span>
          </label>
        `);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp".
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        // Create a time picker container.
        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("span")
          .attr("class", "mdc-typography--subtitle1")
          .text("Select Time Range:");

        // Start date wrapped in an MDC text field.
        timePickerContainer.append("div").html(`
          <label class="mdc-text-field mdc-text-field--outlined">
            <input type="date" class="mdc-text-field__input" id="startDate" min="${formatDate(minTime)}" max="${formatDate(maxTime)}" value="${formatDate(minTime)}">
            <span class="mdc-notched-outline">
              <span class="mdc-notched-outline__leading"></span>
              <span class="mdc-notched-outline__notch"></span>
              <span class="mdc-notched-outline__trailing"></span>
            </span>
          </label>
        `);
        // End date wrapped in an MDC text field.
        timePickerContainer.append("div").html(`
          <label class="mdc-text-field mdc-text-field--outlined">
            <input type="date" class="mdc-text-field__input" id="endDate" min="${formatDate(minTime)}" max="${formatDate(maxTime)}" value="${formatDate(maxTime)}">
            <span class="mdc-notched-outline">
              <span class="mdc-notched-outline__leading"></span>
              <span class="mdc-notched-outline__notch"></span>
              <span class="mdc-notched-outline__trailing"></span>
            </span>
          </label>
        `);
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or time range change.
      function updateCharts() {
        // Get selected variable names, excluding the time column.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        // Filter data by the chosen date range if applicable.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, create a collapsible chart.
        selectedVars.forEach(variable => {
          // Compute full extent of values and expand by 10%.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Create a collapsible container using <details>.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title mdc-typography--subtitle1")
            .text(variable);

          // Container for the chart.
          const chartContainer = details.append("div").node();

          let chart;
          // If the variable name suggests a temperature variable, apply gradient colorization.
          if (variable.toLowerCase().includes("temp") || variable.toLowerCase().includes("degrees")) {
            chart = Plot.plot({
              width: chartContainer.clientWidth,
              round: true,
              marginLeft: 0,
              x: {
                label: null,
                insetLeft: 36,
                tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
              },
              y: {
                domain: yDomain,
                nice: true
              },
              color: {
                domain: [0, 40],
                scheme: "inferno",
                legend: true,
                ticks: 7,
                label: "temperature (°C)"
              },
              marks: [
                Plot.line(filteredData, {
                  x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                  y: d => +d[variable],
                  markerEnd: "dot",
                  stroke: "url(#gradient)",
                  curve: d3.curveCatmullRom.alpha(0.5)
                }),
                // Define the gradient for temperature colorization.
                (_index, { y, color }) => htl.svg`
                  <defs>
                    <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
                      x1=0 x2=0 y1=${y(0)} y2=${y(40)}>
                      ${d3.ticks(0, 1, 10).map(t =>
                        htl.svg`<stop offset="${t * 100}%" stop-color="${color(0 * (1 - t) + 40 * t)}" />`
                      )}
                    </linearGradient>
                  </defs>
                `,
                Plot.crosshair({
                  stroke: "var(--foreground)",
                  strokeWidth: 1,
                  dash: "3,3",
                  text: d => {
                    if (!d) return "";
                    const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                    return `${xText}: ${d.y}`;
                  }
                })
              ]
            });
          } else {
            // Default chart for non-temperature variables.
            chart = Plot.plot({
              width: chartContainer.clientWidth,
              round: true,
              marginLeft: 0,
              x: {
                label: null,
                insetLeft: 36,
                tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
              },
              y: {
                domain: yDomain,
                nice: true
              },
              marks: [
                Plot.gridY({
                  strokeDasharray: "0.75,2",
                  strokeOpacity: 1,
                  stroke: "var(--gridLine)"
                }),
                Plot.axisY({
                  tickSize: 0,
                  dx: 38,
                  dy: -6,
                  lineAnchor: "bottom",
                  tickFormat: d => d
                }),
                Plot.ruleY([0]),
                Plot.line(filteredData, {
                  x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                  y: d => +d[variable],
                  markerEnd: "dot",
                  stroke: "steelblue",
                  curve: d3.curveCatmullRom.alpha(0.5)
                }),
                Plot.crosshair({
                  stroke: "var(--foreground)",
                  strokeWidth: 1,
                  dash: "3,3",
                  text: d => {
                    if (!d) return "";
                    const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                    return `${xText}: ${d.y}`;
                  }
                })
              ]
            });
          }

          // Append the chart SVG to the container.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      // Trigger initial chart rendering.
      updateCharts();

      // Initialize MDC components on dynamically added elements.
      mdc.autoInit();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

Variable Detection:
In the updateCharts function, each selected variable is checked—if its name (in lowercase) contains either “temp” or “degrees”, it’s treated as a temperature variable.
Temperature Chart:
For temperature variables, the Plot configuration includes a color scale (domain: 0–40, scheme: “inferno”) and adds a custom gradient definition. The Plot.line mark uses a stroke set to "url(#gradient)", so the line is rendered with a vertical gradient based on the data value. A legend is automatically included.
Default Chart:
Non‐temperature variables are rendered using a default “steelblue” stroke.
Material Design UI:
The file chooser, variable checkboxes, and date inputs are styled with Material Design (MDC) components, and charts are collapsible.

This solution applies the provided temperature colorization example to your website whenever a temperature variable is encountered.

Below is the complete HTML example in vanilla style (no Material Design) that applies special colorization to temperature variables (i.e. those whose names include “temp” or “degrees”). For such variables the line is drawn with a gradient using an “inferno” colormap (with domain 0–40 °C) and a legend; all other variables use a default blue stroke.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Basic vanilla style with light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: formats a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variables to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp".
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        // Convert time values to Date objects.
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or date range change.
      function updateCharts() {
        // Get selected variable names, excluding the time column.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        // Filter data by the chosen date range if a time column exists.
        let filteredData = data;
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, draw a full-width line chart.
        selectedVars.forEach(variable => {
          // Compute full extent of the values and add a 10% margin.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Create a collapsible container for each chart.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title")
            .text(variable);

          // Container for the chart.
          const chartContainer = details.append("div").node();

          let chart;
          // If the variable name suggests a temperature variable, use a gradient.
          if (variable.toLowerCase().includes("temp") || variable.toLowerCase().includes("degrees")) {
            chart = Plot.plot({
              width: chartContainer.clientWidth,
              round: true,
              marginLeft: 0,
              x: {
                label: null,
                insetLeft: 36,
                tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
              },
              y: {
                domain: yDomain,
                nice: true
              },
              color: {
                domain: [0, 40],
                scheme: "inferno",
                legend: true,
                ticks: 7,
                label: "temperature (°C)"
              },
              marks: [
                Plot.line(filteredData, {
                  x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                  y: d => +d[variable],
                  markerEnd: "dot",
                  stroke: "url(#gradient)",
                  curve: d3.curveCatmullRom.alpha(0.5)
                }),
                // Define the gradient for temperature colorization.
                (_index, { y, color }) => htl.svg`
                  <defs>
                    <linearGradient id="gradient" gradientUnits="userSpaceOnUse"
                      x1=0 x2=0 y1=${y(0)} y2=${y(40)}>
                      ${d3.ticks(0, 1, 10).map(t =>
                        htl.svg`<stop offset="${t * 100}%" stop-color="${color(40 * t)}" />`
                      )}
                    </linearGradient>
                  </defs>
                `,
                Plot.crosshair({
                  stroke: "var(--foreground)",
                  strokeWidth: 1,
                  dash: "3,3",
                  text: d => {
                    if (!d) return "";
                    const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                    return `${xText}: ${d.y}`;
                  }
                })
              ]
            });
          } else {
            // Default chart for non-temperature variables.
            chart = Plot.plot({
              width: chartContainer.clientWidth,
              round: true,
              marginLeft: 0,
              x: {
                label: null,
                insetLeft: 36,
                tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
              },
              y: {
                domain: yDomain,
                nice: true
              },
              marks: [
                Plot.gridY({
                  strokeDasharray: "0.75,2",
                  strokeOpacity: 1,
                  stroke: "var(--gridLine)"
                }),
                Plot.axisY({
                  tickSize: 0,
                  dx: 38,
                  dy: -6,
                  lineAnchor: "bottom",
                  tickFormat: d => d
                }),
                Plot.ruleY([0]),
                Plot.line(filteredData, {
                  x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
                  y: d => +d[variable],
                  markerEnd: "dot",
                  stroke: "steelblue",
                  curve: d3.curveCatmullRom.alpha(0.5)
                }),
                Plot.crosshair({
                  stroke: "var(--foreground)",
                  strokeWidth: 1,
                  dash: "3,3",
                  text: d => {
                    if (!d) return "";
                    const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                    return `${xText}: ${d.y}`;
                  }
                })
              ]
            });
          }

          // Append the chart SVG and ensure full width.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      // Trigger initial chart rendering.
      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

Explanation

Vanilla UI:
The example uses plain HTML and CSS for layout (an adaptive grid for checkboxes, basic date inputs, and collapsible charts) with light/dark mode support via CSS variables.
Variable Selection and Time Range:
The CSV is parsed with D3. A set of checkboxes (with certain columns unchecked by default) is built. If a time column is found, two date inputs allow trimming the dataset.
Chart Rendering:
For each selected variable, a full‑width collapsible line chart is drawn using Observable Plot.
• If the variable’s name suggests it is a temperature variable (contains “temp” or “degrees”), a gradient stroke is applied using a linear gradient (with a color scale defined by the “inferno” colormap over 0–40 °C) and a legend is shown.
• Otherwise, a default blue “steelblue” line is drawn.
• All charts include a crosshair that displays the date (if applicable) and the value at the hovered position.

This version reverts to a vanilla UI while applying the temperature colorization as requested.

Below is a complete HTML example that addresses the issues:

Working crosshair:
A built‑in crosshair mark is added (using Plot.crosshair) that displays the date and the value at the hovered position.
Super thin vertical lines for key dates:
Weekly key dates are computed (using d3.timeWeek.range) and rendered with a very thin vertical rule (via Plot.ruleX).
Sub‑marks on the x‑axis for weeks:
The weekly rules act as sub‑marks along the x‑axis.
A standout line color:
Instead of the default blue, the line is rendered in “crimson” for extra visual punch.

Simply paste the code into an HTML file and open it in your browser.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Basic vanilla style with light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear any previous content.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // List of variable names to be unchecked by default (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column: "time", "date", "datetime", or "timestamp".
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on checkboxes and date inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or date range change.
      function updateCharts() {
        // Get selected variable names, excluding the time column.
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        // Filter data by the chosen date range if a time column exists.
        let filteredData = data;
        let startDate, endDate, weeks = [];
        if (timeColumn) {
          startDate = new Date(document.getElementById("startDate").value);
          endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
          // Compute weekly key dates (e.g., every Monday).
          weeks = d3.timeWeek.range(startDate, endDate);
        }

        // Clear previous charts.
        chartsContainer.html("");

        // For each selected variable, draw a full-width line chart.
        selectedVars.forEach(variable => {
          // Compute full extent of the values and add a 10% margin.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Create a collapsible container for each chart.
          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title")
            .text(variable);

          // Container for the chart.
          const chartContainer = details.append("div").node();

          // Build the marks.
          const marks = [
            // Y grid lines.
            Plot.gridY({
              strokeDasharray: "0.75,2",
              strokeOpacity: 1,
              stroke: "var(--gridLine)"
            }),
            // Y axis.
            Plot.axisY({
              tickSize: 0,
              dx: 38,
              dy: -6,
              lineAnchor: "bottom",
              tickFormat: d => d
            }),
            Plot.ruleY([0]),
            // Thin vertical rules for weekly key dates.
            timeColumn && weeks.length ? Plot.ruleX(weeks, {
              stroke: "var(--foreground)",
              strokeWidth: 0.5,
              opacity: 0.5
            }) : null,
            // The line mark (using “crimson” to make it stand out).
            Plot.line(filteredData, {
              x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
              y: d => +d[variable],
              markerEnd: "dot",
              stroke: "crimson",
              curve: d3.curveCatmullRom.alpha(0.5)
            }),
            // Crosshair mark that shows the date and value.
            Plot.crosshair({
              stroke: "var(--foreground)",
              strokeWidth: 0.5,
              text: d => {
                if (!d) return "";
                const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                return `${xText}: ${d.y}`;
              }
            })
          ].filter(Boolean);

          // Create the chart.
          const chart = Plot.plot({
            width: chartContainer.clientWidth,
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            y: {
              domain: yDomain
            },
            marks: marks
          });

          // Append the chart SVG and set its width to 100%.
          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      // Trigger initial chart rendering.
      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

Explanation

Crosshair Mark:
The Plot.crosshair mark is used with a thin (0.5 px) stroke. Its text function formats the hovered x‑value (as a date when available) and the corresponding y‑value.
Vertical Key Date Lines:
When a time column is detected, weekly key dates are computed (using d3.timeWeek.range) and rendered via Plot.ruleX with a thin (0.5 px) stroke and 50% opacity.
Week Sub‑marks:
These weekly rules serve as sub‑marks along the x‑axis to indicate weeks.
Standout Line:
The plotted line uses “crimson” instead of blue, and is smoothed using a Catmull–Rom curve with a small alpha value.

This version should now meet your requirements for an interactive, crisp, and visually distinctive dataset plotter.

Below is an updated version that:

Uses a vertical crosshair (via Plot.crosshairX) that displays the date and value on hover.
Draws super‐thin vertical rules (via Plot.ruleX) at weekly intervals (using d3.timeWeek.range).
Adds sub‑marks along the x‑axis to indicate weeks.
Renders the line in a standout color (“crimson” instead of blue).

Make sure your CSV has a time-related column (for example, “time”, “date”, “datetime”, “timestamp”, or “timestamps”) so that the x‑axis and weekly marks are computed. If no time column is found, the code falls back to using an index.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Basic vanilla style with light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear previous content.
      d3.select("#chartContainer").html("");

      // Main container for variable selector and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // Uncheck default columns (case-insensitive).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Look for a time-related column.
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp", "timestamps"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when variables or time range change.
      function updateCharts() {
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        let filteredData = data;
        let weeks = [];
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
          // Weekly key dates (using Monday as week start).
          weeks = d3.timeWeek.range(startDate, endDate);
        }

        chartsContainer.html("");

        selectedVars.forEach(variable => {
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          const details = chartsContainer.append("details").attr("open", true);
          details.append("summary")
            .attr("class", "chart-title")
            .text(variable);

          const chartContainer = details.append("div").node();

          const marks = [
            // Y grid.
            Plot.gridY({
              strokeDasharray: "0.75,2",
              strokeOpacity: 1,
              stroke: "var(--gridLine)"
            }),
            // Y axis.
            Plot.axisY({
              tickSize: 0,
              dx: 38,
              dy: -6,
              lineAnchor: "bottom",
              tickFormat: d => d
            }),
            Plot.ruleY([0]),
            // Thin vertical rules for weekly key dates.
            timeColumn && weeks.length ? Plot.ruleX(weeks, {
              stroke: "var(--foreground)",
              strokeWidth: 0.5,
              opacity: 0.5
            }) : null,
            // The line (standout color: crimson).
            Plot.line(filteredData, {
              x: d => timeColumn ? new Date(d[timeColumn]) : d.index,
              y: d => +d[variable],
              markerEnd: "dot",
              stroke: "crimson",
              curve: d3.curveCatmullRom.alpha(0.5)
            }),
            // Vertical crosshair that shows the date and value.
            Plot.crosshairX({
              stroke: "var(--foreground)",
              strokeWidth: 0.5,
              text: d => {
                if (!d) return "";
                const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
                return `${xText}: ${d.y}`;
              }
            })
          ].filter(Boolean);

          // Use a fallback width if container.clientWidth is zero.
          const width = chartContainer.clientWidth || 800;
          const chart = Plot.plot({
            width: width,
            round: true,
            marginLeft: 0,
            x: {
              label: null,
              insetLeft: 36,
              tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
            },
            y: { domain: yDomain },
            marks: marks
          });

          chartContainer.appendChild(chart);
          chart.style.width = "100%";
        });
      }

      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

Explanation

Crosshair:
We now use Plot.crosshairX (with a 0.5 px stroke) so that as you hover over the chart a vertical line appears and displays the corresponding date and value.
Weekly Key Dates:
We compute weekly key dates using d3.timeWeek.range (from the start to end dates) and render them with very thin vertical rules (0.5 px stroke, 50% opacity).
Standout Line:
The plotted line uses “crimson” and is smoothed via a Catmull–Rom curve.
Fallback Width:
In case the container’s clientWidth is zero, a fallback width (800) is used.

This version should now display a plot with a working vertical crosshair, thin weekly markers, and a standout crimson line.

Below is an example that builds on your previous website—but now for each variable’s chart the title includes a “Window Stats” checkbox. When checked, the chart is re‐rendered to include additional window transforms (min, max, median) over a 28‑point window. Otherwise, only the raw (crimson) line is shown. The code also includes the vertical crosshair, weekly key-date markers, and other features from before.

Paste the following HTML into a file and open it in your browser:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Basic vanilla style with light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
    summary.chart-title span.name {
      margin-right: 10px;
    }
    summary.chart-title label {
      font-size: 0.9em;
      cursor: pointer;
    }
    summary.chart-title input.transformToggle {
      margin-right: 3px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  // Global object to preserve the transformation state for each variable.
  let transformState = {};

  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear previous content.
      d3.select("#chartContainer").html("");

      // Main container for selectors and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // Create checkboxes for all columns (except some defaults).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Detect a time-related column.
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp", "timestamps"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Container to hold charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on variable checkboxes and time inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Main update function.
      function updateCharts() {
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        let filteredData = data;
        let weeks = [];
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
          // Weekly key dates (using Monday as week start).
          weeks = d3.timeWeek.range(startDate, endDate);
        }

        // Clear previous charts.
        chartsContainer.html("");

        selectedVars.forEach(variable => {
          // Preserve transformation state (default to false if undefined).
          if (transformState[variable] === undefined) transformState[variable] = false;

          // Compute y-domain.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Define accessors.
          const xAccessor = timeColumn ? (d => new Date(d[timeColumn])) : (d => d.index);
          const yAccessor = d => +d[variable];

          // Create a collapsible container.
          const details = chartsContainer.append("details").attr("open", true);
          // Create a summary with the variable name and a "Window Stats" checkbox.
          const summaryEl = details.append("summary")
            .attr("class", "chart-title");
          summaryEl.html(`<span class="name">${variable}</span>
            <label>
              <input type="checkbox" class="transformToggle" ${transformState[variable] ? "checked" : ""}>
              Window Stats
            </label>`);

          // Attach event listener to update transform state when toggled.
          summaryEl.select("input.transformToggle").on("change", function() {
            transformState[variable] = this.checked;
            // Re-render just this chart.
            renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain);
          });

          // Render the chart for this variable.
          renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain);
        });
      }

      // Render chart for one variable.
      function renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain) {
        // Remove any previous chart in this details element.
        details.select("div.chart").remove();
        // Create a container for the chart.
        const chartContainer = details.append("div").attr("class", "chart").node();

        // Common marks: grid, y-axis, rule at 0, weekly markers, and a vertical crosshair.
        const commonMarks = [
          Plot.gridY({
            strokeDasharray: "0.75,2",
            strokeOpacity: 1,
            stroke: "var(--gridLine)"
          }),
          Plot.axisY({
            tickSize: 0,
            dx: 38,
            dy: -6,
            lineAnchor: "bottom",
            tickFormat: d => d
          }),
          Plot.ruleY([0]),
          (timeColumn && weeks.length) ? Plot.ruleX(weeks, {
            stroke: "var(--foreground)",
            strokeWidth: 0.5,
            opacity: 0.5
          }) : null,
          Plot.crosshairX({
            stroke: "var(--foreground)",
            strokeWidth: 0.5,
            text: d => {
              if (!d) return "";
              const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
              return `${xText}: ${d.y}`;
            }
          })
        ].filter(Boolean);

        let lineMarks = [];
        if (transformState[variable]) {
          // When window stats are enabled, show a faint raw line plus window transforms.
          lineMarks = [
            Plot.line(filteredData, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson",
              strokeOpacity: 0.3,
              curve: d3.curveCatmullRom.alpha(0.5)
            }),
            Plot.line(filteredData, Plot.windowY({ k: 28, reduce: "min" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "blue"
            })),
            Plot.line(filteredData, Plot.windowY({ k: 28, reduce: "max" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "red"
            })),
            Plot.line(filteredData, Plot.windowY({ k: 28, reduce: "median" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson"
            }))
          ];
        } else {
          // Otherwise, show just a smooth raw line.
          lineMarks = [
            Plot.line(filteredData, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson",
              curve: d3.curveCatmullRom.alpha(0.5)
            })
          ];
        }

        const marks = commonMarks.concat(lineMarks);
        const width = chartContainer.clientWidth || 800;
        const chart = Plot.plot({
          width: width,
          round: true,
          marginLeft: 0,
          x: {
            label: null,
            insetLeft: 36,
            tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
          },
          y: { domain: yDomain },
          marks: marks
        });

        chartContainer.appendChild(chart);
        chart.style.width = "100%";
      }

      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

Variable Selection & Time Range:
The CSV is parsed and variable checkboxes are built. If a time column is detected, date inputs and weekly key-date rules (using d3.timeWeek.range) are computed.
Per-Chart “Window Stats” Toggle:
For each selected variable a collapsible <details> element is created. Its <summary> shows the variable name and a checkbox labeled “Window Stats.” A global object (transformState) preserves each variable’s toggle state. When toggled, the chart for that variable is re‑rendered.
Chart Rendering:
The chart’s marks include grid lines, y‑axis, a rule at zero, thin vertical rules for weekly dates, and a vertical crosshair.
• When “Window Stats” is off, a single smooth crimson line is drawn.
• When on, a faint raw line (with 30% opacity) is drawn along with three window transforms (min, max, median) computed over a 28‑point window.

This solution meets your requirements for a vertical crosshair that shows the date and value, super‐thin vertical lines for key dates, weekly sub‑marks on the x‑axis, and a standout line color—with an optional transformation toggle per variable.

Below is an updated complete HTML example. In this version a new numeric field (“Rolling Window (points)”) is added just before the charts. Its value is used for all the window transforms (min, max, median) so you can control the size of the rolling window dynamically. (The default is 28.) When you change that field (or any other selector), the charts update accordingly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Basic vanilla style with light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for the rolling window field */
    #rollingWindowContainer {
      margin-top: 20px;
    }
    #rollingWindowContainer label {
      margin-right: 5px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
    summary.chart-title span.name {
      margin-right: 10px;
    }
    summary.chart-title label {
      font-size: 0.9em;
      cursor: pointer;
    }
    summary.chart-title input.transformToggle {
      margin-right: 3px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  // Global object to preserve transformation state for each variable.
  let transformState = {};

  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear previous content.
      d3.select("#chartContainer").html("");

      // Main container for selectors and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // Create checkboxes for all columns (except defaults).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Detect a time-related column.
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp", "timestamps"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Add a field to specify the rolling window (in points).
      const rollingWindowContainer = container.append("div")
          .attr("id", "rollingWindowContainer");
      rollingWindowContainer.append("label")
          .attr("for", "rollingWindow")
          .text("Rolling Window (points): ");
      rollingWindowContainer.append("input")
          .attr("type", "number")
          .attr("id", "rollingWindow")
          .attr("min", 1)
          .attr("value", 28);

      // Listen for changes on the rolling window field.
      d3.select("#rollingWindow").on("change", updateCharts);

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on variable checkboxes and time inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Update charts when selectors change.
      function updateCharts() {
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        let filteredData = data;
        let weeks = [];
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
          // Weekly key dates (Monday as week start).
          weeks = d3.timeWeek.range(startDate, endDate);
        }

        // Get the current rolling window size.
        const windowSize = +document.getElementById("rollingWindow").value;

        // Clear previous charts.
        chartsContainer.html("");

        selectedVars.forEach(variable => {
          if (transformState[variable] === undefined) transformState[variable] = false;

          // Compute y-domain.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Accessors.
          const xAccessor = timeColumn ? (d => new Date(d[timeColumn])) : (d => d.index);
          const yAccessor = d => +d[variable];

          // Create a collapsible container for the chart.
          const details = chartsContainer.append("details").attr("open", true);
          const summaryEl = details.append("summary")
            .attr("class", "chart-title");
          summaryEl.html(`<span class="name">${variable}</span>
            <label>
              <input type="checkbox" class="transformToggle" ${transformState[variable] ? "checked" : ""}>
              Window Stats
            </label>`);

          summaryEl.select("input.transformToggle").on("change", function() {
            transformState[variable] = this.checked;
            renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain, windowSize);
          });

          renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain, windowSize);
        });
      }

      // Render a chart for one variable.
      function renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain, windowSize) {
        details.select("div.chart").remove();
        const chartContainer = details.append("div").attr("class", "chart").node();

        const commonMarks = [
          Plot.gridY({
            strokeDasharray: "0.75,2",
            strokeOpacity: 1,
            stroke: "var(--gridLine)"
          }),
          Plot.axisY({
            tickSize: 0,
            dx: 38,
            dy: -6,
            lineAnchor: "bottom",
            tickFormat: d => d
          }),
          Plot.ruleY([0]),
          (timeColumn && weeks.length) ? Plot.ruleX(weeks, {
            stroke: "var(--foreground)",
            strokeWidth: 0.5,
            opacity: 0.5
          }) : null,
          Plot.crosshairX({
            stroke: "var(--foreground)",
            strokeWidth: 0.5,
            text: d => {
              if (!d) return "";
              const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
              return `${xText}: ${d.y}`;
            }
          })
        ].filter(Boolean);

        let lineMarks = [];
        if (transformState[variable]) {
          lineMarks = [
            Plot.line(filteredData, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson",
              strokeOpacity: 0.3,
              curve: d3.curveCatmullRom.alpha(0.5)
            }),
            Plot.line(filteredData, Plot.windowY({ k: windowSize, reduce: "min" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "blue"
            })),
            Plot.line(filteredData, Plot.windowY({ k: windowSize, reduce: "max" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "red"
            })),
            Plot.line(filteredData, Plot.windowY({ k: windowSize, reduce: "median" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson"
            }))
          ];
        } else {
          lineMarks = [
            Plot.line(filteredData, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson",
              curve: d3.curveCatmullRom.alpha(0.5)
            })
          ];
        }

        const marks = commonMarks.concat(lineMarks);
        const width = chartContainer.clientWidth || 800;
        const chart = Plot.plot({
          width: width,
          round: true,
          marginLeft: 0,
          x: {
            label: null,
            insetLeft: 36,
            tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
          },
          y: { domain: yDomain },
          marks: marks
        });

        chartContainer.appendChild(chart);
        chart.style.width = "100%";
      }

      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

Explanation

Rolling Window Field:
A new numeric input (with id "rollingWindow") is added below the time picker. Its value (default 28) is read on every update, and passed to the window transforms (using Plot.windowY({ k: windowSize, … })).
Per‑Chart Toggle:
Each chart’s collapsible title now includes a “Window Stats” checkbox. When toggled, the chart is re‑rendered using either a single raw line or with additional window transforms (min, max, median) computed over the specified rolling window.
Other Features:
The code also renders weekly key-date markers (using thin vertical rules) and a vertical crosshair that displays the date and value, while using a standout “crimson” color for the main line.

This solution gives you full control over the rolling window via an input field while preserving all your other interactive features.

Below is a complete HTML example that removes the numeric window‐input and instead provides a dropdown menu with aggregation options (daily, weekly, bi‑weekly, monthly). For time‐series data, the code computes the average gap (in milliseconds) between consecutive data points and then estimates the number of points (k) corresponding to the chosen aggregation period. That k value is then passed to Plot.windowY so that the window transforms (min, max, median) are computed over the desired time span.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <title>The Tree Journals: Dataset Plotter</title>
  <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
  <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.17"></script>
  <style>
    /* Basic vanilla style with light/dark mode */
    :root {
      --background: #fff;
      --foreground: #000;
      --gridLine: #ccc;
    }
    @media (prefers-color-scheme: dark) {
      :root {
        --background: #121212;
        --foreground: #e0e0e0;
        --gridLine: #444;
      }
    }
    body {
      background-color: var(--background);
      color: var(--foreground);
      margin: 0;
      padding: 0;
      font-family: sans-serif;
    }
    #fileInputContainer {
      text-align: center;
      margin: 20px;
    }
    #chartContainer {
      margin: 20px;
    }
    /* Adaptive grid for variable checkboxes */
    #checkboxContainer {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 10px;
    }
    #checkboxContainer label {
      display: flex;
      align-items: center;
    }
    #timePickerContainer {
      margin-top: 20px;
    }
    #timePickerContainer label {
      margin-right: 5px;
    }
    #timePickerContainer input {
      margin-right: 15px;
    }
    /* Style for the aggregation select field */
    #aggregationContainer {
      margin-top: 20px;
    }
    #aggregationContainer label {
      margin-right: 5px;
    }
    /* Style for collapsible chart titles */
    summary.chart-title {
      font-size: 1.1em;
      margin: 20px 0 5px;
      cursor: pointer;
      outline: none;
    }
    details[open] summary.chart-title {
      border-bottom: 1px solid var(--foreground);
      padding-bottom: 5px;
    }
    summary.chart-title span.name {
      margin-right: 10px;
    }
    summary.chart-title label {
      font-size: 0.9em;
      cursor: pointer;
    }
    summary.chart-title input.transformToggle {
      margin-right: 3px;
    }
  </style>
</head>
<body>

<div id="fileInputContainer">
  <h1>The Tree Journals: Dataset Plotter</h1>
  <input accept=".csv" id="csvFileInput" type="file" />
</div>

<div id="chartContainer"></div>

<script>
  // Global object to preserve transformation state for each variable.
  let transformState = {};

  document.getElementById("csvFileInput").addEventListener("change", handleFile, false);

  // Helper: format a Date as "YYYY-MM-DD" for date inputs.
  function formatDate(date) {
    return date.toISOString().split("T")[0];
  }

  function handleFile(event) {
    const file = event.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = function(e) {
      const text = e.target.result;
      const data = d3.csvParse(text);

      // Clear previous content.
      d3.select("#chartContainer").html("");

      // Main container for selectors and charts.
      const container = d3.select("#chartContainer")
        .append("div")
        .attr("id", "variableSelector");

      container.append("h2").text("Select Variables:");
      const checkboxContainer = container.append("div")
        .attr("id", "checkboxContainer");

      // Create checkboxes for all columns (except some defaults).
      const excluded = ["latitude", "longitude", "lat", "lon", "x", "y", "id", "fid"];
      data.columns.forEach(col => {
        const lowerCol = col.toLowerCase();
        const isExcluded = excluded.includes(lowerCol);
        const label = checkboxContainer.append("label");
        label.append("input")
          .attr("type", "checkbox")
          .attr("name", "variable")
          .attr("value", col)
          .property("checked", !isExcluded);
        label.append("span").text(" " + col);
      });

      // Detect a time-related column.
      const timeCandidates = data.columns.filter(c =>
        ["time", "date", "datetime", "timestamp", "timestamps"].includes(c.toLowerCase())
      );
      let timeColumn = null;
      if (timeCandidates.length > 0) {
        timeColumn = timeCandidates[0];
        const times = data.map(d => new Date(d[timeColumn]));
        const minTime = new Date(Math.min(...times));
        const maxTime = new Date(Math.max(...times));

        const timePickerContainer = container.append("div")
          .attr("id", "timePickerContainer");
        timePickerContainer.append("h2").text("Select Time Range:");

        // Start date input.
        timePickerContainer.append("label")
          .attr("for", "startDate")
          .text("Start: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "startDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(minTime));

        // End date input.
        timePickerContainer.append("label")
          .attr("for", "endDate")
          .text("End: ");
        timePickerContainer.append("input")
          .attr("type", "date")
          .attr("id", "endDate")
          .attr("min", formatDate(minTime))
          .attr("max", formatDate(maxTime))
          .attr("value", formatDate(maxTime));
      }

      // Add a select field to specify the aggregation period.
      // (These options are used to infer the window length in points.)
      const aggregationContainer = container.append("div")
          .attr("id", "aggregationContainer");
      aggregationContainer.append("label")
          .attr("for", "aggregationPeriod")
          .text("Aggregation Period: ");
      aggregationContainer.append("select")
          .attr("id", "aggregationPeriod")
          .html(`
            <option value="daily">Daily</option>
            <option value="weekly" selected>Weekly</option>
            <option value="biweekly">Bi-Weekly</option>
            <option value="monthly">Monthly</option>
          `);

      // Listen for changes on the aggregation field.
      d3.select("#aggregationPeriod").on("change", updateCharts);

      // Container to hold the charts.
      const chartsContainer = container.append("div")
        .attr("id", "chartsContainer");

      // Listen for changes on variable checkboxes and time inputs.
      d3.selectAll("input[name='variable']").on("change", updateCharts);
      if (timeColumn) {
        d3.select("#startDate").on("change", updateCharts);
        d3.select("#endDate").on("change", updateCharts);
      }

      // Main update function.
      function updateCharts() {
        const selectedVars = Array.from(document.querySelectorAll("input[name='variable']:checked"))
          .map(input => input.value)
          .filter(v => v !== timeColumn);

        let filteredData = data;
        let weeks = [];
        if (timeColumn) {
          const startDate = new Date(document.getElementById("startDate").value);
          const endDate = new Date(document.getElementById("endDate").value);
          filteredData = data.filter(d => {
            const dtime = new Date(d[timeColumn]);
            return dtime >= startDate && dtime <= endDate;
          });
          // Weekly key dates (using Monday as week start).
          weeks = d3.timeWeek.range(startDate, endDate);
        }

        // Compute average gap (ms) between consecutive data points (if available).
        let avgGap = null;
        if (timeColumn && filteredData.length > 1) {
          const sortedData = filteredData.slice().sort((a, b) => new Date(a[timeColumn]) - new Date(b[timeColumn]));
          let totalGap = 0;
          for (let i = 1; i < sortedData.length; i++) {
            totalGap += (new Date(sortedData[i][timeColumn]) - new Date(sortedData[i-1][timeColumn]));
          }
          avgGap = totalGap / (sortedData.length - 1);
        }

        // Determine aggregation period in milliseconds from the select field.
        const aggOption = document.getElementById("aggregationPeriod").value;
        let periodMs;
        if (aggOption === "daily") periodMs = 86400000;
        else if (aggOption === "weekly") periodMs = 604800000;
        else if (aggOption === "biweekly") periodMs = 604800000 * 2;
        else if (aggOption === "monthly") periodMs = 2592000000; // Approximate 30 days

        // Compute k (number of points in the desired aggregation period) based on avgGap.
        let k = 1;
        if (avgGap) {
          k = Math.max(1, Math.round(periodMs / avgGap));
        }

        // Clear previous charts.
        chartsContainer.html("");

        selectedVars.forEach(variable => {
          if (transformState[variable] === undefined) transformState[variable] = false;

          // Compute y-domain.
          const values = filteredData
            .map(d => +d[variable])
            .filter(v => !isNaN(v));
          const [minVal, maxVal] = d3.extent(values);
          const marginVal = (maxVal - minVal) * 0.1;
          const yDomain = [minVal - marginVal, maxVal + marginVal];

          // Accessors.
          const xAccessor = timeColumn ? (d => new Date(d[timeColumn])) : (d => d.index);
          const yAccessor = d => +d[variable];

          // Create a collapsible container.
          const details = chartsContainer.append("details").attr("open", true);
          const summaryEl = details.append("summary")
            .attr("class", "chart-title");
          summaryEl.html(`<span class="name">${variable}</span>
            <label>
              <input type="checkbox" class="transformToggle" ${transformState[variable] ? "checked" : ""}>
              Window Stats
            </label>`);
          summaryEl.select("input.transformToggle").on("change", function() {
            transformState[variable] = this.checked;
            renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain, k);
          });

          renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain, k);
        });
      }

      // Render a chart for one variable.
      function renderChart(variable, details, filteredData, timeColumn, weeks, xAccessor, yAccessor, yDomain, k) {
        details.select("div.chart").remove();
        const chartContainer = details.append("div").attr("class", "chart").node();

        const commonMarks = [
          Plot.gridY({
            strokeDasharray: "0.75,2",
            strokeOpacity: 1,
            stroke: "var(--gridLine)"
          }),
          Plot.axisY({
            tickSize: 0,
            dx: 38,
            dy: -6,
            lineAnchor: "bottom",
            tickFormat: d => d
          }),
          Plot.ruleY([0]),
          (timeColumn && weeks.length) ? Plot.ruleX(weeks, {
            stroke: "var(--foreground)",
            strokeWidth: 0.5,
            opacity: 0.5
          }) : null,
          Plot.crosshairX({
            stroke: "var(--foreground)",
            strokeWidth: 0.5,
            text: d => {
              if (!d) return "";
              const xText = timeColumn ? d3.timeFormat("%Y-%m-%d")(d.x) : d.x;
              return `${xText}: ${d.y}`;
            }
          })
        ].filter(Boolean);

        let lineMarks = [];
        if (transformState[variable]) {
          lineMarks = [
            // Faint raw line.
            Plot.line(filteredData, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson",
              strokeOpacity: 0.3,
              curve: d3.curveCatmullRom.alpha(0.5)
            }),
            Plot.line(filteredData, Plot.windowY({ k: k, reduce: "min" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "blue"
            })),
            Plot.line(filteredData, Plot.windowY({ k: k, reduce: "max" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "red"
            })),
            Plot.line(filteredData, Plot.windowY({ k: k, reduce: "median" }, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson"
            }))
          ];
        } else {
          lineMarks = [
            Plot.line(filteredData, {
              x: xAccessor,
              y: yAccessor,
              stroke: "crimson",
              curve: d3.curveCatmullRom.alpha(0.5)
            })
          ];
        }

        const marks = commonMarks.concat(lineMarks);
        const width = chartContainer.clientWidth || 800;
        const chart = Plot.plot({
          width: width,
          round: true,
          marginLeft: 0,
          x: {
            label: null,
            insetLeft: 36,
            tickFormat: timeColumn ? d3.timeFormat("%Y-%m-%d") : undefined
          },
          y: { domain: yDomain },
          marks: marks
        });

        chartContainer.appendChild(chart);
        chart.style.width = "100%";
      }

      updateCharts();
    };
    reader.readAsText(file);
  }
</script>

</body>
</html>

How It Works

Aggregation Period Selection:
A new dropdown (select input) labeled “Aggregation Period” is provided with options for daily, weekly, bi‑weekly, and monthly.
Inferring Window Length:
For time‐series data, the average gap (in milliseconds) between consecutive points is computed. Then, based on the chosen aggregation period (e.g. one week is 604,800,000 ms), the number of points in that period (k) is estimated as:
$ k = \text{round}\left(\frac{\text{period (ms)}}{\text{avgGap}}\right) $
Window Transforms:
When a variable’s “Window Stats” checkbox is checked, the chart is rendered using the window transforms (min, max, median) over the computed k. Otherwise, only the raw (crimson) line is drawn.
Other Features:
The code also retains the vertical crosshair, thin weekly markers, and collapsible charts.

This solution lets you choose an aggregation period based on time instead of a fixed number of points.