Sepal Length and Width

Sepal Length & Petal Width

This interactive scatter plot visualizes the relationship between sepal length and petal width in the Iris dataset. Each circle represents a flower sample, with its x-position mapped to sepal length and y-position mapped to petal width, using D3's `scaleLinear()` for axis scaling and `format()` for tick labels. The visualization, rendered as an SVG via React, includes axes with custom tick marks and a tooltip on each point, all styled with the Poppins font and a teal color scheme.

HHaris Abdullah

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 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 visualizes the relationship between sepal length and sepal width for the Iris dataset. Each point represents an individual flower, positioned based on its measurements, with tooltips displaying the sepal length value. The visualization is built with React and rendered as an SVG, using D3 v5's `scaleLinear` for axis scaling and `extent` to compute data domains. Custom axis components generate ticks, while circular marks are drawn with a fixed radius. The data is loaded from a CSV file hosted on GitHub.

MMayank Kumar

Ddanielscheeper@gmail.com

Scatter plot

This scatter plot shows the relationship between sepal length and sepal width for Iris flowers, with each circle representing a sample and a tooltip revealing its exact measurement. The visualization uses React components to render SVG axes and marks, with D3 v7 scales (`scaleLinear`), `extent`, and `format` handling data mapping and tick labels. Data loads asynchronously via `d3.csv` from a remote Iris dataset, and the chart includes rotated axis labels for clarity.

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

scatter chart

This scatter chart visualizes the relationship between sepal length and sepal width in the Iris flower dataset. The code combines React with D3 utilities—including `scaleLinear`, `extent`, and `csv`—to load and render data as SVG circles with axis labels. Tooltips appear via native HTML `<title>` elements within each mark, showing the formatted sepal length value. Axes are constructed with custom React components that map D3 scales to SVG grid lines and tick labels.

Vvijaytayal