ScatterPlot

Scatter Plot

This scatter plot displays the relationship between sepal length and sepal width in the Iris dataset, with each flower represented as a teal circle. The chart loads data from a CSV file using `d3.csv` and renders SVG circles via React components. Axes are built with `d3.scaleLinear` and custom tick components, while hover tooltips use the SVG `<title>` element to show formatted values.

Ppsabela

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset, loaded via d3.csv. React components render SVG circles for each data point, with d3.scaleLinear mapping values to axes and d3.format handling tick label abbreviations. The visualization includes axis labels, gridlines, and native SVG tooltips showing exact values on hover.

Ppnlinyz

Scatter Plot

This scatter plot displays the relationship between sepal length and sepal width for Iris flowers, with each circle representing a data point from the Iris dataset loaded via `d3.csv`. The visualization uses React components to render SVG elements, with `d3.scaleLinear` handling both axes and `d3.extent` computing the domain. The code employs reusable axis and mark components, styled ticks, and a tooltip showing the formatted sepal length value. Data is fetched asynchronously in a custom `useData` hook.

Mmscoop16

Scatter Plot

This scatter plot displays the relationship between sepal length and sepal width from the Iris dataset. The visualization uses React to render SVG elements, with D3 utilities for data loading, scaling, and axis generation. The code employs `d3.csv` to fetch and parse the Iris data, `d3.scaleLinear` to map values to pixel coordinates, and custom React components for rendering axes and circular marks with hover tooltips. The plot features a clean design with gray tick marks, labeled axes, and teal-colored data points.

CCatalina Vajiac

Scatter Plot

This scatter plot displays the relationship between sepal width and sepal length for Iris flowers, with each circle representing a data point and showing its population value as a tooltip. The data loads from a CSV file via the `csv` function in d3.v5, while React manages the component state. The visualization uses `scaleLinear` for both axes, with `extent` and `nice` to set domains, and custom `AxisBottom` and `AxisLeft` components render ticks and labels. The SVG circles use d3 scales and formatters to position and annotate the marks.

11993-INDALKAR

ScatterPlot Iris

This scatter plot visualizes the relationship between sepal length and sepal width for Iris flowers. The React application loads the Iris dataset CSV using d3.csv, then renders SVG circles positioned by d3.scaleLinear x and y scales. Both axes display tick marks and labels created with custom React components, while hover tooltips reveal exact values via SVG title elements. The plot uses a fixed teal color for all points and includes styled axis labels for clarity.

PPadoSensei

Scatter Plot

This scatter plot visualizes the relationship between sepal length and sepal width for individual iris flowers. The data is loaded from a CSV file using d3.csv and rendered as SVG circles with React components. Axes are generated via custom AxisBottom and AxisLeft components using d3.scaleLinear for positioning, with d3.format applied to tick labels for compact number display. The visualization uses React state via useEffect to manage asynchronous data loading, and includes native SVG title elements for tooltips.

Nnkarinti

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis against sepal width on the y-axis for individual flower specimens. The visualization uses React with d3.scaleLinear scales and SVG rendering, with axes generated by custom React components. Data is loaded asynchronously from a CSV file using d3.csv, with string values parsed into numbers. The plot includes formatted tick labels, axis titles, and tooltips on each circle via SVG title elements, all styled with Poppins font and subtle gray colors.

Iiblub