Fork of Stylized Scatter Plot

Sseanmdalrymple@protonmail.com

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements such as petal and sepal length and width. Users can dynamically select which measurements appear on the x- and y-axes via dropdown menus, with all points rendered as SVG circles. The visualization is built using React and D3 v5, leveraging D3’s `scaleLinear` for axis scaling and `csv` for data loading. Axis ticks and labels are generated with custom React components, while a tooltip shows formatted values on hover.

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset, this interactive visualization lets users explore relationships between four numeric attributes (sepal and petal length/width) via dropdown menus. Built with React and D3 v5, the SVG chart displays all 150 flowers as teal circles, with axes generated by custom React components using d3.scaleLinear and d3.extent. The code demonstrates modular React components for marks, axes, and a reusable dropdown, with data fetched asynchronously via d3.csv.

Jjchen6912

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes Fisher’s Iris dataset, allowing users to switch the x-axis attribute among sepal and petal measurements via a React dropdown menu. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to map data to SVG coordinates, with axes rendered as custom React components. Stylized with the Poppins font and teal circular marks, hovering reveals tooltips formatted with D3’s `format`. The y-axis remains fixed on sepal width while the x-axis changes dynamically.

AAmnaRizvi-S

Fork of Stylized Scatter Plot

This interactive scatter plot displays the Iris flower dataset, allowing users to compare sepal and petal measurements by selecting attributes from dropdown menus. The visualization uses React state to manage the selected axes, with D3 v5’s `scaleLinear` and `extent` functions mapping data values to SVG coordinates. Axis components render tick marks and labels, while circles represent individual flowers with tooltips. The chart updates dynamically when the user changes the X or Y axis selection, leveraging D3’s `csv` loader for data fetching and React’s `useState` and `useEffect` hooks for state management.

Yyejichun@naver.com

Fork of Stylized Scatter Plot

This interactive scatter plot displays the classic Iris Dataset, plotting petal length against sepal width for individual flowers. The visualization uses React to declaratively render SVG elements, with D3.js v5 handling data fetching via `csv()` and constructing the linear scales with `scaleLinear()`. Grid lines and tick labels are custom-built through reusable `AxisBottom` and `AxisLeft` components, while `Marks` generates the circular data points with `<circle>` elements and tooltip text. The styling uses the Poppins font and a muted color palette defined in the embedded CSS.

AAnthony Le

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements (sepal and petal length/width) and species. Two dropdown menus, implemented as React components, let viewers independently select which attributes appear on the x- and y-axes. The visualization uses d3.scaleLinear for coordinate mapping, with React managing state updates and SVG rendering ticks, circles, and axis labels. Data loads asynchronously via d3.csv from a remote gist, and each data point includes a tooltip showing its exact value.

SShaneBowen1

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 Stylized Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes from dropdown menus. The visualization uses React with d3.scaleLinear for positioning, d3.csv for data loading, and d3.format for axis tick labels. Rendered as SVG, the plot displays circles for each data point with axis labels and tick marks styled by the Poppins font.

RRED98310