link from country in tree to parallel coordinates

05959436 · ericj · 2958896a · 05959436 · 05959436 · 05959436
Commit 05959436 authored 3 months ago by ericj
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 <body>

 <div id="tree-container" class="visualization-container visible">
-    <button id="back-button" class="button button-inner" disabled>Back</button>
+    <button id="back-button" class="button button-inner button-regular" disabled>Back</button>
 </div>

 <div id="time-series-container" class="visualization-container">

--- a/modules/lib.js
+++ b/modules/lib.js
@@ -79,6 +79,35 @@ export async function loadData() {
    }
 }

+const views = {
+    tree: document.getElementById('tree-container'),
+    timeSeries: document.getElementById('time-series-container'),
+    parallel: document.getElementById('parallel-coordinates-container'),
+    bubble: document.getElementById('bubble-container')
+};
+
+const buttons = {
+    tree: document.getElementById('tree-view'),
+    timeSeries: document.getElementById('time-series-view'),
+    parallel: document.getElementById('parallel-view'),
+    bubble: document.getElementById('bubble-view')
+};
+
+export function navigate(viewName) {
+    Object.values(views).forEach(view => view.classList.remove('visible'));
+    Object.values(buttons).forEach(button => button.classList.remove('active'));
+
+    views[viewName].classList.add('visible');
+    buttons[viewName].classList.add('active');
+}
+
+export function initNavigation() {
+    buttons.tree.addEventListener('click', () => navigate('tree'));
+    buttons.timeSeries.addEventListener('click', () => navigate('timeSeries'));
+    buttons.parallel.addEventListener('click', () => navigate('parallel'));
+    buttons.bubble.addEventListener('click', () => navigate('bubble'));
+}
+
 export const margin = { top: 20, right: 30, bottom: 50, left: 50 };
 export const width = window.innerWidth - margin.left - margin.right;
 export const height = window.innerHeight - margin.top - margin.bottom;

--- a/modules/main.js
+++ b/modules/main.js
-import {getDimensions, loadData} from "./lib.js";
+import {getDimensions, initNavigation, loadData} from "./lib.js";

 window.addEventListener('load', () => {
    // navigation
-    const views = {
-        tree: document.getElementById('tree-container'),
-        timeSeries: document.getElementById('time-series-container'),
-        parallel: document.getElementById('parallel-coordinates-container'),
-        bubble: document.getElementById('bubble-container')
-    };
-
-    const buttons = {
-        tree: document.getElementById('tree-view'),
-        timeSeries: document.getElementById('time-series-view'),
-        parallel: document.getElementById('parallel-view'),
-        bubble: document.getElementById('bubble-view')
-    };
-
-    function showView(viewName) {
-        Object.values(views).forEach(view => view.classList.remove('visible'));
-        Object.values(buttons).forEach(button => button.classList.remove('active'));
-
-        views[viewName].classList.add('visible');
-        buttons[viewName].classList.add('active');
-    }
-
-    buttons.tree.addEventListener('click', () => showView('tree'));
-    buttons.timeSeries.addEventListener('click', () => showView('timeSeries'));
-    buttons.parallel.addEventListener('click', () => showView('parallel'));
-    buttons.bubble.addEventListener('click', () => showView('bubble'));
+    initNavigation()


    //data filter buttons

--- a/modules/parallel.js
+++ b/modules/parallel.js
@@ -31,7 +31,7 @@ loadData().then(([data,_]) => {
    const dimensions = getDimensions(data)

    const yScales = {};
-    const epsilon = 1; // Small positive constant to avoid log(0)
+    const epsilon = 0.1; // Small positive constant to avoid log(0)
    dimensions.forEach(dim => {
        const extent = d3.extent(data, d => d[dim]);
        const adjustedExtent = [extent[0] + epsilon, extent[1] + epsilon];
@@ -67,12 +67,6 @@ loadData().then(([data,_]) => {
    function updatePlot(state) {
        const filteredData = state ? groupedData.get(state) : data;

-        if (!filteredData) {
-            console.warn(`No data available for state: ${state}`);
-            svg.selectAll(".data-line").remove();
-            return;
-        }
-
        const paths = svg.selectAll(".data-line")
            .data(filteredData);

@@ -115,20 +109,11 @@ loadData().then(([data,_]) => {
    });


-    // Dropdown change event
    dropdown.on("change", function() {
        const selectedState = d3.select(this).property("value");
        updatePlot(selectedState);
    });

-    // Add reset button functionality
-    d3.select("#reset-button")
-        .on("click", () => {
-            dropdown.property("value", "");
-            updatePlot(null);
-        });
-
-    // Hide loading indicator after rendering
    hideLoading();
 }).catch(err => {
    console.error("Error loading data: ", err);

--- a/modules/tree.js
+++ b/modules/tree.js
-import {addSvg, width, height, margin, loadData} from "./lib.js";
+import {addSvg, width, height, margin, loadData, navigate} from "./lib.js";


 let currentData;
@@ -156,7 +156,28 @@ function updateTree(filterKey) {
            if (!d.children) return 0
        })
        .style("text-anchor", d => d.children ? "end" : "start")
-        .text(d => d.data.name);
+        .text(d => d.data.name)
+
+    d3.selectAll(".link-to-parallel").remove()
+    d3.selectAll(".node").filter((d, i) => i < 2).each(function(d) {
+        if (d.children&&d.data.name!=="Schengen States"){
+            d3.select(this)
+                .append('foreignObject')
+                .attr('width', 250)
+                .attr('height', 50)
+                .attr('transform', 'translate(-125, 0)')
+                .append('xhtml:button')
+                .attr("class", "button button-inner button-regular link-to-parallel")
+                .text('View as Parallel Coordinates')
+                .style('cursor', 'pointer')
+                .on('click', function() {
+                    const stateSelector = d3.select('#state-dropdown');
+                    stateSelector.property('value', d.data.name);
+                    stateSelector.node().dispatchEvent(new Event('change'));
+                    navigate("parallel")
+                });
+        }
+    });


 }

--- a/style.css
+++ b/style.css
@@ -70,7 +70,7 @@ html, body, #tree-container, #time-series-container, #bubble-container, #paralle
    border-radius: 5px;
 }

-#back-button {
+.button-regular {
    font-size: 14px;
    background-color: #69b3a2;
    color: white;