44:["$","title",null,{"children":"Two places, one dinner map | Yu Ding | Observable"}] 4c:T4c8d,buildRestaurantFinder = function buildRestaurantFinder({ d3, restaurants, mapUrl, width = 900 }) { const root = document.createElement("section"); root.className = "restaurant-finder"; root.innerHTML = `

Drag the centers or outlines of A and B. A restaurant stays dark only when it is inside both circles and passes every filter below.

Radius A: 12.0 mi

Radius B: 12.0 mi

Minimum rating: 3.0

Placard

Name or address contains

`; const mapWidth = Math.min(900, Math.max(320, width)); const mapHeight = mapWidth * 1393 / 1664; const longitudeRange = [-122.20085766666666, -121.27442433333333]; const latitudeRange = [36.91311264279123, 37.53067882428926]; const frame = { type: "Feature", geometry: { type: "LineString", coordinates: [ [longitudeRange[0], latitudeRange[0]], [longitudeRange[1], latitudeRange[1]] ] } }; const projection = d3.geoMercator().fitExtent([[0, 0], [mapWidth, mapHeight]], frame); const mapped = restaurants.filter(d => Number.isFinite(d.latitude) && Number.isFinite(d.longitude)); const missingLocationCount = restaurants.length - mapped.length; const formatInteger = d3.format(",d"); const formatDecimal = d3.format(".1f"); // Placard labels are merged into three groups: Green (pass), Yellow // (conditional pass), Red (closure). Anything else is "Not reported". const PLACARD_GROUPS = ["Green", "Yellow", "Red"]; function placardGroup(raw) { const s = String(raw ?? "").trim().toLowerCase(); if (!s) return "Not reported"; if (s.includes("yellow") || s.includes("conditional")) return "Yellow"; if (s.includes("green") || s.includes("pass")) return "Green"; if (s.includes("red") || s.includes("clos")) return "Red"; return "Not reported"; } for (const d of mapped) { [d.trueX, d.trueY] = projection([d.longitude, d.latitude]); d.displayX = d.trueX; d.displayY = d.trueY; d.placardGroup = placardGroup(d.placard); d.haystack = `${d.name} ${d.address}`.toLowerCase(); d.staticPass = true; d.isMatch = false; } // Spread points that share an exact coordinate by a few pixels. Distance // filtering still uses the original latitude and longitude. const byCoordinate = d3.group(mapped, d => `${d.longitude},${d.latitude}`); for (const group of byCoordinate.values()) { if (group.length < 2) continue; group.sort((a, b) => d3.ascending(a.name, b.name)); group.forEach((d, i) => { const angle = i * 2.399963229728653; const radius = Math.min(8, 0.82 * Math.sqrt(i)); d.displayX += Math.cos(angle) * radius; d.displayY += Math.sin(angle) * radius; }); } const defaults = { a: {longitude: -122.17006, latitude: 37.42766, radius: 12}, b: {longitude: -121.8863, latitude: 37.3382, radius: 12}, minRating: 3, placard: "All", search: "" }; const state = structuredClone(defaults); const controls = { radiusA: root.querySelector('[data-control="radius-a"]'), radiusB: root.querySelector('[data-control="radius-b"]'), rating: root.querySelector('[data-control="rating"]'), placard: root.querySelector('[data-control="placard"]'), search: root.querySelector('[data-control="search"]') }; const outputs = { radiusA: root.querySelector('[data-output="radius-a"]'), radiusB: root.querySelector('[data-output="radius-b"]'), rating: root.querySelector('[data-output="rating"]') }; const status = root.querySelector(".rf-status"); const note = root.querySelector(".rf-note"); const tooltip = root.querySelector(".rf-tooltip"); const mapWrap = root.querySelector(".rf-map-wrap"); const placards = PLACARD_GROUPS.filter(g => mapped.some(d => d.placardGroup === g)); if (mapped.some(d => d.placardGroup === "Not reported")) placards.push("Not reported"); for (const placard of placards) { const option = document.createElement("option"); option.value = placard; option.textContent = placard; controls.placard.append(option); } const svg = d3.select(mapWrap).append("svg") .attr("class", "rf-map") .attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`) .attr("width", mapWidth) .attr("height", mapHeight) .attr("aria-label", "Interactive map of Santa Clara County restaurants"); svg.append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("href", mapUrl); const queryFillLayer = svg.append("g").attr("aria-hidden", "true"); const fillA = queryFillLayer.append("circle").attr("fill", "#2566a8").attr("fill-opacity", .055).attr("pointer-events", "none"); const fillB = queryFillLayer.append("circle").attr("fill", "#b66a1f").attr("fill-opacity", .055).attr("pointer-events", "none"); const pointLayer = svg.append("g"); const points = pointLayer.selectAll("circle") .data(mapped) .join("circle") .attr("class", "rf-point") .attr("cx", d => d.displayX) .attr("cy", d => d.displayY) .attr("r", 1.85) .attr("tabindex", -1); const queryLayer = svg.append("g"); const queryA = makeQueryHandle("A", "#2566a8"); const queryB = makeQueryHandle("B", "#b66a1f"); const hoverRing = svg.append("circle").attr("class", "rf-hover-ring").attr("r", 4.5).style("display", "none"); const delaunay = d3.Delaunay.from(mapped, d => d.displayX, d => d.displayY); let dragging = false; svg .on("pointermove.tooltip", event => { if (dragging || event.target.closest?.(".rf-query")) { hoverRing.style("display", "none"); tooltip.style.display = "none"; return; } const [x, y] = d3.pointer(event, svg.node()); const index = delaunay.find(x, y); const d = mapped[index]; if (!d || Math.hypot(d.displayX - x, d.displayY - y) > 12) { hoverRing.style("display", "none"); tooltip.style.display = "none"; return; } hoverRing.attr("cx", d.displayX).attr("cy", d.displayY).style("display", null); showTooltip(event, d); }) .on("pointerleave.tooltip", () => { hoverRing.style("display", "none"); tooltip.style.display = "none"; }); function makeQueryHandle(label, color) { const group = queryLayer.append("g").attr("class", "rf-query"); const outline = group.append("circle") .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 2.2) .attr("pointer-events", "none"); const hitOutline = group.append("circle") .attr("fill", "none") .attr("stroke", "transparent") .attr("stroke-width", 14) .style("cursor", "grab"); const handle = group.append("circle") .attr("r", 12) .attr("fill", color) .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "grab"); const text = group.append("text").attr("class", "rf-query-label").text(label); return {group, outline, hitOutline, handle, text}; } function haversineMiles(lat1, lon1, lat2, lon2) { const toRadians = Math.PI / 180; const dLat = (lat2 - lat1) * toRadians; const dLon = (lon2 - lon1) * toRadians; const a = Math.sin(dLat / 2) ** 2 + Math.cos(lat1 * toRadians) * Math.cos(lat2 * toRadians) * Math.sin(dLon / 2) ** 2; return 3958.8 * 2 * Math.asin(Math.sqrt(a)); } function radiusPixels(query) { const longitudeDelta = query.radius / (69.172 * Math.cos(query.latitude * Math.PI / 180)); const x0 = projection([query.longitude, query.latitude])[0]; const x1 = projection([query.longitude + longitudeDelta, query.latitude])[0]; return Math.abs(x1 - x0); } // Non-geographic filters only change when a control changes, so they are // computed once per control change instead of once per drag event. function updateStaticFilters() { const q = state.search; for (const d of mapped) { const ratingPass = d.rating !== null && d.rating >= state.minRating; const placardPass = state.placard === "All" || d.placardGroup === state.placard; const textPass = !q || d.haystack.includes(q); d.staticPass = ratingPass && placardPass && textPass; } } function prepareQuery(query) { return { latitude: query.latitude, longitude: query.longitude, radius: query.radius, latDelta: query.radius / 69.172, lonDelta: query.radius / (69.172 * Math.cos(query.latitude * Math.PI / 180)) }; } // Cheap bounding-box reject before the haversine distance. function insideQuery(q, d) { if (Math.abs(d.latitude - q.latitude) > q.latDelta) return false; if (Math.abs(d.longitude - q.longitude) > q.lonDelta) return false; return haversineMiles(q.latitude, q.longitude, d.latitude, d.longitude) <= q.radius; } function renderQueries() { for (const [query, visuals, fill] of [[state.a, queryA, fillA], [state.b, queryB, fillB]]) { const [x, y] = projection([query.longitude, query.latitude]); const radius = radiusPixels(query); visuals.group.attr("transform", `translate(${x},${y})`); visuals.outline.attr("r", radius); visuals.hitOutline.attr("r", radius); fill.attr("cx", x).attr("cy", y).attr("r", radius); } } function render() { const started = performance.now(); const qa = prepareQuery(state.a); const qb = prepareQuery(state.b); let matchCount = 0; points.each(function (d) { const next = d.staticPass && insideQuery(qa, d) && insideQuery(qb, d); if (next !== d.isMatch) { d.isMatch = next; this.classList.toggle("is-match", next); // touch the DOM only when it changes } if (next) matchCount += 1; }); renderQueries(); outputs.radiusA.value = `${formatDecimal(state.a.radius)} mi`; outputs.radiusB.value = `${formatDecimal(state.b.radius)} mi`; outputs.rating.value = formatDecimal(state.minRating); status.innerHTML = `${formatInteger(matchCount)} matchesinside both circles and all filters${formatInteger(mapped.length)} mapped${formatInteger(missingLocationCount)} missing coordinates`; root.dataset.lastUpdateMs = (performance.now() - started).toFixed(1); } // Coalesce many pointer events into at most one render per animation frame. let renderQueued = false; function requestRender() { if (renderQueued) return; renderQueued = true; requestAnimationFrame(() => { renderQueued = false; render(); }); } function showTooltip(event, d) { const [x, y] = d3.pointer(event, root); const placard = d.placardGroup === "Not reported" || d.placardGroup === d.placard ? d.placardGroup : `${d.placardGroup} (${d.placard})`; const score = d.score === null ? "Not reported" : d.score; const rating = d.rating === null ? "Not reported" : formatDecimal(d.rating); const reviews = d.reviews === null ? "Not reported" : formatInteger(d.reviews); tooltip.innerHTML = ` ${escapeHtml(d.name)}

${escapeHtml(d.address)}

`; tooltip.style.display = "block"; const maxLeft = root.clientWidth - tooltip.offsetWidth - 6; const left = Math.max(6, Math.min(maxLeft, x + 14)); const placeAbove = y > mapHeight * .58; const top = Math.max(6, y + (placeAbove ? -tooltip.offsetHeight - 12 : 14)); tooltip.style.left = `${left}px`; tooltip.style.top = `${top}px`; } function escapeHtml(value) { return String(value).replace(/[&<>'"]/g, character => ({ "&": "&", "<": "<", ">": ">", "'": "'", '"': """ })[character]); } function installDrag(query, visuals) { const drag = d3.drag() .container(svg.node()) // pointer coordinates in SVG space, not the translated .subject(() => { const [x, y] = projection([query.longitude, query.latitude]); return {x, y}; }) .on("start", function () { dragging = true; hoverRing.style("display", "none"); tooltip.style.display = "none"; d3.select(this).style("cursor", "grabbing"); }) .on("drag", event => { const x = Math.max(0, Math.min(mapWidth, event.x)); const y = Math.max(0, Math.min(mapHeight, event.y)); [query.longitude, query.latitude] = projection.invert([x, y]); renderQueries(); // circles follow the pointer immediately requestRender(); // point filtering runs at most once per frame }) .on("end", function () { dragging = false; d3.select(this).style("cursor", "grab"); requestRender(); }); visuals.handle.call(drag); visuals.hitOutline.call(drag); } installDrag(state.a, queryA); installDrag(state.b, queryB); controls.radiusA.addEventListener("input", event => { state.a.radius = +event.target.value; requestRender(); }); controls.radiusB.addEventListener("input", event => { state.b.radius = +event.target.value; requestRender(); }); controls.rating.addEventListener("input", event => { state.minRating = +event.target.value; updateStaticFilters(); requestRender(); }); controls.placard.addEventListener("change", event => { state.placard = event.target.value; updateStaticFilters(); requestRender(); }); controls.search.addEventListener("input", event => { state.search = event.target.value.trim().toLowerCase(); updateStaticFilters(); requestRender(); }); root.querySelector(".rf-reset").addEventListener("click", () => { Object.assign(state.a, defaults.a); Object.assign(state.b, defaults.b); state.minRating = defaults.minRating; state.placard = defaults.placard; state.search = defaults.search; controls.radiusA.value = defaults.a.radius; controls.radiusB.value = defaults.b.radius; controls.rating.value = defaults.minRating; controls.placard.value = defaults.placard; controls.search.value = defaults.search; updateStaticFilters(); render(); }); note.textContent = `${formatInteger(missingLocationCount)} records cannot be plotted because the source file has no latitude or longitude for them. Co-located restaurants are spread by at most 8 pixels only so each point can be hovered; all circle tests use the original coordinates.`; updateStaticFilters(); render(); return root; }4d:T86d,## Design and implementation notes The central interaction is an **AND query**: a restaurant is emphasized only when it falls inside both draggable circles and passes every additional filter. Keeping nonmatches as quiet gray points preserves the geographic distribution without letting them compete with the current result. The A and B circles use two distinct categorical colors, while the restaurant result uses one consistent dark color so placard status is not confused with circle membership. The implementation preprojects all mappable records once and updates only a CSS class during interaction. Circle membership is calculated from the original latitude and longitude with the haversine formula. Records sharing exact coordinates are spread by no more than eight display pixels so separate restaurants can be hovered; that small display offset never changes the distance calculation. The source has **9,709 records**. Of these, **8,794 can be mapped** and **915 have no latitude or longitude**. Those 915 records cannot truthfully be placed on the map, so the interface reports them instead of silently counting them as filtered-out locations. ## Development commentary - **Time spent:** _Add your final estimate before submitting._ - **Most time-consuming parts:** Building two draggable geographic queries that stay synchronized with their radius controls; making hover work in dense, overlapping locations; and keeping full-data updates comfortably below the required 0.1 seconds. - **Collaboration:** _State whether this was an individual submission or explain the division of work if you worked with a partner._ - **External resources and AI use:** I used the course-provided assignment page, restaurant data, map, and D3 notebooks, along with D3 documentation. I also used an AI assistant to help inspect the dataset, translate my design decisions into D3 code, identify edge cases, and debug the notebook. I made the substantive choices about the interaction, filters, visual hierarchy, handling of missing and co-located records, and what to include in the final notebook, and I reviewed the resulting behavior throughout the process. 4e:[] 48:{"id":"e7f25d8622f475bf","slug":"two-places-one-dinner-map","title":"Two places, one dinner map","thumbnail":"3d90929a5cd76cc273790a4f9c5def377779501f6164c7b48f0c00f93badb18d","access_level":"public","create_time":"$D2026-10-23T22:33:56.383Z","update_time":"$D2026-10-23T22:34:27.185Z","view_time":null,"first_public_time":"$D2026-10-23T22:38:26.451Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"64c903b36eb067bd","login":"yu-ding","name":"Yu Ding","avatar_url":"https://avatars-next.observableusercontent.com/ebdf783297e6c1bfdd9fa99274993c687d4af3f273380bba446c62153a51c664","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":25,"publish_version":25,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c0116077d4b6a46","login":"yu-ding","name":"Yu Ding","avatar_url":"https://avatars-next.observableusercontent.com/ebdf783297e6c1bfdd9fa99274993c687d4af3f273380bba446c62153a51c664","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"64c903b36eb067bd","login":"yu-ding","name":"Yu Ding","avatar_url":"https://avatars-next.observableusercontent.com/ebdf783297e6c1bfdd9fa99274993c687d4af3f273380bba446c62153a51c664","tier":"free_2026","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Two places, one dinner map","cells":[{"id":1,"value":"# Two places, one dinner map\n\nFind Santa Clara County restaurants that are close enough to two different starting points—and that also meet your quality preferences.\n\nThe source contains 9,709 restaurant records assembled by the course staff from Santa Clara County inspection and geocoding data, with synthetic rating and review fields. The map reports records without coordinates instead of silently treating them as if they were mapped.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"restaurants = await d3.csv(\n \"https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsSynth2026.csv\",\n row => {\n const numberOrNull = value => {\n if (value === null || value === undefined || value === \"\") return null;\n const number = +value;\n return Number.isFinite(number) ? number : null;\n };\n return {\n name: row[\"Facility Name\"],\n address: row.Address,\n placard: row[\"Latest placard color\"] || null,\n score: numberOrNull(row[\"Latest Score\"]),\n distanceFromStanford: numberOrNull(row.Distance),\n latitude: numberOrNull(row.Latitude),\n longitude: numberOrNull(row.Longitude),\n rating: numberOrNull(row.Rating),\n reviews: numberOrNull(row[\"Number of reviews\"])\n };\n }\n)","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4c","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"buildRestaurantFinder({\n d3,\n restaurants,\n mapUrl: \"https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png\",\n width\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"2"}} 24:null