HTML Cleanup and Refactoring

2025-03-10 00:37 UTC o3-mini-high Open in ChatGPT ↗

This html is now a mess, why do they always end up like that?

let’s clean it up for real, and try to move as much as possible to .js files

Multi-Dataset Visualization

<style>
    /* Base styles */
    * {
        font-family: sans-serif;
    }

    #fileInputContainer {
        text-align: center;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 5px 0;
    }

    hr {
        border: 0.5px solid rgba(0, 0, 0, 0.5);
    }

    body {
        font-size: 12px;
    }

    .plot-container {
        /*border-bottom: 1px dotted black;*/
        /*padding: 0;*/
        background-color: #f9f9f9;
        /*margin-bottom: 15px;*/
    }

    h3 {
        color: #333;
        margin: 0;
        padding: 5px 0;
    }

    h3:hover {
        color: #007BFF;
        text-decoration: underline;
    }

    .chart-area {
        /*margin-top: 10px;*/
        /*border-bottom: 1px dashed #ccc;*/
        /*padding: 10px;*/
        background-color: white;
    }

    .drag-zone {
        transition: border-color 0.2s ease;
        cursor: pointer;
    }

    .drag-zone:hover {
        border-color: #007BFF;
        background-color: #f9f9f9;
    }

    #chartContainer {
        overflow-y: auto;
    }

    /* --- Print Styles --- */
    @media print {
        /* Remove fixed heights so layout flows naturally */
        html, body {
            height: auto !important;
            overflow: visible !important;
            margin: 10mm !important; /* Or adjust as needed */
        }

        /* Override any inline flex styling for printing */
        div[style*="display: flex"] {
            display: block !important;
            flex-direction: initial !important;
            height: auto !important;
            margin: 0 !important; /* Removes extra top/bottom margins if needed */
            padding: 0 !important;
        }

        /* Let .plot-container and .chart-area break across pages if needed */
        .plot-container{
            page-break-inside: avoid !important;  /* or remove entirely */
            break-inside: avoid !important;       /* For modern browsers */
            -webkit-column-break-inside: avoid;   /* Safari/Chrome legacy support */
            -webkit-region-break-inside: avoid;
            box-shadow: none;
            margin: 10px 0; /* Adjust spacing as needed */
        }

        /* Hide drag/drop and file input on print */
        .drag-zone{
            display: none !important;
        }

        /* Ensure container doesn’t clip charts */
        #chartContainer {
            overflow: visible !important;
            height: auto !important;
        }

        a {
            text-decoration: underline;
            color: blue !important;
        }

        h1
        {
            font-size: 16px;
        }
        h2{
            font-size: 12px;
        }

        h3{
            font-size: 10px;
        }
    }

    /* Optional: page margins (some Safari versions require @page) */
    @page {
        margin: 10mm;
    }

</style>

<div id="fileInputContainer" style="text-align: left; margin-bottom: 20px;">
    <h1>Dataset Plotter</h1>
    <h4>Uncharted Limbo Collective</h4>
    <hr>
    <div style="display: flex; flex-direction: row !important; align-items: center;">
        <h3 >Project:</h3>
        <h2 style="margin-left: 10px;">Tree Correspondents</h2>
    </div>
    <hr>
    <div id="locationContainer" style="display: flex; flex-direction: row !important; align-items: center;">
        <h3 id="locationLabel">Location:</h3>
        <h2 id="locationName" style="cursor: pointer; margin-left: 10px;">Set Location Name</h2>
    </div>
    <div id="saveChartsContainer" style="text-align: center; margin: 20px 0;">
        <button id="saveButton">Save Charts as SVG</button>
    </div>
    <hr>

    <hr>

</div>

<div id="chartContainer" style="height: 100%"></div>

Below is one way to refactor your project so that the HTML is lean and most of your JavaScript logic lives in separate module files. For example, you might create three files:

index.html – Contains only the minimal HTML structure and links to external resources.
css/styles.css – Contains your CSS styles.
js/main.js – Contains the code that was inline in your HTML.

Feel free to adjust names or structure further if needed.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Multi-Dataset Visualization</title>
    <!-- External Styles -->
    <link rel="stylesheet" href="./css/styles.css" />
    <!-- External libraries -->
    <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
    <script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
  </head>
  <body>
    <div class="container">
      <div id="fileInputContainer">
        <h1>Dataset Plotter</h1>
        <h4>Uncharted Limbo Collective</h4>
        <hr />
        <div class="project-info">
          <h3>Project:</h3>
          <h2>Tree Correspondents</h2>
        </div>
        <hr />
        <div id="locationContainer">
          <h3 id="locationLabel">Location:</h3>
          <h2 id="locationName" class="editable">Set Location Name</h2>
        </div>
        <div id="saveChartsContainer">
          <button id="saveButton">Save Charts as SVG</button>
        </div>
        <hr />
      </div>
      <div id="chartContainer"></div>
    </div>
    <!-- Main JavaScript file -->
    <script type="module" src="./js/main.js"></script>
  </body>
</html>

css/styles.css

/* Base styles */
* {
  font-family: sans-serif;
}

body {
  font-size: 12px;
  margin: 0;
  padding: 0;
}

.container {
  margin: 2em;
  display: flex;
  flex-direction: column;
}

#fileInputContainer {
  text-align: left;
  margin-bottom: 20px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 5px 0;
}

hr {
  border: 0.5px solid rgba(0, 0, 0, 0.5);
}

/* Plot and chart styles */
.plot-container {
  background-color: #f9f9f9;
}

.project-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#locationContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#locationName {
  cursor: pointer;
  margin-left: 10px;
}

.chart-area {
  background-color: white;
}

.drag-zone {
  transition: border-color 0.2s ease;
  cursor: pointer;
  border: 2px dashed #ccc;
  padding: 10px;
  margin: 10px 0;
  text-align: center;
}

.drag-zone:hover {
  border-color: #007BFF;
  background-color: #f9f9f9;
}

#chartContainer {
  overflow-y: auto;
}

/* --- Print Styles --- */
@media print {
  html,
  body {
    height: auto !important;
    overflow: visible !important;
    margin: 10mm !important;
  }
  div[style*="display: flex"] {
    display: block !important;
    flex-direction: initial !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .plot-container {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    -webkit-column-break-inside: avoid;
    -webkit-region-break-inside: avoid;
    box-shadow: none;
    margin: 10px 0;
  }
  .drag-zone {
    display: none !important;
  }
  #chartContainer {
    overflow: visible !important;
    height: auto !important;
  }
  a {
    text-decoration: underline;
    color: blue !important;
  }
  h1 {
    font-size: 16px;
  }
  h2 {
    font-size: 12px;
  }
  h3 {
    font-size: 10px;
  }
}

@page {
  margin: 10mm;
}

js/main.js

import { processCSV } from "./processCSV.js";
import { saveToLocalStorage, loadFromLocalStorage } from "./ioUtils.js";
import { updateCharts } from "./updateCharts.js";

// Serialize function adds extra padding to SVG viewBox
export const serialize = (function () {
  const xmlns = "http://www.w3.org/2000/xmlns/";
  const xlinkns = "http://www.w3.org/1999/xlink";
  const svgns = "http://www.w3.org/2000/svg";
  const extraPadding = 10;

  return function serialize(svg) {
    svg = svg.cloneNode(true);
    const viewBox = svg.getAttribute("viewBox");
    if (viewBox) {
      let [x, y, width, height] = viewBox.split(" ").map(Number);
      x -= extraPadding;
      y -= extraPadding;
      width += extraPadding * 2;
      height += extraPadding * 2;
      svg.setAttribute("viewBox", [x, y, width, height].join(" "));
    }
    const fragment = window.location.href + "#";
    const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
    while (walker.nextNode()) {
      for (const attr of walker.currentNode.attributes) {
        if (attr.value.includes(fragment)) {
          attr.value = attr.value.replace(fragment, "#");
        }
      }
    }
    svg.setAttributeNS(xmlns, "xmlns", svgns);
    svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
    const serializer = new window.XMLSerializer();
    const string = serializer.serializeToString(svg);
    return new Blob([string], { type: "image/svg+xml" });
  };
})();

/* --- Location Editing --- */
const locationHeader = document.getElementById("locationName");

// Create an input field for editing the location name
const nameInput = document.createElement("input");
nameInput.type = "text";
nameInput.placeholder = "Enter a location name";
nameInput.style.display = "none";
locationHeader.parentNode.insertBefore(nameInput, locationHeader.nextSibling);

locationHeader.addEventListener("click", () => {
  nameInput.style.display = "block";
  nameInput.value =
    locationHeader.textContent !== "Set Location Name"
      ? locationHeader.textContent
      : "";
  locationHeader.style.display = "none";
  nameInput.focus();
});

const saveLocationName = () => {
  if (nameInput.value.trim() !== "") {
    locationHeader.textContent = nameInput.value.trim();
  } else {
    locationHeader.textContent = "Set Location Name";
  }
  nameInput.style.display = "none";
  locationHeader.style.display = "block";
};

nameInput.addEventListener("keypress", (e) => {
  if (e.key === "Enter") {
    saveLocationName();
  }
});
nameInput.addEventListener("blur", saveLocationName);

/* --- CSV and Chart Handling --- */
const chartContainer = document.getElementById("chartContainer");

let cachedData = null;
let filteredColumns = null;
let enableCurve = true;
let plotPoints = true;
let plotTrend = true;

// Create a new section with drop zone and chart area
const createNewSection = () => {
  const section = document.createElement("div");
  section.className = "plot-container";

  const dropZone = document.createElement("div");
  dropZone.className = "drag-zone";
  dropZone.innerHTML = "Drag a CSV file here or click to upload";

  const chartArea = document.createElement("div");
  chartArea.className = "chart-area";

  section.appendChild(dropZone);
  section.appendChild(chartArea);
  chartContainer.appendChild(section);

  attachDragAndDropLogic(dropZone, chartArea);
  return section;
};

// Process CSV file and update charts
const handleCSV = (file, chartArea) => {
  const reader = new FileReader();
  reader.onload = function (e) {
    const csvData = e.target.result;
    ({ data: cachedData, filteredColumns } = processCSV(csvData));
    plotPoints = cachedData.length <= 500;
    updateCharts(cachedData, filteredColumns, enableCurve, plotPoints, plotTrend, chartArea);
    createNewSection();
  };
  reader.readAsText(file);
};

// Attach drag and drop (and click) events for file input
const attachDragAndDropLogic = (dropZone, chartArea) => {
  dropZone.addEventListener("dragover", (e) => {
    e.preventDefault();
    e.stopPropagation();
    dropZone.style.borderColor = "#007BFF";
  });

  dropZone.addEventListener("dragleave", (e) => {
    e.preventDefault();
    e.stopPropagation();
    dropZone.style.borderColor = "#ccc";
  });

  dropZone.addEventListener("drop", (e) => {
    e.preventDefault();
    e.stopPropagation();
    dropZone.style.borderColor = "#ccc";
    const file = e.dataTransfer.files[0];
    if (file && file.type === "text/csv") {
      handleCSV(file, chartArea);
      dropZone.style.display = "none";
    } else {
      alert("Please drop a valid CSV file.");
    }
  });

  dropZone.addEventListener("click", () => {
    const fileInput = document.createElement("input");
    fileInput.type = "file";
    fileInput.accept = ".csv";
    fileInput.style.display = "none";
    fileInput.click();
    fileInput.addEventListener("change", (e) => {
      const file = e.target.files[0];
      if (file && file.type === "text/csv") {
        handleCSV(file, chartArea);
        dropZone.style.display = "none";
      }
    });
  });
};

createNewSection();

/* --- Save Charts --- */
document.getElementById("saveButton").addEventListener("click", () => {
  const svgElements = document.querySelectorAll("#chartContainer svg");
  if (svgElements.length === 0) {
    alert("No charts found!");
    return;
  }
  const zip = new JSZip();
  svgElements.forEach((svg, index) => {
    let title = `chart-${index + 1}`;
    if (svg.parentNode && svg.parentNode.previousElementSibling) {
      title = svg.parentNode.previousElementSibling.textContent.trim();
      title = title.replace(/[^a-z0-9]/gi, "_");
    }
    const blob = serialize(svg);
    zip.file(`${title}.svg`, blob);
  });
  zip.generateAsync({ type: "blob" }).then((content) => {
    const url = URL.createObjectURL(content);
    const link = document.createElement("a");
    link.href = url;
    link.download = "charts.zip";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  });
});

Additional Notes

The modules processCSV.js, ioUtils.js, and updateCharts.js remain as they are (or can be refactored further as needed).
Moving inline styles into an external CSS file (as shown) can further improve readability.
This structure keeps the HTML focused on layout and content while moving all the logic and interactivity into dedicated JavaScript modules.

This separation makes your code easier to maintain and scale.

Absolutely. As your project grows, further modularization can make your code more maintainable. You can break main.js into smaller, focused modules—each handling a specific part of the functionality. For example:

locationEditor.js: Manages editing of the location name.
csvHandler.js: Handles drag-and-drop logic and CSV processing.
chartManager.js: Manages chart updates and saving/exporting SVGs.

Then, your main.js becomes an entry point that just initializes these modules:

import { initLocationEditor } from "./locationEditor.js";
import { initCsvHandler } from "./csvHandler.js";
import { initChartManager } from "./chartManager.js";

initLocationEditor();
initCsvHandler();
initChartManager();

Example: locationEditor.js

export const initLocationEditor = () => {
  const locationHeader = document.getElementById("locationName");
  const nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.placeholder = "Enter a location name";
  nameInput.style.display = "none";
  locationHeader.parentNode.insertBefore(nameInput, locationHeader.nextSibling);

  locationHeader.addEventListener("click", () => {
    nameInput.style.display = "block";
    nameInput.value =
      locationHeader.textContent !== "Set Location Name"
        ? locationHeader.textContent
        : "";
    locationHeader.style.display = "none";
    nameInput.focus();
  });

  const saveLocationName = () => {
    locationHeader.textContent =
      nameInput.value.trim() !== "" ? nameInput.value.trim() : "Set Location Name";
    nameInput.style.display = "none";
    locationHeader.style.display = "block";
  };

  nameInput.addEventListener("keypress", (e) => {
    if (e.key === "Enter") saveLocationName();
  });
  nameInput.addEventListener("blur", saveLocationName);
};

Example: csvHandler.js

import { processCSV } from "./processCSV.js";
import { updateCharts } from "./updateCharts.js";

let cachedData = null;
let filteredColumns = null;
let enableCurve = true;
let plotPoints = true;
let plotTrend = true;

export const initCsvHandler = () => {
  const chartContainer = document.getElementById("chartContainer");

  const createNewSection = () => {
    const section = document.createElement("div");
    section.className = "plot-container";
    const dropZone = document.createElement("div");
    dropZone.className = "drag-zone";
    dropZone.innerHTML = "Drag a CSV file here or click to upload";
    const chartArea = document.createElement("div");
    chartArea.className = "chart-area";
    section.appendChild(dropZone);
    section.appendChild(chartArea);
    chartContainer.appendChild(section);
    attachDragAndDropLogic(dropZone, chartArea);
    return section;
  };

  const handleCSV = (file, chartArea) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const csvData = e.target.result;
      ({ data: cachedData, filteredColumns } = processCSV(csvData));
      plotPoints = cachedData.length <= 500;
      updateCharts(cachedData, filteredColumns, enableCurve, plotPoints, plotTrend, chartArea);
      createNewSection();
    };
    reader.readAsText(file);
  };

  const attachDragAndDropLogic = (dropZone, chartArea) => {
    dropZone.addEventListener("dragover", (e) => {
      e.preventDefault();
      dropZone.style.borderColor = "#007BFF";
    });

    dropZone.addEventListener("dragleave", (e) => {
      e.preventDefault();
      dropZone.style.borderColor = "#ccc";
    });

    dropZone.addEventListener("drop", (e) => {
      e.preventDefault();
      dropZone.style.borderColor = "#ccc";
      const file = e.dataTransfer.files[0];
      if (file && file.type === "text/csv") {
        handleCSV(file, chartArea);
        dropZone.style.display = "none";
      } else {
        alert("Please drop a valid CSV file.");
      }
    });

    dropZone.addEventListener("click", () => {
      const fileInput = document.createElement("input");
      fileInput.type = "file";
      fileInput.accept = ".csv";
      fileInput.style.display = "none";
      fileInput.click();
      fileInput.addEventListener("change", (e) => {
        const file = e.target.files[0];
        if (file && file.type === "text/csv") {
          handleCSV(file, chartArea);
          dropZone.style.display = "none";
        }
      });
    });
  };

  createNewSection();
};

Example: chartManager.js

export const initChartManager = () => {
  const serialize = (function () {
    const xmlns = "http://www.w3.org/2000/xmlns/";
    const xlinkns = "http://www.w3.org/1999/xlink";
    const svgns = "http://www.w3.org/2000/svg";
    const extraPadding = 10;
    return function serialize(svg) {
      svg = svg.cloneNode(true);
      const viewBox = svg.getAttribute("viewBox");
      if (viewBox) {
        let [x, y, width, height] = viewBox.split(" ").map(Number);
        x -= extraPadding;
        y -= extraPadding;
        width += extraPadding * 2;
        height += extraPadding * 2;
        svg.setAttribute("viewBox", [x, y, width, height].join(" "));
      }
      const fragment = window.location.href + "#";
      const walker = document.createTreeWalker(svg, NodeFilter.SHOW_ELEMENT);
      while (walker.nextNode()) {
        for (const attr of walker.currentNode.attributes) {
          if (attr.value.includes(fragment)) {
            attr.value = attr.value.replace(fragment, "#");
          }
        }
      }
      svg.setAttributeNS(xmlns, "xmlns", svgns);
      svg.setAttributeNS(xmlns, "xmlns:xlink", xlinkns);
      const serializer = new window.XMLSerializer();
      const string = serializer.serializeToString(svg);
      return new Blob([string], { type: "image/svg+xml" });
    };
  })();

  document.getElementById("saveButton").addEventListener("click", () => {
    const svgElements = document.querySelectorAll("#chartContainer svg");
    if (svgElements.length === 0) {
      alert("No charts found!");
      return;
    }
    const zip = new JSZip();
    svgElements.forEach((svg, index) => {
      let title = `chart-${index + 1}`;
      if (svg.parentNode && svg.parentNode.previousElementSibling) {
        title = svg.parentNode.previousElementSibling.textContent.trim();
        title = title.replace(/[^a-z0-9]/gi, "_");
      }
      const blob = serialize(svg);
      zip.file(`${title}.svg`, blob);
    });
    zip.generateAsync({ type: "blob" }).then((content) => {
      const url = URL.createObjectURL(content);
      const link = document.createElement("a");
      link.href = url;
      link.download = "charts.zip";
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    });
  });
};

Benefits of This Approach

Separation of Concerns: Each module is responsible for a specific part of your application, making the code easier to understand.
Easier Maintenance: Isolating logic allows you to update or debug a particular functionality without impacting unrelated areas.
Reusability: Modular code can be reused in other projects or parts of your application.

By breaking down the functionality, your main.js file stays lean and focused solely on initializing your application. This modular approach improves overall code quality and scalability as your project evolves.

Look at this mess, i have to comment and uncomment parts of the plot all the time.

let’s make a neat system of toggles to control all these.

import { calculateYDomain, calculateXDomain } from ’./plotUtils.js’;

// Create the plot configuration // Constants const PLOT_HEIGHT = 300; // Default plot height const X_AXIS_TICKS = 24; // Number of X-axis ticks const MARGINS = { left: 35, right: 35, top:5, bottom: 5 }; // Margins for the plot const FRAME_STROKE_WIDTH = 2; const DATA_STROKE_WIDTH = 0.75; const POINT_SIZE = 0.5;

// Helper to get line curve type function getCurveType(smoothCurve) { return smoothCurve ? d3.curveMonotoneX : d3.curveLinear; }

// Helper to format the crosshair title function formatCrosshairTitle(d, column) { return Time: ${d3.timeFormat("%Y-%m-%d %H:%M")(d.time)}\nValue: ${d[column].toFixed(2)}; }

/**

Creates a collapsible plot with a title for a given dataset and renders the plot using a provided plotting function.
The plot can be expanded or collapsed by clicking on its title.
@param {HTMLElement} container - The parent container element where the collapsible plot will be appended.
@param {Array} data - The dataset to be plotted.
@param {string} column - The column or identifier for which the plot should be generated.
@param {boolean} [smoothCurve=true] - A flag indicating whether to apply smoothing to the curve in the generated plot.
@param {Function} plotFunction - A callback function used to render the actual plot inside the chart area.

                              The function is expected to accept four arguments: the chart container,

                              data, column, and the smoothCurve flag.

@return {void} This function does not return any value. */ export function createCollapsiblePlot(container, data, column, smoothCurve = true, enablePoints = true, enableRegression = true, plotFunction) {

// Create a container for the plot const plotContainer = container; //document.createElement(“div”); // plotContainer.className = “plot-container”; // plotContainer.style.marginBottom = “20px”;

// Add a title for the plot (clickable for expand/collapse) const plotTitle = document.createElement(“h3”); plotTitle.textContent = ${column}; plotTitle.style.cursor = “pointer”; // Indicate the title is clickable plotTitle.style.marginBottom = “5px”; plotTitle.style.userSelect = “none”; // Disable text selection on click plotTitle.style.marginLeft = “10px”; plotTitle.style.borderBottom = “1px solid black”; // Add a div for the chart itself const chartDiv = document.createElement(“div”); // chartDiv.className = “chart-area”; chartDiv.id = chart-${column}; chartDiv.style.display = “block”; // Initially visible

// Append the title and chart div to the container plotContainer.appendChild(plotTitle); plotContainer.appendChild(chartDiv);

// Append the whole plot container to the main chart container // container.appendChild(plotContainer); // // Add click event listener to the title for expand/collapse functionality plotTitle.addEventListener(“click”, () => { if (chartDiv.style.display === “none”) { chartDiv.style.display = “block”; // Show the chart } else { chartDiv.style.display = “none”; // Hide the chart } });

// Call the provided plotFunction to render the chart inside the chartDiv plotFunction(chartDiv,data,column,smoothCurve, enablePoints, enableRegression); }

function linearRegression(data, xAccessor, yAccessor) { const n = data.length; const sumX = data.reduce((acc, d) => acc + xAccessor(d), 0); const sumY = data.reduce((acc, d) => acc + yAccessor(d), 0); const sumXY = data.reduce((acc, d) => acc + xAccessor(d) * yAccessor(d), 0); const sumXX = data.reduce((acc, d) => acc + xAccessor(d) ** 2, 0);

const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX ** 2);
const intercept = (sumY - slope * sumX) / n;

return { slope, intercept };

}

// Function to create an individual plot /**

Creates and renders a plot visualization inside the specified container based on the provided data and configurations.
@param {HTMLElement} container - The DOM element where the plot will be rendered.

@param {Array