2b:null 2c:["$","title",null,{"children":"CS 448B Assignment 3 | Jiaju Ma | Observable"}] 31:T1c4c,{ const filteredData = data.filter(d => { const year = +d["Release Year"]; const yearMatch = !isNaN(year) && year >= yearRange[0] && year <= yearRange[1]; const directorMatch = selectedDirectors.length === 0 || selectedDirectors.includes(d.Director); const locationMatch = selectedLocations.length === 0 || selectedLocations.includes(d.Locations); return yearMatch && directorMatch && locationMatch; }); const container = d3.create("div"); const svg = container .append("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid black") .style("position", "relative"); svg .append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("xlink:href", await FileAttachment("sf_map.png").url()); const projection = d3.geoMercator() .fitExtent( [[0, 0], [mapWidth, mapHeight]], { type: "Feature", geometry: { type: "Polygon", coordinates: [[ [longitudeRange[0], latitudeRange[0]], [longitudeRange[0], latitudeRange[1]], [longitudeRange[1], latitudeRange[1]], [longitudeRange[1], latitudeRange[0]], [longitudeRange[0], latitudeRange[0]] ]] } } ); // Tooltip const tooltip = container.append("div") .style("position", "absolute") .style("background", "rgba(255,255,255,0.95)") .style("padding", "10px") .style("border-radius", "8px") .style("box-shadow", "0px 2px 6px rgba(0,0,0,0.25)") .style("font-size", "13px") .style("pointer-events", "none") .style("width", "220px") .style("opacity", 0); const points = svg.append("g") .attr("class", "points") .selectAll("circle") .data(filteredData) .join("circle") .attr("cx", d => projection([+d.Longitude, +d.Latitude])[0]) .attr("cy", d => projection([+d.Longitude, +d.Latitude])[1]) .attr("r", 3) .attr("fill", "gray") .attr("opacity", 0.9) .on("mouseover", function (event, d) { d3.select(this) .attr("r", 6) .attr("stroke", "#222") .attr("stroke-width", 1.5); let info = ""; if (d.Director && d.Director.trim() !== "") info += `

Director: ${d.Director}

`; if (d["Actor 1"] && d["Actor 1"].trim() !== "") info += `

Main Actor: ${d["Actor 1"]}

`; if (d["Fun Facts"] && d["Fun Facts"].trim() !== "") info += `

${d["Fun Facts"]}

`; const [x, y] = d3.pointer(event, svg.node()); const titleWithYear = d["Release Year"] && d["Release Year"].trim() !== "" ? `${d.Title || "Unknown Title"} (${d["Release Year"]})` : (d.Title || "Unknown Title"); tooltip.transition().duration(100).style("opacity", 1); tooltip.html(`

${titleWithYear}

${d.Poster && d.Poster.trim() !== "" ? `

` : ""} ${info} `) .style("left", `${x + 15}px`) .style("top", `${y - 110}px`); }) .on("mousemove", function (event) { const [x, y] = d3.pointer(event, svg.node()); const tooltipWidth = 220; const padding = 10; const rightX = x + 10; const leftX = x - tooltipWidth - 10; const useLeftSide = rightX + tooltipWidth > mapWidth - padding; tooltip .style("left", `${x + 15}px`) .style("top", `${y - 110}px`); }) .on("mouseout", function () { d3.select(this) .attr("r", 3) .attr("stroke", null); tooltip.transition().duration(100).style("opacity", 0); }); const locations = circleState const groups = svg.selectAll(".loc") .data(locations) .enter() .append("g") .attr("class", "loc"); const circles = groups.append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r) .attr("fill", d => d.fill) .attr("stroke", d => d.dark) .attr("stroke-width", 2) .style("cursor", "move") .style("pointer-events", "visibleStroke"); groups.append("circle") .attr("cx", d => d.x) .attr("cy", d => d.y - d.r - 14) .attr("r", 12) .attr("fill", "white") .attr("stroke", "#ddd") .attr("stroke-width", 1); groups.append("text") .attr("x", d => d.x) .attr("y", d => d.y - d.r - 12) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", "16px") .attr("font-weight", "bold") .text(d => d.id); let resizing = false, moving = false; let activeCircle = null; let offsetX = 0, offsetY = 0; svg.call( d3.drag() .on("start", function (event) { const [mx, my] = d3.pointer(event); activeCircle = null; resizing = false; moving = false; svg.selectAll(".loc circle").each(function (d) { const dx = mx - d.x; const dy = my - d.y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist <= d.r + 6 && dist >= d.r - 6) { activeCircle = d; resizing = true; } else if (dist < d.r - 6) { activeCircle = d; moving = true; offsetX = d.x - mx; offsetY = d.y - my; } }); }) .on("drag", function (event) { if (!activeCircle) return; const [mx, my] = d3.pointer(event, this); if (resizing) { const dx = mx - activeCircle.x; const dy = my - activeCircle.y; activeCircle.r = Math.max(5, Math.sqrt(dx * dx + dy * dy)); } else if (moving) { activeCircle.x = Math.max(0, Math.min(mapWidth, mx + offsetX)); activeCircle.y = Math.max(0, Math.min(mapHeight, my + offsetY)); } update(); colorPoints(); }) .on("end", function () { activeCircle = null; }) ); function update() { circles .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => d.r); groups.selectAll("circle:nth-child(2)") .attr("cx", d => d.x) .attr("cy", d => d.y - d.r - 14); groups.select("text") .attr("x", d => d.x) .attr("y", d => d.y - d.r - 12); } function colorPoints() { points .attr("fill", d => { const [px, py] = projection([+d.Longitude, +d.Latitude]); const inside = locations.filter(c => { const dx = px - c.x, dy = py - c.y; return Math.sqrt(dx * dx + dy * dy) <= c.r; }); if (inside.length === 2) return "yellow"; return "gray"; }) .attr("stroke", d => { const [px, py] = projection([+d.Longitude, +d.Latitude]); const inside = locations.filter(c => { const dx = px - c.x, dy = py - c.y; return Math.sqrt(dx * dx + dy * dy) <= c.r; }); if (inside.length === 2) return "#b8860b"; return null; }); } colorPoints(); return container.node(); } 32:T682,

## Commentary

**Project description**
We implemented querying using two draggable circles, allowing users to filter locations that fall within their intersection, which is visually highlighted on the map. Three additional filters are provided: one for release year, director name, and location. To enhance interactivity, hovering over a film location displays the film poster (if available), director, and main actor information. The poster data was obtained using the IMDb API. **Group Members**
- Jihyeon Je: Implemented draggable and interactive querying and curated the poster thumbnail data. - Jiaju Ma: Implemented the three additional filtering controls along with dynamic filtering logic. **Development Process**
We spent roughly 10–12 hours developing the application. Overall, the project involved balancing visual interactivity with consistent data filtering and responsive rendering performance. The most time-consuming parts were: - Implementing interactive drag and resize behavior for the query circles while keeping the map responsive. - Ensuring smooth updates when both sliders and draggable edges were used to adjust circle radii. - Synchronizing filter logic between multiple user controls (circle intersection, year range, director/street filters). - Hover interactions and styling took less time but required careful tuning to ensure that film details only appeared when users hovered over points. **External resources used**
We used ChatGPT and Claude for debugging and refining parts of the code. Additionally, we used the IMDb API to scrape and retrieve movie poster data for display in the hover tooltips.33:[{"id":"de203da7594c72a71f4df939bc9e3efde9c91395effc6acd52e818dcee97e7bc70633b0dd1c311dcfaee0a29563bd035e85f938499f127c576635255dc989ccf","href":"https://static.observableusercontent.com/files/de203da7594c72a71f4df939bc9e3efde9c91395effc6acd52e818dcee97e7bc70633b0dd1c311dcfaee0a29563bd035e85f938499f127c576635255dc989ccf","name":"SF_Film_Locations_Filtered_with_Posters.csv","type":"text/csv","lastModified":1760826857837.788,"size":1063443},{"id":"2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","href":"https://static.observableusercontent.com/files/2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","name":"sf_map.png","type":"image/png","lastModified":1760552327487.348,"size":1245599}] 2f:{"id":"fa4f5eebb4d8e981","slug":"cs-448b-assignment-3","title":"CS 448B Assignment 3","thumbnail":"b61afaf36efcbc7358667f4597c3c592c5ef7f867c0de842645462c060d3c7b3","access_level":"public","create_time":"$D2025-10-15T18:18:47.487Z","update_time":"$D2025-10-24T04:55:05.528Z","view_time":null,"first_public_time":"$D2025-10-24T04:52:07.914Z","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":"8684a2d6a29e4c6b","login":"jiajuma","name":"Jiaju Ma","avatar_url":"https://avatars-next.observableusercontent.com/a8d57db7e87a28add05fb5b21b86cd29a6dc3051d5ccfe6fc7a6e3e37eab9073","tier":"pro_2024"},"version":344,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"86d01536d4c4f270","login":"jiajuma","name":"Jiaju Ma","avatar_url":"https://avatars-next.observableusercontent.com/ae18a541021894a24457432b236c450cc704279da8ac2e08fb098331bee79799","tier":null}],"members":[{"type":"team","id":"8684a2d6a29e4c6b","login":"jiajuma","name":"Jiaju Ma","avatar_url":"https://avatars-next.observableusercontent.com/a8d57db7e87a28add05fb5b21b86cd29a6dc3051d5ccfe6fc7a6e3e37eab9073","tier":"pro_2024","role":"editor"},{"type":"individual","id":"86d01536d4c4f270","login":"jiajuma","name":"Jiaju Ma","avatar_url":"https://avatars-next.observableusercontent.com/ae18a541021894a24457432b236c450cc704279da8ac2e08fb098331bee79799","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"CS 448B Assignment 3","cells":[{"id":0,"value":"# CS 448B Assignment 3\n# San Francisco Film Locations\n\nby Jihyeon Je and Jiaju Ma","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":316,"value":"

\nFilter by Release Year","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":182,"value":"viewof yearRange = rangeInput({\n min: minYear,\n max: maxYear,\n step: 1,\n value: [minYear, maxYear],\n enableTextInput: true,\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"Filter by Directors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":251,"value":"viewof selectedDirectors = multiAutoSelect({\n options: directors,\n value: [],\n placeholder: \"Search and select directors...\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"Filter by locations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":278,"value":"viewof selectedLocations = multiAutoSelect({\n options: locations,\n value: [],\n placeholder: \"Search and select locations...\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"

\n### Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":193,"value":"import {rangeInput} from \"@kasivisu4/range-slider\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":253,"value":"import {multiAutoSelect} from \"@john-guerra/multi-auto-select\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":178,"value":"data = await d3.csv(await FileAttachment(\"SF_Film_Locations_Filtered_with_Posters.csv\").url());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"### Definitions & Utility Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"mapWidth = 1968 / 2.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"mapHeight = 1580 / 2.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"longitudeRange = [-122.52876879101329, -122.34501499128038];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"latitudeRange = [37.69947941416328, 37.81633202723721];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":231,"value":"mutable circleState = [\n { id: \"A\", x: 200, y: 300, r: 30, fill: \"rgba(0,200,0,0.1)\", dark: \"#007000\" },\n { id: \"B\", x: 500, y: 400, r: 40, fill: \"rgba(255,105,180,0.1)\", dark: \"#b03060\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":41,"value":"### Map Projection Setup","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"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"},{"id":211,"value":"### Filter Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":214,"value":"years = data.map(d => +d[\"Release Year\"]).filter(y => !isNaN(y));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"minYear = d3.min(years);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":219,"value":"maxYear = d3.max(years);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":248,"value":"directors = Array.from(new Set(\n data\n .map(d => d.Director)\n .filter(director => director && director.trim() !== \"\")\n)).sort();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"locations = Array.from(new Set(\n data\n .map(d => d.Locations)\n .filter(location => location && location.trim() !== \"\")\n)).sort();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"