34:["$","title",null,{"children":"Assignment 3: Santa Clara County Restaurant Finder | Anujin Naranbaatar | Observable"}] 3c:T5ec0,// THE APP // This one cell builds the whole interactive tool: the map, the filters, and the list. // It is kept in ONE cell on purpose. In Observable, a cell runs again from the top // whenever something it uses changes. If the map, filters, and list were separate cells, // every click would rebuild the map and send points A and B back to where they started. app = { // 0. SETTINGS: fixed choices that never change while the app runs // Rating groups: one source of truth for dot colors, legend, filter buttons, and list. // Four groups of similar size; whole stars would put half the data (4,376) in one group. const ratingBands = [ {key: "r45", min: 4.5, label: "4.5–5.0★", color: "#38049a", text: "#fff"}, {key: "r40", min: 4.0, label: "4.0–4.4★", color: "#a11b9b", text: "#fff"}, {key: "r35", min: 3.5, label: "3.5–3.9★", color: "#e16462", text: "#fff"}, {key: "rlow", min: 0, label: "Under 3.5★", color: "#feba2c", text: "#222"} ]; // The dot color for a rating (light gray if the rating is missing) const ratingColor = r => r == null ? "#bbb" : ratingBands.find(b => r >= b.min).color; // Which rating group each restaurant belongs to (worked out once, so filtering stays fast) const bandKeyOf = new Map(restaurants.map(d => [d.id, d.rating == null ? null : ratingBands.find(b => d.rating >= b.min).key])); // Review-count groups, based on the data (the median restaurant has 135 reviews). // Named by popularity, not quality: many reviews does not mean good reviews. const reviewBuckets = [ {key: "few", label: "Few (under 50)", test: n => n < 50}, {key: "some", label: "Some (50–199)", test: n => n >= 50 && n < 200}, {key: "many", label: "Many (200–999)", test: n => n >= 200 && n < 1000}, {key: "popular", label: "Very popular (1,000+)", test: n => n >= 1000} ]; // Which review group each restaurant belongs to (worked out once) const bucketOf = new Map(restaurants.map(d => [d.id, reviewBuckets.find(b => b.test(d.reviews ?? 0)).key])); // A key for "same spot on the map", and every restaurant grouped by its spot const locKey = d => `${d.x.toFixed(1)},${d.y.toFixed(1)}`; const byLocation = d3.group(restaurants, locKey); // ZIP code -> the average position of that ZIP's restaurants (used by the ZIP boxes) const zipOf = d => ((d.address || "").match(/(\d{5})(?:-\d{4})?\s*$/) || [])[1]; const zipCenter = d3.rollup( restaurants.filter(d => zipOf(d)), v => ({x: d3.mean(v, d => d.x), y: d3.mean(v, d => d.y), n: v.length}), zipOf); // Radius in miles -> rough travel time (straight line; walk 3 mph, drive 30 mph) const travel = mi => mi <= 1.5 ? `≈ ${Math.round(mi * 20)} min walk` : `≈ ${Math.round(mi * 2)} min drive`; // 1. STATE: everything the user can change // "state" is one box that remembers every choice the user makes. // When the user changes something, we update the box and call update() to redraw. const toXY = ([x, y]) => ({x, y}); const state = { A: toXY(projection([-122.08, 37.39])), // where A starts (Mountain View), in map pixels B: toXY(projection([-121.96, 37.35])), // where B starts (Santa Clara), in map pixels rA: 4, rB: 4, // how far each person will travel, in miles ratings: new Set(ratingBands.map(b => b.key)), // which rating groups are shown buckets: new Set(reviewBuckets.map(b => b.key)), // which review groups are shown minScore: 0, // minimum inspection score (0 means "any") keyword: "", // text the address must contain sortBy: "rating", // how the list is sorted selected: null, // the spot the user clicked (null = nothing selected) scrollRequest: false // true right after a map click, so the list scrolls once }; let matchSet = new Set(); // ids of all restaurants that pass every filter // Small helper tools const byRating = (a, b) => (b.rating ?? 0) - (a.rating ?? 0); // highest rating first const milesTo = (d, p) => distance(d.x, d.y, p.x, p.y) / pxPerMile; // distance to A or B, in miles const medianScore = d3.median(restaurants, d => d.score); // middle inspection score // 2. LAYOUT: filters on top; map (left) and list (right) below // "width" is the notebook's width. The map shrinks if needed so the list fits beside it. const listWidth = 300; const mapW = Math.min(mapWidth, Math.max(420, width - listWidth - 20)); const mapH = mapW * mapHeight / mapWidth; const root = d3.create("div").style("font", "13px sans-serif"); const filterBar = root.append("div") .style("display", "grid") .style("grid-template-columns", "repeat(auto-fill, minmax(210px, 1fr))") .style("gap", "12px 24px").style("margin-bottom", "14px"); const row = root.append("div") .style("display", "flex").style("gap", "16px").style("align-items", "flex-start"); const left = row.append("div").style("position", "relative").style("flex", "0 0 auto"); const right = row.append("div").style("flex", "1").style("min-width", "240px"); // 3. MAP: background picture, one dot per restaurant, highlights, and legend // "viewBox" lets the map shrink on screen while positions inside stay correct. const svg = left.append("svg") .attr("viewBox", `0 0 ${mapWidth} ${mapHeight}`) .attr("width", mapW).attr("height", mapH) .style("border", "1px solid #ccc").style("display", "block"); svg.append("image") .attr("width", mapWidth).attr("height", mapHeight) .attr("href", "https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png"); // The dots (D3 data join: one circle per restaurant). // Sorted from lowest to highest rating, so the best places are drawn on top. const dots = svg.append("g") .selectAll("circle") .data(restaurants.slice().sort((a, b) => (a.rating ?? 0) - (b.rating ?? 0))) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 2.4) .style("cursor", "pointer"); // Highlight rings: black ring = clicked spot, white glow = spot under the mouse const selectHalo = svg.append("circle") .attr("r", 10).attr("fill", "none") .attr("stroke", "#111").attr("stroke-width", 3) .style("pointer-events", "none").style("display", "none"); const hoverHalo = svg.append("circle") .attr("r", 8).attr("fill", "white").attr("fill-opacity", 0.5) .attr("stroke", "#111").attr("stroke-width", 1.5) .style("pointer-events", "none").style("display", "none"); const showHalo = (halo, d) => halo.attr("cx", d.x).attr("cy", d.y).style("display", null).raise(); // "N restaurants match" in the top-left (white outline keeps it readable) const countLabel = svg.append("text") .attr("x", 12).attr("y", 26) .attr("font-weight", "bold").attr("font-size", 18) .attr("stroke", "white").attr("stroke-width", 4).attr("paint-order", "stroke"); // Legend in the bottom-left: same groups and colors as the rating buttons const legend = svg.append("g") .attr("transform", `translate(12, ${mapHeight - 112})`) .style("pointer-events", "none"); legend.append("rect") .attr("width", 150).attr("height", 102).attr("rx", 4) .attr("fill", "white").attr("fill-opacity", 0.92).attr("stroke", "#ccc"); legend.append("text") .attr("x", 10).attr("y", 18).attr("font-size", 12).attr("font-weight", "bold") .text("Rating (in selection)"); ratingBands.forEach((b, i) => { legend.append("circle").attr("cx", 18).attr("cy", 34 + i * 15).attr("r", 5).attr("fill", b.color); legend.append("text").attr("x", 30).attr("y", 38 + i * 15).attr("font-size", 11).text(b.label); }); legend.append("circle").attr("cx", 18).attr("cy", 34 + 4 * 15).attr("r", 5) .attr("fill", "#999").attr("opacity", 0.4); legend.append("text").attr("x", 30).attr("y", 38 + 4 * 15).attr("font-size", 11) .attr("fill", "#666").text("outside selection"); // 4. POINTS A AND B: big see-through circle + small handle you drag + letter const query = svg.append("g") .selectAll("g") .data([{key: "A", color: "#0f766e"}, {key: "B", color: "#222"}]) .join("g") .attr("transform", d => `translate(${state[d.key].x},${state[d.key].y})`); // The big circle lets the mouse pass through, so dots inside can still be hovered const rings = query.append("circle") .attr("fill", d => d.color).attr("fill-opacity", 0.06) .attr("stroke", d => d.color).attr("stroke-width", 2) .style("pointer-events", "none"); // The small handle: the only part the user grabs query.append("circle") .attr("r", 9).attr("fill", d => d.color).style("cursor", "move"); query.append("text") .text(d => d.key) .attr("text-anchor", "middle").attr("dy", "0.35em") .attr("fill", "white").attr("font-size", 11).attr("font-weight", "bold") .style("pointer-events", "none"); // Dragging: save the new position, move the circle, and update right away query.call(d3.drag() .subject((event, d) => state[d.key]) .on("drag", function(event, d) { state[d.key].x = event.x; state[d.key].y = event.y; d3.select(this).attr("transform", `translate(${event.x},${event.y})`); update(); })); // Moves A or B without dragging (used by the ZIP boxes) function moveTo(key, p) { state[key].x = p.x; state[key].y = p.y; query.filter(d => d.key === key).attr("transform", `translate(${p.x},${p.y})`); update(); } // Sets circle sizes: radius in miles × pixels per mile function drawRings() { rings.attr("r", d => (d.key === "A" ? state.rA : state.rB) * pxPerMile); } // 5. SELECTION: click a dot or list item; click empty map to clear svg.on("click", () => { if (state.selected) { state.selected = null; update(); } }); // Only clicks on the map scroll the list, so clicking in the list never makes it jump function select(key, fromMap) { state.selected = state.selected === key ? null : key; state.scrollRequest = fromMap && state.selected !== null; update(); } // 6. TOOLTIP: white info box shown while the mouse is over a dot const tooltip = left.append("div") .style("position", "absolute").style("pointer-events", "none") .style("background", "white").style("border", "1px solid #ccc") .style("border-radius", "4px").style("padding", "6px 8px") .style("max-width", "260px").style("box-shadow", "0 2px 6px rgba(0,0,0,0.2)") .style("display", "none").style("z-index", 10); // Text for ONE restaurant; each "if" skips a missing value function describe(r) { const lines = [`● ${r.name}`]; if (r.rating != null) lines.push(`${r.rating} ★ (${(r.reviews ?? 0).toLocaleString()} reviews)`); if (r.score != null) lines.push(`Inspection score: ${r.score}`); if (r.placard != null) lines.push(`Placard: ${r.placard}`); return lines.join("
"); } dots // Show every restaurant at this spot (up to 101 at malls), highest rated first .on("mouseover", function(event, d) { const group = byLocation.get(locKey(d)).slice().sort(byRating); const inSel = group.filter(r => matchSet.has(r.id)).length; const status = group.length === 1 ? (inSel ? `

✓ In your selection

` : `

Outside your selection

`) : `

${group.length} restaurants here · ${inSel} in your selection
Highest rated first

`; const shown = group.slice(0, 5).map(describe).join("

"); const more = group.length > 5 ? `
…and ${group.length - 5} more` : ""; tooltip.html(`

${d.address}

${status}

${shown}${more}`) .style("display", "block"); showHalo(hoverHalo, d); }) // Keep the box next to the mouse .on("mousemove", function(event) { const [mx, my] = d3.pointer(event, left.node()); tooltip.style("left", `${mx + 14}px`).style("top", `${my + 14}px`); }) // Hide the box and glow when the mouse leaves .on("mouseout", function() { tooltip.style("display", "none"); hoverHalo.style("display", "none"); }) // Select this spot (stopPropagation stops it from also clearing the selection) .on("click", function(event, d) { event.stopPropagation(); select(locKey(d), true); }); // 7. FILTER BAR, PART 1: builder functions so all controls look and work the same function section(title) { // a titled block const s = filterBar.append("div"); s.append("div").style("font-weight", "bold").style("margin-bottom", "4px").text(title); return s; } const hint = s => s.append("div").style("color", "#666").style("font-size", "12px"); // gray helper text // A slider that shows its value and runs onInput when moved function slider(parent, min, max, step, value, fmt, onInput) { const r = parent.append("div") .style("display", "flex").style("align-items", "center").style("gap", "8px"); const input = r.append("input") .attr("type", "range").attr("min", min).attr("max", max).attr("step", step) .property("value", value).style("flex", "1"); const out = r.append("span").style("width", "50px").text(fmt(value)); input.on("input", function() { const v = +this.value; out.text(fmt(v)); onInput(v); }); } // A ZIP box: after 5 digits, move A or B to that ZIP's center (green = found, red = not found) function zipBox(parent, key) { const input = parent.append("input") .attr("type", "text").attr("placeholder", `Move ${key} to ZIP, e.g. 95112`) .attr("maxlength", 5) .style("width", "100%").style("box-sizing", "border-box") .style("padding", "4px").style("margin-top", "6px"); const msg = hint(parent); input.on("input", function() { const z = this.value.trim(); if (z.length < 5) { msg.text(""); return; } const c = zipCenter.get(z); if (c) { moveTo(key, c); msg.style("color", "#2a7").text(`Moved ${key} to the center of ${c.n} restaurants in ${z}`); } else { msg.style("color", "#c33").text(`No restaurants with ZIP ${z} in this data`); } }); } // Round buttons where only ONE can be chosen (used for inspection score) function pills(parent, values, labelOf, getCurrent, setValue) { const btns = parent.append("div") .selectAll("button") .data(values) .join("button") .text(labelOf) .style("margin", "0 4px 4px 0").style("padding", "4px 9px") .style("border", "1px solid #333").style("border-radius", "12px") .style("cursor", "pointer") .on("click", (event, v) => { setValue(v); restyle(); update(); }); function restyle() { btns.style("background", v => v === getCurrent() ? "#333" : "#fff") .style("color", v => v === getCurrent() ? "#fff" : "#333"); } restyle(); } // 8. FILTER BAR, PART 2: the controls (each changes "state", then calls update()) // Point A: radius slider (0.25–25 miles), travel-time hint, ZIP box const secA = section("Point A"); slider(secA, 0.25, 25, 0.25, state.rA, v => `${v} mi`, v => { state.rA = v; hintA.text(travel(v)); drawRings(); update(); }); const hintA = hint(secA).text(travel(state.rA)); zipBox(secA, "A"); // Point B: the same controls const secB = section("Point B"); slider(secB, 0.25, 25, 0.25, state.rB, v => `${v} mi`, v => { state.rB = v; hintB.text(travel(v)); drawRings(); update(); }); const hintB = hint(secB).text(travel(state.rB)); zipBox(secB, "B"); // Address keyword (capital letters on both sides, so upper/lower case doesn't matter) const secKw = section("Address contains"); secKw.append("input") .attr("type", "text").attr("placeholder", "Street, city, or ZIP") .style("width", "100%").style("box-sizing", "border-box").style("padding", "4px") .on("input", function() { state.keyword = this.value.trim().toUpperCase(); update(); }); hint(secKw).style("color", "#999").style("font-size", "11px").style("margin-top", "6px") .text("Travel times are rough: straight-line distance, walk 3 mph, drive 30 mph"); // Rating buttons: one per group, in the dot color; several can be on at once const secRating = section("Rating"); const ratingBtns = secRating.append("div") .selectAll("button") .data(ratingBands) .join("button") .style("margin", "0 4px 4px 0").style("padding", "4px 9px") .style("border-radius", "12px").style("cursor", "pointer") .text(b => `${b.label} · ${restaurants.filter(d => bandKeyOf.get(d.id) === b.key).length.toLocaleString()}`) .on("click", (event, b) => { state.ratings.has(b.key) ? state.ratings.delete(b.key) : state.ratings.add(b.key); styleRatings(); update(); }); // "On" buttons are filled with their color; "off" buttons are white function styleRatings() { ratingBtns .style("background", b => state.ratings.has(b.key) ? b.color : "#fff") .style("color", b => state.ratings.has(b.key) ? b.text : "#999") .style("border", b => `2px solid ${b.color}`); } styleRatings(); hint(secRating).text("Click to show or hide each group"); // Inspection score buttons (most scores are 85+, median 92, so a 0–100 slider would be mostly empty) const secScore = section("Inspection score"); pills(secScore, [0, 85, 90, 95], v => v === 0 ? "Any" : `${v}+`, () => state.minScore, v => { state.minScore = v; }); hint(secScore).text(`Out of 100 · median is ${medianScore}`); // Number of reviews: one checkbox per group const reviewSection = section("Number of reviews"); for (const b of reviewBuckets) { const n = restaurants.filter(d => bucketOf.get(d.id) === b.key).length; const label = reviewSection.append("label").style("display", "block"); label.append("input") .attr("type", "checkbox").property("checked", true) .on("change", function() { this.checked ? state.buckets.add(b.key) : state.buckets.delete(b.key); update(); }); label.append("span").text(` ${b.label} · ${n.toLocaleString()}`); } // 9. LIST OF MATCHES: the panel to the right of the map right.append("div") .style("font-weight", "bold").style("font-size", "15px").style("margin-bottom", "6px") .text("Matching restaurants"); // Ways to sort the list const sorters = { rating: byRating, // highest rating first reviews: (a, b) => (b.reviews ?? 0) - (a.reviews ?? 0), // most reviews first distA: (a, b) => milesTo(a, state.A) - milesTo(b, state.A), // closest to A first distB: (a, b) => milesTo(a, state.B) - milesTo(b, state.B), // closest to B first // "Fairest for both": take the LONGER of the two trips, smallest first fair: (a, b) => Math.max(milesTo(a, state.A), milesTo(a, state.B)) - Math.max(milesTo(b, state.A), milesTo(b, state.B)) }; const sortRow = right.append("div").style("margin-bottom", "6px"); sortRow.append("span").text("Sort by "); sortRow.append("select") .on("change", function() { state.sortBy = this.value; update(); }) .selectAll("option") .data([["rating", "Highest rating"], ["reviews", "Most reviews"], ["distA", "Closest to A"], ["distB", "Closest to B"], ["fair", "Fairest for both"]]) .join("option") .attr("value", d => d[0]) .text(d => d[1]); const listNote = right.append("div").style("color", "#666").style("margin-bottom", "4px"); const listDiv = right.append("div") .style("position", "relative") .style("max-height", `${Math.max(200, mapH - 70)}px`).style("overflow-y", "auto") .style("border", "1px solid #ddd").style("border-radius", "4px"); // 10. THE CHECK: a restaurant matches only if ALL of these are true function isMatch(d) { return milesTo(d, state.A) <= state.rA && // inside circle A milesTo(d, state.B) <= state.rB && // inside circle B state.ratings.has(bandKeyOf.get(d.id)) && // rating group is on state.buckets.has(bucketOf.get(d.id)) && // review group is checked (state.minScore === 0 || (d.score != null && d.score >= state.minScore)) && (state.keyword === "" || (d.address || "").toUpperCase().includes(state.keyword)); } // 11. UPDATE: runs after every user action. Only colors and the list change, so it stays fast. function update() { // Matches get their rating color; the rest turn faded gray const matches = []; dots.each(function(d) { const m = isMatch(d); if (m) matches.push(d); this.setAttribute("fill", m ? ratingColor(d.rating) : "#999"); this.setAttribute("opacity", m ? 0.95 : 0.2); }); matchSet = new Set(matches.map(d => d.id)); dots.filter(d => matchSet.has(d.id)).raise(); // matching dots above gray ones countLabel.text(`${matches.length.toLocaleString()} restaurants match`); // Sort the way the user chose and keep the first 50 (keeps the list fast) const top = matches.sort(sorters[state.sortBy]).slice(0, 50); const topIds = new Set(top.map(d => d.id)); // Clicked spot: highlight in place; add to the top only if not already in the 50 const selectedGroup = state.selected ? byLocation.get(state.selected) : []; const selectedIds = new Set(selectedGroup.filter(d => matchSet.has(d.id)).map(d => d.id)); const pinned = selectedGroup .filter(d => selectedIds.has(d.id) && !topIds.has(d.id)) .sort(byRating); const shown = pinned.concat(top); if (state.selected) showHalo(selectHalo, selectedGroup[0]); else selectHalo.style("display", "none"); // A helpful note above the list if (state.ratings.size === 0) { listNote.text("All rating groups are hidden. Click a rating button to show it."); } else if (matches.length === 0) { listNote.text("No matches. Try moving A and B closer or loosening a filter."); } else if (state.selected && selectedIds.size === 0) { listNote.text("The spot you clicked is outside your selection."); } else { listNote.text(`Showing ${top.length} of ${matches.length.toLocaleString()}` + (selectedIds.size ? ` · ${selectedIds.size} selected` : "")); } // Draw the list (another data join). Selected items get a purple background. const items = listDiv.selectAll("div.item") .data(shown, d => d.id) .join("div") .attr("class", "item") .style("padding", "6px 8px").style("border-bottom", "1px solid #eee") .style("cursor", "pointer") .style("background", d => selectedIds.has(d.id) ? "#f1ecfb" : null) .style("border-left", d => selectedIds.has(d.id) ? "4px solid #111" : "4px solid transparent") .html(d => `● ${d.name}
${d.rating ?? "–"} ★ · ${(d.reviews ?? 0).toLocaleString()} reviews · score ${d.score ?? "–"}
${d.address}
${milesTo(d, state.A).toFixed(1)} mi from A · ${milesTo(d, state.B).toFixed(1)} mi from B`) .on("mouseenter", (event, d) => showHalo(hoverHalo, d)) .on("mouseleave", () => hoverHalo.style("display", "none")) .on("click", (event, d) => select(locKey(d), false)) .order(); // Only right after a MAP click: scroll inside the list box to the selected item if (state.scrollRequest) { const first = items.filter(d => selectedIds.has(d.id)).node(); if (first) listDiv.node().scrollTop = Math.max(0, first.offsetTop - 40); state.scrollRequest = false; } } // Start: size the circles, color the dots, show the app drawRings(); update(); return root.node(); }3d:T11ef,## How the code works The app is one Observable cell divided into 11 numbered sections. **1. State: everything the user can change.** One object, `state`, stores every setting the user controls: the positions of A and B (in map pixels), the two radii (in miles), which rating groups and review groups are visible, the minimum inspection score, the address keyword, the sort order, and which location is currently selected. Every other part of the app reads from `state`, so changing a value and calling `update()` is all it takes to refresh the view. Because the app never re-runs as a whole, these values persist while the user interacts. This section also defines small helpers: `milesTo` converts a pixel distance into miles, and `byRating` sorts restaurants from highest to lowest rating. **2. Layout.** The page is built from HTML containers: a grid of filters on top, then a row with the map on the left and the list on the right. The map's display width is calculated from the notebook width (`width`) so the list always fits beside it. The map keeps its original coordinate system through an SVG `viewBox`, so all positions stay correct when it is scaled down. **3. Map.** The base map is an SVG ``. Restaurants are drawn with a D3 **data join** (`.data(restaurants).join("circle")`), which creates one circle per restaurant at the `x, y` position computed once when the data loaded. Dots are sorted from low to high rating so top-rated places are drawn on top. This section also creates two highlight rings (a black ring for the clicked spot, a white glow for the hovered one), the match count with a white outline for readability, and the legend, which uses the same colors as the rating filter. **4. Query circles A and B.** Each point is a group containing a large transparent circle (its radius), a small solid handle, and a label. Only the handle responds to the mouse; the large circle has `pointer-events: none` so users can still hover over the dots inside it. `d3.drag()` moves the handle, saves the new position in `state`, and calls `update()`. `moveTo()` does the same when a ZIP code is entered, and `drawRings()` resizes the circles when a radius slider changes. **5. Selection.** Clicking a dot or a list item stores that location in `state.selected`; clicking it again, or clicking empty map, clears it. A click on the map also asks the list to scroll inside its own box to the highlighted item. A click in the list does not scroll, so the list never jumps. **6. Tooltip.** On hover, the app looks up every restaurant at the same spot (`byLocation`), sorts them by rating, and shows up to five, with a note if there are more. Each entry shows only the fields that are not missing. The tooltip also says whether the restaurant is inside or outside the current selection. It follows the mouse using `d3.pointer`. **7. Filter bar: reusable builders.** Small functions create each type of control so they all look and behave the same: `section()` for a titled block, `slider()` for a range input with a live value, `zipBox()` for the ZIP search, and `pills()` for single-choice buttons. **8. Filter bar: the controls.** Using those builders, this section creates the actual controls: the radius sliders with travel-time hints and ZIP boxes for A and B, the address keyword box, the rating toggles (colored like the dots and allowing several groups at once), the inspection score buttons, and the review-count checkboxes. Every control changes one value in `state` and then calls `update()`. **9. List of matches.** The list sits beside the map with a sort menu: highest rating, most reviews, closest to A, closest to B, or "Fairest for both" (the shortest longer trip). Each list item shows the rating color, name, rating, reviews, score, address, and distance from A and B. Hovering over an item highlights its dot on the map. **10. The check.** `isMatch(d)` returns true only if a restaurant passes every condition: it is inside circle A, inside circle B, in a visible rating group, in a visible review group, at or above the minimum score, and its address contains the keyword. **11. Update.** `update()` runs after every interaction. It checks each restaurant with `isMatch`, colors matches by rating and grays out the rest, and draws matches above gray dots. It then updates the count, the top 50 matches in the chosen order, and the selection highlight. Only colors and the list change, while the 8,794 circles themselves are never redrawn, which keeps updates fast; in my testing, dragging A and B felt instant even with both radii at 25 miles.3e:Tcba,### Design decisions **Color by rating.** Matched restaurants are colored by rating so users can see at a glance where the top-rated places are concentrated. Restaurants outside the selection stay gray, as the assignment requires. I used a sequential palette (light yellow to deep purple) because rating is ordered and darker reads as "more." It changes in both hue and lightness so the groups are easy to tell apart, and higher-rated dots are drawn on top. **Rating groups.** I did not use whole-star groups because half of the restaurants (4,376) fall between 3.0 and 3.9, so one color would cover most of the map. Instead I used four groups of similar size. The same groups and colors appear in the dots, the legend, the filter buttons, and the list. The buttons are toggles, because a label like "2★+" was easy to misread as "2 stars." **Review groups.** The median restaurant has 135 reviews. My first idea (0–1,000, 1,000–3,000, …) would put 93% of restaurants in one group, so I set the boundaries based on the data's distribution instead. I named the groups by popularity, not quality, because a high review count does not mean the reviews are positive. **Inspection score buttons.** The median score is 92, and 75% of restaurants scored 85 or above. On a 0–100 slider the useful range was squeezed into a small area at the end, so I replaced it with buttons (Any, 85+, 90+, 95+). **Radius range (0.25–25 miles).** The map covers about 51 × 42 miles, so a 25-mile radius spans nearly the full width of the map. The minimum, 0.25 miles, is about a 5-minute walk, the shortest distance that is useful for choosing a restaurant. **Dragging by the center handle.** Users drag only the small center handle, not the whole circle. If the big circle captured the mouse, it would block hovering over the restaurants inside it, which are exactly the ones users care about. The big circle lets the mouse pass through to the dots. **Tooltip for shared locations.** Some addresses, such as malls and campuses, hold up to 101 restaurants at exactly the same spot, so their dots sit on top of each other and only the top one would be visible. The tooltip lists every restaurant at that spot, highest rated first, and says how many are inside the selection, so no restaurant is hidden. **List beside the map and linked views.** I placed the list next to the map so users can compare options and make a final choice without scrolling. "Fairest for both" ranks restaurants by the longer of the two trips, so neither person has to travel far. **ZIP search and travel times.** The map cannot zoom, so it is hard to place A or B at an exact location. Users can type a ZIP code instead, and the point moves to the center of that ZIP's restaurants. I also translated each radius into an approximate travel time, because "4 miles" is harder to picture than "an 8-minute drive." **Code structure.** Settings that never change (rating groups, review groups, ZIP centers) are in separate cells. The interactive app is one cell on purpose: in Observable, a cell re-runs whenever an input it depends on changes, so splitting the map and controls would reset A and B on every click. Interactions only change dot colors and the list, which keeps updates fast.3f:T69d,### Development process I spent roughly 12-14 hours in total, including time learning JavaScript and HTML for the first time. The most time went to fixing syntax using claude. The hardest part for me was figuring out state management—specifically keeping elements A and B pinned in place while everything else dynamically updated. Because Observable automatically re-runs a cell whenever a dependent variable changes, our initial setup reset and lost A and B’s positions every single time a user moved a slider. I fixed this by consolidating the app into a single cell using a dedicated state object. That way, the application builds once, and subsequent slider movements only trigger a fast recoloring pass rather than a full re-render. The most complex single function I wrote was update(). On every mouse movement, it evaluates all 8,794 restaurants against six active filters, recolors the data points, sorts the matching results, preserves the highlighted or pinned status of a clicked restaurant, and conditionally auto-scrolls the list view only if the click originated from the map. A couple of other technical edge cases caused major headaches along the way: The string "null" bug: Missing dataset values were initially imported as the text string "null" instead of actual empty values. Because of this, the filter silently passed bad rows, incorrectly boosting the visible row count to 9,709 instead of the actual 8,794. Overlapping coordinates: Certain map points contained up to 101 overlapping restaurants. Hovering over a single coordinate couldn't just query one item, so I had to rebuild hover detection to pull the entire group at that spot using a byLocation lookup.40:[{"id":"2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","href":"https://static.observableusercontent.com/files/2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","name":"sf_map.png","type":"image/png","lastModified":1760293845215.455,"size":1245599},{"id":"320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","href":"https://static.observableusercontent.com/files/320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","name":"sccRestaurantsSynth2026.csv","type":"text/csv","lastModified":1793177453716,"size":1051794}] 38:{"id":"5703c5b84a8e4b54","slug":"assignment-3-santa-clara-county-restaurant-finder","title":"Assignment 3: Santa Clara County Restaurant Finder","thumbnail":"c2aba97f8a571dd27c0232cea89d408317fe63921074a0ff2fd90d13687b4c82","access_level":"public","create_time":"$D2026-10-28T08:38:48.890Z","update_time":"$D2026-10-31T00:30:20.280Z","view_time":null,"first_public_time":"$D2026-10-31T00:09:10.769Z","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":"168cf1a9c0dbe217","login":"anujin","name":"Anujin Naranbaatar","avatar_url":"https://avatars-next.observableusercontent.com/2cd3c066b5034dfb9d6afa57c48c8e7e78e2e53184b5ee1ba5aa71ec82ae23cb","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":426,"publish_version":426,"role":null,"authored":false,"authors":[{"type":"individual","id":"5caf22a0e1ee581f","login":"anujin","name":"Anujin Naranbaatar","avatar_url":"https://avatars-next.observableusercontent.com/2cd3c066b5034dfb9d6afa57c48c8e7e78e2e53184b5ee1ba5aa71ec82ae23cb","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"168cf1a9c0dbe217","login":"anujin","name":"Anujin Naranbaatar","avatar_url":"https://avatars-next.observableusercontent.com/2cd3c066b5034dfb9d6afa57c48c8e7e78e2e53184b5ee1ba5aa71ec82ae23cb","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":"Assignment 3: Santa Clara County Restaurant Finder","cells":[{"id":104,"value":"# Assignment 3: Santa Clara County Restaurant Finder\n\nDrag the **A** and **B** handles (or type a ZIP code) to set two starting points, and use the sliders to set how far each person is willing to travel. Restaurants inside **both** circles that pass the filters are colored by rating; all others are grayed out. Hover over any dot for details, and click a dot or a list item to highlight it in both views.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$3d","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"## Write-up\n\n### Overview\nThis app helps two people in different places find a restaurant that works for both of them. Each person sets a point (A or B) and how far they are willing to travel. The app shows the restaurants within reach of both, filtered by their preferences.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"### How to use it\n- **Move A and B** by dragging the small center handle, or type a ZIP code to jump there.\n- **Set each radius** with its slider; the hint below translates it into an approximate walking or driving time.\n- **Filter** by rating group, inspection score, number of reviews, or an address keyword.\n- **Hover** over any dot for details. **Click** a dot or a list item to highlight it in both views; click empty map to clear.\n- **Sort** the list by rating, number of reviews, distance to A or B, or \"Fairest for both.\"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"$3e","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"### Data cleaning and limitations\n- Missing values in the CSV were stored as the text \"null\" rather than empty cells, so my first filter kept every row. I fixed this by keeping only rows whose latitude and longitude are numbers.\n- 915 of 9,709 restaurants have no location, so 8,794 are mapped. In the full dataset, 124 rows are missing an inspection score and 31 a placard; the tooltip skips missing fields.\n- Ratings and review counts are synthetic, so patterns in them may not reflect real restaurants.\n- Review count measures popularity, not quality.\n- Distances and travel times are straight-line estimates, not real routes.\n- ZIP centers are the average position of that ZIP's restaurants, not the ZIP's geographic center.\n- Resizing the browser window re-runs the app and resets A and B.\n- The list shows the top 50 matches to stay fast while dragging.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$3f","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"## Settings","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"// Rating groups: one source of truth for dot colors, legend, filter buttons and list.\n// Four groups of similar size; whole stars would put half the data (4,376) in one group.\nratingBands = [\n {key: \"r45\", min: 4.5, label: \"4.5–5.0★\", color: \"#38049a\", text: \"#fff\"},\n {key: \"r40\", min: 4.0, label: \"4.0–4.4★\", color: \"#a11b9b\", text: \"#fff\"},\n {key: \"r35\", min: 3.5, label: \"3.5–3.9★\", color: \"#e16462\", text: \"#fff\"},\n {key: \"rlow\", min: 0, label: \"Under 3.5★\", color: \"#feba2c\", text: \"#222\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// Returns the dot color for a rating (light gray if the rating is missing).\nratingColor = r => r == null ? \"#bbb\" : ratingBands.find(b => r >= b.min).color","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"// Which rating group each restaurant belongs to. Computed once, so filtering stays fast.\nbandKeyOf = new Map(restaurants.map(d =>\n [d.id, d.rating == null ? null : ratingBands.find(b => d.rating >= b.min).key]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"// Review-count groups, based on the data's distribution (median = 135 reviews).\n// Named by popularity, not quality: a high count does not mean the reviews are positive.\nreviewBuckets = [\n {key: \"few\", label: \"Few (under 50)\", test: n => n < 50},\n {key: \"some\", label: \"Some (50–199)\", test: n => n >= 50 && n < 200},\n {key: \"many\", label: \"Many (200–999)\", test: n => n >= 200 && n < 1000},\n {key: \"popular\", label: \"Very popular (1,000+)\", test: n => n >= 1000}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"// Which review group each restaurant belongs to. Computed once.\nbucketOf = new Map(restaurants.map(d =>\n [d.id, reviewBuckets.find(b => b.test(d.reviews ?? 0)).key]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"// ZIP code -> average position of that ZIP's restaurants.\n// Lets users place A or B by typing a ZIP, since the map cannot zoom.\nzipCenter = {\n const zipOf = d => ((d.address || \"\").match(/(\\d{5})(?:-\\d{4})?\\s*$/) || [])[1];\n return d3.rollup(\n restaurants.filter(d => zipOf(d)),\n v => ({x: d3.mean(v, d => d.x), y: d3.mean(v, d => d.y), n: v.length}),\n zipOf);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"// Key for \"same spot on the map\": groups restaurants that share a location.\nlocKey = d => `${d.x.toFixed(1)},${d.y.toFixed(1)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"## Data","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"// Load the CSV (attached to this notebook with the paperclip)\nraw = FileAttachment(\"sccRestaurantsSynth2026.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":" // Clean the data: keep rows with a real location (\"null\" is stored as text),\n// convert lat/lon to map pixels once, and turn \"null\" text into real null values.\nrestaurants = raw\n .filter(d => typeof d.Latitude === \"number\" && typeof d.Longitude === \"number\")\n .map((d, i) => {\n const [x, y] = projection([d.Longitude, d.Latitude]);\n return {\n id: i,\n name: d[\"Facility Name\"],\n address: d.Address,\n placard: d[\"Latest placard color\"] === \"null\" ? null : d[\"Latest placard color\"],\n score: d[\"Latest Score\"] === \"null\" ? null : d[\"Latest Score\"],\n rating: d.Rating,\n reviews: d[\"Number of reviews\"],\n x, y\n };\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"// Group restaurants that share the same spot (used by the tooltip)\nbyLocation = d3.group(restaurants, locKey)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"// How many map pixels equal one mile (1 degree of latitude ≈ 69 miles)\npxPerMile = {\n const lon = -121.9, lat = 37.35;\n const y1 = projection([lon, lat])[1];\n const y2 = projection([lon, lat + 1 / 69])[1];\n return Math.abs(y1 - y2);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"## Map setup (adapted from the course's starter snippet)","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"// The map image is 1664 × 1393 px; show it at half size\nmapScale = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"mapWidth = 1664 / mapScale","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"mapHeight = 1393 / mapScale","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"// Longitude range covered by the map image (from the assignment page)\nlongitudeRange = [-122.20085766666666, -121.27442433333333]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"// Latitude range covered by the map image (from the assignment page)\nlatitudeRange = [36.91311264279123, 37.53067882428926]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"// A line from the map's bottom-left corner to its top-right corner, used to fit the projection\nmapFrameGeoJSON = ({\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [longitudeRange[0], latitudeRange[0]],\n [longitudeRange[1], latitudeRange[1]]\n ]\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"// Converts [longitude, latitude] into [x, y] pixels on the map image\nprojection = d3.geoMercator()\n .fitExtent([[0, 0], [mapWidth, mapHeight]], mapFrameGeoJSON)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"// Straight-line distance between two points, in pixels\ndistance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"// Radius in miles -> rough travel time.\n// Assumes straight-line distance, walking 3 mph and driving 30 mph.\ntravel = mi => mi <= 1.5\n ? `≈ ${Math.round(mi * 20)} min walk`\n : `≈ ${Math.round(mi * 2)} min drive`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W40","stdlib":"1"}} 33:null