25:["$","title",null,{"children":"Assignment 3 | Saehui Hwang | Observable"}] 4b:T148e,viz = { const width = 1664 / 2; const height = 1393 / 2; // Projection from the assignment page const projection = d3.geoMercator().fitExtent([[0, 0], [width, height]], { type: "Feature", geometry: { type: "LineString", coordinates: [ [-122.20085766666666, 36.91311264279123], [-121.27442433333333, 37.53067882428926] ] } }); // Drop rows with no location, and compute each restaurant's pixel position once const restaurants = data.filter((d) => d.Latitude != null && d.Longitude != null); restaurants.forEach((d) => { [d.x, d.y] = projection([d.Longitude, d.Latitude]); }); // Pixels per mile (1 degree of latitude is about 69 miles) const pxPerMile = projection([-122.17, 37.42])[1] - projection([-122.17, 37.42 + 1 / 69])[1]; // Query points A (Stanford) and B (Mountain View) const [ax, ay] = projection([-122.17006, 37.42766]); const [bx, by] = projection([-122.0819, 37.3894]); const A = { name: "A", x: ax, y: ay, r: 3 }; const B = { name: "B", x: bx, y: by, r: 3 }; const placards = ["All", ...new Set(data.map((d) => d["Latest placard color"]))]; // Controls const container = d3.create("div").style("position", "relative"); container.append("div").html(` Radius A: 3 mi
Radius B: 3 mi
Placard color:
Minimum rating: 0 `); const input = (name) => container.select(`[name=${name}]`).node(); // Map const svg = container.append("svg") .attr("width", width) .attr("height", height) .style("display", "block") .style("border", "1px solid black"); svg.append("image") .attr("width", width) .attr("height", height) .attr("href", "https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsMap2026.png"); const dots = svg.append("g") .selectAll("circle") .data(restaurants) .join("circle") .attr("cx", (d) => d.x) .attr("cy", (d) => d.y) .attr("r", 2.5); // Query circles (pointer-events off so restaurants underneath can be hovered) const areas = svg.selectAll(".area") .data([A, B]) .join("circle") .attr("class", "area") .attr("fill", "red") .attr("fill-opacity", 0.15) .attr("stroke", "red") .attr("stroke-width", 2) .style("pointer-events", "none"); // Draggable centers const handles = svg.selectAll(".handle") .data([A, B]) .join("circle") .attr("class", "handle") .attr("r", 8) .attr("fill", "red") .attr("stroke", "black") .style("cursor", "move") .call(d3.drag().on("drag", (event, c) => { c.x = event.x; c.y = event.y; update(); })); const labels = svg.selectAll(".label") .data([A, B]) .join("text") .attr("class", "label") .attr("text-anchor", "middle") .attr("dy", "0.35em") .attr("font-size", 10) .style("pointer-events", "none") .text((c) => c.name); // Tooltip const tooltip = container.append("div") .style("position", "absolute") .style("display", "none") .style("pointer-events", "none") .style("background", "white") .style("border", "1px solid black") .style("padding", "4px") .style("font-size", "12px"); const fields = ["Address", "Rating", "Number of reviews", "Latest Score", "Latest placard color"]; function moveTooltip(event) { const [x, y] = d3.pointer(event, container.node()); tooltip.style("left", x + 10 + "px").style("top", y + 10 + "px"); } dots .on("mouseover", (event, d) => { const lines = fields .filter((f) => d[f] != null && d[f] !== "") .map((f) => `${f}: ${d[f]}`); tooltip.style("display", "block") .html(`${d["Facility Name"]}
${lines.join("
")}`); moveTooltip(event); }) .on("mousemove", moveTooltip) .on("mouseout", () => tooltip.style("display", "none")); // Filtering const inCircle = (d, c) => Math.hypot(d.x - c.x, d.y - c.y) <= c.r * pxPerMile; function update() { A.r = +input("rA").value; B.r = +input("rB").value; const placard = input("placard").value; const minRating = +input("minRating").value; container.select("#rAval").text(A.r); container.select("#rBval").text(B.r); container.select("#ratingVal").text(minRating); areas.attr("cx", (c) => c.x).attr("cy", (c) => c.y).attr("r", (c) => c.r * pxPerMile); handles.attr("cx", (c) => c.x).attr("cy", (c) => c.y); labels.attr("x", (c) => c.x).attr("y", (c) => c.y); dots.attr("fill", (d) => { const match = inCircle(d, A) && inCircle(d, B) && (placard === "All" || d["Latest placard color"] === placard) && (d.Rating ?? 0) >= minRating; return match ? "green" : "lightgray"; }); } container.on("input", update); update(); return container.node(); }4c:[{"id":"2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","href":"https://static.observableusercontent.com/files/2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","name":"sf_map.png","type":"image/png","lastModified":1760293845215.455,"size":1245599}] 47:{"id":"f869f95441024afa","slug":"assignment-3","title":"Assignment 3","thumbnail":"b81b0a1ada6cc3e735a029429845a0a954f5017a581be9ecb0e24325fcc1ee29","access_level":"public","create_time":"$D2026-10-19T19:44:37.857Z","update_time":"$D2026-10-25T23:21:40.191Z","view_time":null,"first_public_time":"$D2026-10-25T22:24:40.116Z","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":"8cced529e1579b58","login":"saehui-hwang","name":"Saehui Hwang","avatar_url":"https://avatars-next.observableusercontent.com/13eb6f6284aae6a92a7af315d98f7c58c6457209cdc38a978d2c02fbd6e82f66","tier":"free_2026","bio":"","followed_by_you":false,"follows_you":false},"version":112,"publish_version":112,"role":null,"authored":false,"authors":[{"type":"individual","id":"1b42ffaefb029fc0","login":"saehui-hwang","name":"Saehui Hwang","avatar_url":"https://avatars-next.observableusercontent.com/13eb6f6284aae6a92a7af315d98f7c58c6457209cdc38a978d2c02fbd6e82f66","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"8cced529e1579b58","login":"saehui-hwang","name":"Saehui Hwang","avatar_url":"https://avatars-next.observableusercontent.com/13eb6f6284aae6a92a7af315d98f7c58c6457209cdc38a978d2c02fbd6e82f66","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","cells":[{"id":0,"value":"# Assignment 3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"data = d3.csv(\"https://magrawala.github.io/cs448b-fa26/assets/a3/sccRestaurantsSynth2026.csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"md`**Resources used:** The map and projection setup is adapted from the assignment page. I also used the D3 documentation and Claude (Anthropic) to implement the circle updating according to slider updates (update() function) and the pxPerMile calculation.\n\n**Time spent:** 4 hours, most of the time was spent on implementing the draggable circles.\n`","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":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 = 1968 / 2.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mapHeight = 1580 / 2.4","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":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":"$W4c","stdlib":"1"}} 24:null