Personal Redo

100%

✓ Published0🌍 Public

Last edited Sep 18, 2023

Created on Sep 18, 2023

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis using D3 version 7. The visualization uses `d3.csv` to load data from a Gist, with `d3.scaleLinear` and `d3.extent` for scale construction. Circles are rendered as SVG elements via data joins, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart is built using a reusable function pattern with method chaining for configuration.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a scatter plot of the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. The visualization uses D3 v7 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to load data, scale positions, and render axes. Circles of fixed radius are drawn as SVG elements with coordinates computed from the scaled values. The chart fills the browser window, with the data sourced from a GitHub Gist and rendering done entirely in SVG.

KKerim

85% match

Loading thumbnail…

Reusable Charts Notes

This example demonstrates a reusable scatter plot generated from the Iris dataset, which is loaded as CSV from a GitHub Gist. The chart visualizes the relationship between petal length and sepal length, using D3 version 7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map data values to SVG coordinates and render axes. The code constructs a custom `scatterPlot` function with getter-setter methods for configuration, enabling the chart to be applied to an SVG element via method chaining. The final visualization fills the browser window and is rendered as an interactive SVG.

CCameron Wehr

84% match

Loading thumbnail…

Re-doing Reusable Scatterplot 101

This example visualizes the Iris dataset as a scatterplot, encoding petal width on the x-axis and sepal length on the y-axis. It demonstrates a refactored version of a reusable chart module, building on an earlier commented-out implementation. The code uses D3 v7 APIs including `d3.csv` for data loading, `scaleLinear`, `extent`, `axisBottom`, `axisLeft`, and selection joins to render SVG circles. The final chart is assembled through a custom `scatterPlot` function configured with width, height, margin, and radius, then invoked on an SVG element.

AAlex

84% match

Loading thumbnail…

D3 Scatter Plot

This example presents the classic Iris dataset as a red circular scatter plot with axes, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v7 to load the CSV data, apply `scaleLinear` scales derived from `extent`, and render SVG circles via a data join. Axes are generated with `axisLeft` and `axisBottom`. The visualization runs in a React framework context, though the visible code is vanilla JavaScript.

MMatovu Ronald

84% match

Loading thumbnail…

Reuseable D3 Scatter Plot

This example demonstrates a reusable scatter plot built with D3.js, visualizing the Iris dataset by mapping petal length to the x-axis and sepal length to the y-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` for both axes, and `d3.axisLeft` and `d3.axisBottom` to render the ticks and labels. Circles are drawn as SVG elements with dimensions that adapt to the full browser viewport, using the `d3.select` and `join` pattern for efficient data binding.

UUzoemeka Okechukwu Innocent

83% match

Loading thumbnail…

Reusable for scatter plot

This reusable scatter plot visualizes the Iris Dataset, mapping petal length against sepal length with color-coded circular marks. Built with D3 v7, it demonstrates a modular chart factory pattern where configuration methods like `.width()`, `.data()`, and `.radius()` are chained to customize the visualization. The code uses `d3.scaleLinear` for coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for axes, and renders SVG circles and groups. Data loads from a remote CSV file and is parsed with type coercion for numeric columns.

FFrancisco Ibelles

83% match

Loading thumbnail…

Reusable Scatter Plot

This example plots the classic Iris dataset with petal length on the x-axis and sepal length on the y-axis. The d3.v7 code loads the CSV, parses numeric fields, and uses `scaleLinear` with `extent` to map data to screen coordinates. Circles are bound to the data, with axes generated via `axisLeft` and `axisBottom` within a margin-defined layout. The chart fills the browser window, rendering all points as simple SVG circles with a fixed radius.

GGayan Priyadarshana

83% match

Loading thumbnail…

Fork of Reuseable D3 Scatter Plot

This visualization shows a scatter plot of the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis using blue circles. The code loads the CSV data via `d3.csv`, parses numeric fields, and scales the data with `d3.scaleLinear` using `d3.extent` for domains. It renders SVG circles and adds axes using `d3.axisLeft` and `d3.axisBottom`, with the plot sized to fill the browser window.

UUzoemeka Okechukwu Innocent

83% match