45:["$","title",null,{"children":"The Ultimate Meet-Up Map | Zhixin Ding | Observable"}] 4d:T7d21,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. Scroll or use the map controls to zoom; drag the map background to pan.

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"); const formatDifference = d3.format(".3f"); // Consolidate synonymous inspection labels into the three categories shown // in the control: Green (pass), Yellow (conditional pass), Red (closure). const PLACARD_GROUPS = ["Green", "Yellow", "Red"]; function placardGroup(raw) { const value = String(raw ?? "").trim().toLowerCase(); if (!value) return "Not reported"; if (value.includes("yellow") || value.includes("conditional")) return "Yellow"; if (value.includes("green") || value.includes("pass")) return "Green"; if (value.includes("red") || value.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: "", showRecommendations: false }; 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"]'), recommendations: root.querySelector('[data-control="recommendations"]') }; 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 recommendationsPanel = root.querySelector(".rf-recommendations"); const note = root.querySelector(".rf-note"); const tooltip = root.querySelector(".rf-tooltip"); const mapWrap = root.querySelector(".rf-map-wrap"); const placards = PLACARD_GROUPS.filter(group => mapped.some(d => d.placardGroup === group)); 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"); const viewportLayer = svg.append("g").attr("class", "rf-viewport"); viewportLayer.append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("href", mapUrl); const queryFillLayer = viewportLayer.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 = viewportLayer.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 recommendationLayer = viewportLayer.append("g").attr("aria-hidden", "true"); const queryLayer = viewportLayer.append("g"); const queryA = makeQueryHandle("A", "#2566a8"); const queryB = makeQueryHandle("B", "#b66a1f"); // Keep the hover indicator outside the zoomed group so it remains a small, // constant-size outline even at neighborhood-level zoom. const hoverRing = svg.append("circle") .attr("class", "rf-hover-ring") .attr("r", 4.5) .attr("fill", "none") .attr("stroke", "#161310") .attr("stroke-width", 1.4) .attr("pointer-events", "none") .style("display", "none"); const delaunay = d3.Delaunay.from(mapped, d => d.displayX, d => d.displayY); let dragging = false; let currentRecommendations = []; let zoomTransform = d3.zoomIdentity; const zoomControls = document.createElement("div"); zoomControls.className = "rf-zoom-controls"; zoomControls.setAttribute("aria-label", "Map zoom controls"); zoomControls.innerHTML = ` `; mapWrap.append(zoomControls); const zoom = d3.zoom() .scaleExtent([1, 50]) .extent([[0, 0], [mapWidth, mapHeight]]) .translateExtent([[0, 0], [mapWidth, mapHeight]]) .filter(event => !event.button && !event.target.closest?.(".rf-query")) .on("start", () => { mapWrap.classList.add("is-panning"); hoverRing.style("display", "none"); tooltip.style.display = "none"; }) .on("zoom", event => { zoomTransform = event.transform; viewportLayer.attr("transform", zoomTransform); updateZoomSizedMarks(); }) .on("end", () => mapWrap.classList.remove("is-panning")); svg.call(zoom); zoomControls.querySelector('[data-zoom="in"]').addEventListener("click", () => { svg.transition().duration(180).call(zoom.scaleBy, 1.7); }); zoomControls.querySelector('[data-zoom="out"]').addEventListener("click", () => { svg.transition().duration(180).call(zoom.scaleBy, 1 / 1.7); }); zoomControls.querySelector('[data-zoom="picks"]').addEventListener("click", fitRecommendations); zoomControls.querySelector('[data-zoom="reset"]').addEventListener("click", () => { svg.transition().duration(220).call(zoom.transform, d3.zoomIdentity); }); function fitRecommendations() { if (!currentRecommendations.length) return; const xExtent = d3.extent(currentRecommendations, d => d.displayX); const yExtent = d3.extent(currentRecommendations, d => d.displayY); const padding = 72; const spanX = Math.max(1, xExtent[1] - xExtent[0]); const spanY = Math.max(1, yExtent[1] - yExtent[0]); const scale = Math.max(1, Math.min(50, (mapWidth - padding * 2) / spanX, (mapHeight - padding * 2) / spanY )); const centerX = (xExtent[0] + xExtent[1]) / 2; const centerY = (yExtent[0] + yExtent[1]) / 2; const target = d3.zoomIdentity .translate(mapWidth / 2, mapHeight / 2) .scale(scale) .translate(-centerX, -centerY); svg.transition().duration(320).call(zoom.transform, target); } function updateZoomSizedMarks() { const inverseScale = 1 / zoomTransform.k; points.attr("r", 1.85 * inverseScale); recommendationLayer.selectAll("g.rf-recommend-marker") .attr("transform", d => `translate(${d.displayX},${d.displayY}) scale(${inverseScale})`); for (const visuals of [queryA, queryB]) { visuals.outline.attr("stroke-width", 2.2 * inverseScale); visuals.hitOutline.attr("stroke-width", 14 * inverseScale); visuals.handle .attr("r", 12 * inverseScale) .attr("stroke-width", 2 * inverseScale); visuals.text.style("font-size", `${12 * inverseScale}px`); } } svg .on("pointermove.tooltip", event => { if (dragging || event.target.closest?.(".rf-query")) { hoverRing.style("display", "none"); tooltip.style.display = "none"; return; } const [screenX, screenY] = d3.pointer(event, svg.node()); const [x, y] = zoomTransform.invert([screenX, screenY]); const index = delaunay.find(x, y); const d = mapped[index]; if (!d || Math.hypot(d.displayX - x, d.displayY - y) * zoomTransform.k > 12) { hoverRing.style("display", "none"); tooltip.style.display = "none"; return; } const [hoverX, hoverY] = zoomTransform.apply([d.displayX, d.displayY]); hoverRing.attr("cx", hoverX).attr("cy", hoverY).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 change only when a control changes, so cache them // instead of recomputing string and category checks during every drag frame. function updateStaticFilters() { const query = 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 = !query || d.haystack.includes(query); 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)) }; } // Return the true geographic distance only when the restaurant is inside. // A cheap bounding-box test rejects most points before the haversine call. function distanceInsideQuery(query, d) { if (Math.abs(d.latitude - query.latitude) > query.latDelta) return null; if (Math.abs(d.longitude - query.longitude) > query.lonDelta) return null; const distance = haversineMiles(query.latitude, query.longitude, d.latitude, d.longitude); return distance <= query.radius ? distance : null; } 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 queryAState = prepareQuery(state.a); const queryBState = prepareQuery(state.b); const matched = []; let matchCount = 0; points.each(function (d) { let distanceA = null; let distanceB = null; if (d.staticPass) { distanceA = distanceInsideQuery(queryAState, d); if (distanceA !== null) distanceB = distanceInsideQuery(queryBState, d); } const next = distanceA !== null && distanceB !== null; if (next !== d.isMatch) { d.isMatch = next; this.classList.toggle("is-match", next); } if (next) { d.distanceA = distanceA; d.distanceB = distanceB; d.fairnessGap = Math.abs(distanceA - distanceB); d.totalDistance = distanceA + distanceB; matched.push(d); matchCount += 1; } }); // Re-ranking and rebuilding the recommendation list on every drag event // makes nearby candidates rapidly enter and leave the top five. Hold that // layer steady while A or B moves, then refresh it once on release. let recommendations = currentRecommendations; if (!dragging) { recommendations = state.showRecommendations ? matched.slice().sort((a, b) => d3.ascending(a.fairnessGap, b.fairnessGap) || d3.ascending(a.totalDistance, b.totalDistance) || d3.descending(a.rating ?? -Infinity, b.rating ?? -Infinity) || d3.descending(a.reviews ?? -Infinity, b.reviews ?? -Infinity) || d3.ascending(a.name, b.name) ).slice(0, 5) : []; renderRecommendations(recommendations); } 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${state.showRecommendations ? `${recommendations.length} fairest ${recommendations.length === 1 ? "pick" : "picks"} marked on the map` : ""}${formatInteger(mapped.length)} mapped${formatInteger(missingLocationCount)} missing coordinates`; root.dataset.lastUpdateMs = (performance.now() - started).toFixed(1); } function renderRecommendations(recommendations) { for (const d of currentRecommendations) d.recommendationRank = null; recommendations.forEach((d, index) => { d.recommendationRank = index + 1; }); currentRecommendations = recommendations; zoomControls.querySelector('[data-zoom="picks"]').disabled = recommendations.length === 0; recommendationsPanel.hidden = !state.showRecommendations; if (state.showRecommendations) { const list = recommendations.length ? `

${index + 1} ${escapeHtml(d.name)}${formatDifference(d.distanceA)} mi from A · ${formatDifference(d.distanceB)} mi from B · ${formatDifference(d.fairnessGap)} mi difference

` : `

No restaurants satisfy the current circles and filters.

`; recommendationsPanel.innerHTML = `

Fairest meeting places

Ranked by the smallest A–B straight-line distance difference; ties favor a shorter combined trip, then rating and review count.

${list}`; } else { recommendationsPanel.innerHTML = ""; } const markers = recommendationLayer.selectAll("g.rf-recommend-marker") .data(recommendations, d => `${d.longitude}|${d.latitude}|${d.name}|${d.address}`) .join( enter => { const group = enter.append("g").attr("class", "rf-recommend-marker"); group.append("circle").attr("r", 6.5); group.append("text"); return group; }, update => update, exit => exit.remove() ) .attr("transform", d => `translate(${d.displayX},${d.displayY}) scale(${1 / zoomTransform.k})`); markers.select("text").text(d => d.recommendationRank); } // Coalesce pointer events into at most one complete update per 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()) .subject(() => { const [x, y] = projection([query.longitude, query.latitude]); return {x: zoomTransform.applyX(x), y: zoomTransform.applyY(y)}; }) .on("start", function() { svg.interrupt(); dragging = true; root.classList.add("is-query-dragging"); hoverRing.style("display", "none"); tooltip.style.display = "none"; d3.select(this).style("cursor", "grabbing"); }) .on("drag", event => { const screenX = Math.max(0, Math.min(mapWidth, event.x)); const screenY = Math.max(0, Math.min(mapHeight, event.y)); const [x, y] = zoomTransform.invert([screenX, screenY]); [query.longitude, query.latitude] = projection.invert([x, y]); requestRender(); }) .on("end", function() { dragging = false; root.classList.remove("is-query-dragging"); 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(); }); controls.recommendations.addEventListener("change", event => { state.showRecommendations = event.target.checked; 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; state.showRecommendations = defaults.showRecommendations; 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; controls.recommendations.checked = defaults.showRecommendations; svg.interrupt().call(zoom.transform, d3.zoomIdentity); updateStaticFilters(); render(); }); note.textContent = `${formatInteger(missingLocationCount)} records cannot be plotted because the source file has no latitude or longitude for them. Scroll or use + / − to zoom and drag the map background to pan. 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; } 4e:Tf98,## Design and implementation notes The central interaction is an AND query: a restaurant is highlighted only when it falls inside both draggable circles and passes every active filter. A and B use distinct categorical colors, while matching restaurants use one consistent dark color so placard status is not confused with circle membership. The placard filter condenses six source labels into four clear choices. The source labels **Green** and “Pass *” are grouped as Green (9,648 records), while **Red** and “Closure *” are grouped as Red (9 records). **Yellow** remains Yellow (21 records), and **N/A** becomes Not reported (31 records). This combines labels that communicate the same inspection outcome while preserving the conditional Yellow category and avoiding the assumption that an unavailable status is a pass. When a grouped label differs from the source, the tooltip retains the original wording in parentheses—for example, Green (Pass *) or Red (Closure *). The optional **fairest picks** toggle ranks only restaurants that already satisfy the circles and filters. Fairness is the absolute difference between each restaurant’s straight-line distance from A and from B. Smaller differences rank first; ties favor a shorter combined trip, then a higher rating, more reviews, and finally the restaurant name. This is inspired by a personal use case where you and a friend might want to be absolutely fair about your meeting spot and the distance travelled; after all, Ubering is expensive in the Bay Area! The map supports scroll or pinch zooming, + / − controls, background panning, and **Fit picks**, which frames the five recommendations when they are clustered too tightly to distinguish at the county scale. Restaurant points, numbered recommendation markers, A/B handles, and the hover outline keep a constant screen size as the basemap magnifies. Zooming changes only the view; filtering and ranking continue to use the original latitude and longitude. For smooth interaction, all mappable records are projected once, non-geographic filter results are cached, and pointer events are combined into at most one update per animation frame. While A or B is moving, the recommendation layer is held steady and recalculated when the circle is released, preventing the top-five markers from flashing as candidates rapidly change rank. Circle membership and recommendation distances use the haversine formula. Records sharing exact coordinates are spread by no more than eight display pixels so separate restaurants can be hovered, but that display offset never affects filtering or distance calculations. The source has **9,709 records**: **8,794 can be mapped**, while **915 have no latitude or longitude**. Those 915 records cannot truthfully be placed on the map, so the interface reports them instead of silently treating them as filtered-out locations. ## Development commentary - **Time spent:** 6hrs - **Most time-consuming parts:** Coordinating two draggable geographic queries with map zoom and pan; building a deterministic top-five ranking that remains readable in dense areas; keeping marker and hover sizes stable across zoom levels; and eliminating visual flicker while preserving fast full-data updates. - **Collaboration:** We met to discuss the project, then Yu handled the data preprocessing (consolidating the placards), and we met to collaborate on code together and brainstorm the additional features together and user test. Finally, Jessica handled writing the notes and statements. - **External resources and AI use:** We used the course-provided assignment page, restaurant data, map, and D3 notebooks, along with D3 documentation. We handwrote most code but used codex to help debug some glitches we ran into like in realizing the recommendation, zoom, hover, and drag behavior features. We made all substantive choices about the use case, fairness definition, filters, visual hierarchy and handling of missing and co-located records.4f:[] 49:{"id":"13e755e15a055dd9","slug":"two-places-one-dinner-map","title":"The Ultimate Meet-Up Map","thumbnail":"0e84bd8cec69d32bde1b8abad1fab9695a8e02d7c14e6335b62d33c8e4f53428","access_level":"public","create_time":"$D2026-10-23T22:42:27.491Z","update_time":"$D2026-10-23T23:38:39.528Z","view_time":null,"first_public_time":"$D2026-10-23T23:33:36.057Z","has_unpublished_edits":null,"fork":{"id":"e7f25d8622f475bf","slug":"two-places-one-dinner-map","title":"Two places, one dinner map","owner":{"id":"64c903b36eb067bd","login":"yu-ding","name":"Yu Ding"}},"stars":0,"starred":false,"owner":{"type":"team","id":"226e9da82030b0a7","login":"jd080703","name":"Zhixin Ding","avatar_url":"https://avatars-next.observableusercontent.com/29fb25a4dd7a796754f23f8ec582fc1e57e48c0fe49ebe8b57262dd403c88177","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":49,"publish_version":49,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bbf4eb113cb3482","login":"jd080703","name":"Zhixin Ding","avatar_url":"https://avatars-next.observableusercontent.com/29fb25a4dd7a796754f23f8ec582fc1e57e48c0fe49ebe8b57262dd403c88177","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"226e9da82030b0a7","login":"jd080703","name":"Zhixin Ding","avatar_url":"https://avatars-next.observableusercontent.com/29fb25a4dd7a796754f23f8ec582fc1e57e48c0fe49ebe8b57262dd403c88177","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":"The Ultimate Meet-Up Map","cells":[{"id":1,"value":"# The Ultimate Meet-Up Map\n\n## A3 - Jessica Ding, Yu Ding\n\nMirror Mirror on the wall,\n\nWhere is the FAIREST meet-up place of them all?\n\n\nFind Santa Clara County restaurants that are close enough to two different starting points—and that also meet your quality preferences, and have the top 5 fairest meet-up restaurants suggested for your next meet-up with friends.\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":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4d","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$4e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"2"}} 44:null