Skip to main content
SimilarExport ZIP
100%

d3 Starter

✓ Published0🌍 Public
TTsaiJie
Last edited May 6, 2021
Created on May 6, 2021
Forked from HTML Starter

This example uses D3 v6 and the SVG rendering framework to display the classic Iris dataset as a scatter plot. It loads the CSV from a GitHub gist and parses numeric columns, then uses `scaleLinear` for both axes to map petal length against sepal length. The code demonstrates D3's modern `join` API to bind data to circles, and includes `axisLeft` and `axisBottom` for labeled axes with a custom font size. The plot fills the browser window, resizing with `window.innerWidth` and `window.innerHeight`.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example visualizes the classic Iris dataset as a scatter plot, mapping petal length on the x-axis against sepal length on the y-axis. It uses D3 v7’s `csv` loader to fetch and parse the data, then renders circles with `scaleLinear`, `extent`, and axis helpers `axisLeft` and `axisBottom`. The plot is drawn as SVG, sized to the browser window, with fixed margins and no interactivity.

GGT-GillesTeuwen
88% match
Loading thumbnail…

React & D3 Starter

This starter example displays the classic Iris flower dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with semi-transparent circles and labeled axes. It uses React hooks—specifically `useState` and `useEffect`—to load and manage the CSV data, while D3 v7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` handle scaling and axis rendering. The visualization integrates React and D3 by delegating SVG circle creation and axis updates to a decoupled `viz` function, demonstrating a scalable pattern for real-world projects.

CCurran Kelleher
88% match
Loading thumbnail…

D3 Scatterplot

This example visualizes the classic Iris dataset as a scatterplot, using D3 v7 to map sepal and petal measurements to x and y positions. It demonstrates the core D3 data-join pattern, binding CSV data from a GitHub gist to SVG circle elements via `d3.csv` and scale functions. The code initializes the visualization by loading the data, then relies on D3’s scales and axes to render the plot, with styling handled through inline CSS and JavaScript. A React starter variant is referenced in the README for framework integration.

Kkathrynrbernard
88% match
Loading thumbnail…

Fork of Dynamic D3 React Starter

This example shows an interactive scatter plot of the Iris dataset, rendered as SVG shapes whose positions map petal length and sepal length. It uses D3’s `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` APIs to draw symbols with a specified radius. The code loads CSV data from a GitHub gist via `d3.csv`, parses numeric columns, and creates a reusable scatter plot function that joins data to path elements. Styling includes large tick labels and a full-viewport layout.

UUzoemeka Okechukwu Innocent
87% 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
87% match
Loading thumbnail…

D3 Scatterplot

This example displays the classic Iris dataset as an SVG scatterplot, plotting petal width against sepal length. The visualization uses D3’s `scaleLinear`, `axisLeft`, and `axisBottom` to map data values to pixel coordinates and render labeled axes. Data is loaded asynchronously with `csv()` and parsed to numeric fields. Circles are drawn using D3’s `selectAll().data().join()` pattern, with the plot sized to fill the browser window.

MMatthew Bruffey
87% match
Loading thumbnail…

Fork of React & D3 Starter

This example shows a scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each circle representing a flower sample. The visualization is built with React and D3 v7, using a custom `viz` function that creates linear scales via `d3.scaleLinear` and renders SVG circles with the data join pattern. Axes are added through `d3.axisLeft` and `d3.axisBottom` in a separate module. The code demonstrates a decoupled architecture where React manages the component lifecycle and D3 handles the drawing logic, with data loaded asynchronously via `d3.csv`.

CCheng Tang
87% match
Loading thumbnail…

D3 Scatter Plot

This example visualizes the classic Iris dataset as a D3.js scatter plot, mapping sepal length on the y-axis and petal length on the x-axis. The chart renders as an SVG with circles positioned via linear scales, while axes are drawn using `d3.axisLeft` and `d3.axisBottom`. The code fetches CSV data asynchronously, parses numeric columns, and dynamically resizes the plot to the full window. It customizes tick label styling through CSS and uses a React starter environment.

TTheo-0201
87% match