Fork of Stylized Scatter Plot

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width as a scatter plot. The visualization uses React components to render SVG elements, with d3.scaleLinear functions handling the x and y axes. The code loads data with d3.csv, applies axes using custom React components, and displays each flower as a circle with a tooltip showing its petal length. The styling uses the Poppins font and a teal color scheme.

SSamuel Baik

Fork of Stylized Scatter Plot

This example visualizes the classic Iris dataset, plotting petal length against sepal width in a scatter plot. The rendering uses React components to generate SVG elements, with each data point drawn as a circle. D3’s `scaleLinear` and `extent` functions compute the axes, while `format` handles tick labels. Grid lines and axis labels are styled via CSS classes, and hover tooltips appear using the native SVG `<title>` element.

RRory Matthews

Bbillmccabeusa@hotmail.com

Fork of Stylized Scatter Plot

This fork of a stylized scatter plot visualizes the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and renders as SVG, using D3’s `scaleLinear` to map data values to coordinates. Axes are custom-rendered with React components that generate tick marks and labels, while circles represent each data point. The chart includes styled axis labels, tooltips on hover via the SVG `title` element, and a clean, minimalist design with a Poppins font.

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width as a scatter plot. The visualization uses React to render SVG circles and axes, with D3 (v5) for data loading, scaling, and axis generation. A `Poppins` font style is applied to the page, while the marks are styled with a teal fill and the axes use light gray tick lines. The code includes a formatted tick label function that abbreviates values using D3’s `format('.2s')`.

Ttrissentety

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. The visualization uses React to render SVG circles as data marks, with d3.scaleLinear for axes and d3.csv for data loading. Axis components are custom-built with d3 ticks, and each circle includes a native SVG `<title>` element for hover tooltips. The styling uses the Poppins font and a muted teal color for marks.

Aavneet12284

Fork of Stylized Scatter Plot

This example shows a scatter plot of the Iris Dataset, mapping petal length on the x-axis against sepal width on the y-axis. The visualization uses React components to render SVG circles and axes, with D3 v5 providing the scaleLinear, extent, max, and format functions for data scaling and tick formatting. Styling is applied via CSS class selectors, and a native SVG title element displays tooltips on hover. The data is loaded asynchronously from a CSV file using D3’s csv function.

JJONATHAN SIMON

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 example visualizes the classic Iris dataset, plotting petal length against sepal width in a minimalist scatter plot. React renders the SVG, with d3.scaleLinear mapping the measurement ranges and generating axis ticks. Axes are styled per the Poppins font, while the circle marks use the default SVG tooltip via the `<title>` element. The data is loaded asynchronously from a GitHub-hosted CSV using d3.csv, and the graph emphasizes clean typography and muted colors.

JJONATHAN SIMON