Fork of Scatter Plot Simple

100%

Fork of Scatter Plot Simple

✓ Published1🌍 Public

Last edited Feb 14, 2023

Created on Feb 14, 2023

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.

AI-generated description

A scatter plot of the Iris Dataset with no axes.

MIT Licensed

Similar vizzes

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

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

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

76% match

Loading thumbnail…

Scatter Plot in D3

This scatter plot visualizes the maximum number of players for various games by year from 2004 to 2008, using data loaded from a CSV file. Circles represent each data point, positioned via `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The SVG rendering includes labeled axes, grid lines, and a title, all styled with CSS. The code uses D3 v7’s modular imports and follows a tutorial by Curran Kelleher.

SSimon Hackbert

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

74% match

Loading thumbnail…

NHL 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.

Kkhuton

74% match

Loading thumbnail…

Making a Scatter Plot

A scatter plot displays final power scores for ten teams, with each team’s score plotted along the x-axis and team names along the y-axis. The chart uses a linear scale for scores and a point scale for categorical team labels, with grid lines extending from both axes. D3 v5’s `csv`, `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` methods render the SVG, while styled circles, a title, and an axis label clarify the data.

HHirsh Gupta

73% match

Loading thumbnail…

Baseball Scatter Plot, Hits and Homeruns, Iterated

This scatter plot visualizes the relationship between hits and home runs in baseball, with each dot representing a player-season. The chart displays data from three leagues—American, National, and Federal—distinguished by color and identified in a legend. Using D3.js (v6) with SVG rendering, the visualization loads a CSV dataset via `d3.csv`, then maps hits and home runs to linear scales with `scaleLinear`. Points are drawn as semi-transparent circles, and axes are generated using `axisLeft` and `axisBottom` to display the quantitative values.

RRobert Johnson

73% match