tooltips are slow to appear and // can't be formatted, which is why a custom tooltip is used here.) container.style("position", "relative"); const tooltip = container.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("display", "none") .style("background", "white") .style("border", "1px solid #999") .style("border-radius", "4px") .style("padding", "6px 8px") .style("font", "12px sans-serif") .style("width", "240px") .style("box-shadow", "0 2px 6px rgba(0,0,0,0.2)"); // [Claude] group restaurants that share an exact location (d3.group), so the tooltip // can list all of them instead of only the dot on top const byLocation = d3.group(points, d => `${d.lat},${d.lon}`); const describe = d => { const lines = [`${d.name}`, d.address]; if (d.rating != null) lines.push(`Rating: ${d.rating} ★ (${d.reviews ?? 0} reviews)`); if (d.score != null) lines.push(`Inspection score: ${d.score}`); if (d.placard) lines.push(`Placard: ${d.placard}`); return lines.join(" "); }; // [Interactive] mouseover / mouseout listeners using function() and d3.select(this) // to outline the hovered circle; setting stroke to null removes it dots .on("mouseover", function (event, d) { d3.select(this).attr("r", 5).attr("stroke", "black"); const here = byLocation.get(`${d.lat},${d.lon}`); const shown = here.slice(0, 4).map(describe).join("<hr>"); const more = here.length > 4 ? `<hr>+ ${here.length - 4} more at this location` : ""; const [mx, my] = d3.pointer(event, container.node()); tooltip.html(shown + more) .style("left", `${mx > mapWidth - 270 ? mx - 262 : mx + 12}px`) .style("top", `${my + 12}px`) .style("display", "block"); }) .on("mouseout", function () { d3.select(this).attr("r", 2).attr("stroke", null); tooltip.style("display", "none"); }); // [Interactive] update existing elements through a function (like setYear() there) // instead of re-running the whole cell on every change function update() { const [qa, qb] = queries; const rA = milesToPx(radiusA.value); // [Intro] scale function const rB = milesToPx(radiusB.value); rings.attr("cx", d => d.x).attr("cy", d => d.y).attr("r", d => milesToPx(d.slider.value)); // [Intro] translate a <g> to move its children together. handles.attr("transform", d => `translate(${d.x},${d.y})`); const terms = keyword.value.toLowerCase().split(",").map(s => s.trim()).filter(Boolean); const minR = minRating.value; let count = 0; for (const p of points) { // [Claude] inside-circle test with squared distances const inA = (p.x - qa.x) ** 2 + (p.y - qa.y) ** 2 <= rA * rA; const inB = (p.x - qb.x) ** 2 + (p.y - qb.y) ** 2 <= rB * rB; // [Claude] keyword filter (any comma-separated term) and minimum-rating filter const textOK = terms.length === 0 || terms.some(t => p.searchText.includes(t)); const ratingOK = minR === 0 || (p.rating != null && p.rating >= minR); p.active = inA && inB && textOK && ratingOK; if (p.active) count++; } // [Claude] gray out non-matching restaurants by recoloring; elements are never rebuilt dots.attr("fill", d => d.active ? "steelblue" : "#888") .attr("fill-opacity", d => d.active ? 0.9 : 0.2); status.text(`${count} of ${points.length} restaurants match`); } // [Scatterplot] D3-style event listeners with .on(...), as with the filter buttons there for (const input of [radiusA, radiusB, keyword, minRating]) d3.select(input).on("input", update); update(); // [Assignment] / [Intro] return the DOM node for Observable to display. return container.node(); }4e:Tcd1,## Commentary **Work Split:** I worked on this project by myself. **Time Spent:** This assignment took me around 16 hours to complete. A brief summary of the timeline: - Understanding the assignment, all set-up (loading the code, initial map set-up), and reviewing class resources (notebooks) took around 5 hours. - Requirement 1 (restaurant dots + query circles A/B) took around 4 hours. - Requirement 2 (the hover tooltip) took about 2 hours. - Requirement 3 (implementing the extra filters) took about 2.5 hours. - Debugging and testing took about 1 hour. - Comments took around 30 minutes. - Write-up took about 1 hour. **Process:** I came into this assignment with no prior D3 experience, so I built the application incrementally in Observable, getting each piece working before moving on. I started by getting the Santa Clara County map and the restaurant data to display correctly, then added the dots from the data, the two draggable query circles with radius sliders and the intersection filter, the hover tooltip, and finally the keyword and minimum-rating filters. I used Claude, class notebooks, and Observable AI for guidance as I ran and tested each piece in the notebook. Some time went to setup and debugging. I forked the starter notebook that was last year’s San Francisco version, so the map and coordinate ranges had to be replaced, and Observable briefly failed to save my changes (which was annoying). **Reflection on the Process:** The class resources and using Claude + Observable AI was really helpful for completing this assignment. The available notebooks were a great way to get exposure to the syntax and foundational ideas of implementing the requirements of the assignment. Claude + Observable AI was helpful for debugging and learning new syntax. I did not use other external resources such as Stack Overflow, GitHub, or other codebases. The issue that consumed most of my time was correctly applying the lecture material to the implementations. I had to make sure the course patterns still fit this assignment’s requirements. For example, the scatterplot notebook filters by removing points, but this assignment required graying them out, and Observable’s reactive inputs would have redrawn the entire map on every change. So I kept all the circles and updated their colors through a single update function, as in *Making D3 Charts Interactive*. Learning some of the new syntax took me some time. A semi-challenge I face was keeping a good balance of using AI to understand the correct way to implement the D3 features without having it write it for me. Observable AI was helpful for debugging. For example, I had an syntax error where all of the code was right, but I was just missing a set of curly brackets, which it helped me identify. Taking note of (and attributing) where I learned various implementations was helpful for me to separate my own learning from what I leaned on AI for. **Example Prompts Used:** - How do I correctly fork an Observable notebook? (This is where the changes failed to save.) - What does this particular error mean? - How do I position a tooltip next to the mouse? - My dots are not showing up. What should I check first? - What are good ways to visually separate matching points from grayed-out ones?4f:[{"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":1792289303260,"size":1051794}] 49:{"id":"c6640f144c0fb795","slug":"cs-448-b-assignment-3","title":"CS 448B Assignment 3","thumbnail":"67a1abc0f8c1217328a1d03e030865de8f13c831ffe04862dd7d19e5af236293","access_level":"public","create_time":"$D2026-10-26T01:13:46.677Z","update_time":"$D2026-10-26T10:55:19.553Z","view_time":null,"first_public_time":"$D2026-10-26T10:55:44.583Z","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":"68da74318dd382a4","login":"rubina-shrestha","name":"Rubina Shrestha","avatar_url":"https://avatars-next.observableusercontent.com/32a598c1b2dd98edeb45fc32e0b0e0c466e548327b971dea0da02dd8f08ff275","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":198,"publish_version":198,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a8a20bf3803849e","login":"rubina-shrestha","name":"Rubina Shrestha","avatar_url":"https://avatars-next.observableusercontent.com/32a598c1b2dd98edeb45fc32e0b0e0c466e548327b971dea0da02dd8f08ff275","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"68da74318dd382a4","login":"rubina-shrestha","name":"Rubina Shrestha","avatar_url":"https://avatars-next.observableusercontent.com/32a598c1b2dd98edeb45fc32e0b0e0c466e548327b971dea0da02dd8f08ff275","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\n*Creating Interactive Visualization Software*\n\nCreated by Rubina Shrestha\n\n**Note:** I am using the 2026 Observable Standard Library.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"## Load the Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// explained in the course notebook \"Let's Make a Scatterplot\"\n// line of code also available in Files -> Copy Code\ndata = FileAttachment(\"sccRestaurantsSynth2026.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// turns each CSV row into an object with short field names and real numbers\n// row-conversion idea explained in the course notebook \"Let's Make a Scatterplot\"\n// null handling (parseFloat + Number.isFinite, so blanks become null instead of 0) and dropping rows with no location: written with Claude\nrows = {\n const num = v => { const n = parseFloat(v); return Number.isFinite(n) ? n : null; };\n return data\n .map(d => ({\n name: d[\"Facility Name\"],\n address: d[\"Address\"] ?? \"\",\n placard: d[\"Latest placard color\"] ?? \"\",\n score: num(d[\"Latest Score\"]),\n rating: num(d[\"Rating\"]),\n reviews: num(d[\"Number of reviews\"]),\n lat: num(d[\"Latitude\"]),\n lon: num(d[\"Longitude\"])\n }))\n .filter(d => d.lat !== null && d.lon !== null);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"# Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"**Source Key**\n- [Assignment]: sample D3 snippet on the CS448B Assignment 3 page\n- [Intro]: course notebook \"Introduction to D3\"\n- [Interactive]: course notebook \"Making D3 Charts Interactive\"\n- [Scatterplot]: course notebook \"Let's Make a Scatterplot\"\n- [Exercises]: course notebook \"D3 Exercises\"\n- [Claude]: written or debugged with Claude (Anthropic's AI assistant)\n- Observable AI was only used for debugging.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"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":"2"}} 44:null </article></body></html>

45:["$","title",null,{"children":"CS 448B Assignment 3 | Rubina Shrestha | Observable"}] 4d:T24b3,// [Assignment] map size, lat/lon bounds, map frame, and Mercator projection // [Claude] for wrapping in { } block with a return { const mapScale = 2; const mapWidth = 1664 / mapScale; const mapHeight = 1393 / mapScale; const longitudeRange = [-122.20085766666666, -121.27442433333333]; const latitudeRange = [36.91311264279123, 37.53067882428926]; const mapFrameGeoJSON = { type: "Feature", geometry: { type: "LineString", coordinates: [ [longitudeRange[0], latitudeRange[0]], [longitudeRange[1], latitudeRange[1]] ] } }; const projection = d3.geoMercator() .fitExtent([[0, 0], [mapWidth, mapHeight]], mapFrameGeoJSON); const pxPerMile = projection([-121.9, 37.2])[1] - projection([-121.9, 37.2 + 1 / 69])[1]; // [Intro] "Scale Functions": use a d3.scaleLinear instead of a magic conversion number const milesToPx = d3.scaleLinear().domain([0, 1]).range([0, pxPerMile]); const radiusA = Inputs.range([0.5, 25], { label: "Radius A (miles)", value: 10, step: 0.1 }); const radiusB = Inputs.range([0.5, 25], { label: "Radius B (miles)", value: 10, step: 0.1 }); const keyword = Inputs.text({ label: "Name or address contains", placeholder: "e.g. Stanford, El Camino" }); const minRating = Inputs.range([0, 5], { label: "Minimum rating", value: 0, step: 0.1 }); // [Assignment] container div, svg, and background map image // ([Intro] and [Scatterplot] use the same d3.create(...) ... return .node() pattern.) const container = d3.create("div"); // [Scatterplot] chart title as an

, like the "Height vs. Weight" title there container.append("h2").text("Santa Clara County Restaurant Finder"); container.append("p") .style("margin", "0 0 8px") .text("Drag A and B to move the search areas, adjust their radii with the sliders, and use the filters to narrow results. Hover over a dot for details."); // [Claude] controls and a "N of M match" status line above the map container.append("div").node().append(radiusA, radiusB, keyword, minRating); const status = container.append("div").style("margin", "6px 0"); const svg = container .append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid black"); // [Assignment] map image // [Claude] https instead of http svg.append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("href", "https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png"); // [Assignment] projection([lon, lat]) returns the [x, y] pixel position // [Claude] project every restaurant once, up front, and pre-lowercase its search text, so update() never repeats const points = rows.map(d => { const [x, y] = projection([d.lon, d.lat]); return { ...d, x, y, searchText: `${d.name} ${d.address}`.toLowerCase() }; }); // [Intro] group used as a layer, plus the data join selectAll().data().join() // [Assignment] one small circle per restaurant at its projected cx / cy const dots = svg.append("g") .selectAll("circle") .data(points) .join("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", 2); // A starts at Stanford // B starts in downtown San Jose const [ax, ay] = projection([-122.17006, 37.42766]); const [bx, by] = projection([-121.8863, 37.3382]); const queries = [ { label: "A", x: ax, y: ay, color: "#d62828", slider: radiusA }, { label: "B", x: bx, y: by, color: "#6a4c93", slider: radiusB } ]; // [Intro] data join: one big translucent circle per query. // [Claude] pointer-events: none so the dots underneath stay hoverable // (pointer-events is discussed in [Interactive], legend section) const rings = svg.append("g") .selectAll("circle") .data(queries) .join("circle") .attr("fill", d => d.color) .attr("fill-opacity", 0.07) .attr("stroke", d => d.color) .attr("stroke-width", 2) .style("pointer-events", "none"); // [Exercises] Ex. 6: join a per item and put a circle (here also a label) inside it // so they move together // [Exercises] Ex. 5: d3.drag() with separate start / drag / end callbacks const handles = svg.append("g") .selectAll("g") .data(queries) .join("g") .style("cursor", "move") .call(d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded)); handles.append("circle") .attr("r", 10) .attr("fill", d => d.color) .attr("stroke", "white") .attr("stroke-width", 2); // [Intro] / [Interactive] SVG text labels positioned with text-anchor and dy // [Claude] pointer-events: none so a click on the letter grabs the circle underneath handles.append("text") .text(d => d.label) .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("fill", "white") .attr("font-size", 11) .attr("font-weight", "bold") .style("pointer-events", "none"); // [Exercises] Ex. 5: highlight the handle's stroke while it is being dragged function dragStarted(event, d) { d3.select(this).select("circle").attr("stroke", "black"); } // [Exercises] Ex. 5: store the new position on the datum, then redraw // No .subject() needed (unlike the exercise) because d.x / d.y are already in pixels function dragged(event, d) { d.x = Math.max(0, Math.min(mapWidth, event.x)); d.y = Math.max(0, Math.min(mapHeight, event.y)); update(); } // [Exercises] Ex. 5: remove the highlight when the drag ends function dragEnded(event, d) { d3.select(this).select("circle").attr("stroke", "white"); } // ([Interactive] Built-in tooltips are slow to appear and // can't be formatted, which is why a custom tooltip is used here.) container.style("position", "relative"); const tooltip = container.append("div") .style("position", "absolute") .style("pointer-events", "none") .style("display", "none") .style("background", "white") .style("border", "1px solid #999") .style("border-radius", "4px") .style("padding", "6px 8px") .style("font", "12px sans-serif") .style("width", "240px") .style("box-shadow", "0 2px 6px rgba(0,0,0,0.2)"); // [Claude] group restaurants that share an exact location (d3.group), so the tooltip // can list all of them instead of only the dot on top const byLocation = d3.group(points, d => `${d.lat},${d.lon}`); const describe = d => { const lines = [`${d.name}`, d.address]; if (d.rating != null) lines.push(`Rating: ${d.rating} ★ (${d.reviews ?? 0} reviews)`); if (d.score != null) lines.push(`Inspection score: ${d.score}`); if (d.placard) lines.push(`Placard: ${d.placard}`); return lines.join(" "); }; // [Interactive] mouseover / mouseout listeners using function() and d3.select(this) // to outline the hovered circle; setting stroke to null removes it dots .on("mouseover", function (event, d) { d3.select(this).attr("r", 5).attr("stroke", "black"); const here = byLocation.get(`${d.lat},${d.lon}`); const shown = here.slice(0, 4).map(describe).join("<hr>"); const more = here.length > 4 ? `<hr>+ ${here.length - 4} more at this location` : ""; const [mx, my] = d3.pointer(event, container.node()); tooltip.html(shown + more) .style("left", `${mx > mapWidth - 270 ? mx - 262 : mx + 12}px`) .style("top", `${my + 12}px`) .style("display", "block"); }) .on("mouseout", function () { d3.select(this).attr("r", 2).attr("stroke", null); tooltip.style("display", "none"); }); // [Interactive] update existing elements through a function (like setYear() there) // instead of re-running the whole cell on every change function update() { const [qa, qb] = queries; const rA = milesToPx(radiusA.value); // [Intro] scale function const rB = milesToPx(radiusB.value); rings.attr("cx", d => d.x).attr("cy", d => d.y).attr("r", d => milesToPx(d.slider.value)); // [Intro] translate a <g> to move its children together. handles.attr("transform", d => `translate(${d.x},${d.y})`); const terms = keyword.value.toLowerCase().split(",").map(s => s.trim()).filter(Boolean); const minR = minRating.value; let count = 0; for (const p of points) { // [Claude] inside-circle test with squared distances const inA = (p.x - qa.x) 2 + (p.y - qa.y) 2 <= rA * rA; const inB = (p.x - qb.x) 2 + (p.y - qb.y) 2 <= rB * rB; // [Claude] keyword filter (any comma-separated term) and minimum-rating filter const textOK = terms.length === 0 || terms.some(t => p.searchText.includes(t)); const ratingOK = minR === 0 || (p.rating != null && p.rating >= minR); p.active = inA && inB && textOK && ratingOK; if (p.active) count++; } // [Claude] gray out non-matching restaurants by recoloring; elements are never rebuilt dots.attr("fill", d => d.active ? "steelblue" : "#888") .attr("fill-opacity", d => d.active ? 0.9 : 0.2); status.text(`${count} of ${points.length} restaurants match`); } // [Scatterplot] D3-style event listeners with .on(...), as with the filter buttons there for (const input of [radiusA, radiusB, keyword, minRating]) d3.select(input).on("input", update); update(); // [Assignment] / [Intro] return the DOM node for Observable to display. return container.node(); }4e:Tcd1,## Commentary Work Split: I worked on this project by myself. Time Spent: This assignment took me around 16 hours to complete. A brief summary of the timeline: - Understanding the assignment, all set-up (loading the code, initial map set-up), and reviewing class resources (notebooks) took around 5 hours. - Requirement 1 (restaurant dots + query circles A/B) took around 4 hours. - Requirement 2 (the hover tooltip) took about 2 hours. - Requirement 3 (implementing the extra filters) took about 2.5 hours. - Debugging and testing took about 1 hour. - Comments took around 30 minutes. - Write-up took about 1 hour. Process: I came into this assignment with no prior D3 experience, so I built the application incrementally in Observable, getting each piece working before moving on. I started by getting the Santa Clara County map and the restaurant data to display correctly, then added the dots from the data, the two draggable query circles with radius sliders and the intersection filter, the hover tooltip, and finally the keyword and minimum-rating filters. I used Claude, class notebooks, and Observable AI for guidance as I ran and tested each piece in the notebook. Some time went to setup and debugging. I forked the starter notebook that was last year’s San Francisco version, so the map and coordinate ranges had to be replaced, and Observable briefly failed to save my changes (which was annoying). Reflection on the Process: The class resources and using Claude + Observable AI was really helpful for completing this assignment. The available notebooks were a great way to get exposure to the syntax and foundational ideas of implementing the requirements of the assignment. Claude + Observable AI was helpful for debugging and learning new syntax. I did not use other external resources such as Stack Overflow, GitHub, or other codebases. The issue that consumed most of my time was correctly applying the lecture material to the implementations. I had to make sure the course patterns still fit this assignment’s requirements. For example, the scatterplot notebook filters by removing points, but this assignment required graying them out, and Observable’s reactive inputs would have redrawn the entire map on every change. So I kept all the circles and updated their colors through a single update function, as in Making D3 Charts Interactive. Learning some of the new syntax took me some time. A semi-challenge I face was keeping a good balance of using AI to understand the correct way to implement the D3 features without having it write it for me. Observable AI was helpful for debugging. For example, I had an syntax error where all of the code was right, but I was just missing a set of curly brackets, which it helped me identify. Taking note of (and attributing) where I learned various implementations was helpful for me to separate my own learning from what I leaned on AI for. Example Prompts Used: - How do I correctly fork an Observable notebook? (This is where the changes failed to save.) - What does this particular error mean? - How do I position a tooltip next to the mouse? - My dots are not showing up. What should I check first? - What are good ways to visually separate matching points from grayed-out ones?4f:[{"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":1792289303260,"size":1051794}] 49:{"id":"c6640f144c0fb795","slug":"cs-448-b-assignment-3","title":"CS 448B Assignment 3","thumbnail":"67a1abc0f8c1217328a1d03e030865de8f13c831ffe04862dd7d19e5af236293","access_level":"public","create_time":"$D2026-10-26T01:13:46.677Z","update_time":"$D2026-10-26T10:55:19.553Z","view_time":null,"first_public_time":"$D2026-10-26T10:55:44.583Z","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":"68da74318dd382a4","login":"rubina-shrestha","name":"Rubina Shrestha","avatar_url":"https://avatars-next.observableusercontent.com/32a598c1b2dd98edeb45fc32e0b0e0c466e548327b971dea0da02dd8f08ff275","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":198,"publish_version":198,"role":null,"authored":false,"authors":[{"type":"individual","id":"5a8a20bf3803849e","login":"rubina-shrestha","name":"Rubina Shrestha","avatar_url":"https://avatars-next.observableusercontent.com/32a598c1b2dd98edeb45fc32e0b0e0c466e548327b971dea0da02dd8f08ff275","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"68da74318dd382a4","login":"rubina-shrestha","name":"Rubina Shrestha","avatar_url":"https://avatars-next.observableusercontent.com/32a598c1b2dd98edeb45fc32e0b0e0c466e548327b971dea0da02dd8f08ff275","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\nCreating Interactive Visualization Software\n\nCreated by Rubina Shrestha\n\nNote: I am using the 2026 Observable Standard Library.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"## Load the Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"// explained in the course notebook \"Let's Make a Scatterplot\"\n// line of code also available in Files -> Copy Code\ndata = FileAttachment(\"sccRestaurantsSynth2026.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// turns each CSV row into an object with short field names and real numbers\n// row-conversion idea explained in the course notebook \"Let's Make a Scatterplot\"\n// null handling (parseFloat + Number.isFinite, so blanks become null instead of 0) and dropping rows with no location: written with Claude\nrows = {\n const num = v => { const n = parseFloat(v); return Number.isFinite(n) ? n : null; };\n return data\n .map(d => ({\n name: d[\"Facility Name\"],\n address: d[\"Address\"] ?? \"\",\n placard: d[\"Latest placard color\"] ?? \"\",\n score: num(d[\"Latest Score\"]),\n rating: num(d[\"Rating\"]),\n reviews: num(d[\"Number of reviews\"]),\n lat: num(d[\"Latitude\"]),\n lon: num(d[\"Longitude\"])\n }))\n .filter(d => d.lat !== null && d.lon !== null);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"# Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"Source Key\n- [Assignment]: sample D3 snippet on the CS448B Assignment 3 page\n- [Intro]: course notebook \"Introduction to D3\"\n- [Interactive]: course notebook \"Making D3 Charts Interactive\"\n- [Scatterplot]: course notebook \"Let's Make a Scatterplot\"\n- [Exercises]: course notebook \"D3 Exercises\"\n- [Claude]: written or debugged with Claude (Anthropic's AI assistant)\n- Observable AI was only used for debugging.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"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":"2"}} 44:null </article></body></html>