Petal Length & Width

100%

Petal Length & Width

✓ Published1🌍 Public

Last edited Oct 4, 2021

Created on Oct 4, 2021

A scatterplot of iris flower petal dimensions, plotting petal length on the horizontal axis and petal width on the vertical axis for each sample in the Iris dataset. The visualization uses React with D3 v5 utilities, including `scaleLinear` for both axes and `extent` to set domains from the CSV data loaded via `csv`. SVG circles render the points, with native `<title>` elements for hover tooltips. Axis components draw tick marks and labels, while styled text annotations label the axes. The chart is framed by margins, with a loading state shown until data arrives.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data as a radial burst!

MIT Licensed

Similar vizzes

Loading thumbnail…

Petal Length & Sepal Width

This scatterplot visualizes the relationship between petal length and sepal width in the Iris dataset, with each circle representing a flower sample. The React-based visualization uses D3 utilities to load CSV data, compute linear scales, and generate SVG axes and marks. Circles are rendered with native SVG elements, and tooltips display formatted values via the `title` attribute. The chart applies `.nice()` to the x-scale, custom tick formatting, and labeled axes to clarify the data dimensions.

HHaris Abdullah

94% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for individual iris flowers. The React-based visualization uses D3 v5 scales and axes to map the quantitative values to SVG coordinates. Data loads asynchronously via `d3.csv`, with each flower represented as a circular mark. The chart includes clearly labeled axes with rotated y-axis text, formatted tick values using `d3.format`, and a custom tooltip system that displays the petal length when hovering over a point. Styling is applied through CSS classes for ticks, labels, and marks.

Ggujjapooja7@gmail.com

91% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Aangelathacker123

91% match

Loading thumbnail…

Sepal Length & Petal Width

This interactive scatter plot visualizes the relationship between sepal length and petal width in the Iris dataset. Each circle represents a flower sample, with its x-position mapped to sepal length and y-position mapped to petal width, using D3's `scaleLinear()` for axis scaling and `format()` for tick labels. The visualization, rendered as an SVG via React, includes axes with custom tick marks and a tooltip on each point, all styled with the Poppins font and a teal color scheme.

HHaris Abdullah

91% match

Loading thumbnail…

ScatterPlot

This scatterplot displays the relationship between petal length and sepal width in the Iris dataset, with each data point represented as a circle. The visualization uses React and D3 v7, employing `scaleLinear` for both axes and rendering SVG elements through components like `AxisBottom`, `AxisLeft`, and `Marks`. The axes include formatted tick labels and axis titles, while circles include HTML title tooltips. Data is loaded asynchronously from a CSV file using D3’s `csv` function and parsed in `useData`.

Ddleoenri

91% match

Loading thumbnail…

A Scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal length on the y-axis. Each point represents an individual flower, with a tooltip displaying the exact petal length value. The visualization uses React to render SVG elements, with d3.scaleLinear for both axes and d3.extent to set the domains. Axes are generated with custom tick components, and the chart includes labeled axis titles with rotated y-axis text. The data is loaded asynchronously from a CSV file using d3.csv.

JJonas Carvalho

91% match

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between petal length and sepal width in the Iris flower dataset. The visualization loads CSV data from a GitHub gist using d3.csv, then maps each observation to a circle positioned by linear scales. The code builds axes as React components with SVG, using d3.scaleLinear to compute domains and ranges, and formats tick labels with d3.format. Tooltips appear on hover through SVG title elements.

JJohn Huang

91% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica). The visualization uses D3 v7 with the `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `csv` APIs to load and render the data as SVG circles. Axis labels indicate "Petal Length" and "Sepal Length," though the latter appears mislabeled relative to the plotted variables. The chart fills the browser window with margins and styled tick text.

Ffloraho401

91% match