2f:Ta4d,baseMap = { /* Code below is taken from assignment 3 page for rendering the map */ // Add an SVG element to the DOM var svg = d3 .create("svg") .attr("id", "svg-container") .attr("width", mapWidth) .attr("height", mapHeight) .style("border", "1px solid black"); // Add SVG map at correct size, assuming map is saved in a subdirectory called `data` svg .append("image") .attr("width", mapWidth) .attr("height", mapHeight) .attr("xlink:href", await FileAttachment("sf_map.png").url()); let circleHandler = svg.append("g").attr("class", "filter-group-1"); circleHandler .append("circle") .attr("id", "filter-radius-1") .attr("r", 300) .attr("cx", initial_coords[0][0]) .attr("cy", initial_coords[0][1]) .attr("fill", "blue") .attr("opacity", 0.1); circleHandler .append("circle") .attr("id", "filter-circle-1") .attr("r", (d) => 3) .attr("cx", initial_coords[0][0]) .attr("cy", initial_coords[0][1]) .attr("fill", "red") .attr("opacity", 1); let circleHandler2 = svg.append("g").attr("class", "filter-group-2"); circleHandler2 .append("circle") .attr("id", "filter-radius-2") .attr("r", 300) .attr("cx", initial_coords[1][0]) .attr("cy", initial_coords[1][1]) .attr("fill", "orange") .attr("opacity", 0.1); circleHandler2 .append("circle") .attr("id", "filter-circle-2") .attr("r", (d) => 3) .attr("cx", initial_coords[1][0]) .attr("cy", initial_coords[1][1]) .attr("fill", "red") .attr("opacity", 1); svg .append("text") .attr("id", "text-id") .text("") .attr("x", mapWidth / 2) .attr("y", mapHeight / 2) .attr("dy", -10) .attr("font-family", "sans-serif") .attr("font-size", "16px") .attr("fill", "darkblue") .attr("text-anchor", "start") .attr("opacity", 1) .attr("dominant-baseline", "start"); const circles = svg.selectAll("circle").data(data, (d, i) => i); circles.exit().transition().attr("r", 0).remove(); const enterCircles = circles .enter() .append("circle") .attr("class", ".data-point") .attr("id", (d, i) => `data-point-${i}`) .attr("fill", "gray") .attr("cx", (d) => { return projection([d.Longitude, d.Latitude])[0]; }) .attr("cy", (d) => { return projection([d.Longitude, d.Latitude])[1]; }) .on("mouseover", updateHoverData) .on("mouseout", () => { mutable currentHoverData = null; }); const updateEnterAnimation = enterCircles.merge(circles); updateEnterAnimation.transition().duration(); return svg.node(); }30:T707,filt_data = { let temp = []; let filt_radius = filter_radius; sf_film_locations_filtered.forEach((v, idx) => { const [pointX, pointY] = projection([v.Longitude, v.Latitude]); let temp_list = [circleEdit1, circleEdit2]; // const isSelected = temp_list.some((filterdata) => { // // const [filterX, filterY] = projection([filterdata.lon, filterdata.lat]); // const filterX = filterdata.x; // const filterY = filterdata.y; // let distance = Math.sqrt( // Math.pow(pointX - filterX, 2) + Math.pow(pointY - filterY, 2) // ); // // euculedian dist // return distance <= filt_radius; // }); const filterX1 = circleEdit1.x; const filterY1 = circleEdit1.y; let distance1 = Math.sqrt( Math.pow(pointX - filterX1, 2) + Math.pow(pointY - filterY1, 2) ); const isWithinCircle1 = distance1 <= filt_radius; // --- Check CircleEdit2 --- const filterX2 = circleEdit2.x; const filterY2 = circleEdit2.y; let distance2 = Math.sqrt( Math.pow(pointX - filterX2, 2) + Math.pow(pointY - filterY2, 2) ); const isWithinCircle2 = distance2 <= filt_radius; // --- Intersection Logic --- // The point is selected ONLY if it's within Circle 1 AND Circle 2 const isSelected = isWithinCircle1 && isWithinCircle2; d3.select(`#data-point-${idx}`) .transition() .duration(100) .attr("fill", isSelected ? "black" : "gray") .attr("opacity", isSelected ? 1 : 0.8) .attr( "r", v["Release Year"] <= release_year && production_company_list.includes(v["Production Company"]) ? isSelected ? 2 : 1 : 0 ); if (isSelected) { temp.push({ ...v }); } }); return temp; }31:[{"id":"2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","href":"https://static.observableusercontent.com/files/2dccaf7a3e257438137f440de9fb712e55e6a95a6f9427bc042b061f1f7c026be0f758541913701fe985c19e1d2305e158e5e0190f31e490f5c0ed6dd6013796","name":"sf_map.png","type":"image/png","lastModified":1761182194628.031,"size":1245599},{"id":"3968369c07d13345c6f54b9d627b4d3fed78a1a97356d425225da14e8905f4f337c2ce3a0a5405cb14a1018a9005b85ea383e154e0c2a5c290f027c0e555a004","href":"https://static.observableusercontent.com/files/3968369c07d13345c6f54b9d627b4d3fed78a1a97356d425225da14e8905f4f337c2ce3a0a5405cb14a1018a9005b85ea383e154e0c2a5c290f027c0e555a004","name":"SF_Film_Locations_Filtered.csv","type":"text/csv","lastModified":1761182194628.031,"size":640299}] 2d:{"title":"Assignment 3 [STARTER CODE]","cells":[{"id":0,"value":"# Assignment 3 [STARTER CODE]","pinned":false,"hidden":false,"mode":"md"},{"id":904,"value":"## Tools Used\nStack overflow and observablhq forums were used as primary sources of information.\n\n## Development\n\nI forked the sample notebook, and built from there. The initial rendering of elements into svg was relatively straightforward. Had the most difficulty in terms of tackling the mutability of states especially for the dragging function. For some reason when you click to drag an object (circle) in observablHq it will offset what you have dragged in the svg. This happens only when you are saving and keeping its state in a mutable variable. Overall I worked 6-7 Hours on this and 5 of those hours were spent tackling the mutability issue with observableHq cells also having memory.","pinned":false,"hidden":false,"mode":"md"},{"id":856,"value":"## Filter Production Company","pinned":false,"hidden":false,"mode":"md"},{"id":826,"value":"viewof rows = Inputs.table(production_company, {\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"## Filter Year","pinned":false,"hidden":false,"mode":"md"},{"id":830,"value":"viewof release_year = Inputs.range(year_range, {\n value: year_range[1],\n step: 1,\n label: \"Year\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":860,"value":"## Change Radius Size\n\n- Drag Red circle to move circle ares","pinned":false,"hidden":false,"mode":"md"},{"id":833,"value":"viewof filter_radius = Inputs.range([5, 400], {\n value: 300,\n step: 2,\n label: \"Filter Radius\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"

\n Hovered Element
\n Title: ${currentHoverData ? currentHoverData[\"Title\"] : \"\"}
\n Year: ${currentHoverData ? currentHoverData[\"Release Year\"] : \"\"}\n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":73,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":894,"value":"## Selected Circles Table Filter","pinned":false,"hidden":false,"mode":"md"},{"id":884,"value":"{\n return filt_data ? table(filt_data) : \"\";\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"## Declare Mutables","pinned":false,"hidden":false,"mode":"md"},{"id":868,"value":"initial_coords = {\n let circ1lon =\n ((longitudeRange[0] + longitudeRange[1]) / 2 + longitudeRange[1]) / 2;\n let circ1lat =\n ((latitudeRange[0] + latitudeRange[1]) / 2 + latitudeRange[1]) / 2;\n\n let circ2lon =\n ((longitudeRange[0] + longitudeRange[1]) / 2 + longitudeRange[0]) / 2;\n let circ2lat =\n ((latitudeRange[0] + latitudeRange[1]) / 2 + latitudeRange[0]) / 2;\n\n return [projection([circ1lon, circ1lat]), projection([circ2lon, circ2lat])];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":867,"value":"mutable circleEdit1 = ({\n id: 0,\n x: initial_coords[0][0],\n y: initial_coords[0][1]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":869,"value":"mutable circleEdit2 = ({\n id: 1,\n x: initial_coords[1][0],\n y: initial_coords[1][1]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":631,"value":"year_range = d3.extent(sf_film_locations_filtered.map((v) => v[\"Release Year\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":688,"value":"production_company = [\n ...new Set(\n sf_film_locations_filtered.map((d) => {\n return { \"Production Company\": d[\"Production Company\"] };\n })\n )\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":772,"value":"mutable currentHoverData = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":774,"value":"function updateHoverData(event, d) {\n mutable currentHoverData = d;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"filtered_titles = [...new Set(rows.map((d) => d[\"Title\"]))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":878,"value":"## D3 interaction functions","pinned":false,"hidden":false,"mode":"md"},{"id":784,"value":"d3\n .select(\"#text-id\")\n .text(currentHoverData ? currentHoverData.Title : \"\")\n .attr(\n \"x\",\n currentHoverData\n ? projection([currentHoverData.Longitude, currentHoverData.Latitude])[0]\n : 0\n )\n .attr(\n \"y\",\n currentHoverData\n ? projection([currentHoverData.Longitude, currentHoverData.Latitude])[1]\n : 0\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"// Drag Circle 1\nd3.select(\"#filter-circle-1\").call(\n d3.drag().on(\"drag\", function (event, d) {\n // Update data and element position during drag\n mutable circleEdit1 = { id: 0, x: event.x, y: event.y };\n d3.select(this).attr(\"cx\", event.x).attr(\"cy\", event.y);\n\n let parent_group = d3.select(this.parentNode);\n let outer_circle = parent_group.select(\"#filter-radius-1\");\n\n outer_circle.attr(\"cx\", event.x).attr(\"cy\", event.y);\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"// Radius Circle 1\nd3\n .select(\"#filter-radius-1\")\n .transition()\n .duration(100)\n .attr(\"r\", filter_radius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":800,"value":"// Drag Circle 1\nd3.select(\"#filter-circle-2\").call(\n d3.drag().on(\"drag\", function (event, d) {\n // Update data and element position during drag\n mutable circleEdit2 = { id: 0, x: event.x, y: event.y };\n d3.select(this).attr(\"cx\", event.x).attr(\"cy\", event.y);\n\n let parent_group = d3.select(this.parentNode);\n let outer_circle = parent_group.select(\"#filter-radius-2\");\n\n outer_circle.attr(\"cx\", event.x).attr(\"cy\", event.y);\n })\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":802,"value":"// Radius Circle 1\nd3\n .select(\"#filter-radius-2\")\n .transition()\n .duration(100)\n .attr(\"r\", filter_radius)","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"production_company_list = rows.map((v) => v[\"Production Company\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":607,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"// update_data_points = () => {\n// const currentDataPoints = data;\n// const currentFilterCircleData = filterCircle1;\n// let updatedDataPoints = currentDataPoints.map((dataPoint) => {\n// const [pointX, pointY] = projection([\n// dataPoint.Longitude,\n// dataPoint.Latitude\n// ]);\n\n// const isSelected = currentFilterCircleData.some((filterdata) => {\n// const [filterX, filterY] = projection([filterdata.lon, filterdata.lat]);\n// let distance = Math.sqrt(\n// Math.pow(pointX - filterX, 2) + Math.pow(pointY - filterY, 2)\n// );\n// // euculedian dist\n\n// return distance <= filter_radius_;\n// });\n\n// return {\n// ...dataPoint,\n// selected: isSelected\n// };\n// });\n\n// mutable data = updatedDataPoints;\n// }","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":888,"value":"import { table } from \"@gampleman/table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"d3 = require('d3@7')","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"import {fromColumns, printTable} from '@uwdata/data-utilities'","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"import {aq, op} from '@uwdata/arquero'","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"import {graphic} from '@d3/margin-convention'","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"### Definitions & Utility Functions","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"mapWidth = 1968 / 2.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"mapHeight = 1580 / 2.4","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"longitudeRange = [-122.52876879101329, -122.34501499128038];","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"latitudeRange = [37.69947941416328, 37.81633202723721];","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":41,"value":"### Map Projection Setup","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":206,"value":"data = {\n let temp = [];\n sf_film_locations_filtered.forEach((v, idx) => {\n temp.push({ ...v, selected: false, id: idx });\n });\n return temp;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"sf_film_locations_filtered = await FileAttachment(\"SF_Film_Locations_Filtered.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}