Fork of Fork of Stylized Scatter Plot

100%

Fork of Fork of Stylized Scatter Plot

✓ Published0🌍 Public

Last edited Jun 14, 2024

Created on Jun 14, 2024

Forked from 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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Stylized Scatter Plot

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.

Pppal41366@gmail.com

93% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, mapping petal length against sepal width. Using React and D3 v5, it renders interactive SVG circles with tooltips, employing `scaleLinear` for axes and custom tick formatting that abbreviates large numbers. The plot features a clean design with styled grid lines, axis labels, and a Poppins font, all derived from the iris.csv data source. The code demonstrates a modular approach with separate components for axes and marks.

Ttengyf0718@gmail.com

91% 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

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with labeled axes and tooltips. Built with React and D3 v5, it renders as an SVG using scaleLinear scales for positioning. The code defines custom AxisBottom, AxisLeft, and Marks components, with d3.csv loading the data and d3.format handling tick label formatting. Points are drawn as circles with a fixed radius, styled with a teal fill against a clean, minimal chart layout.

KKamilPodsiadlo

90% 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

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, rendered as an SVG using React and D3 v5. It displays sepal width along the y-axis and a user-selected attribute on the x-axis, chosen via a dropdown menu. The code uses D3’s `scaleLinear`, `extent`, and `format` for axis scaling and tick formatting, with custom `Marks` and axis components. Data is fetched as CSV using `d3.csv`, with styles defined in CSS for axes and labels.

JJusung

90% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This visualization is a scatter plot of the Iris Dataset, showing petal length against sepal width. Built with React and SVG, it uses D3 v5's `scaleLinear`, `extent`, and `format` to compute axes and tick labels. The `Marks` component renders each data point as a circle with a tooltip, while `AxisBottom` and `AxisLeft` generate styled grid lines and labels. The chart is styled with the Poppins font and a teal color scheme for marks.

NNikhil Patel

90% match