Fork of D3 Scatter Plot

100%

Fork of D3 Scatter Plot

✓ Published0🌍 Public

Last edited Sep 15, 2022

Created on Sep 15, 2022

This fork of a D3 scatter plot visualizes a dataset of PG2021 matches, plotting each entry’s percentage of something matched against its name. The SVG chart uses `d3.scaleLinear` for both axes, with `d3.axisLeft` and `d3.axisBottom` to render tick labels, and circles are drawn via SVG `rect` elements (though named as circles). The data is loaded from a CSV file using `d3.csv`, and the layout adapts to the browser window’s inner dimensions.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Bar Chart

This fork of a bar chart shows the percentage of players who achieved a perfect, zero, or partial match for each named player in a PG-2021 matches dataset, sourced from a Gist hosted on GitHub. The visualization plots each player's name on the x-axis and the percentage values on the y-axis, using a D3 v7 SVG canvas. It leverages D3 APIs like `d3.scaleBand`, `d3.scaleLinear`, `d3.csv` for data ingestion, and `d3.axisBottom`/`d3.axisLeft` for axes, with bars styled via a `.bar` class.

TThaverman

81% match

Loading thumbnail…

Fork of Fork of Create a face with d3.js!

This example visualizes team performance with a reusable scatter plot, showing wins per year as individual circles. The D3.js v7 code loads CSV data from a GitHub gist using `d3.csv` with `d3.autoType` for type inference, then renders an SVG chart. Axes are generated with `d3.axisBottom` and `d3.axisLeft` on a 800x500 pixel canvas, with circles positioned via `d3.scaleLinear` scales for the x (Year) and y (Wins) values. The plot uses steelblue circles with 70% opacity, styled with a clean sans-serif layout.

Ppraveennayak1702@gmail.com

79% match

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis using d3.scaleLinear with nice tick values. It loads CSV data via d3.csv, parses numeric fields, and renders circles with SVG attributes set through d3.select and data joins. The visualization fills the browser window, adding an axisBottom and axisRight using d3.axisBottom and d3.axisRight, with a 24-pixel tick font size and fixed margins around the plot.

HHarshit-Prasad

79% match

Loading thumbnail…

Fork of Team Efficiency Scatter Plot

This fork of a team efficiency scatter plot uses D3 v5 to visualize the relationship between actual and optimal performance metrics for different team positions. The SVG visualization displays circular data points positioned by their x and y coordinates, with varying radii and colors representing different team members. The chart includes axis labels and tick marks styled with CSS, though the code reveals it is currently using placeholder data and D3's older linear scale API rather than the actual CSV data provided.

HHirsh Gupta

79% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 chart animates cycles through four columns of a cricket dataset, plotting balls, match, age, and score against the x-axis while score remains on the y-axis. Using the `scaleLinear` API for axes and `selection.join` for idempotent circle updates, the scatter plot updates every two seconds via `setInterval`, re-computing domains from the new data extent. It renders as an SVG with large Share Tech font labels, drawing from a CSV loaded with `d3.csv`.

Ccharanchand9

79% match

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, loading CSV data from a GitHub Gist and plotting each observation as a circle. The x-axis represents December values and the y-axis January values, using `d3.scaleLinear` for scaling and `d3.extent` for domain calculation. The code leverages D3 v6 APIs including `d3.csv`, `d3.select`, `d3.axisLeft`, and `d3.axisBottom`, rendering the visualization as SVG circles with a 5-pixel radius, sized to fill the browser window.

EEmma Schaale

78% match

Loading thumbnail…

Fork of D3 Scatter Plot

This fork of a D3 scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal length on the y-axis. It loads CSV data from a Gist URL using `d3.csv` and renders circles as SVG marks. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while `d3.scaleLinear` and `d3.extent` compute the scales. The chart fills the browser window, using `window.innerWidth` and `window.innerHeight` for its dimensions.

Ggalyniayaroshenko

78% match

Loading thumbnail…

Fork of Fork of making Scatter plottes

This fork of a scatter plot example visualizes harvested crop area per year from a small CSV dataset, drawing a smooth area chart rather than discrete points. The D3 v5 code sorts the data chronologically, then uses `scaleLinear` and `scaleTime` to map area and year values to SVG coordinates. It renders the area with `area()` and `curveBasis`, while grid lines and axis labels are generated via `axisLeft`, `axisRight`, and `axisBottom`. The SVG canvas is 960 by 500 pixels, with the area filled steelblue and black stroke, and the chart includes a title and axis labels.

SSteve_Nashon

78% match