40:null 41:["$","title",null,{"children":"Simulated 8th Ave Traffic Signal Timing | Owen Lin | Observable"}] 47:T15e1,class Light { constructor(face, timings, flash, safety) { console.assert(["solid", "left", "right", "cycle"].indexOf(face) != -1, `invalid face ${face}`) this.face = face // solid, left, right, bike console.assert(timings.length == 3, `unexpected timings ${timings}`) this.timings = timings if (flash == null) {flash = [false, false, false]} console.assert(flash.length == 3, `unexpected flash ${flash}`) this.flash = flash; // [false, false, true] this.safety = safety; } position(x, y, w, h) { this.x = x this.y = y this.w = w this.h = h } current_phase(t) { let cycle = d3.sum(this.timings) t = t % cycle let o = 0 for (let i=0; i < 3; i++) { o += this.timings[i] if (t < o) { return 2-i } } return 2 } is_safe(t) { if (this.safety === undefined) {return undefined} return this.safety[2-this.current_phase(t)]; } is_flashing(i, t) { return this.flash[i] && (t % 2 == 0) } color(idx, phase, flashing) { if (idx != phase) { return "#000" } if (idx == 3) { // invalid return "#a0a" } // green if (idx == 2 && flashing) { return "#060" } if (idx == 2) { return "#0f0" } // yellow if (idx == 1 && flashing) { return "#660" } if (idx == 1) { return "#FF0" } // red if (idx == 0 && flashing) { return "#600" } if (idx == 0) { return "#f00" } // invalid return "#aa0" } draw(c, t) { let phase = this.current_phase(t) let x = this.x let y = this.y let w = this.w let h = this.h c.moveTo(x, y) c.fillStyle = "#999"; c.fillRect(x, y, w, h); c.strokeStyle = ""; h -= 8; // 2 padding let block = h / 3.0; for (let i=0; i < 3; i++) { c.beginPath(); let cx = x+(w/2); let cy = y + (i * block) + (i * 2) + (block/2) + 2; if (this.face == "cycle") { // https://upload.wikimedia.org/wikipedia/commons/d/db/USDOT_highway_sign_bicycle_symbol_-_black.svg // c.moveTo(cx, cy) c.fillStyle = "#000" c.arc(cx, cy, block / 2, 0, 2 * Math.PI); c.fill(); let bikePath = "M"+cx+" "+cy+" m 1.75 1 l 1.54 -0.25 l -0.97 -1.26 c -0.50 0.44 -0.56 0.96 -0.57 1.51 z m -0.42 0.09 c -0.00 -0.05 -0.01 -0.14 -0.01 -0.20 c 0.00 -0.62 0.20 -1.23 0.75 -1.73 l -0.57 -0.68 l -0.88 2.69 l 0.71 -0.07 z m -3.38 -2.68 l 0.05 -0.15 l 3.14 -0.00 l -0.84 2.53 l -0.04 -0.26 h 0.10 l -0.01 -0.17 h -0.42 l 0.01 0.16 h 0.11 l 0.02 0.29 c 0.00 0.00 -2.11 -2.38 -2.13 -2.39 z m -1.39 2.43 c 0.42 -0.33 0.75 -0.65 0.99 -1.29 c 0.37 0.34 0.59 0.83 0.59 1.33 c 0.00 1.00 -0.82 1.82 -1.82 1.82 s -1.82 -0.82 -1.82 -1.82 s 0.82 -1.82 1.82 -1.82 c 0.32 0.00 0.65 0.09 0.91 0.25 c -0.18 0.56 -0.35 0.85 -0.90 1.30 c -0.13 0.01 -0.23 0.11 -0.23 0.24 c 0.00 0.13 0.11 0.24 0.24 0.24 c 0.13 -0.00 0.23 -0.11 0.23 -0.25 z m 5.26 0.54 c 0.21 0.77 0.94 1.32 1.75 1.32 c 1.00 0.00 1.82 -0.82 1.82 -1.82 s -0.82 -1.82 -1.82 -1.82 c -0.32 0.00 -0.69 0.08 -0.96 0.23 l 0.99 1.31 c 0.12 0.00 0.23 0.11 0.23 0.24 c 0.00 0.13 -0.11 0.24 -0.24 0.24 c -0.04 0.00 -0.08 -0.01 -0.11 -0.02 l -1.65 0.32 z m -4.47 -2.49 l 0.64 -1.78 l -0.20 -0.35 l 0.41 -0.44 h 0.88 l 0.01 0.25 h -0.77 l -0.16 0.17 l 0.18 0.32 l -0.23 0.80 h 3.15 l 0.05 -0.15 c -0.25 -0.03 -0.69 -0.19 -0.79 -0.28 s -0.01 -0.17 0.11 -0.18 c 0.62 -0.03 1.54 -0.08 1.72 -0.08 c 0.18 -0.00 0.19 0.09 0.08 0.22 c -0.12 0.13 -0.22 0.24 -0.66 0.31 l -0.12 0.32 l 0.74 0.92 c 0.35 -0.21 0.78 -0.32 1.19 -0.32 c 1.24 0.00 2.25 1.01 2.25 2.25 s -1.01 2.25 -2.25 2.25 c -1.02 0.00 -1.91 -0.70 -2.18 -1.67 l -0.68 0.12 c -0.03 0.08 -0.10 0.14 -0.18 0.19 l 0.12 0.58 h 0.16 l 0.01 0.16 l -0.49 0.02 v -0.17 h 0.12 l -0.15 -0.58 c -0.22 -0.04 -0.34 -0.23 -0.27 -0.41 l -2.23 -2.53 l -0.10 0.27 c 0.54 0.43 0.87 1.09 0.87 1.77 c 0.00 1.24 -1.01 2.25 -2.25 2.25 s -2.25 -1.01 -2.25 -2.25 s 1.01 -2.25 2.25 -2.25 c 0.36 0.00 0.73 0.09 1.04 0.25 z" let bikePath2d = new Path2D(bikePath) c.strokeStyle = this.color(i, phase, this.is_flashing(i, t)); c.lineWidth = 0.6; c.stroke(bikePath2d); } if (this.face == "left" || this.face == "right") { // Arrow c.fillStyle = "#000" c.arc(cx, cy, block / 2, 0, 2 * Math.PI); c.fill(); c.beginPath(); c.moveTo(cx, cy - (block/3)) if (this.face == "left") { c.lineTo(cx - (block/3), cy); } else { c.lineTo(cx + (block/3), cy); } c.lineTo(cx, cy + (block/3)); c.strokeStyle = this.color(i, phase, this.is_flashing(i, t)); c.lineWidth = 2; c.stroke(); if (this.face == "left") { c.moveTo(cx - (block/3), cy) c.lineTo(cx + (block/3), cy) } else { c.moveTo(cx + (block/3), cy) c.lineTo(cx - (block/3), cy) } c.stroke(); } if (this.face == "solid") { // round c.fillStyle = this.color(i, phase, this.is_flashing(i, t)); c.arc(cx, cy, block / 2, 0, 2 * Math.PI); c.fill(); } } } } 48:T406,class Signal { constructor(offset1, light1, offset2, light2) { this.offsets = [offset1] this.lights = [light1] if (typeof offset2 != "undefined") { this.offsets.push(offset2) this.lights.push(light2) } } position(x, y, w, h) { for (let i = 0; i < this.lights.length; i++) { this.lights[i].position(x + (w * i) + i, y, w, h) } } draw(c, t) { for (let i = 0; i < this.lights.length; i++) { this.lights[i].draw(c, t + this.offsets[i]) } } is_safe(t) { let first = this.lights[0].is_safe(t + this.offsets[0]) if (this.lights.length == 2) { let other = this.lights[1].is_safe(t + this.offsets[1]) // if either is false, return false // if either is undefined, return undefined if (first === false || other === false) {return false} if (first === undefined || other === undefined) { return undefined} if (first === null) {return other} if (other === null) {return first} return first } } }49:T5a0,street = { // face, timings, flashing, safety let standardLight = function(){return new Light("solid", [28, 2, 30], null, [true, true, false])}; let cycleSplit = function(){return new Light("cycle", [16, 2, 42], null, [true, true, false])}; let vehicleSplit = function(){return new Light("left", [13, 2, 45], null, [true, true, true])}; let cycleLPI = function(){return new Light("cycle", [28, 2, 30], null, [true, false, false])}; let vehicleLPI = function(){return new Light("left", [0, 15, 45], [false, true, false], [null, undefined, null])}; let split = function(){return new Signal(0, cycleSplit(), 60-19, vehicleSplit())}; let lpi = function(){return new Signal(0, cycleLPI(), 60-16, vehicleLPI())}; let mixing = function(){return new Light("solid", [28, 2, 30], null, [undefined, undefined, false])}; return [ new Intersection("22nd St", 0, standardLight()), new Intersection("23rd St", 263, split()), new Intersection("24th St", 298, standardLight()), new Intersection("25th St", 265, lpi()), new Intersection("26th St", 253, standardLight(), 60-6), new Intersection("28th St", 518, standardLight()), new Intersection("29th St", 262, lpi(), 60-1), new Intersection("30th St", 259, standardLight()), new Intersection("31st St", 255, mixing(), 60-1), new Intersection("33rd St", 513, mixing()), new Intersection("34th St", 262, mixing()), ] } 4a:[] 45:{"id":"b637f323bbb54144","slug":null,"title":"Simulated 8th Ave Traffic Signal Timing","thumbnail":"6e370224588fb732088578aaf52b14d66fec4d4cb67bad198a1221e4742203c2","access_level":"public","create_time":"$D2023-01-30T15:59:54.208Z","update_time":"$D2023-01-30T15:59:54.208Z","view_time":null,"first_public_time":"$D2023-01-30T15:59:54.208Z","has_unpublished_edits":null,"fork":{"id":"813f9a5f43e42bbe","slug":"simulated-8th-ave-traffic-signal-timing","title":"Simulated 8th Ave Traffic Signal Timing","owner":{"id":"a33a976c6cb00d46","login":"jehiah","name":"Jehiah Czebotar"}},"stars":0,"starred":false,"owner":{"type":"team","id":"d1ae62b20162e856","login":"lincloud","name":"Owen Lin","avatar_url":"https://avatars-next.observableusercontent.com/525eeb3d3ba0d99d2d6bcf8c751b861ffb0a6f97fe49ab11b3c5378f45bf2ed6","tier":"starter_2024","bio":"","following":false},"version":307,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"39965f3cff8adc55","login":"lincloud","name":"Owen Lin","avatar_url":"https://avatars-next.observableusercontent.com/525eeb3d3ba0d99d2d6bcf8c751b861ffb0a6f97fe49ab11b3c5378f45bf2ed6","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"39965f3cff8adc55","login":"lincloud","name":"Owen Lin","avatar_url":"https://avatars-next.observableusercontent.com/525eeb3d3ba0d99d2d6bcf8c751b861ffb0a6f97fe49ab11b3c5378f45bf2ed6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Simulated 8th Ave Traffic Signal Timing","cells":[{"id":0,"value":"md`# Simulated 8th Ave Traffic Signal Timing\nAn attempt to show how bad the cycle timing is for cyclists on 8th Avenue between 22nd and 35th st in New York City. I encounter on average five red lights in this stretch when starting at a green on 22nd st.\n\nSimulated at ${(1000/speed).toFixed(2)}x speed. A single light cycle is 60 seconds.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"viewof speed = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"context.canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"cycle = {\n let cycle = 0;\n while (true) {\n cycle = (cycle + 1) % 60\n context.clearRect(0, 0, width, height); \n street.forEach(function(d){d.draw(context, cycle)});\n yield cycle;\n await Promises.tick(speed);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = 150","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"class Intersection {\n constructor(name, leading_distance, light, offset) { \n this.name = name;\n this.leading_distance = leading_distance;\n this.light = light;\n this.offset = offset;\n if (typeof offset == \"undefined\") {\n this.offset = 0\n }\n }\n position(x) {\n this.x = x\n this.light.position(x + 10, 15, 18, 50)\n }\n draw(c, t) {\n c.beginPath();\n c.moveTo(this.x, 0);\n c.lineTo(this.x, height);\n c.lineWidth = 2;\n let safety = this.light.is_safe(t+this.offset);\n if (safety == false) {\n c.strokeStyle = '#933';\n } else if (safety == undefined) {\n c.setLineDash([7, 7]);\n c.strokeStyle = '#FFA500';\n } else {\n c.strokeStyle = '#090';\n }\n c.stroke();\n c.setLineDash([]);\n \n // context.setLineDash([7, 7]);\n c.fillStyle = \"#000\"\n c.fillText(this.name, this.x+10, 10);\n \n this.light.draw(c, t + this.offset);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":225,"value":"context = {\n const context = DOM.context2d(width, height);\n let pos = 5;\n let total_ft = 0\n for (let i=0; i or [@jehiah](https://twitter.com/jehiah) on Twitter.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"