Skip to main content
SimilarExport ZIP
100%

NHL Scatter Plot

✓ Published0🌍 Public
Kkhuton
Last edited Feb 15, 2021
Created on Feb 10, 2021
Forked from Scatter Plot

This scatter plot shows the relationship between NHL team wins and penalty kill percentage for the 2019-2020 season. Each circle represents a team, positioned by its win total on the x-axis and penalty kill efficiency on the y-axis, with the data loaded from a CSV file. The visualization uses D3 v6 with `scalePoint` for both axes, `axisBottom` and `axisLeft` for ticks, and SVG circles rendered with `selectAll` and `enter()` to join the data.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

A scatter plot visualizes the relationship between year and goals scored for NHL playoff teams, with circles colored by team. The chart includes labeled axes for both dimensions, rendering data from a CSV file. The visualization uses D3 v7 for its scales, axes, and data joins, with a helper function `scatterPlot` managing the plotting logic. Axes are generated using `axisLeft` and `axisBottom`, while `scaleLinear` and `extent` handle the data mapping. The visualization populates incrementally as data loads asynchronously via `fetch`.

Sstchiang
77% match
Loading thumbnail…

Fork of Scatter Plot

A scatter plot shows NHL playoff performance across teams and years, plotting each team-season as a colored circle based on goals scored against year, with team membership encoded by color. The visualization includes axes, labels, and an interactive color legend that highlights points from a selected team when hovered. Built with D3 v7, it uses `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.csvParse` to load and map the dataset, while custom modules manage axes and legend rendering. Data comes from a CSV of NHL playoff records.

Sstchiang
77% match
Loading thumbnail…

Fork of Scatter Plot Simple

This visualization displays hockey team statistics from 1996 to 2022, plotting yearly goals scored on the y-axis against the year on the x-axis for teams like the New York Rangers, Boston Bruins, and Chicago Blackhawks. The scatter plot uses d3.scaleLinear to create both scales, with d3.extent determining domain boundaries. Circle elements are rendered via selection.join(), with each point representing a team's playoff performance in a given year.

Sstchiang
74% match
Loading thumbnail…

Fork of Fork of Random Squares and circles

This scatter plot visualizes the relationship between Year 1 and Year 2 wins for different teams, with each point representing a team’s performance across two consecutive years. The chart uses D3 v7 to load CSV data from a remote gist and render circles with steelblue fill at reduced opacity, allowing overlapping points to be distinguished. Axes are generated using D3’s `axisBottom` and `axisLeft`, with labels added via SVG text elements. The plot highlights outliers and patterns in team consistency over time, as described in the accompanying analysis text.

Ppraveennayak1702@gmail.com
72% match
Loading thumbnail…

Gist 2d7133b7a34afa5c0ddb698237987830

This example visualizes NHL team performance metrics from a JSON dataset of game statistics, plotting each team's goals for and against across multiple games. It uses D3.js to render a scatterplot with team abbreviations as labels, positioning points based on goalsFor and goalsAgainst values while encoding win/loss records through point color. The visualization leverages d3.scalePoint for axes, d3.forceSimulation for label collision avoidance, and Canvas rendering to display all team data points from the standings.json file.

MMbrownshoes
71% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example visualizes the distribution of wins and losses across different teams for a specific year, using a pie chart to show each team’s share of total wins. The chart is generated from a CSV dataset loaded via `d3.csv`, with data filtered for the year 2020. Using D3.js v7, the code computes win percentages per team, applies a `d3.scaleOrdinal` color scheme, and renders the arcs with `d3.pie` and `d3.arc`. A legend, built with SVG rectangles and text, identifies each team’s color, while the layout is fixed at 400x400 pixels with a responsive margin.

Ppraveennayak1702@gmail.com
71% match
Loading thumbnail…

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
71% match
Loading thumbnail…

Final project week 8

This scatterplot compares recent and historical season win rates for nine teams, with the x-axis showing recent win rate and the y-axis showing historical win rate. Each team appears as a colored circle using D3’s `schemeCategory10` palette, positioned via `d3.scaleLinear` scales. The visualization renders through `d3.select` and `.join()` to bind the hardcoded data array, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes that divide the plot into four performance quadrants.

QQingyang Wang Profolio
70% match