Dataviz 7 - Scatter plot

100%

Dataviz 7 - Scatter plot

✓ Published2🌍 Public

Last edited Nov 24, 2021

Created on Nov 24, 2021

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Dataviz 2020_Ep25 - 19. Scatter Plot

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`.

MMinwoo Pak

93% match

Loading thumbnail…

Scatter Plot - Iris

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The code uses React with D3 v5 utilities, including `scaleLinear`, `extent`, `csv` for data loading, and `format` for axis tick labels. Rendered as an SVG, it includes custom AxisBottom and AxisLeft components that generate ticks and gridlines, while Marks component draws circles with native tooltips via the `<title>` element. Data is fetched from a remote CSV file and parsed into numeric values during loading.

SSai Phaltankar

92% match

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Each circle represents a single flower sample, with a native tooltip revealing the precise x-value on hover. Built with React and rendered as SVG using d3.scaleLinear for both axes, the visualization employs custom AxisBottom and AxisLeft components for tick marks and labels. The d3.csv loader fetches the data, while the marks are drawn as circle elements with dark red fill, styled with the Bebas Neue font.

FFrederick O'Brien

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…

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…

D3 Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Built with D3 v7 and React, the visualization uses SVG circles and linear scales to map data values to screen coordinates, with axes generated by d3.axisLeft and d3.axisBottom. The code loads CSV data asynchronously via d3.csv, parses numeric fields, and renders points with a steelblue fill. Axis tick labels are styled with a large Courier New font, and the chart fills the browser window dynamically.

Nnicolekevans

92% match

Loading thumbnail…

ScatterPlot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width with each data point rendered as a circle. Built with React and D3 v7, the visualization uses SVG for rendering, with D3's linear scales to map data values to pixel coordinates. The axes are generated using custom React components (AxisBottom, AxisLeft) that leverage D3's scale ticks, while the Marks component renders circles with tooltips. The interface dynamically fills the browser window and uses the Poppins font, with all data loaded via D3's CSV parsing utility.

Mmbooch22

92% match