Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ssubratanp
Last edited Feb 3, 2023
Created on Feb 3, 2023
Forked from Untitled

This example shows the Iris dataset as a scatterplot, mapping petal length and sepal length to x and y coordinates while encoding the species of each flower with distinct SVG symbols. The code uses d3.csv to load the data, d3.scaleLinear for positioning, and d3.scaleOrdinal combined with d3.symbol to assign a unique shape to each species. d3.axisLeft and d3.axisBottom generate the axes. The visualization renders directly to SVG within a React project, with the page size set to the full viewport.

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 visualizes the Iris flower dataset, plotting petal length against sepal length as small circles. Each point is positioned using D3’s `scaleLinear` and `extent` to map data values to screen coordinates, with axes added via `axisBottom` and `axisLeft`. The SVG circles are rendered dynamically in React after loading the CSV, with margins and window-sized dimensions. Styling applies a font size and blue color to tick labels via CSS.

Ssubratanp
92% match
Loading thumbnail…

Untitled

This scatter plot visualizes the Iris dataset, encoding petal length and petal width as x and y coordinates, while coloring each point by species. The code also reads sepal length and width values into the `rx` and `ry` attributes of each circle, though these do not affect the visual rendering since `r` is set to a fixed radius. Built with React and D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` for scales, and `d3.axisLeft`/`d3.axisBottom` for axes with custom labels.

SSrilekha24
91% match
Loading thumbnail…

Untitled

This example visualizes the Iris dataset by plotting sepal length against sepal width as colored circles, with red, green, and blue representing the three species. A scatterplot with labeled axes reveals the distribution and clustering of measurements. The code loads data via `d3.csv` from a GitHub gist, uses `d3.scaleLinear` to map coordinates, and renders axes with `d3.axisBottom` and `d3.axisLeft`. Each point is an SVG circle appended to a D3-selected body element, with fill colors assigned conditionally based on species.

Bbhanuteja1807@gmail.com
91% match
Loading thumbnail…

Untitled

This scatter plot visualizes the Iris dataset, mapping petal length and width to horizontal and vertical axes while coloring each point by species (pink, purple, or skyblue). The D3 v6 code loads CSV data via `d3.csv`, scales positions with `scaleLinear`, and renders circles using SVG joins. Axes are generated with `axisLeft` and `axisBottom`, with rotated labels, inside a React-agnostic HTML page using `d3.min.js`.

Ssowmyanagula@my.unt.edu
90% match
Loading thumbnail…

Untitled

A scatter plot visualizes the Iris dataset, encoding sepal and petal measurements as points colored by species. The chart uses D3 v3 scales and axes to map numeric values to pixel positions, with an SVG rendering of circles and a color legend. The React-based application loads the data via the `csv` function from D3, and interactive tooltips display the iris variety and coordinates on mouseover.

Cctarmey
90% match
Loading thumbnail…

Untitled

This example shows a scatterplot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis. It uses D3’s `scaleLinear` and `extent` to compute scales, and renders circles with `selection.join` for data binding. The visualization is built with React 18 and D3 7, where React manages the SVG container and a D3 function handles chart drawing. Axes are added via `axisBottom` and `axisLeft`, with SVG as the rendering output.

Jjeffchengtw
90% match
Loading thumbnail…

Untitled

This example visualizes the Iris flower dataset, plotting sepal length against petal length with points colored by species (setosa, versicolor, virginica). It uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for categorical colors, and d3.axisBottom/axisLeft with tickSize to create a ggplot2-style gray background with white gridlines. The SVG circles are appended via d3.selectAll and .enter(), with data loaded through d3.csv. The chart includes axis labels and a legend-free design, emphasizing the three species clusters through distinct color ranges.

SSheela2930
90% match
Loading thumbnail…

Untitled

This interactive scatterplot displays the Iris dataset, with each point colored by species (setosa, versicolor, or virginica) and sized by petal length. The visualization cycles through four feature pairs on the x-axis every few seconds, while the y-axis remains fixed on sepal length. Built with React and D3 v4, it uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and SVG circles, with a legend and axis labels added dynamically.

GGogineni44
89% match