Styled scatter plot

100%

Styled scatter plot

✓ Published4🌍 Public

Last edited Nov 10, 2023

Created on Nov 10, 2023

This example shows a styled scatter plot of the Iris dataset, mapping sepal length and width as quantitative axes with circular marks. The visualization uses React to render SVG elements, with d3.scaleLinear for both axes and d3.extent to compute domains from the CSV data loaded via d3.csv. Axis ticks are generated with d3.js scale methods, and tooltips are provided through SVG title elements. The chart includes custom font styling, axis labels, and a teal color scheme applied via CSS classes.

AI-generated description

Scatterplot of Iris data

MIT Licensed

Similar vizzes

Loading thumbnail…

Styled Scatter plot WITH COLOUR

This styled scatter plot visualizes the Iris dataset, mapping sepal length and width along the x- and y-axes while encoding species with a categorical color scale. The React-based SVG rendering uses d3.scaleLinear for axes, d3.scaleOrdinal for the three-color species palette, and custom axis components. Interactive tooltips appear on hover via SVG `<title>` elements. The chart is built with d3.v7 and React 18, reading the dataset from a remote CSV file.

Jjackcaldwellnichols

93% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, showing sepal length against sepal width. It uses React with D3 v6’s scaleLinear and extent functions to position data points as circles in an SVG rendering. The chart includes axis labels, tick marks, and a native title tooltip on each mark. A custom useData hook loads the CSV data via d3.csv, while AxisBottom, AxisLeft, and Marks components generate the axes and circles with a Poppins font styling.

Eekorre1001

93% match

Loading thumbnail…

Stylized Scatter Plot

A stylized scatter plot presents the Iris flower dataset, mapping sepal length against sepal width as circular marks. D3 v5 utilities compute linear scales and axis ticks, while React components render the SVG elements, including axes and labeled circles. The visualization employs a Poppins font and a minimal color scheme, with tooltips offering formatted values on hover. Data loads asynchronously via D3's CSV parser, and the axes use custom tick formatting to display abbreviated values.

Ffjvoris

92% match

Loading thumbnail…

Stylized Scatter Plot (Iris Data)

This example visualizes the Iris dataset as a scatter plot, mapping sepal length to the x-axis and sepal width to the y-axis with a circle for each sample. The SVG is rendered with React, using d3.scaleLinear for the scales and d3.extent to set the domains. Axes are custom components that draw tick marks and labels, while the marks use a native `<title>` element for tooltips. The data is loaded asynchronously via d3.csv and parsed into numeric fields.

PPeter Krevenets

92% match

Loading thumbnail…

Stylized Scatter Plot

This stylized scatter plot visualizes the Iris flower dataset, plotting sepal length against sepal width for individual specimens. The visualization uses React components to render SVG circles and axes, with D3 v5 utilities handling data loading via `d3.csv`, linear scaling with `scaleLinear`, and axis tick generation. The chart features custom styling for marks and axes, including a distinctive cyan fill for data points and a loading state displayed before data arrives.

AAlex Gomes

92% match

Loading thumbnail…

Stylized Scatterplot

This example visualizes the Iris dataset as a scatterplot of sepal length against sepal width. Each flower is represented by a green circle with a native SVG tooltip showing the x-value on hover. The chart uses React components composed with D3 scales, rendering axes via custom `AxisBottom` and `AxisLeft` components that produce tick marks and labels. Data is loaded asynchronously with `d3.csv`, and linear scales map the measured values to pixel coordinates within fixed margins.

Ttrissentety

92% match

Loading thumbnail…

Stylized Scatterplot

This stylized scatterplot visualizes the Iris dataset, plotting sepal length against sepal width. The React application uses D3.js scales and axes to render SVG circles, with a clean, modern aesthetic defined by the Poppins font and custom color palette. Data is loaded asynchronously from a CSV file via D3's `csv` function. Axis ticks and marks are generated as React components, with interactive tooltips displaying formatted values.

Vvangenned

92% match

Loading thumbnail…

Stylized Scatter plott

This stylized scatter plot visualizes the Iris dataset, plotting sepal length against sepal width across all samples. Built with React and D3 v6, the visualization renders SVG circles scaled by linear scales with nice-ticked axes. The code uses d3.csv for data loading, d3.scaleLinear for positioning, and d3.extent to compute domains. Custom React components (AxisBottom, AxisLeft, Marks) handle rendering, while the Poppins font and teal circle marks create a modern aesthetic. The chart updates responsively to fill the browser window, with formatted tick labels using d3.format.

BbeauMarko

92% match