Fork of Stylized Scatter Plot

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris Dataset, plotting petal length against sepal width. Built with React and D3 v5, it renders SVG circles for each data point, with axes composed from custom tick components. The code uses d3.csv for data loading, d3.scaleLinear for scaling, and d3.extent for domain calculation. Styling comes from the Poppins font and CSS-defined tick, mark, and label classes, while tooltips are implemented through SVG `<title>` elements.

RRamashish Pandey

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

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

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

Fork of Stylized Scatter Plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. Built with React and D3 v5, it uses a linear scale for both axes, with tick marks and axis labels rendered as SVG elements. The plot includes tooltips showing the x-value on hover and custom styling via the Poppins font and specific color palette for marks and ticks. The data is loaded asynchronously from a CSV URL using D3’s `csv` function.

Hhhh681838@gmail.com

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis with circular marks. Built with React and D3 v5, it uses `scaleLinear` for both axes, `extent` for domain calculation, and custom SVG components for rendering axes and circles with tooltips. The visualization loads data via `d3.csv` from a GitHub gist and applies a custom `format` function for tick labels, styled with the Poppins font.

SSuwigya Rathore

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The visualization uses React with D3.js v5 scales, including `scaleLinear` and `extent`, to position SVG circles. Axes are rendered as custom React components, with tick marks and labels styled using Poppins font. The plot provides hover tooltips displaying x-axis values in abbreviated format, while the data loads asynchronously from a CSV file using D3's `csv` function.

GGAMBILLJJ94

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flower samples. The visualization uses React to render SVG elements, with D3 v5’s `scaleLinear` and `extent` functions handling the x and y axis scaling. Axis components generate ticks via `xScale.ticks()`, while the `Marks` component renders each data point as a circle with a tooltip showing the formatted petal length. The chart is styled with the Poppins font and includes labeled axes.

Hhenry c