Fork of Stylized Scatter Plot

100%

Fork of Stylized Scatter Plot

✓ Published1🌍 Public

Last edited Jun 14, 2024

Created on Jun 12, 2024

This fork of a stylized scatter plot displays the classic Iris Dataset, encoding each observation as a rotated white hexagon with a black outline. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and maps data points to SVG `<polygon>` elements. The hexagons are positioned via `xScale` and `yScale`, then transformed with `rotate` and `scale` parameters. Hovering reveals tooltips formatted with the `format` API. The chart loads data from a CSV file using D3's `csv` function.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

A stylized scatter plot of the Iris dataset, where each data point is rendered as a rotated white hexagon with a black outline instead of a standard circle. Built with React and D3 v5, it uses `scaleLinear` to map the x and y values from the CSV data to pixel coordinates. The `Marks` component creates SVG `<polygon>` elements, applying scale and rotation transforms to the hexagon's points. Axes are custom-rendered as SVG `<g>` elements with tick marks, and a hover tooltip is provided via an SVG `<title>` element.

Ssahildesignzz@gmail.com

93% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it uses `d3.scaleLinear` for axes and renders circles via SVG. The code employs reusable `AxisBottom`, `AxisLeft`, and `Marks` components, with hover tooltips using SVG `<title>` elements. Data is loaded asynchronously via `d3.csv` and parsed into numeric values, while axes display formatted tick labels and a Poppins font styles the presentation.

Ppei9223

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, using React to construct SVG marks and D3.js scales for positioning. The plot maps petal length and petal width to the x and y axes, while species determines the color of each circle, drawn with D3’s `scaleOrdinal` and `scaleLinear`. Axes are rendered via custom SVG components, with tick marks and labels styled through CSS. Data is loaded asynchronously using D3’s `csv` method, and a tooltip is provided via SVG `<title>` elements.

JJoachim Klug

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Built with React and D3 v5, it renders SVG circles with tooltips and custom axes using `scaleLinear` and `format`. The code includes unused D3 band scales and appended SVG elements, though the active visualization relies on the React components for axis and mark rendering. Data loading uses the `csv` function from D3, with all numeric columns parsed in a row accessor.

Eeliarech

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

A fork of a stylized scatter plot visualizes the Iris Dataset, mapping petal length against sepal width. The React application uses d3.csv for data loading and d3.scaleLinear with .nice() for axis scaling. SVG circles are rendered with tooltips via native <title> elements. The code leverages React hooks (useState, useEffect) for asynchronous data fetching and d3.format for axis tick labels.

PPY09052021

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This fork of the “Stylized Scatter Plot” visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. The scatter plot uses React with d3.v5 to compute linear scales via `scaleLinear` and render SVG circles as marks, styled with a distinct teal fill. Axis components are built with React from D3’s tick values, and hover tooltips display formatted tick values. Data is loaded asynchronously with the `csv` function from D3.

Sseanmdalrymple@protonmail.com

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, displaying petal length against sepal width with React and D3 v5. Data loads asynchronously via `csv()` and scales linearly with `scaleLinear`. SVG circles with native tooltips render the marks, while custom React components generate axes and tick lines. The chart uses a Poppins font and a minimal color palette, with axis labels rotated for readability.

Sstwxs

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. Rendered as an SVG using React and D3 v5, the example loads data via `d3.csv` and uses `d3.scaleLinear` with `d3.extent` to compute scales. Custom Axis components generate tick marks and labels, while circular marks represent individual data points, each with a tooltip showing its x-value.

Cchar0496

89% match