NFL Passing Yards Visualization 11/15/2024 Revision

NFL Passing Yards Visualization Final Revision

An interactive scatter plot visualizes NFL quarterback passing statistics from 2013 to 2023, comparing two user-selected numeric attributes such as yards and touchdowns. The animation shows each player as a colored circle, with colors representing awards like MVP, All-Pro, or Pro Bowl. Users can filter by year, award, and player name. Built with D3.js, the visualization uses `scaleLinear`, `axisLeft`, and dynamic axes to update the scatter plot based on selections. Data from CSV files is preprocessed to assign awards and colors, and clicking a point displays a tooltip with player details.

NFL Passing Yards Visualization 11/08/2024 Revision

This interactive scatter plot explores NFL quarterback statistics across multiple seasons (2013–2023), sourced from CSV data files. Users can select any two numeric attributes for the x- and y-axes, filter by year, and categorize points by award type (Pro Bowl, All-Pro, MVP, or no award), which also determines circle color. The visualization uses D3.js (v7) to render axes, axis labels, a legend, and data points, with hover and click interactions to highlight award categories and display detailed player information.

NFL Passing Yards Visualization 10/31/2024 Revision

This interactive scatter plot visualizes NFL passing statistics across multiple seasons, with each point representing a quarterback and colored by award status (Pro Bowl, All-Pro, MVP, or no award). Users can select different numeric attributes for the x- and y-axes via dropdown menus, as well as filter by specific years, while d3.scaleLinear and d3.axisLeft handle data mapping and axis rendering. The chart updates dynamically by resetting the data array and re-calling the scatterPlot function, which uses D3 joins to manage SVG circles and rectangles.

NFL Passing Yards Visualization 11/22/2024 Revision

This interactive scatter plot animates NFL quarterback statistics from 2013–2023, visualizing relationships between numeric attributes like passing yards and touchdowns. Using D3.js, it displays each player as a colored circle representing award status, with dropdown menus for selecting axes, filters for year or award type, and a text input for player search. Clicking a data point reveals a tooltip with player details, while hovering over the legend highlights matching points. The visualization supports dynamic data exploration through state management and uses D3’s selection, scale, and axis APIs for rendering.

NFL Passing Yards Visualization

This example visualizes NFL passing statistics as a scatter plot, with each circle representing a player’s performance across two metrics. The chart uses D3’s `scaleLinear` and `axisLeft` to map data points, while the `xAxis` and `yAxis` functions from the `@curran/axis-labels` library add labeled axes. The visualization reads from a dataset, rendering circles with configurable radius and opacity. The code demonstrates a reusable `viz` function that accepts data accessors and margin settings, allowing the same plotting logic to be applied to any dataset, such as the Penguins Dataset referenced in the README.

86% match

NFL Scatter Plot

This scatter plot visualizes NFL player performance by plotting fantasy points against targets for the 2021 season, with player positions (RB, WR, QB) color-coded. The visualization uses D3.js v7 APIs such as `scaleLinear`, `axisLeft`, and `axisBottom` to create the axes and render SVG circles. Data is loaded asynchronously from a CSV hosted on GitHub using the `csv` method, and the drop-down menus for axis selection are present but not yet wired to update the chart.

AArturo Guevara

82% match

Pseudo-Visualization NFL Passing

This pseudo-visualization maps 100 randomly generated data points across two statistical axes, colored by a categorical legend for Pro Bowl, No Award, and All Pro. Built with D3 v7, it uses `scaleLinear` for position scaling, `scaleOrdinal` for legend colors, and the `@curran/axis-labels` library for labeled axes. The `plot` function draws an inner rectangle, axes, and a legend, while a nested `mark` function renders scatterplot circles. The code demonstrates composable D3 modules and scales, though the data itself is synthetic random values rather than actual NFL passing statistics.

82% match

NFL-Passing-Yards-2023

This visualization displays the first row of NFL 2023 passing statistics as a formatted JSON object, showing player performance metrics. The code loads data from a CSV file using `import data from './passingYards.csv'` and converts all numeric attributes to numbers via a loop. It uses plain HTML `<pre>` elements with adjustable font size to render the data, with no additional visualization libraries. The example comes from pro-football-reference.com and serves as a raw data preview for further exploratory visualization.