NHL Stanley Cup Playoffs (1918 - 2022)

100%

NHL Stanley Cup Playoffs (1918 - 2022)

✓ Published0🌍 Public

Last edited Feb 14, 2023

Created on Jan 23, 2023

This visualization displays NHL Stanley Cup playoff results from 1918 to 2022, showing team rankings, win-loss records, and goal statistics for each season. The code initially renders the raw data as JSON text using d3.select and text(), then fetches the CSV file with the Fetch API and parses it with d3.csvParse. Numeric fields are converted to numbers before the data is stored in the application state via setState, with the visualization framework relying on d3.v7 for DOM manipulation and data handling.

AI-generated description

This dataset contains the results from every NHL Stanley Cup playoffs from 1918 - 2022. This dataset originated from https://www.kaggle.com/datasets/mattop/nhl-stanley-cup-playoffs-1918-2022.

Link to Gist: https://gist.github.com/stchiang/a445af06c37021bac0498fed78806ed6

MIT Licensed

Similar vizzes

Loading thumbnail…

Project

This visualization displays the cumulative number of Stanley Cup playoff wins for each of the original six NHL teams across a sliding timescale from 1918 to 2018. A donut chart updates dynamically as a slider adjusts the year cutoff, with each team’s slice colored distinctly via `d3.scaleOrdinal` and `d3.schemeCategory10`. The code uses `d3.pie()` to generate arc data and `d3.arc()` to render paths, filtering and grouping the CSV data by team and year with `d3.groups`.

Sstchiang

79% 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

73% match

Loading thumbnail…

Fork of Transforming Data

This visualization uses NHL playoff data to display the number of seasons each team has made the playoffs. The code transforms the dataset with d3.flatGroup, grouping records by team and counting occurrences, then outputs the resulting summary as JSON in a pre element. The example demonstrates D3 v7 data loading with csvParse and data transformation workflows.

Sstchiang

72% match

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

69% match

Loading thumbnail…

Historical NBA Performance

This example visualizes historical win-loss records for every NBA team, showing winning rates over time. The data is fetched as CSV and parsed with `d3.csvParse`. While loading, the state flag triggers a re-render; the code currently outputs the parsed data as raw JSON text in a `pre` element using `d3.select` and `.text()`. The visualization logic is scaffolded through a `viz` function that manages state transitions via a `setState` callback, with the fetch initiated when `state.data` is undefined.

QQingyang Wang Profolio

69% match

Loading thumbnail…

NBA 2018-2019 Playoffs with Menu

This interactive scatter plot visualizes NBA 2018-2019 playoff statistics, with each circle representing a player's performance metrics. The visualization uses React dropdown menus to dynamically select which attribute appears on the x-axis and y-axis, enabling exploration of relationships between statistics like assists, rebounds, and points. The chart renders as an SVG using D3.js v5 scales and axes, with React managing state for the selected attributes. Data comes from a CSV file loaded via d3.csv, and the tooltip displays formatted values on hover.

ZZiyang Gao

69% match

Loading thumbnail…

Gist 35554bfea1e16fad6823260f8957d873

This visualization presents NHL player statistics from the 2018-2019 season, comparing performance metrics across different competition levels, alongside team standings throughout the season. The player view uses a radar chart to display various advanced stats, while the standings section shows points progression. The code leverages D3.js for data binding and SVG rendering, with JSON files providing the underlying data for both individual player analytics and team ranking trajectories.

MMbrownshoes

68% match

Loading thumbnail…

Gist 45a6ae045cfccdc8c2e66ea43963e225

This visualization shows shot differentials for NHL games in the 2017-2018 season, with each game displayed as a small sparkline-style chart. The interactive team selector filters games by team. The charts are generated with d3.v4, using `d3.scaleLinear` for axes, `d3.line` for the score lines, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data comes from CSV files containing play-by-play shots and goals, rendered as SVG with hover effects.

MMbrownshoes

68% match