{ 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(); }