27:null 28:["$","title",null,{"children":"510 SPADINA STREETCAR | snes19xx | Observable"}] 2d:T96e,tramIcon = { const color = "#DA291C"; return ` ` }2e:T179a,chart = { const width = 800; const height = 400; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]).attr("class", "viz-container"); // --- CONFIGURATION --- const trackY1 = 100; // Y position for Scenario A const trackY2 = 300; // Y position for Scenario B const signalX = 500; // Where the traffic light is const ROW_GREEN = "#2E8B57"; const TTC_RED = "#DA291C"; // 1. Tracks (Dashed Lines) svg.append("line").attr("x1", 0).attr("x2", width).attr("y1", trackY1+25).attr("y2", trackY1+25) .attr("stroke", "#ccc").attr("stroke-width", 2).attr("stroke-dasharray", "10,5"); svg.append("line").attr("x1", 0).attr("x2", width).attr("y1", trackY2+25).attr("y2", trackY2+25) .attr("stroke", "#ccc").attr("stroke-width", 2).attr("stroke-dasharray", "10,5"); // 2. Scenario Labels svg.append("text").attr("x", 10).attr("y", trackY1 - 50).text("Scenario A: Bunched Vehicle (Gap Too Small)").attr("class", "title"); svg.append("text").attr("x", 10).attr("y", trackY2 - 50).text("Scenario B: Lagging Vehicle (Gap Too Large)").attr("class", "title"); // 3. Traffic Lights (Groups) const signalA = svg.append("g").attr("transform", `translate(${signalX}, ${trackY1 - 40})`); signalA.append("rect").attr("width", 20).attr("height", 50).attr("fill", "#333").attr("rx", 5); const lightA_Red = signalA.append("circle").attr("cx", 10).attr("cy", 12).attr("r", 6).attr("fill", "#550000"); // Dim Red const lightA_Green = signalA.append("circle").attr("cx", 10).attr("cy", 38).attr("r", 6).attr("fill", ROW_GREEN); // Lit Green const signalB = svg.append("g").attr("transform", `translate(${signalX}, ${trackY2 - 40})`); signalB.append("rect").attr("width", 20).attr("height", 50).attr("fill", "#333").attr("rx", 5); const lightB_Red = signalB.append("circle").attr("cx", 10).attr("cy", 12).attr("r", 6).attr("fill", "#550000"); const lightB_Green = signalB.append("circle").attr("cx", 10).attr("cy", 38).attr("r", 6).attr("fill", ROW_GREEN); // --- VEHICLES --- // Lane 1: Leader (far ahead), Follower (close behind) // Lane 2: Leader (far ahead), Follower (far behind) let state = { t: 0, scenA_stopped: false, scenB_speeding: false, // Scenario A Cars a_leader_x: 600, a_follower_x: 450, // Starts very close // Scenario B Cars b_leader_x: 600, b_follower_x: 100 // Starts very far }; // Create Tram Elements const trams = svg.append("g"); // Helper to add a tram const addTram = (id, x, y, label) => { const g = trams.append("g").attr("id", id).attr("transform", `translate(${x}, ${y})`); g.html(tramIcon); g.append("text").attr("x", 30).attr("y", -5).text(label).attr("text-anchor", "middle").attr("font-size", "10px"); return g; } const tramA1 = addTram("a1", state.a_leader_x, trackY1, "Leader"); const tramA2 = addTram("a2", state.a_follower_x, trackY1, "Follower"); const tramB1 = addTram("b1", state.b_leader_x, trackY2, "Leader"); const tramB2 = addTram("b2", state.b_follower_x, trackY2, "Follower"); // ANIMATION LOOP const speed = 2; // Create an annotation text we can update const annoA = svg.append("text").attr("x", signalX).attr("y", trackY1 - 60).attr("text-anchor", "middle").attr("fill", TTC_RED).style("font-weight", "bold"); const annoB = svg.append("text").attr("x", signalX).attr("y", trackY2 - 60).attr("text-anchor", "middle").attr("fill", ROW_GREEN).style("font-weight", "bold"); const timer = d3.timer((elapsed) => { // Reset simulation every ~8 seconds for looping if (state.a_leader_x > width + 100) { state.a_leader_x = 300; state.a_follower_x = 220; // Reset A (Bunched) state.b_leader_x = 300; state.b_follower_x = 0; // Reset B (Lagging) state.scenA_stopped = false; state.scenB_speeding = false; // Reset Lights lightA_Red.attr("fill", "#550000"); lightA_Green.attr("fill", ROW_GREEN); lightB_Red.attr("fill", "#550000"); lightB_Green.attr("fill", ROW_GREEN); annoA.text(""); annoB.text(""); } // SCENARIO A (BUNCHED) state.a_leader_x += speed; // Check if Follower reaches signal if (state.a_follower_x >= signalX - 70 && state.a_follower_x < signalX && !state.scenA_stopped) { // TRIGGER: HOLD PRIORITY state.scenA_stopped = true; lightA_Red.attr("fill", "red"); // Turn Red lightA_Green.attr("fill", "#003300"); // Dim Green annoA.text("HOLD: Restoring Gap"); // Hold for 60 frames ~1s setTimeout(() => { lightA_Red.attr("fill", "#550000"); lightA_Green.attr("fill", ROW_GREEN); state.scenA_stopped = false; // Release annoA.text(""); }, 1500); } if (!state.scenA_stopped || state.a_follower_x >= signalX) { state.a_follower_x += speed; } // SCENARIO B (LAGGING) state.b_leader_x += speed; // Check if Follower approaches signal if (state.b_follower_x >= signalX - 100 && state.b_follower_x < signalX + 50) { // TRIGGER: EXTENSION state.scenB_speeding = true; annoB.text("PRIORITY: Extension"); // Light stays green (visual reinforcement) lightB_Green.attr("r", 8).attr("stroke", ROW_GREEN).attr("stroke-width", 2); // Glow } else { state.scenB_speeding = false; lightB_Green.attr("r", 6).attr("stroke", "none"); if(state.b_follower_x > signalX + 100) annoB.text(""); } // Move B (Speed up if speeding) let currentSpeedB = state.scenB_speeding ? speed * 1.8 : speed; state.b_follower_x += currentSpeedB; tramA1.attr("transform", `translate(${state.a_leader_x}, ${trackY1})`); tramA2.attr("transform", `translate(${state.a_follower_x}, ${trackY1})`); tramB1.attr("transform", `translate(${state.b_leader_x}, ${trackY2})`); tramB2.attr("transform", `translate(${state.b_follower_x}, ${trackY2})`); }); // Cleanup invalidation.then(() => timer.stop()); return svg.node(); }2f:Tbed,{ const svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .attr("style", "max-width: 100%; height: auto; font-family: Arial, sans-serif;"); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); svg.append("text") .attr("x", margin.left) .attr("y", 30) .attr("font-size", "18px") .attr("font-weight", "bold") .attr("fill", "#1a1a1a") .text("Speed Context"); g.append("g") .attr("class", "grid") .call(d3.axisBottom(x).tickSize(height).tickFormat("")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke", "#e5e5e5").attr("stroke-width", 1)); const defs = svg.append("defs"); data.forEach((d, i) => { const gradient = defs.append("linearGradient") .attr("id", `gradient-${i}`) .attr("x1", "0%") .attr("x2", "100%"); const colorStops = { "#E31E24": ["#EF6B6B", "#E71F1F"], // Red to darker red "#8a8a8a": ["#8a8a8a", "#6b6b6b"], // Gray to darker gray "#404040": ["#404040", "#282828"], // Dark gray to black "#6b6b6b": ["#6b6b6b", "#4a4a4a"] // Medium gray to darker gray }; const stops = colorStops[d.color] || [d.color, d3.color(d.color).darker(0.5)]; gradient.append("stop").attr("offset", "0%").attr("stop-color", stops[0]); gradient.append("stop").attr("offset", "100%").attr("stop-color", stops[1]); }); g.append("g") .call(d3.axisLeft(y)) .call(g => g.select(".domain").attr("stroke", "#1a1a1a").attr("stroke-width", 1.5)) .call(g => g.selectAll(".tick line").remove()) .call(g => g.selectAll(".tick text").attr("font-size", "11px").attr("font-weight", "bold")); g.append("g") .selectAll("rect") .data(data) .join("rect") .attr("x", 0) .attr("y", d => y(d.route)) .attr("width", d => x(d.speed)) .attr("height", y.bandwidth()) .attr("fill", (d, i) => `url(#gradient-${i})`) .attr("rx", 16); g.append("g") .selectAll("text") .data(data) .join("text") .attr("x", d => x(d.speed) - 10) .attr("y", d => y(d.route) + y.bandwidth() / 2) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .attr("fill", "white") .attr("font-size", "13px") .attr("font-weight", "bold") .text(d => `${d.speed % 1 === 0 ? d.speed : d.speed.toFixed(1)} km/h`); g.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x).ticks(7)) .call(g => g.select(".domain").attr("stroke", "#1a1a1a").attr("stroke-width", 1.5)) .call(g => g.selectAll(".tick line").attr("stroke", "#1a1a1a").attr("stroke-width", 1.5)) .call(g => g.selectAll(".tick text").attr("font-size", "11px")); g.append("text") .attr("x", width / 2) .attr("y", height + 40) .attr("text-anchor", "middle") .attr("font-size", "12px") .attr("font-weight", "bold") .text("Speed (km/h)"); return svg.node(); }30:[] 2b:{"id":"7a815e438a9502b2","slug":null,"title":"510 SPADINA STREETCAR","thumbnail":"8dcb2ca874a3a928f91889c5d340bf5b9ee5462529af47dab40f8361bb79405a","access_level":"public","create_time":"$D2025-11-28T22:27:34.620Z","update_time":"$D2026-04-21T19:56:26.410Z","view_time":null,"first_public_time":"$D2025-11-30T17:08:03.690Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"78ddb75a8bc9f7b9","login":"snes19xx","name":"snes19xx","avatar_url":"https://avatars-next.observableusercontent.com/3cc180105ac86d66f1e474dafbe00b4955ebb82e4aa0765633aabd02907bf8bc","tier":"starter_2024"},"version":95,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9b419309c1e4546b","login":"snes19xx","name":"snes19xx","avatar_url":"https://avatars-next.observableusercontent.com/ba8feabfa25899338921f8e83c8bb0dcd8b88cd515bf7b70ea46949cc6496077","tier":null}],"members":[{"type":"team","id":"78ddb75a8bc9f7b9","login":"snes19xx","name":"snes19xx","avatar_url":"https://avatars-next.observableusercontent.com/3cc180105ac86d66f1e474dafbe00b4955ebb82e4aa0765633aabd02907bf8bc","tier":"starter_2024","role":"editor"},{"type":"individual","id":"9b419309c1e4546b","login":"snes19xx","name":"snes19xx","avatar_url":"https://avatars-next.observableusercontent.com/ba8feabfa25899338921f8e83c8bb0dcd8b88cd515bf7b70ea46949cc6496077","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"510 SPADINA STREETCAR","cells":[{"id":4,"value":"# 510 SPADINA STREETCAR\nFull project: [github](https://github.com/snes19xx/510-SPADINA-MODEL)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"style = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"data = [\n { route: \"Downtown Walking\", speed: 5, color: \"#8a8a8a\" },\n { route: \"510 Spadina\", speed: 13.5, color: \"#E31E24\" },\n { route: \"Car on Spadina\", speed: 29.57, color: \"#404040\" },\n { route: \"Subway Avg\", speed: 32, color: \"#6b6b6b\" }\n ];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"margin = ({top: 60, right: 40, bottom: 50, left: 120})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"width = 600 - margin.left - margin.right","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"height = 450 - margin.top - margin.bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"x = d3.scaleLinear()\n .domain([0, 35])\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"y = d3.scaleBand()\n .domain(data.map(d => d.route))\n .range([0, height])\n .padding(0.40); ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"data2 = [\n {\n route: \"510 Spadina\",\n city: \"Toronto\",\n avgSpeed: 13.5,\n stopSpacing: 299,\n ridership: 35000,\n dedicatedROW: 100,\n tsp: \"No TSP\",\n color: \"#DA291C\" // TTC Red\n },\n {\n route: \"Melbourne 96\",\n city: \"Melbourne\",\n avgSpeed: 17.2,\n stopSpacing: 366,\n ridership: 40000,\n dedicatedROW: 35,\n tsp: \"TSP Enabled\",\n color: \"#008A4C\" \n },\n {\n route: \"512 St Clair\",\n city: \"Toronto\",\n avgSpeed: 12.6,\n stopSpacing: 290,\n ridership: 23000,\n dedicatedROW: 100,\n tsp: \"Limited TSP\",\n color: \"#7B68C4\" \n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2c:"$2b:body"