34:["$","title",null,{"children":"CS448B Assignment 3: Restaurant Finder | Lillian Elizabeth Sanders | Observable"}] 3c:T428,// Place the map map = { // Create container const container = d3.create("div"); // Create svg const svg = container .append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid black"); // Add the map svg.append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr( "href", "http://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png" ); // Load in the data, set up its field names const data = await (d3.csv( await FileAttachment("sccRestaurantsSynth2026.csv").url(), (d) => { return { name: d["Facility Name"], address: d.Address, placard: d["Latest placard color"], score: +d["Latest Score"], distance: +d.Distance, lat: +d.Latitude, lon: +d.Longitude, rating: +d.Rating, num_rev: +d["Number of reviews"] }; } )); // Draw the scatter plot drawScatterPlotMO(data, svg) // make draggable circles dragable_circles(data, svg) return container.node(); }3d:Tc17,// Create the draggable circles function dragable_circles(data, svg) { const circleGroups = svg.selectAll('g.circleGroup') .data(circle_pos_data) .join( enter => enter.append('g').attr('class', 'circleGroup') ); circleGroups.append('circle') .attr('class', 'outerCircle') .attr('r', d => d.size) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('fill', 'none') .attr('stroke', '#3A5FC0') .attr('stroke-width', 4) .call(d3.drag() .subject(function(event,d) {return {x: d.x, y: d.y};}) .on('drag', rDragged) ).raise(); circleGroups.append('circle') .attr('class', 'innerCircle') .attr('r', d => d.size - 4) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('fill', 'none') .attr('pointer-events', 'all') .on('mousemove', function(event, d) { let stack = document.elementsFromPoint(event.clientX, event.clientY) let count = 0 for(const elem of stack) { if(elem.classList.contains('points')) { mouseOverFunction.call(this, event, d3.select(elem).datum()); count += 1; break; } } if(count == 0) { mouseOutFunction.call() count = 0; } }) .call(d3.drag() .subject(function(event,d) {return {x: d.x, y: d.y};}) .on('drag', dragged) ).raise(); // Call the function that filters the points based on if they are within the circle updatePoints(svg); } // Function to move the circle when it is dragged function dragged(event, d) { d.x = event.x; //Convert the event.x to data space and set d.x d.y = event.y; //Convert the event.y to data space and set d.y d3.select(this) .attr("cx", d.x) //set the position of the circle by converting d.x back to pixel space .attr("cy", d.y); //set the position of the circle by converting d.y back to pixel space d3.select(this.parentNode).select(".outerCircle") .attr("cx", d.x) .attr("cy", d.y); updatePoints(); } // Function to resize the circle when the edge is grabbed function rDragged(event, d){ const [mx, my] = d3.pointer(event, this.ownerSVGElement) const distFromCircleCenter = Math.sqrt((mx - d.x)**2 + (my - d.y)**2) d.size = distFromCircleCenter d3.select(this.parentNode).select(".outerCircle") .attr("r", distFromCircleCenter + 4); d3.select(this.parentNode).select(".innerCircle") .attr("r", distFromCircleCenter) updatePoints(); } // For each point, count how many circles they are currently in and color accordingly function updatePoints(svg) { const points = (svg || d3).selectAll('circle.points') .attr('fill', function(d) { const x = projection([d.lon, d.lat])[0] const y = projection([d.lon, d.lat])[1] let count = 0 for (const c of circle_pos_data) { const point_diff_from_center = Math.sqrt((x - c.x)**2 + (y - c.y)**2) if(point_diff_from_center < c.size) count += 1; } if(count == 1) return '#636363'; else if (count == 2) return '#3A5FC0'; else return '#bdbdbd'; }) } 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":1792733561381,"size":1051794}] 38:{"id":"69fcf6a15946fc0b","slug":"cs-448-b-assignment-3-restaurant-finder","title":"CS448B Assignment 3: Restaurant Finder","thumbnail":"55a655cfb94022b05090a1a156df0c33682fba8bb2f61cf70dc82276bca63f21","access_level":"public","create_time":"$D2026-10-23T05:36:10.855Z","update_time":"$D2026-10-29T04:34:38.319Z","view_time":null,"first_public_time":"$D2026-10-29T01:03:11.984Z","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":"4377f56e88af913f","login":"lillian-elizabeth-sanders","name":"Lillian Elizabeth Sanders","avatar_url":"https://avatars-next.observableusercontent.com/8d4f33dc3269c67ebf4f05bbceb65f393ae2f41bbffd051bc9b3bc283a7e67c8","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":515,"publish_version":515,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0925db13c6976ad","login":"lillian-elizabeth-sanders","name":"Lillian Elizabeth Sanders","avatar_url":"https://avatars-next.observableusercontent.com/8d4f33dc3269c67ebf4f05bbceb65f393ae2f41bbffd051bc9b3bc283a7e67c8","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4377f56e88af913f","login":"lillian-elizabeth-sanders","name":"Lillian Elizabeth Sanders","avatar_url":"https://avatars-next.observableusercontent.com/8d4f33dc3269c67ebf4f05bbceb65f393ae2f41bbffd051bc9b3bc283a7e67c8","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":"CS448B Assignment 3: Restaurant Finder","cells":[{"id":0,"value":"# CS448B Assignment 3: Restaurant Finder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"This interactive plot allows the user to explore restaurants in Santa Clara county. They can do this by filtering based on rating or number of reviews. Additionally, they can resize or drag two different circles across the map. The restaurants in just one circle will be a darker shade of gray and in both circles will be blue.\n\nI spent about 10 hours developing this application. I have never used d3 and I am fairly new to javascript, so much of that time was figuring out syntax and which functions to use where. In particular, I struggled with how to select the data within one or both of the circles and how to set the circles up as individual entities. Additionally, it was challenging to make sure that the information on each restaurant would show up on hover even if they were within a circle.\n\nI used this source as an inspiration for my tooltip feature: https://observablehq.com/@benoldenburg/patterns-tooltip.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"viewof score_slider = Inputs.range([0, 5], {step: .5, label: \"Rating\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"viewof num_rev_slider = Inputs.range([0, 5349], {step: 100, label: \"Number of Reviews\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"// Filter the data on the map based on the sliders\nd3.select(map).selectAll('circle.points')\n .style('display', d => {\n if (d.rating < score_slider || d.num_rev < num_rev_slider)\n return 'none';\n else\n return null;\n })","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"## Plotting","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"html`\n\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"// Draw the data on the scatter plot\nfunction drawScatterPlotMO(data, svg) {\n const data_good = data.filter(d => Number.isFinite(d.lon) && Number.isFinite(d.lat));\n\n svg.selectAll('circle.points')\n .data(data, d => d.name)\n .join(\n enter => enter.append('circle').attr('class', 'points'),\n update => update,\n exit => exit.remove()\n )\n\n .attr('r', plotCircleRadius)\n .attr('cx', d => projection([d.lon, d.lat])[0])\n .attr('cy', d => projection([d.lon, d.lat])[1])\n\n // Call mouseOverFunction on mouseover and mouseout\n .on('mouseover', mouseOverFunction)\n .on('mouseout', mouseOutFunction);\n}","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"// Display resturant information on mouse over and out events\nfunction mouseOverFunction(event, d) {\n const not_null = []\n\n if(d.name !== null) {\n not_null.push(`Name: ${d.name}`)\n\n if (d.rating !== null)\n not_null.push(`Rating: ${d.rating}`)\n\n if (d.num_rev !== null)\n not_null.push(`Number of Reviews: ${d.num_rev}`)\n\n if (d.score !== null)\n not_null.push(`Score: ${d.score}`)\n\n if (d.placard !== null)\n not_null.push(`Placard Color: ${d.placard}`)\n\n toolTip.style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(not_null.join(`
`));\n }\n }\n\n function mouseOutFunction(event) {\n // Hide tooltip on mouse out\n\ttoolTip.style(\"display\", \"none\");\n }","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$3d","pinned":true,"hidden":false,"mode":"ts","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":94,"value":"import * as Inputs from \"npm:@observablehq/inputs\";","pinned":true,"hidden":false,"mode":"ts","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":90,"value":"const circle_pos_data =\n[\n {x: mapWidth/mapScale,\n y: mapHeight/mapScale,\n size: 30},\n {x: mapWidth/mapScale - 100,\n y: mapHeight/mapScale - 100,\n size: 30}\n];","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"const mapScale = 2;\nconst mapWidth = 1664 / mapScale;\nconst mapHeight = 1393 / mapScale;\n\nconst longitudeRange = [-122.20085766666666, -121.27442433333333];\nconst latitudeRange = [36.91311264279123, 37.53067882428926];\n\nconst 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\nconst projection = d3.geoMercator()\n .fitExtent([[0, 0], [mapWidth, mapHeight]], mapFrameGeoJSON);","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"const plotCircleRadius = 5","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","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"}],"files":"$W3e","stdlib":"1"}} 33:null