{ const colorScale = { "Bald eagle": "#DAA520", Moose: "#8B4513", "Black bear": "#1a1a1a", "Brown bear": "#E8751A", "Gray wolf": "#808080" }; const opacityBySpecies = { "Bald eagle": 0.18, Moose: 0.4, "Black bear": 0.5, "Brown bear": 0.45, "Gray wolf": 0.45 }; const monthOrder = [ "All months", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; const allYears = Array.from( new Set(wildlifeBubbles.map((d) => d.year)) ).sort(); const minYear = +allYears[0]; const maxYear = +allYears[allYears.length - 1]; const mapWidth = 760; const mapHeight = 600; const margin = { top: 60, right: 20, bottom: 50, left: 75 }; const lonExtent = [-150.15, -149.0]; const latExtent = [61.05, 61.75]; const xScale = d3 .scaleLinear() .domain(lonExtent) .range([margin.left, mapWidth - margin.right]); const yScale = d3 .scaleLinear() .domain(latExtent) .range([mapHeight - margin.bottom, margin.top]); const geoPath = d3.geoPath().projection( d3.geoTransform({ point(lon, lat) { this.stream.point(xScale(lon), yScale(lat)); } }) ); // ── Controls ────────────────────────────────────────────────────────────── const speciesInput = Inputs.checkbox( ["Bald eagle", "Moose", "Black bear", "Brown bear", "Gray wolf"], { label: "Species", value: ["Bald eagle", "Moose", "Black bear", "Brown bear", "Gray wolf"] } ); const yearSlider = Inputs.range([minYear, maxYear], { label: "Year", step: 1, value: maxYear, format: (d) => String(Math.round(d)) }); const monthSlider = Inputs.range([0, 12], { label: "Month", step: 1, value: 0, format: (d) => monthOrder[Math.round(d)] }); // ── SVG ─────────────────────────────────────────────────────────────────── const svg = d3 .create("svg") .attr("width", mapWidth) .attr("height", mapHeight) .style("background", "#c8dce8"); const regionTip = d3 .select("body") .append("div") .style("position", "absolute") .style("background", "rgba(10,10,10,0.88)") .style("color", "white") .style("padding", "5px 12px") .style("border-radius", "4px") .style("font-size", "13px") .style("font-weight", "bold") .style("pointer-events", "none") .style("opacity", 0) .style("z-index", 997) .style("box-shadow", "0 2px 8px rgba(0,0,0,0.4)"); function geoLayer(geojson, baseFill, stroke, strokeW, dash, name) { const features = geojson.features ? geojson.features : [geojson]; svg .append("g") .selectAll("path") .data(features) .join("path") .attr("d", geoPath) .attr("fill", baseFill) .attr("stroke", stroke) .attr("stroke-width", strokeW) .attr("stroke-dasharray", dash || null) .style("cursor", name ? "pointer" : "default") .on("mouseover", function (event, feat) { if (baseFill !== "none") d3.select(this).attr("fill-opacity", 0.45); else d3.select(this) .attr("stroke-width", strokeW * 2.5) .attr("stroke", "#ff6600"); if (name) { const label = feat.properties?.NAME || feat.properties?.CITYNAME || feat.properties?.name || feat.properties?.Name || name; regionTip .style("opacity", 1) .text(label && label !== "null" ? label : name); } }) .on("mousemove", (event) => regionTip .style("left", event.pageX + 16 + "px") .style("top", event.pageY - 36 + "px") ) .on("mouseout", function () { d3.select(this) .attr("fill-opacity", 1) .attr("stroke-width", strokeW) .attr("stroke", stroke); regionTip.style("opacity", 0); }); } geoLayer( msbBoundary, "#e8f0e0", "#aaa", 0.8, null, "Matanuska-Susitna Borough" ); geoLayer( moaBoundary, "#ddeedd", "#888", 1.0, null, "Anchorage / Municipality of Anchorage" ); geoLayer(chugach, "#c5ddb5", "#6a9a50", 0.8, null, "Chugach State Park"); geoLayer(parkLand, "#b8d4a0", "#aaa", 0.3, null, "Park land"); geoLayer(lakes, "#5b9bd5", "#3a7abf", 1.0, null, "Lake"); geoLayer(shorelines, "none", "#2255aa", 1.6, null, "Shoreline"); geoLayer(streams, "none", "#4477cc", 0.5, null, "Stream"); geoLayer( militaryBoundary, "rgba(200,50,50,0.18)", "#aa2222", 2.2, "7,4", "Joint Base Elmendorf-Richardson" ); geoLayer( cityBoundaries, "rgba(255,230,50,0.20)", "#cc8800", 1.8, "5,3", "Wasilla" ); svg .selectAll("line.vgrid") .data(xScale.ticks(7)) .join("line") .attr("class", "vgrid") .attr("x1", (d) => xScale(d)) .attr("x2", (d) => xScale(d)) .attr("y1", margin.top) .attr("y2", mapHeight - margin.bottom) .attr("stroke", "#7799bb") .attr("stroke-width", 0.7) .attr("stroke-dasharray", "3,5"); svg .selectAll("line.hgrid") .data(yScale.ticks(7)) .join("line") .attr("class", "hgrid") .attr("x1", margin.left) .attr("x2", mapWidth - margin.right) .attr("y1", (d) => yScale(d)) .attr("y2", (d) => yScale(d)) .attr("stroke", "#7799bb") .attr("stroke-width", 0.7) .attr("stroke-dasharray", "3,5"); svg .append("g") .attr("transform", `translate(0,${mapHeight - margin.bottom})`) .call( d3 .axisBottom(xScale) .ticks(7) .tickFormat((d) => d.toFixed(2) + "°") ) .call((g) => g .selectAll(".tick text") .attr("font-size", 11) .attr("fill", "#222") .attr("font-weight", "bold") ); svg .append("text") .attr("x", (margin.left + mapWidth - margin.right) / 2) .attr("y", mapHeight - 8) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", "bold") .attr("fill", "#222") .text("Longitude"); svg .append("g") .attr("transform", `translate(${margin.left},0)`) .call( d3 .axisLeft(yScale) .ticks(7) .tickFormat((d) => d.toFixed(2) + "°") ) .call((g) => g .selectAll(".tick text") .attr("font-size", 11) .attr("fill", "#222") .attr("font-weight", "bold") ); svg .append("text") .attr("transform", "rotate(-90)") .attr("x", -(margin.top + mapHeight - margin.bottom) / 2) .attr("y", 18) .attr("text-anchor", "middle") .attr("font-size", 13) .attr("font-weight", "bold") .attr("fill", "#222") .text("Latitude"); const tooltip = d3 .select("body") .append("div") .style("position", "absolute") .style("background", "white") .style("border", "1px solid #ccc") .style("padding", "10px 14px") .style("border-radius", "6px") .style("font-size", "12px") .style("line-height", "1.6") .style("pointer-events", "none") .style("opacity", 0) .style("z-index", 999) .style("box-shadow", "0 2px 8px rgba(0,0,0,0.18)") .style("max-width", "200px"); const bubbleG = svg.append("g").style("mix-blend-mode", "multiply"); // Legend const speciesEntries = Object.entries(colorScale); const mapLayerEntries = [ { fill: "#e8f0e0", label: "MSB region" }, { fill: "#ddeedd", label: "Anchorage / MOA" }, { fill: "#c5ddb5", label: "Chugach State Park" }, { fill: "#b8d4a0", label: "Park land" }, { fill: "#5b9bd5", stroke: "#3a7abf", label: "Lakes" }, { stroke: "#2255aa", label: "Shorelines" }, { fill: "rgba(200,50,50,0.4)", stroke: "#aa2222", dash: true, label: "JBER" }, { fill: "rgba(255,230,50,0.4)", stroke: "#cc8800", dash: true, label: "Wasilla" } ]; const legendRowH = 18, legendPad = 10, legendW = 158; const legendTotalH = legendPad + 16 + speciesEntries.length * legendRowH + 12 + 16 + mapLayerEntries.length * legendRowH + legendPad; const legendX = mapWidth - margin.right - legendW - legendPad; const legendTop = mapHeight - margin.bottom - legendTotalH - 10; svg .append("rect") .attr("x", legendX - legendPad) .attr("y", legendTop) .attr("width", legendW + legendPad * 2) .attr("height", legendTotalH) .attr("fill", "rgba(255,255,255,0.95)") .attr("rx", 7) .attr("stroke", "#bbb") .attr("stroke-width", 1); let ly = legendTop + legendPad + 13; svg .append("text") .attr("x", legendX) .attr("y", ly) .attr("font-size", 12) .attr("font-weight", "bold") .attr("fill", "#111") .text("Species"); ly += legendRowH; for (const [species, color] of speciesEntries) { svg .append("circle") .attr("cx", legendX + 8) .attr("cy", ly - 5) .attr("r", 8) .attr("fill", color) .attr("opacity", 0.9) .attr("stroke", "#555") .attr("stroke-width", 0.5); svg .append("text") .attr("x", legendX + 22) .attr("y", ly) .attr("font-size", 11.5) .attr("fill", "#111") .attr("font-weight", "600") .text(species); ly += legendRowH; } ly += 4; svg .append("text") .attr("x", legendX) .attr("y", ly) .attr("font-size", 12) .attr("font-weight", "bold") .attr("fill", "#111") .text("Map layers"); ly += legendRowH; for (const layer of mapLayerEntries) { if (layer.fill && layer.stroke && layer.dash) { svg .append("rect") .attr("x", legendX) .attr("y", ly - 10) .attr("width", 16) .attr("height", 11) .attr("fill", layer.fill) .attr("stroke", layer.stroke) .attr("stroke-width", 1.5) .attr("stroke-dasharray", "4,2"); } else if (layer.fill && layer.stroke) { svg .append("rect") .attr("x", legendX) .attr("y", ly - 10) .attr("width", 16) .attr("height", 11) .attr("fill", layer.fill) .attr("stroke", layer.stroke) .attr("stroke-width", 1); } else if (layer.stroke && !layer.fill) { svg .append("line") .attr("x1", legendX) .attr("x2", legendX + 16) .attr("y1", ly - 5) .attr("y2", ly - 5) .attr("stroke", layer.stroke) .attr("stroke-width", 2); } else { svg .append("rect") .attr("x", legendX) .attr("y", ly - 10) .attr("width", 16) .attr("height", 11) .attr("fill", layer.fill) .attr("stroke", "#aaa") .attr("stroke-width", 0.5); } svg .append("text") .attr("x", legendX + 22) .attr("y", ly) .attr("font-size", 11.5) .attr("fill", "#111") .attr("font-weight", "600") .text(layer.label); ly += legendRowH; } // Title last svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", mapWidth) .attr("height", 57) .attr("fill", "rgba(255,255,255,0.94)"); svg .append("text") .attr("x", margin.left) .attr("y", 22) .attr("font-size", 16) .attr("font-weight", "bold") .attr("fill", "#111") .text("Where are wildlife observations recorded over time?"); const subtitleText = svg .append("text") .attr("x", margin.left) .attr("y", 43) .attr("font-size", 12) .attr("fill", "#333") .text( `${wildlifeBubbles.length} grouped records — Anchorage, JBER, and Wasilla` ); // ── Redraw ──────────────────────────────────────────────────────────────── function redraw() { const speciesSel = speciesInput.value; const yearSel = String(Math.round(yearSlider.value)); const monthIdx = Math.round(monthSlider.value); const monthSel = monthOrder[monthIdx]; const filtered = wildlifeBubbles.filter( (d) => speciesSel.includes(d.common_name) && d.year === yearSel && (monthIdx === 0 || d.month === monthSel) ); const sizeScale = d3 .scaleSqrt() .domain([1, d3.max(filtered, (d) => d.observation_count) || 1]) .range([3, 16]); bubbleG.selectAll("circle").remove(); bubbleG .selectAll("circle.bubble") .data(filtered) .join("circle") .attr("class", "bubble") .attr("cx", (d) => xScale(d.longitude)) .attr("cy", (d) => yScale(d.latitude)) .attr("r", (d) => sizeScale(d.observation_count)) .attr("fill", (d) => colorScale[d.common_name] || "#aaa") .attr("opacity", (d) => opacityBySpecies[d.common_name] ?? 0.35) .attr("stroke", "none") .on("mouseover", (event, d) => { const imgUrl = speciesImages.get(d.common_name); const imgTag = imgUrl ? `

` : ""; tooltip .style("opacity", 1) .html( `${d.common_name}
Year: ${d.year}
Month: ${d.month}
Observations: ${d.observation_count}
Lat: ${d.latitude} Lon: ${d.longitude}${imgTag}` ); }) .on("mousemove", (event) => tooltip .style("left", event.pageX + 16 + "px") .style("top", event.pageY - 32 + "px") ) .on("mouseout", () => tooltip.style("opacity", 0)); subtitleText.text( `${filtered.length} grouped records — ${monthSel} ${yearSel}` ); } speciesInput.addEventListener("input", redraw); yearSlider.addEventListener("input", redraw); monthSlider.addEventListener("input", redraw); redraw(); const wrapper = html`

${speciesInput}

${yearSlider}

${monthSlider}

${svg.node()}

`; return wrapper; }