34:["$","title",null,{"children":"Assignment 3 Santa Clara County Restaurants | Yash | Observable"}] 3c:T2be6,{ // Used the Observable Chat AI functionality to replace parts of the template, like map size and latitude/ longitude range const container = d3.create("div").attr("class", "app"); const svg = container .append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid #e3e5e8"); svg .append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("xlink:href", await FileAttachment("sccRestaurantsMap2026.png").url()); const data = d3 .csv( await FileAttachment("sccRestaurantsSynth2026.csv").url(), (d) => { // Normalize missing values const value = k => (["", "null", "N/A"].includes(d[k]) ? null : d[k]); const num = k => (value(k) == null ? null : +d[k]); return { name: d["Facility Name"], address: d["Address"], // Placard values "Pass" and "Closure" have asterisks in the raw file, so remove them // I asked AI to make the regex placard: value("Latest placard color")?.replace(/\s*\*$/, "") ?? "Unknown", score: num("Latest Score"), rating: num("Rating"), reviews: num("Number of reviews"), lat: num("Latitude"), lon: num("Longitude"), text: `${d["Facility Name"]} ${d["Address"]}`.toLowerCase() }; } ) .then((data) => { const PLACARDS = ["Green", "Yellow", "Red", "Pass", "Closure", "Unknown"]; const PLACARD_COLOR = { Green: "#3d9a5f", Yellow: "#d9a400", Red: "#c94040", Pass: "#3d9a5f", Closure: "#c94040" }; const RADIUS = [0.2, 12]; const fmt = d3.format(","); const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); const val = input => +input.property("value"); // One site per unique location, projected once. const located = data.filter(d => d.lat != null && d.lon != null); const sites = Array.from(d3.group(located, d => `${d.lat},${d.lon}`).values(), list => { const { lat, lon } = list[0]; const [x, y] = projection([lon, lat]); return { lat, lon, x, y, list, passing: list, on: false }; }); // --- Header and controls --- const top = container.insert("div", "svg").attr("class", "top"); const header = top.append("header"); const count = header.append("span").attr("class", "count"); header.append("span").attr("class", "note") .text(`${fmt(data.length - located.length)} without coordinate data aren’t mapped`); const controls = top.append("div").attr("class", "controls"); function range(label, [min, max], value, step, format) { const row = controls.append("label").attr("class", "control"); row.append("span").text(label); const input = row.append("input") .attr("type", "range").attr("min", min).attr("max", max).attr("step", step) .property("value", value); const output = row.append("output"); input.on("input.label", () => output.text(format(val(input)))); input.dispatch("input"); return input; } const radiusA = range("Radius A", RADIUS, 4, 0.1, d => `${d.toFixed(1)} mi`); const radiusB = range("Radius B", RADIUS, 4, 0.1, d => `${d.toFixed(1)} mi`); const minRating = range("Min rating", [1, 5], 1, 0.1, d => `${d.toFixed(1)} ★`); const minScore = range("Min score", [0, 100], 0, 1, d => `${d}`); const search = controls.append("label").attr("class", "control wide") .call(row => row.append("span").text("Search")) .append("input").attr("type", "search").attr("placeholder", "stanford, el camino real"); const placard = controls.append("div").attr("class", "control wide") .call(row => row.append("span").text("Placard")) .append("div").attr("class", "chips"); placard.selectAll("label").data(PLACARDS).join("label").attr("class", "chip") .call(chip => chip.append("input").attr("type", "checkbox").property("checked", true)) .call(chip => chip.append("span").text(d => d)); // --- Map layers --- const dots = svg.append("g").attr("class", "dots") .selectAll("circle").data(sites).join("circle") .attr("cx", s => s.x) .attr("cy", s => s.y) .attr("r", 1.6); const clip = DOM.uid("lens"); const clipCircle = svg.append("clipPath").attr("id", clip.id).append("circle"); const lens = svg.append("circle").attr("class", "lens").attr("clip-path", clip); const tip = container.append("div").attr("class", "tip"); // -- Query circles -- const at = (name, lon, lat, slider) => { const [x, y] = projection([lon, lat]); return { name, x, y, slider }; }; const circles = [at("A", -122.17006, 37.42766, radiusA), at("B", -122.1, 37.4, radiusB)]; const center = c => { const [lon, lat] = projection.invert([c.x, c.y]); return { lat, lon }; }; const milesPerPx = c => { const [lon1, lat1] = projection.invert([c.x, c.y]); const [lon2, lat2] = projection.invert([c.x, c.y + 100]); return haversineMiles(lat1, lon1, lat2, lon2) / 100; }; const radiusPx = c => val(c.slider) / milesPerPx(c); let dragging = false, frameId = null, attrsDirty = true; const drag = () => d3.drag().container(svg.node()) .on("start.state", () => { dragging = true; hide(); }) .on("end.state", () => { dragging = false; }); const query = svg.selectAll(".query").data(circles).join("g").attr("class", "query"); query.append("circle").attr("class", "area") .call(drag().on("drag", (e, c) => { c.x = clamp(e.x, 0, mapWidth); c.y = clamp(e.y, 0, mapHeight); update(); })); query.append("circle").attr("class", "edge") .call(drag().subject(e => ({ x: e.x, y: e.y })).on("drag", (e, c) => { const miles = clamp(distance(c.x, c.y, e.x, e.y) * milesPerPx(c), ...RADIUS); c.slider.property("value", miles).dispatch("input"); // keeps slider, label and map in sync })); query.append("text").attr("class", "label").text(c => c.name); const focus = svg.append("circle").attr("class", "focus").attr("r", 5).style("display", "none"); // --- Filtering --- const atLeast = (v, min, floor) => min <= floor || (v != null && v >= min); function filterAttributes() { const terms = search.property("value").toLowerCase().split(",").map(t => t.trim()).filter(Boolean); const allowed = new Set(placard.selectAll("input").filter(function () { return this.checked; }).data()); const rating = val(minRating), score = val(minScore); const keep = d => allowed.has(d.placard) && (!terms.length || terms.some(t => d.text.includes(t))) && atLeast(d.rating, rating, 1) && atLeast(d.score, score, 0); for (const s of sites) s.passing = s.list.filter(keep); } function update(attrs = false) { attrsDirty ||= attrs; frameId ??= requestAnimationFrame(render); } function render() { frameId = null; if (attrsDirty) { filterAttributes(); attrsDirty = false; } const [a, b] = circles.map(c => ({ ...center(c), miles: val(c.slider) })); const inside = (s, c) => haversineMiles(s.lat, s.lon, c.lat, c.lon) <= c.miles; let n = 0; for (const s of sites) { s.on = s.passing.length > 0 && inside(s, a) && inside(s, b); if (s.on) n += s.passing.length; } // Touch only the points whose state changed. dots.filter(s => s.on !== s.drawn).classed("on", s => (s.drawn = s.on)); place(); count.html(`${fmt(n)} of ${fmt(located.length)} restaurants`); } function place() { const [A, B] = circles; query.attr("transform", c => `translate(${c.x},${c.y})`).selectAll("circle").attr("r", radiusPx); lens.attr("cx", A.x).attr("cy", A.y).attr("r", radiusPx(A)); clipCircle.attr("cx", B.x).attr("cy", B.y).attr("r", radiusPx(B)); } // -- Hover -- // Before, I had it so that the nearest restuarant to the cursor had its tooltip shown, // but it was far too finnicky to hover over a specific location normally, // so I asked the AI for ways to aggregate restuarants near the cursor. // It suggested this method, so I ran with it, and it seems to work fine. const delaunay = d3.Delaunay.from(sites, s => s.x, s => s.y); svg.on("pointermove", e => { if (dragging) return; const [x, y] = d3.pointer(e); // map coordinates const [cx, cy] = d3.pointer(e, container.node()); // container coordinates const s = sites[delaunay.find(x, y)]; s && distance(s.x, s.y, x, y) < 8 ? show(s, cx - x, cy - y) : hide(); }).on("pointerleave", hide); /* svg.on("pointermove", e => { if (dragging) return; const [x, y] = d3.pointer(e); const s = sites[delaunay.find(x, y)]; s && distance(s.x, s.y, x, y) < 8 ? show(s) : hide(); }).on("pointerleave", hide); */ const title = t => t.toLowerCase().replace(/(^|[\s/(-])\S/g, c => c.toUpperCase()); const details = d => [ d.rating != null && `${d.rating.toFixed(1)} ★`, d.reviews != null && `${fmt(d.reviews)} reviews`, d.score != null && `Score of ${d.score}`, d.placard !== "Unknown" && `${d.placard}` ].filter(Boolean).join(" · "); function show(s, ox, oy) { const active = d => s.on && s.passing.includes(d); const items = d3.sort(s.list, d => !active(d)); const shown = items.slice(0, 4), rest = items.length - shown.length; tip.html(""); tip.append("div").attr("class", "addr").text(s.list[0].address); tip.selectAll(".item").data(shown).join("div") .attr("class", d => (active(d) ? "item" : "item off")) // grey out filtered restuarants, 'cause why not .call(item => item.append("div").attr("class", "name").text(d => title(d.name))) .call(item => item.append("div").attr("class", "meta").html(details)); if (rest) tip.append("div").attr("class", "more").text(`+ ${rest} more at this address`); const dx = s.x > mapWidth * 0.6 ? "calc(-100% - 12px)" : "12px"; const dy = s.y > mapHeight * 0.6 ? "calc(-100% - 12px)" : "12px"; tip.style("left", `${ox + s.x}px`).style("top", `${oy + s.y}px`) .style("transform", `translate(${dx}, ${dy})`).style("opacity", 1); focus.attr("cx", s.x).attr("cy", s.y).style("display", null); } function hide() { tip.style("opacity", 0); focus.style("display", "none"); } for (const input of [search, minRating, minScore]) input.on("input.app", () => update(true)); placard.on("change", () => update(true)); for (const input of [radiusA, radiusB]) input.on("input.app", () => update()); invalidation.then(() => cancelAnimationFrame(frameId)); render(); }); return container.node(); }3d:Tc7f,html``3e:[{"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":1792905490000,"size":1051794},{"id":"47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","href":"https://static.observableusercontent.com/files/47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","name":"sccRestaurantsMap2026.png","type":"image/png","lastModified":1792951323000,"size":832847}] 38:{"id":"e09927cdb02a6288","slug":"assignment-3-santa-clara-county-restaurants","title":"Assignment 3 Santa Clara County Restaurants","thumbnail":"7f102587ad59696964257f77d222bc53fbae1a2c7bc3fefbf014c43b35149e43","access_level":"public","create_time":"$D2026-10-25T17:56:52.451Z","update_time":"$D2026-10-26T15:29:37.917Z","view_time":null,"first_public_time":"$D2026-10-26T15:41:10.606Z","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":"1c9a1ce810efacf0","login":"yashuap","name":"Yash","avatar_url":"https://avatars-next.observableusercontent.com/eef5cb95caa7a977e323189831f2e9c03a177613e0a569ac75c06dd1ed4825b2","tier":"pro_2026","bio":"","followed_by_you":false,"follows_you":false},"version":121,"publish_version":121,"role":null,"authored":false,"authors":[{"type":"individual","id":"636ac52ec479c507","login":"yashuap","name":"Yash","avatar_url":"https://avatars-next.observableusercontent.com/eef5cb95caa7a977e323189831f2e9c03a177613e0a569ac75c06dd1ed4825b2","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"1c9a1ce810efacf0","login":"yashuap","name":"Yash","avatar_url":"https://avatars-next.observableusercontent.com/eef5cb95caa7a977e323189831f2e9c03a177613e0a569ac75c06dd1ed4825b2","tier":"pro_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 Restaurants","cells":[{"id":0,"value":"# Assignment 3 Santa Clara County Restaurants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"### Definitions & Utility Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"mapWidth = 1664 / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mapHeight = 1393 / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"longitudeRange = [-122.20085766666666, -121.27442433333333];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"latitudeRange = [36.91311264279123, 37.53067882428926];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"// Calculate Euclidean distance between two points\ndistance = (x1, y1, x2, y2) => Math.hypot(x2 - x1, y2 - y1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// Calculate distance in miles using Haversine formula\nhaversineMiles = (lat1, lon1, lat2, lon2) => {\n const R = 3958.8; // Earth radius in miles\n const toRad = d => (d * Math.PI) / 180;\n const dLat = toRad(lat2 - lat1);\n const dLon = toRad(lon2 - lon1);\n const a = Math.sin(dLat/2)**2 + \n Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon/2)**2;\n return 2 * R * Math.asin(Math.sqrt(a));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"### Map Projection Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"// GeoJSON frame for map bounds\nmapFrameGeoJSON = {\n const coords = `[[${longitudeRange[0]}, ${latitudeRange[0]}], [${longitudeRange[1]}, ${latitudeRange[1]}]]`;\n return JSON.parse(`{\"type\":\"Feature\",\"geometry\":{\"type\":\"LineString\",\"coordinates\": ${coords}}}`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// D3 geoMercator projection fitted to San Francisco map\nprojection = d3.geoMercator()\n .fitExtent([[0, 0], [mapWidth, mapHeight]], mapFrameGeoJSON)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"## Commentary\n\nThe process was actually fairly straightforward, all things considered, especially when the project was broken down into smaller subtasks. The whole project took around 8 hours of work (more or less), with the assistance of AI in problem spots (hovering and filtering functionality took the most time, I’d say). Places where I used AI have been marked in comments in the code above, with two additions: the hover functionality was not working at all in my browser, so I had to use AI to troubleshoot it (the tooltip was rendering offscreen), and I used it to write the tenplate of the CSS (asked it for a minimalist style, which I then edited to my liking).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null