Iris Scatterplot

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against sepal width for individual flowers, with hover tooltips revealing exact measurements. The chart uses React with D3 v7, employing `scaleLinear` for axes and `extent` for domain calculation, while SVG circles render the data points. Axis components generate ticks and labels through D3's `ticks()` method. The visualization uses `d3.csv` to fetch and parse the dataset, with marks styled using CSS classes and a Poppins font.

JJames Rhodes

Iris Dataset Scatterplot

This scatterplot visualizes the Iris Dataset, plotting petal length against sepal width for 150 flower samples. The visualization displays data points as circles with a teal fill, using linear scales created with d3.scaleLinear and extent to map the data to SVG coordinates. React components structure the axis and mark rendering, while d3.csv loads and parses the remote dataset, converting numeric fields with unary plus operators. The code includes custom axis components that generate tick marks and labels, and a marks component that renders circles with native SVG title tooltips.

LLaura Johnson

Scatter Plot - Iris

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. The code uses React with D3 v5 utilities, including `scaleLinear`, `extent`, `csv` for data loading, and `format` for axis tick labels. Rendered as an SVG, it includes custom AxisBottom and AxisLeft components that generate ticks and gridlines, while Marks component draws circles with native tooltips via the `<title>` element. Data is fetched from a remote CSV file and parsed into numeric values during loading.

SSai Phaltankar

Iris data

This scatterplot displays the Iris flower dataset, plotting petal length against sepal width for individual flowers. The visualization uses React with D3 v7’s `scaleLinear` and `extent` functions to map the data to SVG coordinates, rendering each sample as a circle. Axes are generated via custom components, with tick marks and labels styled through CSS. The data is loaded asynchronously from a remote CSV using D3’s `csv` function, and the chart includes tooltip formatting for x-axis values.

JJosh Zalcman

Scatter Plot

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and sepal width for individual iris flowers. The React-based visualization uses D3 v5 scales and axes to map the quantitative values to SVG coordinates. Data loads asynchronously via `d3.csv`, with each flower represented as a circular mark. The chart includes clearly labeled axes with rotated y-axis text, formatted tick values using `d3.format`, and a custom tooltip system that displays the petal length when hovering over a point. Styling is applied through CSS classes for ticks, labels, and marks.

Ggujjapooja7@gmail.com

Iris Scatterplot

This scatterplot visualizes the Iris dataset, plotting sepal length on the x-axis against sepal width on the y-axis for each flower sample. The visualization uses React to render SVG circles within an HTML5 page, while D3 version 5 utilities—including `csv`, `scaleLinear`, `extent`, and `max`—handle data loading, scaling, and axis generation. Axis components leverage D3’s tick generation, with formatted labels and grid lines. Selections display tooltips via SVG `<title>` elements, and the layout employs fixed margins with Poppins typography for a polished presentation.

CChris Knight

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length against sepal length for individual flowers. The visualization uses React with D3 scales (`scaleLinear`, `extent`) to map data values to SVG coordinates, with custom axis components generating tick marks and labels. The D3 CSV loader fetches the data from a remote gist, while circles with 0.6 opacity represent each observation. The chart includes labeled axes and applies `nice()` to domain padding for cleaner tick intervals.

AAnkit5ingh

Iris Data Scatter Plot

This visualization shows the Iris dataset as a scatter plot, mapping petal length on the x-axis and sepal width on the y-axis. Each circle represents an individual iris flower, with a tooltip displaying the exact x-value on hover. The chart uses React state via `useState` and `useEffect` to load the CSV data through d3.csv, while d3.scaleLinear and d3.extent compute the scales. Axes are rendered as custom React components using SVG, with d3.format for tick labels and the Poppins font from Google Fonts.

Kkbrookshire420