Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published0🌍 Public
DDaveCumin
Last edited Apr 14, 2023
Created on Apr 14, 2023
Forked from D3 Starter

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with an input field that adjusts the x-axis domain. The code uses D3 v7's `scaleLinear`, `axisBottom`, and `axisLeft` to render the axes, with `transition().duration(1000)` animating axis rescaling and circle repositioning when the domain changes. Data is loaded via `d3.csv` from a GitHub-hosted CSV file, and the SVG viewport uses `preserveAspectRatio` for responsive scaling.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This visualization demonstrates a scatter plot of the Iris dataset, mapping petal length against sepal length with circular marks. The code uses D3 version 7 with the `d3-selection-multi` extension to simplify attribute setting. It employs `scaleLinear` for axes, `extent` for domain calculation, and `axisLeft`/`axisBottom` for rendering ticks. The reusable `scatterPlot` function exposes setter methods for width, height, data, margins, and accessor functions, following a module pattern. The data is loaded asynchronously from a CSV file via `d3.csv`, with numeric parsing applied to each row before rendering as SVG circles.

Aatmr0
93% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 to load CSV data, apply linear scales via `d3.scaleLinear`, and render circles with SVG. The axes are generated using `d3.axisLeft` and `d3.axisBottom`, with margins adjusting the plot area to fill the viewport.

Wwilliam3333
90% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v7’s `csv` loader and `scaleLinear` for both axes, with `axisLeft` and `axisBottom` to render tick marks. The SVG circles are bound to data via `selectAll('circle').data().join('circle')`. The code loads data from a GitHub gist and sizes the chart to the full window, with margins and a fixed point radius of 5 pixels.

SSubhendu Karmakar
90% match
Loading thumbnail…

Fork of D3 Scatter Plot

This example renders the Iris Dataset as a scatter plot, mapping petal length to the x-axis and sepal length to the y-axis. It uses D3 v6’s `csv` loader to fetch the data, `scaleLinear` with `extent` to compute scales, and `axisLeft`/`axisBottom` to draw the axes. The plot is drawn as SVG circles using `select` to append elements and a `join` operation for efficient circle creation. The visualization adapts to the full browser window, with tick labels styled at 24 pixels.

BBakunya | Kirisaki Rem
90% match
Loading thumbnail…

Fork of Fork of D3 Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. Each data point is rendered as a circle on a full-screen SVG canvas using D3 v7. The code loads the CSV data from a GitHub Gist via `d3.csv`, then uses `d3.scaleLinear` with `d3.extent` to compute the scales. Axes are added with `d3.axisLeft` and `d3.axisBottom`, while the tick labels are enlarged to 24 pixels for readability.

UUzoemeka Okechukwu Innocent
90% match
Loading thumbnail…

Fork of D3 scatterplot

This example shows a scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads the data via `d3.csv`, parses numeric values, and uses `d3.scaleLinear` with `d3.extent` to map the data ranges to the full browser window. Each data point is rendered as an SVG circle, and axes are generated with `d3.axisLeft` and `d3.axisBottom`. The visualization uses `d3.v7` and a minimal, full-screen SVG layout with fixed margins.

MM
90% match
Loading thumbnail…

Fork of D3 scatterplot

This example shows a scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads the data via `d3.csv`, parses numeric values, and uses `d3.scaleLinear` with `d3.extent` to map the data ranges to the full browser window. Each data point is rendered as an SVG circle, and axes are generated with `d3.axisLeft` and `d3.axisBottom`. The visualization uses `d3.v7` and a minimal, full-screen SVG layout with fixed margins.

MM
90% match
Loading thumbnail…

Fork of D3 scatterplot

This example shows a scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code loads the data via `d3.csv`, parses numeric values, and uses `d3.scaleLinear` with `d3.extent` to map the data ranges to the full browser window. Each data point is rendered as an SVG circle, and axes are generated with `d3.axisLeft` and `d3.axisBottom`. The visualization uses `d3.v7` and a minimal, full-screen SVG layout with fixed margins.

MM
90% match