Skip to main content
SimilarExport ZIP
100%

Dataviz 2020_Ep25 - 19. Scatter Plot

✓ Published2🌍 Public
MMinwoo Pak
Last edited Sep 24, 2023
Created on Jul 15, 2021

This scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and sepal width for individual specimens. The visualization encodes each flower as a circle, with hovering revealing its exact value via a native SVG `<title>` tooltip. Built with React and D3 v6, the chart uses `d3.scaleLinear` for axes, `d3.extent` for domains, and custom React components for axes and marks. Data is loaded asynchronously from a remote CSV file using `d3.csv`.

AI-generated description

A program that loads in some data about CSS named colors using D3 utilities, and uses React to render the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dataviz 7 - Scatter plot

A scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis for individual flowers. The visualization uses React with D3 v5, employing `scaleLinear` for both axes and rendering SVG circles via the `Marks` component. Axes are built with reusable `AxisBottom` and `AxisLeft` components, while a native SVG `<title>` element provides hover tooltips. The data loads asynchronously from a remote CSV using the `csv` function from D3, with numeric fields parsed on ingestion.

RRyAlpha
93% 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
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length against sepal length for individual flowers. The visualization uses React with D3 scales (`scaleLinear`, `extent`) to map data values to SVG coordinates, with custom axis components generating tick marks and labels. The D3 CSV loader fetches the data from a remote gist, while circles with 0.6 opacity represent each observation. The chart includes labeled axes and applies `nice()` to domain padding for cleaner tick intervals.

AAnkit5ingh
92% match
Loading thumbnail…

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers, with hover tooltips revealing exact measurements. The chart uses React with D3 v7, employing `scaleLinear` for axes and `extent` for domain calculation, while SVG circles render the data points. Axis components generate ticks and labels through D3's `ticks()` method. The visualization uses `d3.csv` to fetch and parse the dataset, with marks styled using CSS classes and a Poppins font.

JJames Rhodes
92% 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
92% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` to create axes and renders circles as SVG marks. The `axisBottom` component formats tick labels with D3's `format` function, while tooltips display values via SVG `<title>` elements. The data loads asynchronously from a CSV using D3's `csv` parser.

Llefat92
92% match
Loading thumbnail…

Dataviz 2020_Ep33 - 26. Scatter Plot with Colors

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between different flower measurements. The visualization displays each flower as a colored circle, with the three species distinguished by a categorical color scale. Users can dynamically select which measurement to plot on the x and y axes via the dropdown menus. Built with D3 v6 for data loading and scaling, the chart uses React to render SVG elements, including axes, tick marks, and circles, with tooltips showing the y-value. Data is loaded from a remote CSV file using the `csv` function.

MMinwoo Pak
92% match
Loading thumbnail…

dv2020-ep25-viz25 - scatter plot

A scatter plot of the Iris Dataset shows petal length on the x-axis and sepal width on the y-axis, with semi-transparent circular marks. Built with React and D3 v5, it uses `scaleLinear` with `.nice()` for continuous scales, custom `AxisBottom` and `AxisLeft` components for tick rendering, and a `Marks` component that maps data to SVG circles with native `<title>` tooltips. The visualization loads CSV data via D3's `csv` function and displays axis labels for both dimensions.

Zzach b.
92% match