D3 bypass observable - stats corrected

docs-gen/content/introduction/_index.md

@@ -10,19 +10,19 @@ chapter: false
 The diagram below shows a generated tree of the VSS. Here you can see a mapping for the current catalog of signals related to vehicles. Click a Branch Node to expand or collapse the tree. (Slower animation while pressing the altKey ("option" key for Mac OS-X).)
 
 
-{{< radialcluster >}}
+{{< radial >}}
 
 ---
 ## Current Population of the model - in respect to VSS Types and Datatypes
 
 
 Click on the nodes to highlight the links, or hover over the links to see their exact population.
 
-{{< parallelsets >}}
+{{< sankey >}}
 
 ---
 ## Releases and types
 
 How the model changed in major releases.
 
-{{< donut_chart >}}
+{{< piechart >}}

docs-gen/layouts/shortcodes/donut_chart.html → docs-gen/layouts/shortcodes/piechart.html

@@ -1,4 +1,4 @@
-<div id="chart-container" style="height: 550px; ">
+<div id="chart-container" style="height: 550px;">
   <div id="dataset-selector" style="margin-bottom: 20px;"></div>
   <div id="donut"></div>
 </div>
@@ -9,7 +9,7 @@
   console.log("Plot.js script loaded");
 
   console.log("Attempting to load CSV data from /data");
-  d3.csv("/vehicle_signal_specification/data/piechartnotexpanded.csv").then(data => {
+  d3.csv("/vehicle_signal_specification/data/piechart.csv").then(data => {
     console.log("CSV Data loaded successfully:", data);
 
     const width = 800; // Assuming a fixed width for the chart
@@ -22,7 +22,6 @@
       "Branches": "#26547C", // Blue for nodes with children
       "Actuators": "#EF476F", // Red for actuators
       "Sensors": "#FFD166", // Yellow for sensors
-
     };
 
     const svg = d3.create("svg")
@@ -43,7 +42,7 @@
     // Update chart function
     function updateChart(dataset) {
       console.log(`Updating chart with dataset: ${dataset}`);
-      const dataTransformed = data.map(d => ({ type: d.Type, value: d[dataset] }));
+      const dataTransformed = data.map(d => ({ type: d.Type, value: +d[dataset] }));
       const pieData = pie(dataTransformed);
 
       const totalValue = d3.sum(dataTransformed, d => d.value);
@@ -110,59 +109,60 @@
       return t => arc(i(t));
     }
 
-    // Initialize the chart with the default dataset "V5"
-    console.log("Initializing chart with dataset: V5");
-    updateChart("V5");
+    // Create dataset selector based on the CSV headers
+    console.log("Creating dataset selector");
+    const selectorContainer = document.getElementById("dataset-selector");
+    const datasetKeys = Object.keys(data[0]).slice(1); // Get dataset keys excluding the 'Type' column
+
+    // Determine the latest version to initialize the chart with
+    const latestVersion = datasetKeys[datasetKeys.length - 1];
+    console.log(`Initializing chart with dataset: ${latestVersion}`);
+    updateChart(latestVersion);
 
     console.log("Appending plot to #donut");
     document.getElementById("donut").appendChild(svg.node());
     console.log("Plot appended successfully");
 
-// Create dataset selector
-console.log("Creating dataset selector");
-const selectorContainer = document.getElementById("dataset-selector");
-const datasets = new Map([["V2.0", "V2"], ["V3.0", "V3"], ["V4.0", "V4"], ["V5.0", "V5"]]);
-
-const radioForm = document.createElement("form");
-radioForm.style.display = "inline-block"; // Ensure form is inline-block for center alignment
-
-// Add a label before the radio buttons
-const formLabel = document.createElement("span");
-formLabel.textContent = "Release: ";
-formLabel.style.fontWeight = "500";
-formLabel.style.marginTop = "20px";
-formLabel.style.marginRight = "10px";
-radioForm.appendChild(formLabel);
-
-datasets.forEach((value, key) => {
-  const label = document.createElement("label");
-  label.style.marginLeft = "15px"; // Add space between options
-  label.style.fontWeight = "500"; // Semibold text style
-  label.style.display = "inline-block"; // Ensure radio buttons are aligned horizontally
-
-  const input = document.createElement("input");
-  input.type = "radio";
-  input.name = "dataset";
-  input.value = value;
-
-  if (value === "V5") input.checked = true; // Default selection
-  input.addEventListener("change", () => {
-    console.log(`Dataset changed to: ${value}`);
-    updateChart(value);  // Trigger chart change based on the selected value
-  });
-
-  label.appendChild(input);
-  label.appendChild(document.createTextNode(key));
-
-  radioForm.appendChild(label);
-});
-
-selectorContainer.appendChild(radioForm);
-console.log("Dataset selector created successfully");
+    const radioForm = document.createElement("form");
+    radioForm.style.display = "inline-block"; // Ensure form is inline-block for center alignment
+
+    // Add a label before the radio buttons
+    const formLabel = document.createElement("span");
+    formLabel.textContent = "Release: ";
+    formLabel.style.fontWeight = "500";
+    formLabel.style.marginTop = "20px";
+    formLabel.style.marginRight = "10px";
+    radioForm.appendChild(formLabel);
+
+    datasetKeys.forEach(key => {
+      const label = document.createElement("label");
+      label.style.marginLeft = "15px"; // Add space between options
+      label.style.fontWeight = "500"; // Semibold text style
+      label.style.display = "inline-block"; // Ensure radio buttons are aligned horizontally
+
+      const input = document.createElement("input");
+      input.type = "radio";
+      input.name = "dataset";
+      input.value = key;
+
+      if (key === latestVersion) input.checked = true; // Default selection
+      input.addEventListener("change", () => {
+        console.log(`Dataset changed to: ${key}`);
+        updateChart(key);  // Trigger chart change based on the selected value
+      });
+
+      label.appendChild(input);
+      label.appendChild(document.createTextNode(key));
+
+      radioForm.appendChild(label);
+    });
+
+    selectorContainer.appendChild(radioForm);
+    console.log("Dataset selector created successfully");
   }).catch(error => {
     console.error("Error loading CSV data:", error);
     document.getElementById("donut").innerText = "Error loading data. Please check the console for details.";
   });
 
   console.log("Script execution complete");
-</script>
+</script>

docs-gen/layouts/shortcodes/radialcluster.html → docs-gen/layouts/shortcodes/radial.html

@@ -3,7 +3,7 @@
   import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
 
   async function createChart() {
-    const data = await d3.json("/vehicle_signal_specification/data/outputplus.json");
+    const data = await d3.json("/vehicle_signal_specification/data/radial.json");
 
     const width = 800; // Adjust the width as needed
     const radius = width / 2;

docs-gen/layouts/shortcodes/parallelsets.html → docs-gen/layouts/shortcodes/sankey.html

@@ -176,6 +176,6 @@
     return { nodes, links };
   }
 
-  const dataUrl = "/vehicle_signal_specification/data/modified_vss_compact_metadata copy.csv";
+  const dataUrl = "/vehicle_signal_specification/data/sankey.csv";
   csv(dataUrl).then(data => drawChart(data));
 </script>