45:["$","title",null,{"children":"Han Dao – Assignment 3 CS448B | Han Dao | Observable"}] 4d:T6213,// Interactive dynamic-query map: two query circles (A, B), attribute filters, zoom/pan and a sortable list app = { // ---------- Map geometry (Santa Clara County map from the A3 page) ---------- const W = mapWidth, H = mapHeight; const proj = projection; const MAP_URL = "https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png"; const STANFORD = [-122.17006, 37.42766]; // Pixels per mile near the map centre (Mercator is conformal, so circles stay circular) const m0 = proj.invert([W / 2 - 50, H / 2]), m1 = proj.invert([W / 2 + 50, H / 2]); const pxPerMile = 100 / haversineMiles(m0[1], m0[0], m1[1], m1[0]); // ---------- Data: project every restaurant once, up front (map coordinates, zoom = 1) ---------- const placardGroup = p => (p === "Green" || p === "Yellow" || p === "Red") ? p : "Other"; const PLACARD_COLORS = {Green: "#16a34a", Yellow: "#eab308", Red: "#dc2626", Other: "#111827"}; const pts = restaurants .filter(d => d.lat != null && d.lon != null) .map(d => { const xy = proj([d.lon, d.lat]); return Object.assign({}, d, {x: xy[0], y: xy[1], group: placardGroup(d.placard), hit: false, pass: false}); }); const unlocated = restaurants.length - pts.length; const stacks = d3.group(pts, d => d.lat + "," + d.lon); // restaurants sharing exact coordinates const quad = d3.quadtree(pts, d => d.x, d => d.y); // fast nearest-point lookup for hover const groupCounts = d3.rollup(pts, v => v.length, d => d.group); const fmt = d3.format(","); // ---------- Query circles (state lives in this cell, so it survives filter changes) ---------- // Circle centres are stored in map coordinates; the zoom transform is applied only when drawing. const R_MIN = 0.1, R_MAX = 15; const DEFAULTS = {A: {lonlat: STANFORD, r: 4}, B: {lonlat: [-122.10, 37.395], r: 3}}; const circles = [ {id: "A", color: "#2563eb", r: 3, x: 0, y: 0}, {id: "B", color: "#9333ea", r: 3, x: 0, y: 0} ]; function resetCircles() { for (const c of circles) { const xy = proj(DEFAULTS[c.id].lonlat); c.x = xy[0]; c.y = xy[1]; c.r = DEFAULTS[c.id].r; } } resetCircles(); const REVIEW_STEPS = [0, 1, 5, 10, 25, 50, 100, 250, 500, 1000, 2500]; const LIST_LIMIT = 200; // rows rendered in the sortable list // ---------- DOM ---------- const root = document.createElement("div"); root.className = "rf"; const placardBox = g => "" + "" + (g === "Other" ? "Other (N/A, Pass, Closure)" : g) + " (" + fmt(groupCounts.get(g) || 0) + ")"; root.innerHTML = [ "", "

", "Circle A radius: mi", "", "Circle B radius: mi", "", "Name or address contains (comma = OR)", "", "

", "

Inspection placard", ["Green", "Yellow", "Red", "Other"].map(placardBox).join(""), "

", "Minimum rating: ★", "", "Minimum # reviews: ", "", "

", "

", "Highlighted (inside A ∩ B and passes filters) — colored by placard:", "Green", "Yellow", "Red", "Other", "Not highlighted", "★ Stanford", "

", "

Drag a circle to move it · drag the white handle on its edge (or use the sliders) to resize · scroll or use +/− to zoom, drag the empty map to pan · hover a dot for details.

", "

Highlighted restaurants

", "

" ].join(""); const el = name => root.querySelector("[name=" + name + "]"); const out = name => root.querySelector("[data-out=" + name + "]"); const stage = root.querySelector(".rf-stage"); const status = root.querySelector(".rf-status"); const listBox = root.querySelector(".rf-list"); const listNote = root.querySelector(".rf-listnote"); const img = document.createElement("img"); img.src = MAP_URL; img.width = W; img.height = H; img.draggable = false; img.alt = "Map of Santa Clara County"; const dpr = window.devicePixelRatio || 1; const canvas = document.createElement("canvas"); canvas.width = Math.round(W * dpr); canvas.height = Math.round(H * dpr); canvas.style.width = W + "px"; canvas.style.height = H + "px"; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); const svg = d3.create("svg").attr("width", W).attr("height", H); const tip = document.createElement("div"); tip.className = "rf-tip"; const zoomBox = document.createElement("div"); zoomBox.className = "rf-zoom"; zoomBox.innerHTML = "" + "" + ""; const zoomLabel = document.createElement("div"); zoomLabel.className = "rf-zlvl"; stage.append(img, canvas, svg.node(), tip, zoomBox, zoomLabel); // ---------- Zoom & pan state ---------- let t = d3.zoomIdentity; // current zoom transform (map coords -> screen) const sx = x => t.applyX(x), sy = y => t.applyY(y); // ---------- SVG overlay: pan surface, Stanford marker, query circles ---------- svg.append("rect").attr("width", W).attr("height", H).attr("fill", "transparent"); const star = svg.append("path") .attr("d", d3.symbol(d3.symbolStar, 90)()) .attr("fill", "#8c1515").attr("stroke", "#fff").attr("stroke-width", 1) .attr("pointer-events", "none"); const cg = svg.selectAll("g.qc").data(circles).join("g").attr("class", "qc"); cg.append("circle").attr("class", "body") .attr("fill", c => c.color).attr("fill-opacity", 0.07) .attr("stroke", c => c.color).attr("stroke-width", 2) .style("cursor", "move"); cg.append("circle").attr("class", "ctr").attr("r", 3).attr("fill", c => c.color).attr("pointer-events", "none"); cg.append("text").attr("class", "lbl").text(c => c.id) .attr("fill", c => c.color).attr("font-weight", 700).attr("font-size", 14).attr("text-anchor", "middle") .attr("paint-order", "stroke").attr("stroke", "#fff").attr("stroke-width", 3) .attr("pointer-events", "none"); cg.append("circle").attr("class", "edge").attr("r", 6) .attr("fill", "#fff").attr("stroke", c => c.color).attr("stroke-width", 2) .style("cursor", "ew-resize"); const hoverRing = svg.append("circle").attr("r", 6) .attr("fill", "none").attr("stroke", "#000").attr("stroke-width", 1.5) .attr("pointer-events", "none").style("display", "none"); let hovered = null; // Everything in the SVG is positioned in screen coordinates, so strokes and handles keep their size when zoomed. function placeOverlay() { const rpx = c => c.r * pxPerMile * t.k; cg.select(".body").attr("cx", c => sx(c.x)).attr("cy", c => sy(c.y)).attr("r", rpx); cg.select(".ctr").attr("cx", c => sx(c.x)).attr("cy", c => sy(c.y)); cg.select(".lbl").attr("x", c => sx(c.x)).attr("y", c => sy(c.y) - 8); cg.select(".edge").attr("cx", c => sx(c.x) + rpx(c)).attr("cy", c => sy(c.y)); const st = proj(STANFORD); star.attr("transform", "translate(" + sx(st[0]) + "," + sy(st[1]) + ")"); if (hovered) hoverRing.attr("cx", sx(hovered.x)).attr("cy", sy(hovered.y)); img.style.transform = "translate(" + t.x + "px," + t.y + "px) scale(" + t.k + ")"; zoomLabel.textContent = t.k.toFixed(1) + "×"; } // ---------- Interaction: dragging circles and their edges ---------- let dragging = false; const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); cg.select(".body").call(d3.drag() .subject((event, c) => ({x: sx(c.x), y: sy(c.y)})) .on("start", () => { dragging = true; hideTip(); }) .on("drag", (event, c) => { c.x = clamp(t.invertX(event.x), 0, W); c.y = clamp(t.invertY(event.y), 0, H); requestUpdate(); }) .on("end", () => { dragging = false; })); cg.select(".edge").call(d3.drag() .subject((event, c) => ({x: sx(c.x) + c.r * pxPerMile * t.k, y: sy(c.y)})) .on("start", () => { dragging = true; hideTip(); }) .on("drag", (event, c) => { c.r = clamp(Math.hypot(event.x - sx(c.x), event.y - sy(c.y)) / (pxPerMile * t.k), R_MIN, R_MAX); syncControls(); requestUpdate(); }) .on("end", () => { dragging = false; })); // ---------- Interaction: zoom (wheel / buttons / double-click) and pan (drag empty map) ---------- // d3.drag stops propagation on the circles, so dragging a circle never pans the map. const zoom = d3.zoom() .scaleExtent([1, 8]) .extent([[0, 0], [W, H]]) .translateExtent([[0, 0], [W, H]]) .on("start", () => hideTip()) .on("zoom", event => { t = event.transform; requestRender(); }); svg.call(zoom); zoomBox.addEventListener("click", e => { const z = e.target.getAttribute("data-z"); if (z === "in") svg.transition().duration(250).call(zoom.scaleBy, 1.6); if (z === "out") svg.transition().duration(250).call(zoom.scaleBy, 1 / 1.6); if (z === "fit") svg.transition().duration(350).call(zoom.transform, d3.zoomIdentity); }); zoomBox.addEventListener("pointerdown", e => e.stopPropagation()); // ---------- Controls ---------- function syncControls() { el("ra").value = circles[0].r; out("ra").textContent = circles[0].r.toFixed(2); el("rb").value = circles[1].r; out("rb").textContent = circles[1].r.toFixed(2); out("minRating").textContent = (+el("minRating").value).toFixed(1); out("minReviews").textContent = fmt(REVIEW_STEPS[+el("minReviews").value]); } root.addEventListener("input", e => { const n = e.target.name; if (n === "ra") circles[0].r = +e.target.value; if (n === "rb") circles[1].r = +e.target.value; syncControls(); requestUpdate(); }); root.addEventListener("change", () => requestUpdate()); el("reset").addEventListener("click", () => { resetCircles(); el("q").value = ""; root.querySelectorAll("input[name=placard]").forEach(i => { i.checked = true; }); el("minRating").value = 1; el("minReviews").value = 0; svg.call(zoom.transform, d3.zoomIdentity); syncControls(); requestUpdate(); }); // ---------- Filtering + drawing (each runs at most once per animation frame) ---------- let pendingUpdate = false, pendingRender = false, framed = false; function schedule() { if (!framed) { framed = true; requestAnimationFrame(frame); } } function requestUpdate() { pendingUpdate = true; schedule(); } // filters/circles changed function requestRender() { pendingRender = true; schedule(); } // only the view (zoom/pan) changed function frame() { framed = false; const t0 = performance.now(); if (pendingUpdate) filter(); draw(); placeOverlay(); if (pendingUpdate) renderList(); pendingUpdate = pendingRender = false; lastMs = performance.now() - t0; renderStatus(); } let nHit = 0, nBoth = 0, lastMs = 0, hits = []; function filter() { const terms = el("q").value.toLowerCase().split(",").map(s => s.trim()).filter(Boolean); const groups = new Set(Array.from(root.querySelectorAll("input[name=placard]:checked"), i => i.value)); const minRating = +el("minRating").value; const minReviews = REVIEW_STEPS[+el("minReviews").value]; const A = circles[0], B = circles[1]; const ra2 = (A.r * pxPerMile) ** 2, rb2 = (B.r * pxPerMile) ** 2; nHit = 0; nBoth = 0; hits = []; for (const p of pts) { const ax = p.x - A.x, ay = p.y - A.y, bx = p.x - B.x, by = p.y - B.y; const both = ax * ax + ay * ay <= ra2 && bx * bx + by * by <= rb2; const pass = groups.has(p.group) && (p.rating == null ? minRating <= 1 : p.rating >= minRating) && (p.reviews == null ? minReviews === 0 : p.reviews >= minReviews) && (terms.length === 0 || terms.some(s => p.search.includes(s))); p.pass = pass; p.hit = both && pass; if (both) nBoth++; if (p.hit) { nHit++; hits.push(p); } } } function renderStatus() { status.innerHTML = "" + fmt(nHit) + " restaurants highlighted · " + fmt(nBoth) + " inside A ∩ B before filters · " + fmt(pts.length) + " mapped, " + fmt(unlocated) + " have no coordinates and can't be placed · updated in " + lastMs.toFixed(1) + " ms"; } function draw() { ctx.clearRect(0, 0, W, H); const pad = 4; ctx.fillStyle = "rgba(100,100,100,0.22)"; for (const p of pts) { if (p.hit) continue; const x = sx(p.x), y = sy(p.y); if (x < -pad || y < -pad || x > W + pad || y > H + pad) continue; ctx.fillRect(x - 1, y - 1, 2, 2); } ctx.lineWidth = 0.75; ctx.strokeStyle = "#ffffff"; const rad = t.k > 2 ? 4 : 3.2; for (const g of ["Green", "Other", "Yellow", "Red"]) { // rarer placards drawn last so they stay visible ctx.fillStyle = PLACARD_COLORS[g]; ctx.beginPath(); for (const p of hits) { if (p.group !== g) continue; const x = sx(p.x), y = sy(p.y); if (x < -pad || y < -pad || x > W + pad || y > H + pad) continue; ctx.moveTo(x + rad, y); ctx.arc(x, y, rad, 0, 2 * Math.PI); } ctx.fill(); ctx.stroke(); } } // ---------- Sortable list of highlighted restaurants ---------- const COLS = [ {key: "name", label: "Restaurant", num: false}, {key: "rating", label: "Rating", num: true}, {key: "reviews", label: "Reviews", num: true}, {key: "score", label: "Score", num: true}, {key: "placard", label: "Placard", num: false}, {key: "distance", label: "Mi. from Stanford", num: true} ]; let sortKey = "rating", sortDir = -1; // default: best rated first let listRows = []; function compare(a, b) { const va = a[sortKey], vb = b[sortKey]; if (va == null && vb == null) return 0; if (va == null) return 1; // missing values always go last if (vb == null) return -1; if (typeof va === "string") return sortDir * va.localeCompare(vb); if (va !== vb) return sortDir * (va - vb); return (b.reviews || 0) - (a.reviews || 0); // tie-break: more reviews first } function renderList() { if (!hits.length) { listBox.innerHTML = "

No restaurants are highlighted. Move or enlarge the circles, or relax the filters.

"; listNote.textContent = ""; listRows = []; return; } listRows = hits.slice().sort(compare).slice(0, LIST_LIMIT); const head = "" + COLS.map(c => "" + c.label + (c.key === sortKey ? (sortDir > 0 ? " ▲" : " ▼") : "") + "").join("") + ""; const dash = "—"; const body = listRows.map((p, i) => "" + "

" + esc(p.name) + "

" + (p.address ? "

" + esc(p.address) + "

" : "") + "" + "" + (p.rating != null ? p.rating.toFixed(1) + " ★" : dash) + "" + "" + (p.reviews != null ? fmt(p.reviews) : dash) + "" + "" + (p.score != null ? p.score : dash) + "" + "" + (p.placard ? "" + esc(p.placard) + "" : dash) + "" + "" + (p.distance != null ? p.distance.toFixed(2) : dash) + "").join(""); listBox.innerHTML = "" + head + "" + body + "

"; listNote.textContent = hits.length > LIST_LIMIT ? "Showing the top " + LIST_LIMIT + " of " + fmt(hits.length) + " · click a column to sort" : fmt(hits.length) + " restaurants · click a column to sort · hover a row to find it on the map"; } listBox.addEventListener("click", e => { const th = e.target.closest("th"); if (th) { const k = th.getAttribute("data-k"); if (k === sortKey) sortDir = -sortDir; else { sortKey = k; sortDir = (k === "name" || k === "placard" || k === "distance") ? 1 : -1; } renderList(); return; } const tr = e.target.closest("tr.row"); if (tr) { // click a row: centre the map on that restaurant (zooming in if needed) const p = listRows[+tr.getAttribute("data-i")]; const k = Math.max(t.k, 3); const target = d3.zoomIdentity.translate(W / 2, H / 2).scale(k).translate(-p.x, -p.y); // keep the view inside the map (zoom.transform does not apply translateExtent on its own) svg.transition().duration(500).call(zoom.transform, zoom.constrain()(target, [[0, 0], [W, H]], [[0, 0], [W, H]])); } }); listBox.addEventListener("pointerover", e => { const tr = e.target.closest("tr.row"); if (!tr) return; hovered = listRows[+tr.getAttribute("data-i")]; hoverRing.attr("cx", sx(hovered.x)).attr("cy", sy(hovered.y)).attr("r", 9).style("display", null); }); listBox.addEventListener("pointerleave", () => { hovered = null; hoverRing.attr("r", 6).style("display", "none"); }); // ---------- Tooltip ---------- function esc(s) { return String(s).replace(/[&<>"']/g, ch => ({"&": "&", "<": "<", ">": ">", "\"": """, "'": "'"})[ch]); } function tipHTML(p) { let h = "" + esc(p.name) + ""; if (p.address) h += "

" + esc(p.address) + "

"; const rows = []; if (p.rating != null) rows.push(["Rating", p.rating.toFixed(1) + " ★" + (p.reviews != null ? " (" + fmt(p.reviews) + " reviews)" : "")]); else if (p.reviews != null) rows.push(["Reviews", fmt(p.reviews)]); if (p.score != null) rows.push(["Latest score", p.score + " / 100"]); if (p.placard) rows.push(["Placard", " " + esc(p.placard)]); if (p.distance != null) rows.push(["From Stanford", p.distance.toFixed(2) + " mi"]); if (rows.length) h += "" + rows.map(r => "").join("") + "

" + r[0] + "

" + r[1] + "

"; h += "

" + (p.hit ? "✔ Highlighted" : (p.pass ? "Not in the A ∩ B intersection" : "Hidden by the current filters")) + "

"; const same = stacks.get(p.lat + "," + p.lon) || []; if (same.length > 1) { const others = same.filter(o => o !== p); h += "

" + fmt(others.length) + " more at this exact location: " + others.slice(0, 4).map(o => esc(o.name)).join("; ") + (others.length > 4 ? "; …" : "") + "

"; } return h; } function hideTip() { tip.style.display = "none"; hovered = null; hoverRing.style("display", "none"); } function showTip(p, mx, my) { hovered = p; tip.innerHTML = tipHTML(p); tip.style.display = "block"; const tw = tip.offsetWidth, th = tip.offsetHeight; const left = mx + 14 + tw > W ? mx - 14 - tw : mx + 14; const top = clamp(my - th / 2, 2, H - th - 2); tip.style.left = left + "px"; tip.style.top = top + "px"; hoverRing.attr("r", 6).attr("cx", sx(p.x)).attr("cy", sy(p.y)).style("display", null); } svg.on("pointermove", event => { if (dragging || event.buttons) return; // no tooltips while dragging a circle or panning const m = d3.pointer(event, svg.node()); const p = quad.find(t.invertX(m[0]), t.invertY(m[1]), 6 / t.k); if (p) showTip(p, m[0], m[1]); else hideTip(); }).on("pointerleave", hideTip); syncControls(); requestUpdate(); return root; }4e:T4e3, ### Development Process I spent approximately 8 hours developing and testing the application. Most of my time went into implementing the interactive query circles and making sure the different controls worked together smoothly. The trickiest part was keeping the circles in place when filters changed, synchronizing the radius sliders with the draggable edge handles, and maintaining fast updates while dragging. Performance was another challenge because the map contains around 8,800 restaurant points. Redrawing thousands of SVG elements during every interaction would have been too slow, so I switched to canvas rendering for the restaurant points while keeping the circles and handles as separate interactive elements. I also calculated each restaurant's projected position only once to avoid unnecessary work. With these changes, updates generally take around 3–6 ms, well below the 0.1-second requirement. ### Outside Resources I used the course-provided dataset, map, and starter code as references for the visualization. I also used Claude to help debug the interaction layer, particularly with keeping the circle positions consistent and synchronizing the sliders and drag handles. I tested and refined the interactions in Observable. 4f:[{"id":"2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","href":"https://static.observableusercontent.com/files/2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","name":"sf_map.png","type":"image/png","lastModified":1760293845215.455,"size":1245599}] 49:{"id":"4350b01ad3f04a3e","slug":"han-dao-assignment-3-cs-448-b","title":"Han Dao – Assignment 3 CS448B","thumbnail":"25aef287cbd7446070284180a31f28146ef07c052c8214864ada6033fde42fc1","access_level":"public","create_time":"$D2026-10-25T08:30:25.269Z","update_time":"$D2026-10-25T09:21:38.858Z","view_time":null,"first_public_time":"$D2026-10-25T09:21:57.953Z","has_unpublished_edits":null,"fork":{"id":"acffc27512286e98","slug":null,"title":"Assignment 3 [STARTER CODE]","owner":{"id":"064c943ba6a07292","login":"stanfordvis","name":"Stanford Visualization"}},"stars":0,"starred":false,"owner":{"type":"team","id":"15f0a48b9ddd364e","login":"hangan","name":"Han Dao","avatar_url":null,"tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":151,"publish_version":151,"role":null,"authored":false,"authors":[{"type":"individual","id":"f71f0e168f9edb87","login":"hangan","name":"Han Dao","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"15f0a48b9ddd364e","login":"hangan","name":"Han Dao","avatar_url":null,"tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Han Dao – Assignment 3 CS448B","cells":[{"id":0,"value":"# Han Dao – Assignment 3 CS448B\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"### Imports","pinned":false,"hidden":true,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"d3 = require('d3@7')","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"### Definitions & Utility Functions","pinned":false,"hidden":true,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"mapWidth = 1664 / 2 // sccRestaurantsMap2026.png is 1664 x 1393, shown at half size","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mapHeight = 1393 / 2","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"longitudeRange = [-122.20085766666666, -121.27442433333333] // Santa Clara County map extent (from the A3 page)","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"latitudeRange = [36.91311264279123, 37.53067882428926] // Santa Clara County map extent (from the A3 page)","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Calculate Euclidean distance between two points\ndistance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1)","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// Calculate distance in miles using Haversine formula\nhaversineMiles = (lat1, lon1, lat2, lon2) => {\n const R = 3958.8; // Earth radius in miles\n const toRad = d => (d * Math.PI) / 180;\n const dLat = toRad(lat2 - lat1);\n const dLon = toRad(lon2 - lon1);\n const a = Math.sin(dLat/2)**2 + \n Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon/2)**2;\n return 2 * R * Math.asin(Math.sqrt(a));\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### Map Projection Setup","pinned":false,"hidden":true,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"// GeoJSON frame for map bounds\nmapFrameGeoJSON = {\n const coords = `[[${longitudeRange[0]}, ${latitudeRange[0]}], [${longitudeRange[1]}, ${latitudeRange[1]}]]`;\n return JSON.parse(`{\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\": ${coords}}}`);\n}","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// D3 geoMercator projection fitted to San Francisco map\nprojection = d3.geoMercator()\n .fitExtent([[0, 0], [mapWidth, mapHeight]], mapFrameGeoJSON)","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"rawRestaurants = d3.csv(\"https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsSynth2026.csv\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// Clean the raw CSV: the file uses the string \"null\" for missing values\nrestaurants = rawRestaurants.map((d, i) => {\n const num = v => (v == null || v.trim() === \"\" || v === \"null\" || isNaN(+v)) ? null : +v;\n const str = v => (v == null || v.trim() === \"\" || v === \"null\") ? null : v.trim();\n return {\n id: i,\n name: str(d[\"Facility Name\"]) || \"(unnamed)\",\n address: str(d[\"Address\"]),\n placard: str(d[\"Latest placard color\"]),\n score: num(d[\"Latest Score\"]),\n distance: num(d[\"Distance\"]),\n lat: num(d[\"Latitude\"]),\n lon: num(d[\"Longitude\"]),\n rating: num(d[\"Rating\"]),\n reviews: num(d[\"Number of reviews\"]),\n search: ((d[\"Facility Name\"] || \"\") + \" \" + (d[\"Address\"] || \"\")).toLowerCase()\n };\n})","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 44:null