43:["$","title",null,{"children":"Assignment 3: Mario Portillo | Mario Portillo | Observable"}] 4b:T710,

Food Near Stanford

Circle Adjusters:

Circle 1:

Circle 2:

Ratings 5-1:

Inspection Rating:

Green
Yellow
Red

4c:Tf31,restaurantMap = { // Create the map container and SVG. const container = d3.create("div") .style("position", "relative") .style("width", mapWidth + "px"); const svg = container .append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid black") .style("display", "block"); svg .append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("xlink:href", await FileAttachment("sccRestaurantsMap2026.png").url()); // CSV column names are case-sensitive: Longitude and Latitude. const data = ( await FileAttachment("sccRestaurantsSynth2026.csv") .csv({ typed: true }) ).filter(d => Number.isFinite(d.Longitude) && Number.isFinite(d.Latitude) && d.Longitude >= longitudeRange[0] && d.Longitude <= longitudeRange[1] && d.Latitude >= latitudeRange[0] && d.Latitude <= latitudeRange[1] ); // Create one HTML details card, centered over the map. const tooltip = container.append("div") .attr("class", "restaurant-tooltip") .attr("role", "tooltip") .style("position", "absolute") .style("left", "75%") .style("top", "25%") .style("transform", "translate(-50%, -50%)") .style("width", "min(400px, calc(100% - 32px))") .style("box-sizing", "border-box") .style("padding", "18px 20px") .style("background", "rgba(255, 255, 255, 0.98)") .style("color", "#1f2937") .style("border", "1px solid #cbd5e1") .style("border-radius", "8px") .style("font", "12px/1.45 system-ui, sans-serif") .style("pointer-events", "none") .style("display", "none"); const details = tooltip.append("dl") .style("display", "grid") .style("grid-template-columns", "max-content minmax(0, 1fr)") .style("gap", "10px 14px") .style("margin", "0"); function textBox(event, d) { const items = Object.entries(d).filter(([key, value]) => key !== "Latitude" && key !== "Longitude" && value != null && String(value).trim() !== "" ); details.selectAll("*").remove(); for (const [key, value] of items) { details.append("dt") .style("font-weight", "600") .text(key); details.append("dd") .style("margin", "0") .style("overflow-wrap", "anywhere") .text(value); } tooltip.style("display", "block"); } // Bind each restaurant to its circle and show details on hover. for (const row of data) { const [x, y] = projection([row.Longitude, row.Latitude]); svg.append("circle") .attr("class", "restaurant-point") .datum(row) .attr("cx", x) .attr("cy", y) .attr("r", 3) .attr("fill", "grey") .attr("opacity", 1) .on("mouseenter", textBox) .on("mouseleave", () => tooltip.style("display", "none")); } svg.append("circle") .attr("class", "circle-filter-1") .attr("cx", 400) .attr("cy", 200) .attr("r", 20) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 3.5); svg.append("circle") .attr("class", "circle-filter-2") .attr("cx", 460) .attr("cy", 200) .attr("r", 20) .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 3.5); const drag = d3.drag() .on("drag", function(event) { const circle = d3.select(this); // Move the circle by the mouse's movement. const x = Number(circle.attr("cx")) + event.dx; const y = Number(circle.attr("cy")) + event.dy; circle .attr("cx", x) .attr("cy", y); updateIntersection(container.node()); }); svg.selectAll(".circle-filter-1") .attr("pointer-events", "stroke") .style("cursor", "move") .call(drag); svg.selectAll(".circle-filter-2") .attr("pointer-events", "stroke") .style("cursor", "move") .call(drag); return container.node(); }4d:T97c,{ const map = d3.select(restaurantMap); // Display the map. d3.select("#map").selectAll("*").remove(); d3.select("#map").append(() => restaurantMap); function updateCircles() { // Read the current slider values each time. const radius_1 = d3.select("#circle-radius-1") .property("valueAsNumber"); const radius_2 = d3.select("#circle-radius-2") .property("valueAsNumber"); map.selectAll(".circle-filter-1") .attr("r", radius_1); map.selectAll(".circle-filter-2") .attr("r", radius_2); updateIntersection(restaurantMap); } function filteringByCheckboxes() { const greenChecked = d3.select("#placeCard1").property("checked"); const yellowChecked = d3.select("#placeCard2").property("checked"); const redChecked = d3.select("#placeCard3").property("checked"); const arrayTrue = [greenChecked, yellowChecked, redChecked]; map.selectAll(".restaurant-point") .style("display", function(d) { const curPlaceCard = d["Latest placard color"]; if (curPlaceCard === null) { return null; } else if (curPlaceCard === "Green" && !arrayTrue[0]) { return "none"; } else if (curPlaceCard === "Yellow" && !arrayTrue[1]) { return "none"; } else if (curPlaceCard === "Red" && !arrayTrue[2]) { return "none"; } return null; }); } function filteringBySliders() { const filter_rating = d3.select("#ratings-filter") .property("valueAsNumber"); const minimumRating = 6 - filter_rating; d3.select("#rating-description") .text( minimumRating === 5 ? "Showing only 5-star restaurants." : `Showing ${minimumRating}-stars and above.` ); map.selectAll(".restaurant-point") .style("display", function(d){ if (d.Rating === null){ return null; }else if (d.Rating < minimumRating){ return "none" } } ); } // Update continuously while either slider moves. d3.selectAll("#circle-radius-1, #circle-radius-2") .on("input.circles", updateCircles); d3.select("#ratings-filter") .on("input.rating", filteringBySliders); d3.selectAll("#placeCard1, #placeCard2, #placeCard3") .on("change.filters", filteringByCheckboxes); // Apply the initial slider values. updateCircles(); filteringBySliders(); filteringByCheckboxes(); }4e:T454,function updateIntersection(mapNode) { const map = d3.select(mapNode); const filter1 = map.select(".circle-filter-1"); const center1X = Number(filter1.attr("cx")); const center1Y = Number(filter1.attr("cy")); const radius1 = Number(filter1.attr("r")); const filter2 = map.select(".circle-filter-2"); const center2X = Number(filter2.attr("cx")); const center2Y = Number(filter2.attr("cy")); const radius2 = Number(filter2.attr("r")); const restaurantNodes = map.selectAll(".restaurant-point").nodes(); for (const node of restaurantNodes) { const restaurant = d3.select(node); const x = Number(restaurant.attr("cx")); const y = Number(restaurant.attr("cy")); // Calculate distance to each filter's center. const distance1 = Math.hypot(x - center1X, y - center1Y); const distance2 = Math.hypot(x - center2X, y - center2Y); const insideFirst = distance1 <= radius1; const insideSecond = distance2 <= radius2; if (insideFirst && insideSecond) { restaurant.attr("fill", "blue"); } else { restaurant.attr("fill", "grey"); } } }4f:T621,### AI Disclosure For this assignment I extensively used AI for debugging the observable notebook as I kept running into errors that had no clear debugging steps. I personally found that Observable did not provide as extensive of a debugging interface as I would have appreciated for a much bigger project such as this one. Most of my prompts went as follows: Prompt: Help me identify what is causing this issue in my code {Code snippet}. I am getting this error in my observable notebook {error output}. AI Output: The error in your code is due to ... which is caused due to the way D3 handles ... and you are incorrectly using '.' when it should be '#' for HTML objects. I found this worked the best for me personally as I was finding myself spending an extensive amount of time trying to parse my code and D3 documentation for simple errors that could have otherwise been identified by AI much quicker. To this end I designed, wrote, and thought through all my code but most of the debugging was handled by AI whenever I had issues with either observable notebook or D3 and JS syntax errors. AI was also tremendously useful for parsing through D3, JS, HTML, and CSS documentation. I would have the documentation up and having difficulty identifying the correct function for my use case so I would prompt AI to point me in the right direction to achieve the desired outcome I wanted. In using AI in this way I could still learn about D3 and DOM editing without having to spend minutes if not hours finding a needle in the haystack for function definitions etc. 50:[{"id":"320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","href":"https://static.observableusercontent.com/files/320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","name":"sccRestaurantsSynth2026.csv","type":"text/csv","lastModified":1792180102486,"size":1051794},{"id":"47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","href":"https://static.observableusercontent.com/files/47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","name":"sccRestaurantsMap2026.png","type":"image/png","lastModified":1792183088479,"size":832847}] 47:{"id":"2afe49ae47f973ad","slug":"assignment-3-mario-portillo","title":"Assignment 3: Mario Portillo","thumbnail":"9d63ee356cb5f5dda8f8fa8edfad8c13ed84f4c1fbe2f3521a3c3ce05233aa6f","access_level":"public","create_time":"$D2026-10-16T19:52:43.432Z","update_time":"$D2026-10-23T19:44:42.197Z","view_time":null,"first_public_time":"$D2026-10-23T19:42:37.226Z","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":"447f89dd26ce3631","login":"mario-david-portillo","name":"Mario Portillo","avatar_url":"https://avatars-next.observableusercontent.com/463058e99449d02958b302c60db1bd95de2eae1bb9bdf12a673d2231aa9d9786","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":485,"publish_version":485,"role":null,"authored":false,"authors":[{"type":"individual","id":"37e779e0dbb3a8e0","login":"mario-david-portillo","name":"Mario Portillo","avatar_url":"https://avatars-next.observableusercontent.com/463058e99449d02958b302c60db1bd95de2eae1bb9bdf12a673d2231aa9d9786","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"447f89dd26ce3631","login":"mario-david-portillo","name":"Mario Portillo","avatar_url":"https://avatars-next.observableusercontent.com/463058e99449d02958b302c60db1bd95de2eae1bb9bdf12a673d2231aa9d9786","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: Mario Portillo","cells":[{"id":0,"value":"# Assignment 3: Mario Portillo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"$4b","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"## Code Implementation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"### The D3 container implementation:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"### The main refresh loop required to have the active filters and sliders:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"The following function was heavily inspired by the work done on this github: [Link](https://gist.github.com/1Cr18Ni9/36688b69a90ecdbad01c2bc9b0f0611a) which was credited to a stack overflow posting here: [Link](https://stackoverflow.com/questions/12219802/a-javascript-function-that-returns-the-x-y-points-of-intersection-between-two-ci#answer-12221389).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"### Development Process\nIn total I would say I spent roughly ~12 to 15 hours working on this assignment over many days trying to first learn D3 and then adapt what I learned to actually building the application I wanted. I would say that AI was certainly helpful in the initial learning process as I had questions on why certain functions behaved the way they did within D3 and exactly why I had to do things in a specific paradigm for HTML/JS. I think what took the most time for me personally was getting all the classes to work well with one another. The filtering was quite difficult to get right because I was using both HTML features and D3 features. It was a different way of programming that I had never done before since I have very little experience with Web Development so getting used to working with the DOM and properly updating it when certain actions occurred took me a while.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$4f","pinned":false,"hidden":false,"mode":"md","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":105,"value":"imageMarginTop = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"imageMarginRight = 200","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]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"latitudeRange = [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":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"}],"files":"$W50","stdlib":"1"}} 42:null