45:["$","title",null,{"children":"CS448B Assignment 3 | Monica Hicks | Observable"}] 4d:T84e,### Development Process For this assignment, I started out by putting the csv into Tableau so I could see what the data looked like. I learned that there were more than 3 placard values and that values had strings "null" instead of _null_. I didn't see any issues with the ratings, reviews, latitude or longitude having any unexpected values based on my quick Tableau graphs. I felt that the notebooks from this class prepared me well for this assignment, but I still spent about 15 hours on this. I was struggling a lot initially, and I had to go back and do things I had skipped over a bit the first time. My biggest weakness with Javascript has always been matching up closing braces, so I had a lot of unexpected token errors. I used the starter code for this assignment, and it took me too long to realize I was working with a combination of SF data and SCC data. I was really confused why my lat/lon were so messed up, so I ended up building my own normalization function. When the results were still messed up, I realized what had happened and imported the right map/business combo. I felt like everything was pretty hard while I was doing it, but now I feel like if I had to start this over from scratch I could do it in 30-45 min. ### AI Use I used AI sparingly for this assignment because it isn't very clear to me what is allowed/not allowed and whether using AI in an allowed way will impact the assignment grade. I did dump the whole code into Codex at the end to help with formatting and comments, because I had started out grabbing code blocks from the assignment notebooks and commenting out things I wanted to change so I still had the original code close by as reference. This is the prompt I used: `please tidy this code and add comments but don't actually change any of the code just clean it up for submission:`. I did ask Codex how I could make the code faster, and it suggested making on shared tooltip instead of a bunch of separate tooltips and setting an update rate of 500ms for resizing and dragging. I tried these out just for learning purposes, but I didn't end up including it in my final code.4e:T1f17,{ /* Code below is taken from assignment 3 page for rendering the map. */ // Create the container for the filter controls and map. var container = d3.create("div"); // Track the selected placard filter; initially, include all colors. let placard = "All"; const placardButtons = html`

Placard color:

`; // Apply the placard filter whenever a button is clicked. function handleButtons() { let buttons = d3.select(placardButtons).selectAll("button"); buttons.on("click", function () { placard = this.dataset.filter; updateDots(); }); } container.append(() => placardButtons); // Set up the minimum-rating control and its label. let rating = 1; const ratingLabel = container .append("div") .text(`Filter by Rating: ${rating.toFixed(1)}+ stars`); const ratingScrubber = Scrubber( d3.range(1, 5.1, 0.1), { autoplay: false, delay: 500, loop: false } ); container.append(() => ratingScrubber); // Update the displayed rating threshold and refresh the restaurant dots. d3.select(ratingScrubber).on("input", function () { rating = Number(this.value); ratingLabel.text(`Filter by Rating: ${rating.toFixed(1)}+ stars`) updateDots(); }); // Create the SVG map and add its background image. var 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", "http://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png" ); // Load the restaurant data and normalize the special placard labels. let data = await FileAttachment("sccRestaurantsSynth2026.csv").csv({ typed: "auto" }); for (let i = 0; i < data.length; i++) { if (data[i]["Latest placard color"] === "Pass*") { data[i]["Latest placard color"] = "Green"; } if (data[i]["Latest placard color"] === "Closure*") { data[i]["Latest placard color"] = "Red"; } // Convert longitude and latitude values to map coordinates. if (data[i]["Longitude"] !== "null" && data[i]["Latitude"] !== "null") { let lon_lat = projection([ parseFloat(data[i]["Longitude"]), parseFloat(data[i]["Latitude"]) ]); data[i].x = lon_lat[0]; data[i].y = lon_lat[1]; // Create a hidden tooltip containing this restaurant's details. const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "white") .style("border", "solid") .style("border-width", "1px") .style("padding", "5px") .html(`

${data[i]["Facility Name"]}
Rating: ${data[i]["Rating"]} stars
Review Count: ${data[i]["Number of reviews"]} reviews
Latest Placard Color: ${data[i]["Latest placard color"]}
Latest Score: ${data[i]["Latest Score"]} / 100

`); // Draw the restaurant dot and show its tooltip on hover. svg .append("circle") .data([data[i]]) .attr("class", "restaurant") .attr("id", data[i]["Facility Name"]) .attr("cx", lon_lat[0]) .attr("cy", lon_lat[1]) .attr("r", 2) .style("fill", "grey") .on("mouseover", () => tooltip.style("visibility", "visible")) .on("mousemove", (event) => tooltip .style("top", (event.pageY - 30) + "px") .style("left", (event.pageX + 10) + "px") ) .on("mouseout", () => tooltip.style("visibility", "hidden")); } } // Store the initial centers, identifiers, and radii of the selection circles. const circles_pos_data = [ { x: mapWidth / 3, y: mapHeight / 2 }, { x: 2 * mapHeight / 3, y: mapHeight / 2 } ]; circles_pos_data.forEach(function (d, i) { d.id = i; }); circles_pos_data.forEach(function (d, i) { d.size = 100; }); const circleGroups = svg .selectAll('g') .data(circles_pos_data) .join('g'); // Drag a circle's outline to resize its selection area. circleGroups .append('circle') .attr('class', 'greenCircle') .attr("id", function (d) { return "circle_green" + d.id; }) .attr('r', d => d.size) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('fill', 'none') .attr('stroke', "limegreen") .attr('stroke-width', 4) .call( d3.drag() .subject(function (event, d) { return { x: event.x, y: event.y }; }) .on('start', resizeDragStarted) .on('drag', resizeDragged) .on('end', resizeDragEnded) ); // Drag a center dot to move its selection circle. circleGroups .append('circle') .attr('class', 'center_dot') .attr("id", function (d) { return "center_dot" + d.id; }) .attr('r', 5) .attr('cx', d => d.x) .attr('cy', d => d.y) .attr('fill', "blue") .call( d3.drag() .subject(function (event, d) { return { x: d.x, y: d.y }; }) .on('start', dragStarted) .on('drag', dragged) .on('end', dragEnded) ); // Highlight the outline while the circle is being resized. function resizeDragStarted(event, d) { d3.select(this) .attr("stroke", "blue"); } function resizeDragged(event, d) { // Use the pointer's distance from the center as the new radius. const distFromCircleCenter = Math.hypot( event.x - d.x, event.y - d.y ); d.size = distFromCircleCenter; d3.select(this) .attr("r", d.size); updateDots(); } function resizeDragEnded(event, d) { d3.select(this) .attr("stroke", "limegreen"); } // Highlight the outline while its center is being moved. function dragStarted(event, d) { svg.select("#circle_green" + d.id) .attr("stroke", "red"); } function dragged(event, d) { d.x = event.x; d.y = event.y; // Keep the center dot and selection outline at the same coordinates. d3.select(this) .attr("cx", d.x) .attr("cy", d.y); svg.select("#circle_green" + d.id) .attr("cx", d.x) .attr("cy", d.y); updateDots(); } function dragEnded(event, d) { svg.select("#circle_green" + d.id) .attr("stroke", "limegreen"); } // Refresh dot colors and visibility after a filter or selection changes. function updateDots() { svg.selectAll(".restaurant") .style("fill", function (d) { const circleA = circles_pos_data[0]; const circleB = circles_pos_data[1]; // Highlight restaurants that lie inside both selection circles. if ( (distance(d.x, d.y, circleA.x, circleA.y) <= circleA.size) && (distance(d.x, d.y, circleB.x, circleB.y) <= circleB.size) ) { return "pink"; } return "grey"; }) .style("display", function (d) { const passesRating = parseFloat(d["Rating"]) >= rating; const passesPlacard = placard === "All" || d["Latest placard color"] === placard; // Show only restaurants that meet both filter conditions. return passesRating && passesPlacard ? null : "none"; }); } // Activate the buttons and apply the initial filters and overlap highlighting. handleButtons(); updateDots(); return container.node(); }4f:[{"id":"47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","href":"https://static.observableusercontent.com/files/47f0d07f2c23eeda524b000ed0c3a61dbda8badd38f20df1a4f2c834b1f47cce71ac0c018b95e39b832f026e403373aea216d7a988920e261f8e0c82325fd873","name":"sccRestaurantsMap2026.png","type":"image/png","lastModified":1792784591975,"size":832847},{"id":"320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","href":"https://static.observableusercontent.com/files/320ed26f21bec4e417e6f8f029d4a6aba43d4933a25e22d3ea59050a97750b640b9f7f4244d7ebecb7a862eb996280f062edd2f6387d1de978fe5c44e021216e","name":"sccRestaurantsSynth2026.csv","type":"text/csv","lastModified":1792841429117,"size":1051794}] 49:{"id":"0e2607d0f96019bb","slug":"cs-448-b-assignment-3","title":"CS448B Assignment 3","thumbnail":"755e1717dd6aee9662b9d3463d0d64dc980949161f9d01334b5495da95275f2d","access_level":"public","create_time":"$D2026-10-24T12:56:57.907Z","update_time":"$D2026-10-26T14:29:03.592Z","view_time":null,"first_public_time":"$D2026-10-26T14:30:48.132Z","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":"bb21e0d4b121f0e7","login":"monica-hicks","name":"Monica Hicks","avatar_url":"https://avatars-next.observableusercontent.com/a6fda2ccff9a82db21867c867bd8a8627c04bb125c32366d0b75b6709b9599bc","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":372,"publish_version":372,"role":null,"authored":false,"authors":[{"type":"individual","id":"5f499c9ad196f79f","login":"monica-hicks","name":"Monica Hicks","avatar_url":"https://avatars-next.observableusercontent.com/a6fda2ccff9a82db21867c867bd8a8627c04bb125c32366d0b75b6709b9599bc","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"bb21e0d4b121f0e7","login":"monica-hicks","name":"Monica Hicks","avatar_url":"https://avatars-next.observableusercontent.com/a6fda2ccff9a82db21867c867bd8a8627c04bb125c32366d0b75b6709b9599bc","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","cells":[{"id":0,"value":"# CS448B Assignment 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"$4d","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4e","pinned":false,"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"}],"files":"$W4f","stdlib":"1"}} 44:null