Skip to main content
SimilarExport ZIP
100%

Fork of Scatter Plot

✓ Published1🌍 Public
Sstchiang
Last edited Apr 6, 2023
Created on Feb 28, 2023
Forked from 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.

AI-generated description

A scatter plot of the Iris Dataset with no axes.

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
90% 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
87% 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
79% match
Loading thumbnail…

Adding A Menu

A scatter plot of NHL playoff performance from 1996–2022 visualizes team goals scored against year, with teams colored using `d3.scaleOrdinal` and `schemeCategory10`. A dropdown menu enables users to switch the y-axis metric between goals scored and wins, triggering re-renders through a state management pattern. The visualization includes axes rendered with `d3.axisLeft` and `d3.axisBottom`, plus an interactive color legend that dims non-hovered points via opacity changes on mouseover.

Sstchiang
79% 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
78% 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
78% match
Loading thumbnail…

Fork of Interactive Scatter Plot

This interactive scatter plot visualizes football statistics from the Top Football League Scorers dataset, allowing users to compare metrics like goals, shots, and xG across leagues and years via dropdown menus. The D3 v3 visualization encodes player data as colored circles, with a color legend enabling league filtering and hover interactions that highlight individual players or dim unrelated points. The visualization uses D3 scales (scaleLinear, scaleOrdinal), axes from @curran/responsive-axes, and a custom colorLegend module, while responding to container resizing through observeResize.

TTom Heffernan
77% match
Loading thumbnail…

Fork of Fork of Fork of scatter plot

A forked D3.js v7 scatter plot visualizes the relationship between Math and Science scores for students in a CSV dataset, with points colored by academic department. It uses `d3.csv` to load data, `d3.scaleLinear` for axes, and `d3.scaleOrdinal` with `d3.schemeSet2` for categorical coloring. Points are rendered as SVG circles with hover tooltips, alongside a legend identifying departments.

Ssainishanthreddyk@gmail.com
77% match