Fork of Stylized Scatter Plot

Fork of Stylized Scatter Plot

This example visualizes the classic Iris Dataset, plotting petal length against sepal width for three iris species, distinguished by color through a React-based SVG rendering. A color legend on the right allows interactive filtering; hovering over a legend item fades non-matching points while keeping the selected species fully opaque. The visualization uses D3 v5 scales and axes (`scaleLinear`, `scaleOrdinal`, `AxisBottom`, `AxisLeft`) within a React component structure, with data loaded asynchronously via `d3.csv`. The styled axes and labels use the Poppins font, and tooltips appear on individual points via SVG `<title>` elements.

Jjchen6912

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, mapping petal length and sepal width on the x and y axes while coloring each point by species. Built with React and D3 v5, the SVG chart uses `scaleLinear` and `scaleOrdinal` to position and color the circles, with a custom color legend and hover tooltips. The visualization eschews traditional chartjunk in favor of a minimalist design that emphasizes clear data-ink ratio through its stylized axes and typography.

Qqtrfx

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping petal length on the x-axis against sepal width on the y-axis for each flower specimen. Built with React and D3 v5 using SVG rendering, the chart displays all data points as teal circles with hover tooltips showing exact values. The code uses D3's `scaleLinear` and `extent` functions to construct the axes, while the `csv` loader fetches data from a GitHub gist. The minimalist design employs Poppins typography and custom axis tick styling for a clean presentation.

NNart Williamson

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. The visualization displays points colored by species, with dropdown menus to select which measurements appear on the x and y axes, and maintains a color legend that highlights points of a selected species while dimming others. Built with React and d3.js using the `scaleLinear` and `scaleOrdinal` functions, the plot renders as SVG with custom axes and mark components.

Ssteelerfan107

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, mapping petal length on the x-axis and sepal width on the y-axis. Circles represent individual flowers, with hover text revealing exact x-axis values. Built with React and D3 v5, it uses `d3.csv` to load data and `d3.scaleLinear` for axes, rendering SVG marks and gridlines via `scaleLinear` and custom `AxisBottom` and `AxisLeft` components.

Eeliarech

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length and sepal width for each sample, with points colored by species using a D3 scaleOrdinal color scale. The visualization is built with React, using D3.forscaleLinear for positioning axes and marks, and renders to SVG. A custom color legend displays the three species, and hovering over a point reveals its petal length via a tooltip. The code imports D3 utilities like `csv`, `scaleLinear`, `scaleOrdinal`, and `format` to load data and manage scales.

AAnthony Le

Fork of Fork of Fork of Stylized Scatter Plot

This interactive scatter plot lets users explore the classic Iris flower dataset by switching the x and y axes between sepal and petal measurements. Color encodes the three iris species, and hovering over a legend item fades all non-matching points to emphasize that group. The visualization uses D3 v5 utilities like `scaleLinear`, `scaleOrdinal`, and `csv` for data loading, with React managing component state. SVG rendering draws axes, circles, and the color legend, with native `<title>` elements providing tooltips.

Sstefanpullen

Fork of Scatter Plot with Color Legend

This interactive scatter plot visualizes the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with points colored by species. Built with React and D3 v5, it uses d3.scaleLinear for both axes and d3.scaleOrdinal for the categorical color mapping. The SVG rendering includes custom axis components, a color legend, and tooltips via SVG title elements. The data is loaded through d3.csv from a GitHub Gist.

DDeborah Ong