Fork of Fork of Stylized Scatter Plot

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width with circular marks. The React-based implementation uses D3 v5 scales (`scaleLinear`) and extent calculations to position points, while custom AxisBottom and AxisLeft components render the tick marks. Styled axes and teal-colored circles follow the Poppins font, with hover tooltips displaying formatted petal length values. The code loads CSV data via `d3.csv` and renders the visualization as SVG.

LLyco Angelo Ty

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

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset displays petal length against sepal width, with each flower represented by a teal circle. The visualization uses React components and D3 scales to map the data, with axes generated by custom AxisBottom and AxisLeft components. The code loads data via d3.csv, applies linear scales with d3.scaleLinear, and formats tick labels using d3.format. Styling includes Poppins font and custom tick and mark colors, with a native SVG title element providing tooltips.

TTina Nemati

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, it uses SVG rendering with `scaleLinear` scales and `csv` data loading to map observations as circles. The visualization includes labeled axes with custom tick formatting, a native SVG `<title>` element for hover tooltips, and the Poppins font. The code demonstrates reusable AxisBottom, AxisLeft, and Marks components for modular chart construction.

GGustavo

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 example visualizes the classic Iris Dataset, plotting petal length against sepal width as a stylized scatter plot. The implementation uses React to render the SVG elements, while D3.js provides the data loading, linear scaling, and axis tick generation through `scaleLinear` and `extent`. The `Marks` component draws each circle with a tooltip showing the formatted x-value, and the axes are constructed from reusable `AxisBottom` and `AxisLeft` components. The design features a Poppins typeface, muted gray and teal colors, and generous margins for axis labels.

RReymond Mesuga

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris Dataset, mapping petal length against sepal width with circular marks. Built with React and rendered as SVG, it uses d3.scaleLinear for both axes and d3.extent to set domains. The code implements custom AxisBottom and AxisLeft components that generate ticks via xScale.ticks(), while Marks component renders circles with tooltips. The chart includes axis labels and styling with the Poppins font, showcasing a straightforward React-D3 integration pattern.

AAchilleasTyrnenopoulos