Skip to main content
SimilarExport ZIP
100%

ESP D3 v7

✓ Published0🌍 Public
Ttebanieo
Last edited Feb 16, 2023
Created on Feb 16, 2023
Forked from HTML Starter

This example shows a scatter plot of the Iris dataset, with sepal length on the x-axis and petal length on the y-axis, colored by species using a d3.scaleOrdinal with a viridis-like palette. Users can brush horizontally along the x-axis to zoom into a selected range, which updates the axis domain and repositions the circles with a transition. The visualization uses SVG rendering with d3.brushX for interactive selection, a clipPath to confine drawing, and d3.axisBottom for the dynamically re-scaled axis.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows an interactive scatterplot of the Iris dataset, plotting sepal length against petal length with points colored by species. A horizontal brush (d3.brushX) lets the user select a range along the x-axis; upon release, the chart zooms in by updating the x-scale domain and animating the axis and circle positions over one second using transitions. The data loads from a CSV via d3.csv, and all rendering uses SVG with d3.v4.

Aamnicpo
88% match
Loading thumbnail…

Untitled

This example shows an interactive scatterplot of the Iris dataset, plotting sepal length against petal length with points colored by species. A horizontal brush (d3.brushX) lets the user select a range along the x-axis; upon release, the chart zooms in by updating the x-scale domain and animating the axis and circle positions over one second using transitions. The data loads from a CSV via d3.csv, and all rendering uses SVG with d3.v4.

Aamnicpo
88% match
Loading thumbnail…

D3 Scatter Plot

This example uses D3 v7 to render an interactive scatter plot of the Iris dataset, loaded via `d3.csv` from a GitHub gist. The visualization maps petal length on the x-axis and sepal length on the y-axis using `scaleLinear` and `extent`, with points colored by species via `scaleOrdinal` and `schemeCategory10`. SVG circles are bound to data with `join`, and each carries a `<title>` tooltip. Hovering triggers a CSS transition that enlarges the circle’s radius, while `axisLeft` and `axisBottom` add labeled axes.

Ddanheavern
88% match
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
88% match
Loading thumbnail…

D3 Scatter plot

This scatter plot visualizes the Iris flower dataset by plotting petal length against sepal length. The visualization uses D3.js v7 with linear scales to map data values to screen coordinates, and SVG circles represent individual data points. The code demonstrates data loading and parsing via d3.csv with type coercion for numeric fields. Axes are generated using d3.axisLeft and d3.axisBottom, positioned according to defined margins, while the plot dynamically fills the browser window using window.innerWidth and innerHeight.

JJuan Corrales Correyero
88% match
Loading thumbnail…

D3 Scatter Plot

This example displays the classic Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. The visualization uses D3 v7’s `select`, `csv`, `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` APIs to load the data, compute scales, and render SVG circles and axes. The plot fills the browser window, with bold tick labels, and the code demonstrates a straightforward data-ink pipeline from CSV parsing to interactive-free SVG rendering.

WWaseem Medhat
88% match
Loading thumbnail…

D3 Scatterplot

This example shows a D3 scatterplot of the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The SVG viewport fills the browser window, with circles representing individual data points and axis ticks styled at 18px. Built with React and d3.v7, the code loads the CSV via `d3.csv`, then uses `scaleLinear` for both axes, `axisLeft` and `axisBottom` to render tick marks, and a data join to append circles with tooltips showing coordinate values. The data comes from a GitHub-hosted CSV file.

Rrespingu
87% match
Loading thumbnail…

Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x and y axes while coloring each circle by species (setosa, versicolor, or virginica). It uses D3 v6 with scales (d3.scaleLinear), axes (d3.axisBottom, d3.axisLeft), and data loading via d3.csv. The React and SVG rendering are not explicitly used; instead, the code appends circles directly to an SVG element in the DOM. The dataset is fetched from a GitHub gist and parsed to numeric values before plotting.

Aamiralitah
87% match