physycom · Grufoony · Feb 18, 2025 · Feb 17, 2025 · Feb 17, 2025 · Feb 18, 2025
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,6 @@ __pycache__
 images
 examples/debug
 examples/release
+
+
+webapp/data/*
diff --git a/webapp/index.html b/webapp/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Road Network Visualization with OpenStreetMap</title>
+
+  <!-- Leaflet CSS and JS -->
+  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
+  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
+
+  <!-- D3.js -->
+  <script src="https://d3js.org/d3.v7.min.js"></script>
+
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+
+  <!-- Map container -->
+  <div id="map"></div>
+
+  <!-- Slider for time step -->
+  <div class="slider-container">
+    <label for="timeSlider">Time Step:</label>
+    <input type="range" id="timeSlider" min="0" step="300" value="0" />
+    <span id="timeLabel">Time Step: 0</span>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/webapp/script.js b/webapp/script.js
@@ -0,0 +1,223 @@
+// Initialize the Leaflet map
+const baseZoom = 13;
+const map = L.map('map').setView([44.4949, 11.3426], baseZoom); // Centered on Bologna, Italy
+
+// Add OpenStreetMap tile layer with inverted grayscale effect
+const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a>'
+}).addTo(map);
+tileLayer.getContainer().style.filter = 'grayscale(100%) invert(100%)';
+
+// Create an overlay for D3 visualizations
+L.svg().addTo(map);
+const overlay = d3.select(map.getPanes().overlayPane).select("svg");
+const g = overlay.append("g").attr("class", "leaflet-zoom-hide");
+
+let nodes, edges, densities;
+let timeStep = 0;
+
+// Load CSV data for nodes, edges, and densities
+Promise.all([
+  d3.dsv(";", "./data/nodes.csv", parseNodes),
+  d3.dsv(";", "./data/edges.csv", parseEdges),
+  d3.dsv(";", "./data/densities.csv", parseDensity)
+]).then(([nodesData, edgesData, densityData]) => {
+  nodes = nodesData;
+  edges = edgesData;
+  densities = densityData;
+
+      // console.log("Nodes:", nodes);
+      // console.log("Edges:", edges);
+      // console.log("Densities:", densities);
+
+  if (!nodes.length || !edges.length || !densities.length) {
+    console.error("Missing CSV data.");
+    return;
+  }
+
+  // Create a map of nodes keyed by their id for quick lookup
+  const nodeMap = new Map(nodes.map(d => [d.id, d]));
+
+  // Filter out edges whose nodes do not exist
+  edges = edges.filter(d => nodeMap.has(d.u) && nodeMap.has(d.v));
+
+  // Create a color scale for density values using three color stops
+  const colorScale = d3.scaleLinear()
+    .domain([0, 0.5, 1])
+    .range(["green", "yellow", "red"]);
+
+  // Function to project geographic coordinates into Leaflet's layer point coordinates
+  function project(d) {
+    return map.latLngToLayerPoint([d.lat, d.lon]);
+  }
+
+  // D3 line generator to draw paths
+  const lineGenerator = d3.line()
+    .x(d => d[0])
+    .y(d => d[1]);
+
+  // Draw edges as SVG paths
+  const link = g.selectAll("path")
+    .data(edges)
+    .enter()
+    .append("path")
+    .attr("fill", "none")
+    .attr("stroke", "white")
+    .attr("stroke-dasharray", d => 
+        d.name.toLowerCase().includes("autostrada") ? "4,4" : "none"
+    )
+    .style("pointer-events", "all")
+    .style("cursor", "pointer")
+    .on("click", function(event, d) {
+      const densityData = densities.find(row => row.time === timeStep);
+      const densityValue = densityData ? densityData.densities[edges.indexOf(d)] : "N/A";
+      alert(`Edge ID: ${d.id} - from ${d.source_id} to ${d.target_id}.\n\nDensity at time step ${timeStep}:  ${densityValue}`);
+    });
+
+
+  // Draw nodes as SVG circles
+  const node = g.selectAll("circle")
+    .data(nodes)
+    .enter()
+    .append("circle")
+    .attr("fill", "blue")
+    .style("cursor", "pointer")
+    .on("click", function(event, d) {
+      alert(`Node ID: ${d.id}`);
+    });
+
+  // Function to update node and edge positions, and color edges based on density
+  function update() {
+    // Project nodes to current map coordinates
+    nodes.forEach(d => d.projected = project(d));
+
+    // Update edge paths
+    link.attr("d", d => {
+      if (d.geometry && d.geometry.length > 0) {
+        const projectedCoords = d.geometry.map(pt => {
+          const point = map.latLngToLayerPoint([pt.lat, pt.lon]);
+          return [point.lat, point.lon];
+        });
+        return lineGenerator(projectedCoords);
+      } else {
+        // Fallback: draw a straight line between the two nodes
+        const start = project(nodeMap.get(d.source_id));
+        const end = project(nodeMap.get(d.target_id));
+        return lineGenerator([[start.lon, start.lat], [end.lon, end.lat]]);
+      }
+    });
+
+    // Update node positions
+    node.attr("cx", d => d.projected.lon)
+        .attr("cy", d => d.projected.lat);
+
+
+    // Update node radius based on zoom level
+    function updateNodeRadius() {
+      const zoomLevel = map.getZoom();
+      const radiusScale = 3 + (zoomLevel - baseZoom);
+      node.attr("r", radiusScale);
+    }
+    // Update edge stroke width based on zoom level
+    function updateEdgeStrokeWidth() {
+      const zoomLevel = map.getZoom();
+      const strokeWidthScale = 3 + (zoomLevel - baseZoom);
+      link.attr("stroke-width", strokeWidthScale);
+    }
+
+    // Add event listener to map
+    map.on('zoomend', function() {
+      updateNodeRadius();
+      updateEdgeStrokeWidth();
+    });
+
+    // Initial render (default zoom level)
+    updateNodeRadius();
+    updateEdgeStrokeWidth();
+
+    updateDensityVisualization();
+  }
+
+  map.on("zoomend", update);
+  update(); // Initial render
+
+  // Update edge colors based on the current time step density data
+  function updateDensityVisualization() {
+    const currentDensityRow = densities.find(d => d.time === timeStep);
+    if (!currentDensityRow) {
+      console.error("No density data for time step:", timeStep);
+      return;
+    }
+    const currentDensities = currentDensityRow.densities;
+
+    // For each edge, update the stroke color based on its density value
+    edges.forEach((edge, index) => {
+      let density = currentDensities[index];
+      if (density === undefined || isNaN(density)) {
+        console.warn(`Edge index ${index} has invalid density. Defaulting to 0.`);
+        density = 0;
+      }
+      const color = colorScale(density);
+      link.filter((d, i) => i === index)
+          .attr("stroke", color);
+    });
+  }
+
+  // Set up the time slider based on the density data's maximum time value
+  const maxTimeStep = d3.max(densities, d => d.time);
+  const timeSlider = document.getElementById('timeSlider');
+  const timeLabel = document.getElementById('timeLabel');
+  // Round up max to the nearest 300 for step consistency
+  timeSlider.max = Math.ceil(maxTimeStep / 300) * 300;
+  timeSlider.step = 300;
+  timeLabel.textContent = `Time Step: ${timeStep}`;
+
+  // Update the visualization when the slider value changes
+  timeSlider.addEventListener('input', function() {
+    timeStep = parseInt(timeSlider.value);
+    timeLabel.textContent = `Time Step: ${timeStep}`;
+    update();
+  });
+}).catch(error => {
+  console.error("Error loading CSV files:", error);
+});
+
+// Parsing function for nodes CSV
+function parseNodes(d) {
+      return {
+        id: d.id,
+        x: +d.lon, // Longitude
+        y: +d.lat  // Latitude
+      };
+}
+
+    // Parsing function for edges CSV, including geometry parsing
+function parseEdges(d) {
+      let geometry = [];
+      if (d.geometry) {
+        const coordsStr = d.geometry.replace(/^LINESTRING\s*\(/, '').replace(/\)$/, '');
+        geometry = coordsStr.split(",").map(coordStr => {
+          const coords = coordStr.trim().split(/\s+/);
+          return { x: +coords[0], y: +coords[1] };
+        });
+      }
+      return {
+        osm_id: d.id,
+        u: d.source,
+        v: d.target,
+        name: d.name,
+        geometry: geometry
+      };
+}
+
+// Parsing function for density CSV
+function parseDensity(d) {
+      const time = +d.time;
+      const densities = Object.keys(d)
+        .filter(key => key !== 'time')
+        .map(key => {
+          const val = d[key] ? d[key].trim() : "";
+          return val === "" ? 0 : +val;
+        });
+      return { time, densities };
+}
diff --git a/webapp/styles.css b/webapp/styles.css
@@ -0,0 +1,46 @@
+body, html {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Fullscreen map */
+  #map {
+    width: 100%;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  /* Slider container */
+  .slider-container {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000;
+    width: 80%;
+    padding: 10px;
+    background: rgba(255, 255, 255, 0.8);
+  }
+
+  .slider-container input {
+    width: 100%;
+  }
+
+  /* SVG container on top of Leaflet */
+  .leaflet-overlay-pane svg {
+    position: absolute;
+  }
+  .leaflet-zoom-hide {
+    pointer-events: auto;
+  }
+
+  circle {
+    fill: black;
+    stroke: white;
+    stroke-width: 1;
+  }
+