Scatter Plot

Scatterplot with Iris Data

This scatterplot displays the Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and rendered as an SVG, it uses D3’s `scaleLinear` with `extent` and `nice` to compute axes, which are drawn by custom `AxisBottom` and `AxisLeft` components. The `Marks` component maps each data point to a circle with a `<title>` tooltip, and data is loaded asynchronously via D3’s `csv` from a gist URL. The visualization includes axis labels and a custom tick format, but does not encode species or other dimensions.

AArefa Patwary

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width for individual flowers. Built with React and D3 v5, it uses `scaleLinear` to create axes and renders circles as SVG marks. The `axisBottom` component formats tick labels with D3's `format` function, while tooltips display values via SVG `<title>` elements. The data loads asynchronously from a CSV using D3's `csv` parser.

Llefat92

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 Scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis, with each of the 150 flowers represented as a circle. The React-driven SVG uses D3 v7 scales, including `scaleLinear` and `extent`, to map data values to pixel coordinates. Axis components generate tick marks and labels via `xScale.ticks()`, while formatted tooltips appear on hover through SVG `<title>` elements. Data is loaded asynchronously with `d3.csv` from a remote gist, and the layout employs explicit margins for axis labels.

Ssaidhiraj16

Iris Scatterplot 02

This scatterplot displays the Iris dataset, plotting petal length against sepal length for each flower specimen. The visualization uses a React framework with SVG rendering, employing D3.js functions like `scaleLinear` for axis scaling and `scatterPlot` for the mark generation. The code reads the data from a remote CSV file, parses numeric values, and renders circles with a fixed radius. Axes are labeled using D3's `axisBottom` and `axisLeft` positioned according to specified margins. The chart fills the entire browser window, adapting to the viewport dimensions.

Gg1g10

Scatter Plot

This interactive scatter plot displays the Iris dataset, plotting petal length against sepal width for individual flowers. The visualization is built with React and rendered as SVG elements, using D3 v7 scales (d3.scaleLinear) and axes. Each data point is a circle with a radius of 10, and hovering reveals the petal length as a native tooltip. The code uses d3.extent to set domains, d3.csv for data loading, and d3.format with a custom tick formatter that replaces 'G' with 'B' for axis labels.

Aangelathacker123

Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal width on the y-axis for each flower specimen. Rendered as SVG circles with fixed radius, the chart uses D3’s `scaleLinear` functions for both axes, with axis ticks generated by custom React components. The code leverages React hooks (`useState`, `useEffect`, `useCallback`) to asynchronously load the CSV data via D3’s `csv` method, parsing numeric fields before display. Axis labels and tick formatting are applied through D3’s `format` utility, with tooltips provided by SVG `<title>` elements.

NNikithakatta30

Scatter Plot - Iris

This scatter plot visualizes the classic Iris dataset, showing the relationship between petal length and sepal length for three flower species. The D3 v5 code uses `scaleLinear` and `extent` to map data values to SVG coordinates, with React components handling axis rendering and circle marks. Each species receives a distinct color and opacity through CSS classes. The visualization includes labeled axes with formatted tick marks and a native SVG `<title>` tooltip that reveals the species name on hover.

FFlorian Kotthoff