Scatter Plot

100%

✓ Published1🌍 Public

Last edited Feb 20, 2023

Created on Feb 20, 2023

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

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

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

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

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

79% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

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

77% match

Loading thumbnail…

Player Data Scatter Plot

This scatter plot visualizes player data, showing age on the x-axis and matches played on the y-axis, with each point’s radius scaled to the player’s score. The data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as an SVG using D3 v6. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` and `scaleSqrt` map the data values. A categorical color scheme distinguishes score ranges, and axis labels are added as text elements.

Aaniteshterala2000

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

77% match