Done

Roseyroseo · Feb 22, 2025 · 73c0abb · 73c0abb
1 parent 73b8a5b
commit 73c0abb
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -23,9 +23,23 @@ <h1>🚴 <strong>Bikewatching</strong></h1>
             </label>
         </div>
     </header>
-  <div id="map">
-    <svg></svg>
-  </div>
+    <div id="map">
+        <svg></svg>
+    </div>
+
+    <div class="legend">
+        <div class="legend-title">LEGEND: </div>
+        <div class="legend-item" style="--departure-ratio: 1">
+            <span class="legend-swatch"></span> More departures
+        </div>
+        <div class="legend-item" style="--departure-ratio: 0.5">
+            <span class="legend-swatch"></span> Balanced
+        </div>
+        <div class="legend-item" style="--departure-ratio: 0">
+            <span class="legend-swatch"></span> More arrivals
+        </div>
+    </div>
+
 
   <div id="tooltip"></div>
     <!-- Mapbox GL JS JavaScript -->

diff --git a/map.css b/map.css
@@ -1,3 +1,9 @@
+:root {
+    --color-departures: steelblue;
+    --color-arrivals: darkorange;
+}
+
+
 html, body {
     margin: 0;
     padding: 5px;
@@ -25,10 +31,16 @@ html, body {
 
 #map svg circle {
     pointer-events: auto; /* Allow hover interactions */
-    fill: steelblue;
+    fill: var(--color);
     fill-opacity: 0.6;
     stroke: white;
     stroke-width: 1;
+
+    --color: color-mix(
+        in oklch,
+        var(--color-departures) calc(100% * var(--departure-ratio)),
+        var(--color-arrivals)
+    );
 }
 
 #tooltip {
@@ -98,3 +110,53 @@ label {
     font-size: 12px;
 }
 
+/* Legend Container */
+.legend {
+    display: flex;
+    justify-content: center; /* Center the legend horizontally */
+    align-items: center;
+    gap: 20px; /* Space between legend items */
+    margin-top: 10px;
+    padding: 8px 15px;
+    background: transparent;
+    backdrop-filter: blur(12px);
+    border-radius: 8px;
+    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
+    font-size: 14px;
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+}
+
+/* Word Legend*/
+.legend-title {
+    color: rgb(107, 107, 107);
+
+
+}
+
+/* Legend Items */
+.legend-item {
+    color: rgb(58, 58, 58);
+    font-weight: bold;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Legend Swatches */
+.legend-swatch {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    border: 1px solid white;
+    background: var(--color);
+
+    --color: color-mix(
+        in oklch,
+        var(--color-departures) calc(100% * var(--departure-ratio)),
+        var(--color-arrivals)
+    );
+}
diff --git a/map.js b/map.js
@@ -8,15 +8,14 @@ let timeFilter = -1;
 const timeSlider = document.getElementById('time-slider');
 const selectedTime = document.getElementById('selected-time');
 const anyTimeLabel = document.getElementById('any-time');
+const tooltip = d3.select("#tooltip");
 
 let trips = [];
 let filteredTrips = [];
 let filteredArrivals = new Map();
 let filteredDepartures = new Map();
 let filteredStations = [];
 
-
-
 // Initialize the map
 const map = new mapboxgl.Map({
    container: 'map',
@@ -27,14 +26,20 @@ const map = new mapboxgl.Map({
    maxZoom: 18
 });
 
+// traffic scale
+const stationFlow = d3.scaleQuantize()
+    .domain([0, 1])  // Range of departure ratio values
+    .range([0, 0.5, 1]); // Discrete color scale values
+
+
 // Shared style object for bike lanes
 const bikeLaneStyle = {
     'line-color': '#32D400',
     'line-width': 3,
     'line-opacity': 0.4
 };
 
-const tooltip = d3.select("#tooltip");
+
 
 // Helper function to convert coordinates
 function getCoords(station) {
@@ -97,13 +102,17 @@ function updateMapVisualization() {
 
     // Enter + Merge new circles
     const mergedCircles = circles.enter()
-        .append('circle')
-        .merge(circles)
-        .attr('r', d => radiusScale(d.totalTraffic))
-        .attr('fill', 'steelblue')
-        .attr('stroke', 'white')
-        .attr('stroke-width', 1)
-        .attr('opacity', 0.6);
+    .append('circle')
+    .merge(circles)
+    .attr('r', d => radiusScale(d.totalTraffic))
+    .style("--departure-ratio", d => {
+        if (d.totalTraffic === 0) return 0.5; // Default to neutral if no traffic
+        return stationFlow(d.departures / d.totalTraffic);
+    })
+    .attr('stroke', 'white')
+    .attr('stroke-width', 1)
+    .attr('opacity', 0.6);
+
 
     //console.log("Circles updated:", mergedCircles.size());