-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added mexico to map, attemped path drawings, and have rough line grap…
…h animation
- Loading branch information
1 parent
151b8be
commit 536a0b1
Showing
5 changed files
with
248 additions
and
1,385 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| {"march_avg":{"2004":null,"2005":161.0,"2006":null,"2007":1.0,"2008":null,"2009":1.0,"2010":null,"2011":4.0,"2012":4.0,"2013":1.75,"2014":1.25,"2015":null,"2016":3.3666666667,"2017":6.3571428571,"2018":4.8666666667,"2019":7.1764705882,"2020":4.7777777778,"2021":2.8,"2022":2.3333333333,"2023":null},"april_avg":{"2004":null,"2005":1871.5,"2006":304.0,"2007":13.6666666667,"2008":56.5,"2009":5.5,"2010":59.25,"2011":83.2083333333,"2012":1138.0,"2013":296.4,"2014":26.625,"2015":622.3333333333,"2016":13.1264880952,"2017":39.8333333333,"2018":39.9595238095,"2019":19.8005952381,"2020":32.0045787546,"2021":25.8654040404,"2022":16.806272509,"2023":null},"may_avg":{"2004":null,"2005":null,"2006":738.0,"2007":21.875,"2008":3.0,"2009":3.75,"2010":11.6666666667,"2011":22.95,"2012":108.2,"2013":212.25,"2014":24.5,"2015":218.8041666667,"2016":2.25,"2017":7.0773809524,"2018":3.7,"2019":2.95,"2020":3.25,"2021":18.1291666667,"2022":28.2743006993,"2023":null}} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| function createEGLinegraph() { | ||
| // Select the correct SVG element and set width/height | ||
| const svgWidth = 700, svgHeight = 700; | ||
| const margin = { top: 50, right: 80, bottom: 50, left: 50 }; | ||
| const width = svgWidth - margin.left - margin.right; | ||
| const height = svgHeight - margin.top - margin.bottom; | ||
|
|
||
| const svg = d3.select("#grebe_linegraph") | ||
| .attr("width", svgWidth) | ||
| .attr("height", svgHeight) | ||
| .append("g") | ||
| .attr("transform", `translate(${margin.left}, ${margin.top})`); | ||
|
|
||
| // Load JSON data | ||
| d3.json("birds/eg_geojsons/EG_Spring_Avgs.json") | ||
| .then(data => { | ||
| console.log("Loaded JSON Data:", data); | ||
|
|
||
| const years = Object.keys(data.march_avg).filter(y => y !== "null"); // Extract available years | ||
| let currentYearIndex = 0; // Start from the first year | ||
|
|
||
| // Set up scales | ||
| const xScale = d3.scaleBand() | ||
| .domain(["January", "February", "March", "April", "May", "June", | ||
| "July", "August", "September", "October", "November", "December"]) | ||
| .range([0, width]) | ||
| .padding(0.1); | ||
|
|
||
| const yScale = d3.scaleLinear().range([height, 0]); | ||
|
|
||
| // Define the line generator | ||
| const line = d3.line() | ||
| .x(d => xScale(d.month) + xScale.bandwidth() / 2) | ||
| .y(d => d.value !== null ? yScale(d.value) : null) | ||
| .defined(d => d.value !== null); // Ignore null values | ||
|
|
||
| // Add X Axis | ||
| svg.append("g") | ||
| .attr("class", "x-axis") | ||
| .attr("transform", `translate(0, ${height})`) | ||
| .call(d3.axisBottom(xScale)) | ||
| .selectAll("text") | ||
| .attr("transform", "rotate(-45)") | ||
| .style("text-anchor", "end"); | ||
|
|
||
| // Add Y Axis | ||
| const yAxis = svg.append("g").attr("class", "y-axis"); | ||
|
|
||
| // Add line path | ||
| const path = svg.append("path") | ||
| .attr("fill", "none") | ||
| .attr("stroke", "blue") | ||
| .attr("stroke-width", 2); | ||
|
|
||
| // 🔹 **Fix: Move the Year Label outside the transformed group** | ||
| const yearText = d3.select("#grebe_linegraph") | ||
| .append("text") | ||
| .attr("id", "year-label") | ||
| .attr("x", svgWidth - 100) // Adjusted for better visibility | ||
| .attr("y", 100) // Position near the top | ||
| .attr("text-anchor", "middle") | ||
| .style("font-size", "24px") | ||
| .style("font-weight", "bold") | ||
| .style("fill", "black"); | ||
|
|
||
| // Function to update graph for a specific year | ||
| function updateGraph(year) { | ||
| const dataset = [ | ||
| { month: "January", value: null }, | ||
| { month: "February", value: null }, | ||
| { month: "March", value: data.march_avg[year] || 0 }, | ||
| { month: "April", value: data.april_avg[year] || 0 }, | ||
| { month: "May", value: data.may_avg[year] || 0 }, | ||
| { month: "June", value: null }, | ||
| { month: "July", value: null }, | ||
| { month: "August", value: null }, | ||
| { month: "September", value: null }, | ||
| { month: "October", value: null }, | ||
| { month: "November", value: null }, | ||
| { month: "December", value: null } | ||
| ]; | ||
|
|
||
| // Update Y scale domain dynamically | ||
| const validValues = dataset.filter(d => d.value !== null); | ||
| yScale.domain([0, d3.max(validValues, d => d.value)]).nice(); | ||
|
|
||
| // Update Y Axis | ||
| yAxis.transition().duration(1000).call(d3.axisLeft(yScale)); | ||
|
|
||
| // Update Line | ||
| path.datum(dataset) | ||
| .transition() | ||
| .duration(1000) | ||
| .attr("d", line); | ||
|
|
||
| // 🔹 **Fix: Update Year Label Correctly** | ||
| yearText.text(`Year: ${year}`); | ||
| } | ||
|
|
||
| // Cycle through years every 2 seconds | ||
| function animateYears() { | ||
| updateGraph(years[currentYearIndex]); | ||
| currentYearIndex = (currentYearIndex + 1) % years.length; | ||
| setTimeout(animateYears, 2000); | ||
| } | ||
|
|
||
| animateYears(); // Start animation | ||
| }) | ||
| .catch(error => console.error("Error loading JSON:", error)); | ||
| } |
Oops, something went wrong.