Skip to main content
SimilarExport ZIP
100%

NFL-Passing-Yards-2023

✓ Published1🌍 Public
SSamuel Karkache
Last edited Sep 11, 2024
Created on Sep 4, 2024

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.

AI-generated description

NFL 2023 Passing Yard Stats from: https://www.pro-football-reference.com/years/2023/passing.htm

Five Possible Tasks: <br> The following lists five possible data visuaulization tasks that can be done with the NFL 2023 Passing Yards dataset following the {action, target} paradigm.

  • Identify players that are outliers with respect to winning an award
  • Discover the correlation between the number of times sacked and quarterback rating (QBR)
  • Compare the passing statistics of each teams primary quarterback (i.e. started a majority of the games)
  • Derive the passing statistics for players who did not start all 17 regular season games (i.e. adjust them on a per-game basis and multiply by 17)
  • Identify non-quarterback players who recorded passing statistics
MIT Licensed

Similar vizzes

Loading thumbnail…

NFL Passing Yards Visualization 11/15/2024 Revision

This interactive scatter plot visualizes NFL quarterback passing statistics from 2013 to 2023, allowing users to compare any two numeric attributes by selecting them from dropdown menus. The visualization also filters data by year and award status, with points colored to distinguish MVP, All-Pro, Pro Bowl, and no-award players. The D3.js implementation uses `scaleLinear` for axes, `axisLeft` for the y-axis, and data-driven circles that reveal tooltips on click, displaying player name, year, and axis values. Data preprocessing converts CSV values to numbers and categorizes awards before rendering.

SSamuel Karkache
80% match
Loading thumbnail…

Course Project: NFL Passing Yards Visualization

This interactive scatter plot visualizes NFL quarterback statistics from the 2023 season, using data from a CSV file that includes passing yards and various performance metrics. A D3 scatter plot maps selected attributes onto x and y axes, with dropdown menus allowing users to compare any two numeric attributes. Points are color-coded based on player awards, including Pro Bowl, All-Pro, and MVP honors. The visualization uses d3-scale functions for axes and includes a legend to clarify the award color coding.

SSamuel Karkache
79% match
Loading thumbnail…

NFL Passing Yards Visualization Final Revision

This interactive scatter plot visualizes NFL quarterback passing statistics from 2013 to 2023, allowing users to compare any two numeric attributes, such as passing yards versus touchdowns. The D3.js visualization supports filtering by year and award type, with a player name search and color-coded points representing Pro Bowl, All-Pro, MVP, or no award. Clicking a point reveals a tooltip with player details, while dropdown menus and an input field enable dynamic data exploration.

SSamuel Karkache
79% match
Loading thumbnail…

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.

SSamuel Karkache
78% match
Loading thumbnail…

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.

SSamuel Karkache
78% match
Loading thumbnail…

NFL Passing Yards Visualization 11/29/2024 Revision

This interactive D3.js scatter plot visualizes NFL passing statistics from 2013 to 2023, with each dot representing a quarterback-season and colored by award status (MVP, All-Pro, Pro Bowl, or none). Users can select any two numeric attributes for the X and Y axes using dropdown menus, filter by year or award, and search for specific players. Hovering highlights award categories in the legend, while clicking a dot displays a tooltip with player details and their values for the current axes. The visualization uses d3 scales, axes, and transitions for smooth interactions.

SSamuel Karkache
77% match
Loading thumbnail…

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.

SSamuel Karkache
77% match
Loading thumbnail…

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.

SSamuel Karkache
76% match