Skip to main content
SimilarExport ZIP
100%

scatter plot

✓ Published0🌍 Public
Jjmetzg11alpine
Last edited May 1, 2023
Created on Apr 30, 2023
Forked from HTML Starter

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear for scaling, and d3.axisLeft and d3.axisBottom for tick marks. The SVG circles are rendered pink, matching the chart’s background, with margins sized proportionally to the viewport. The code reads window dimensions and appends the chart directly to the body.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It displays each data point as a circle in an SVG rendered at full window size. The code uses d3.csv to load the data, d3.scaleLinear with d3.extent for axes, and d3.axisLeft and d3.axisBottom to draw the scales.

Sshmouelsamares
96% match
Loading thumbnail…

scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length on the x-axis against sepal width on the y-axis. Built with React and D3 v7, it uses d3.scaleLinear to map data values to SVG coordinates, rendering circles with tooltips. The chart includes custom axes via d3.ticks, with axis lines and labels styled through CSS. Data is loaded asynchronously from a CSV file using d3.csv.

BBlake McCarty
95% match
Loading thumbnail…

d3 scatter plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. Each flower instance is represented as a small circle, with axes labeled and scaled linearly using `d3.scaleLinear`. The code loads CSV data via `d3.csv`, maps values using `d3.extent` to determine the y-domain, and renders the SVG chart full-screen. The visualization uses D3 v6 within a React framework, drawing circles with `d3.select` and `d3.join` to manage the marks.

Rrwata97
95% match
Loading thumbnail…

Scatter Plot with D3

This scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis for individual flowers. The visualization uses D3.js to load CSV data via `d3.csv`, create linear scales with `scaleLinear`, and render SVG circles as data points. Axes are generated using `axisBottom` and `axisLeft` and positioned within a margin-based layout. The chart fills the browser window through dynamically computed width and height, with the rendered SVG scaling to the viewport.

Aadventuresenglish.info@gmail.com
95% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Using d3.scaleLinear and d3.extent to compute domains, it positions circles in an SVG via d3.select, data joins, and the join() method. Axes are rendered with d3.axisLeft and d3.axisBottom, while the CSV is loaded and parsed with d3.csv, converting string values to numbers. The plot updates to fill the browser window.

AArturo Guevara
95% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length against sepal length for individual flowers. The visualization uses React with D3 scales (`scaleLinear`, `extent`) to map data values to SVG coordinates, with custom axis components generating tick marks and labels. The D3 CSV loader fetches the data from a remote gist, while circles with 0.6 opacity represent each observation. The chart includes labeled axes and applies `nice()` to domain padding for cleaner tick intervals.

AAnkit5ingh
95% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis for each flower specimen. Rendered as SVG circles with fixed radius, the chart uses D3’s `scaleLinear` functions for both axes, with axis ticks generated by custom React components. The code leverages React hooks (`useState`, `useEffect`, `useCallback`) to asynchronously load the CSV data via D3’s `csv` method, parsing numeric fields before display. Axis labels and tick formatting are applied through D3’s `format` utility, with tooltips provided by SVG `<title>` elements.

NNikithakatta30
95% match
Loading thumbnail…

Scatter Plot for Iris dataset

This scatter plot displays the relationship between petal length and sepal length for the Iris dataset. The visualization uses D3 v6 to load CSV data, map values to screen coordinates with linear scales, and render circles as data points via SVG. D3’s `select`, `append`, and `.join()` methods construct the chart, while the `axisLeft` and `axisBottom` functions generate labeled axes. A rotated text element provides the y-axis label, and the plot fills the browser window dynamically based on `window.innerWidth` and `window.innerHeight`.

LLG0498
94% match