44:["$","title",null,{"children":"CS 448B Assignment 3 | Lisa Ing | Observable"}] 4c:T8c8,map = { const container = d3.create("div") .style("position", "relative"); const baseRadius = 2; const baseFill = "gray"; const highlightFill = "mediumpurple"; let highlighted = new Set(); const fillOf = d => highlighted.has(d) ? highlightFill : baseFill; const radiusOf = d => highlighted.has(d) ? baseRadius + 1.5 : baseRadius; const svg = container.append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid black"); svg.append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("href", "https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png"); const layer = svg.append("g"); // display data in tooltip upon mouse hover const tooltip = container.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("border-radius", "4px") .style("background", "white") .style("padding", "6px 8px") .style("font", "12px sans-serif") .style("opacity", 0); const node = container.node(); node.update = (data, intersection) => { highlighted = intersection; layer.selectAll("circle") .data(data) .join("circle") .attr("cx", d => projection([d.longitude, d.latitude])[0]) .attr("cy", d => projection([d.longitude, d.latitude])[1]) .attr("r", radiusOf) .attr("fill", fillOf) .attr("stroke", "white") .attr("stroke-width", 0.5) .on("mouseover", function(event, d) { d3.select(this).attr("fill", "black"); tooltip.style("opacity", 1) .html(`${d.name}
${d.address}
Placard: ${d.color}; Score: ${d.score}
Yelp: ${d.rating} (${d.reviews} reviews)`); }) .on("mousemove", (event) => { const [x, y] = d3.pointer(event, container.node()); tooltip.style("left", `${x + 10}px`).style("top", `${y + 10}px`); }) .on("mouseout", function(event, d) { d3.select(this).attr("r", radiusOf(d)).attr("fill", fillOf(d)); tooltip.style("opacity", 0); }); layer.selectAll("circle").filter(d => highlighted.has(d)).raise(); }; return node; }4d:T7b4,searchCircle = ({ radiusInput, color = "cornflowerblue", x = mapWidth / 2, y = mapHeight / 2, invalidation }) => { const state = {x, y, r: radiusInput.value}; const svg = d3.create("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("position", "absolute") .style("left", 0) .style("top", 0) .style("pointer-events", "none"); const ring = svg.append("circle") .attr("fill", color) .attr("fill-opacity", 0.1) .attr("stroke", color) .attr("stroke-width", 2); const center = svg.append("circle") .attr("r", 7) .attr("fill", color) .attr("stroke", "white") .attr("stroke-width", 2) .style("cursor", "move") .style("pointer-events", "all"); const node = svg.node(); function draw() { ring.attr("cx", state.x).attr("cy", state.y).attr("r", state.r); center.attr("cx", state.x).attr("cy", state.y); } // set node to state and dispath the input event function update() { node.value = {...state}; node.dispatchEvent(new Event("input", {bubbles: true})); } // update every 100 ms let timer = null, dirty = false; function updateThrottled() { if (timer) { dirty = true; return; } update(); timer = setTimeout(() => { timer = null; if (dirty) { dirty = false; updateThrottled(); } }, 100); } center.call(d3.drag() .subject(() => ({x: state.x, y: state.y})) .on("drag", (event) => { state.x = Math.max(0, Math.min(mapWidth, event.x)); state.y = Math.max(0, Math.min(mapHeight, event.y)); draw(); updateThrottled(); // update union highlight while dragging }) .on("end", update)); const onRadius = () => { state.r = radiusInput.value; draw(); update(); }; radiusInput.addEventListener("input", onRadius); if (invalidation) invalidation.then(() => radiusInput.removeEventListener("input", onRadius)); node.value = {...state}; draw(); return node; }4e:Tac3,## Write-Up #### Notebook Features 1. Users are able to hover over restaurant data points to view a tooltip containing the name of the restaurant, its address, placard color, inspection score, and Yelp review information. 2. Users can use two draggable search circles to find locations that lie within the intersection of those circles. The radii of the search circles are controlled by sliders. The intersection filter is indicated by the purple highlight, signaling that a restaurant is within the radius of the red search circle and the blue search circle. 3. Users can filter by address keywords, ratings, and number of reviews. The keyword address filtered is controlled by a query search bar, while the rating and review filters are controlled by their respective min/max sliders. #### How much time did I spend developing this application? In total, I spent roughly 15-20 hours developing this application. I worked by myself for this assignment and chose to implement it using JavaScript and D3 in Observable. #### What aspects took the most time? Out of the implementation requirements, allowing users to specify two draggable search circles with adjustable radii and dynamically highlighting their intersection was the most challenging for me. With over 9700 data points to update and account for, my notebook was quickly bogged down with updating the svg rendering while the search circle was dragged across the map. I resolved this by implementing updateThrottled(), a helper function that calls the update() function every 100 ms, achieving an interactive rate for the search circles. #### Limitations Since some of the newer restaurants do not yet have inspection scores, I decided to omit this filter to prioritize implementing the other filters. Within the highlighted intersection of the search circles, the color purple is used to encode the intersection, but the addresses are not displayed in list form, so currently the only way to access data in the intersection is to hover over the circles highlighted purple. #### Resources I referred to this Observable lesson on interaction to understand how to implement a tooltip: https://observablehq.com/@observablehq/lesson-5-interaction. The starter code contained last year's map image and projection variables, so I asked Claude for guidance on how to update the starter code for this year's assignment. Specifically, this included how to update the map projection setup and how to declare global variables vs. scoped variables isolated in Observable cells. Additionally, I referred to the D3 Exercises provided in class for guidance on implementing the search circle logic and drawing the restaurant data points on the map: https://observablehq.com/@stanfordvis/d3-excercises. 4f:[{"id":"320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","href":"https://static.observableusercontent.com/files/320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","name":"sccRestaurantsSynth2026.csv","type":"text/csv","lastModified":1792648563588,"size":1051794}] 48:{"id":"77fbf8b5ba979acb","slug":"cs-448-b-assignment-3","title":"CS 448B Assignment 3","thumbnail":"32db2b8e068642de9e0adb9fddcf5cfb4fed14aacf39a60cc4a5b70fa0efa004","access_level":"public","create_time":"$D2026-10-21T05:43:27.854Z","update_time":"$D2026-10-26T10:20:52.902Z","view_time":null,"first_public_time":"$D2026-10-26T10:25:15.978Z","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":"e3d6da0aae689f86","login":"lisaing10","name":"Lisa Ing","avatar_url":"https://avatars-next.observableusercontent.com/96e5b798ade1de40266ea33c7aea78a82b19289ea2dc1d79ba8a63c3d99953b4","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":448,"publish_version":448,"role":null,"authored":false,"authors":[{"type":"individual","id":"70aaf0e2236e8e24","login":"lisaing10","name":"Lisa Ing","avatar_url":"https://avatars-next.observableusercontent.com/96e5b798ade1de40266ea33c7aea78a82b19289ea2dc1d79ba8a63c3d99953b4","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"e3d6da0aae689f86","login":"lisaing10","name":"Lisa Ing","avatar_url":"https://avatars-next.observableusercontent.com/96e5b798ade1de40266ea33c7aea78a82b19289ea2dc1d79ba8a63c3d99953b4","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":"CS 448B Assignment 3","cells":[{"id":0,"value":"# CS 448B Assignment 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":126,"value":"html`

\n ${map}${viewof circleA}${viewof circleB}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof radiusA = Inputs.range([5, 300], {label: \"Radius A (px)\", step: 1, value: 60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"viewof radiusB = Inputs.range([5, 300], {label: \"Radius B (px)\", step: 1, value: 60})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// Load in the restaurant data\n// Data Fields: Facility Name,Address,Latest placard color,Latest Score,Distance,Latitude,Longitude,Rating,Number of reviews\n\nrestaurantData = {\n const raw_csv = await FileAttachment(\"sccRestaurantsSynth2026.csv\").csv();\n return raw_csv.map(row => ({\n name: row[\"Facility Name\"],\n address: row[\"Address\"],\n color: row[\"Latest placard color\"],\n score: +row[\"Latest Score\"],\n distance: +row[\"Distance\"],\n latitude: +row[\"Latitude\"],\n longitude: +row[\"Longitude\"],\n rating: +row[\"Rating\"],\n reviews: +row[\"Number of reviews\"]\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"// highlight points intersecting both search circles\nintersection = {\n const inside = (p, c) => Math.hypot(p[0] - c.x, p[1] - c.y) <= c.r;\n return new Set(filteredData.filter(d => {\n const p = projection([d.longitude, d.latitude]);\n return inside(p, circleA) && inside(p, circleB);\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"viewof circleA = searchCircle({\n radiusInput: viewof radiusA,\n color: \"cornflowerblue\",\n x: mapWidth / 3,\n invalidation\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof circleB = searchCircle({\n radiusInput: viewof radiusB,\n color: \"salmon\",\n x: (2 * mapWidth) / 3,\n invalidation\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"### Filters","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"// filter by keywords in address\nviewof addressQuery = Inputs.text({label: \"Address contains\", placeholder: \"e.g. El Camino\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"rateQuery = d3.extent(restaurantData, d => d.rating)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"// filter by rating\nviewof ratingRange = Inputs.form([\n Inputs.range(rateQuery, {label: \"Min Rating\", step: 1, value: rateQuery[0]}),\n Inputs.range(rateQuery, {label: \"Max Rating\", step: 1, value: rateQuery[1]})\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"reviewQuery = d3.extent(restaurantData, d => d.reviews)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"// filter by amount of reviews\nviewof reviewRange = Inputs.form([\n Inputs.range(reviewQuery, {label: \"Min Number of Reviews\", step: 1, value: reviewQuery[0]}),\n Inputs.range(reviewQuery, {label: \"Max Number of Reviews\", step: 1, value: reviewQuery[1]})\n])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"filteredData = restaurantData.filter(d =>\n d.address.toLowerCase().includes(addressQuery.trim().toLowerCase()) &&\n d.rating >= ratingRange[0] && d.rating <= ratingRange[1] &&\n d.reviews >= reviewRange[0] && d.reviews <= reviewRange[1]\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"// highlight intersection of the search circles\ndrawPoints = map.update(filteredData, intersection)","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":91,"value":"mapScale = 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"mapWidth = 1664 / mapScale","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 / mapScale","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.52876879101329, -122.34501499128038];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"latitudeRange = [37.69947941416328, 37.81633202723721];","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":92,"value":"projection = {\n const longitudeRange = [-122.20085766666666, -121.27442433333333];\n const latitudeRange = [36.91311264279123, 37.53067882428926];\n\n const mapFrameGeoJSON = {\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [longitudeRange[0], latitudeRange[0]],\n [longitudeRange[1], latitudeRange[1]]\n ]\n }\n };\n\n return d3.geoMercator()\n .fitExtent([[0, 0], [mapWidth, mapHeight]], mapFrameGeoJSON);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"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":"1"}} 24:null