Fork of Polished Scatter Plot with Menus

100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Dec 27, 2023

Created on Dec 27, 2023

Forked from Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset using React and D3 v5, rendering points as SVG circles positioned with `scaleLinear` scales. Two dropdown menus allow users to select which quantitative attributes appear on the x- and y-axes. The code constructs axes with custom `AxisBottom` and `AxisLeft` components, and includes a tooltip via SVG `<title>` elements on each circle. Styling uses the Poppins font and the React Dropdown library for menu interaction.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This scatter plot displays the Iris dataset, with dropdown menus allowing users to select which attributes appear on the x and y axes. Built with React and D3 v5, it renders SVG circles for each data point, using `scaleLinear` and `extent` to compute scales. The `ReactDropdown` component updates the axis labels and values on selection.

Aamanoakane

97% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A React scatter plot displays the Iris Dataset with interactive dropdown menus for selecting which attributes map to the X and Y axes. Two ReactDropdown components control the axes, updating the visualization through React state and re-rendering D3 scales created with `scaleLinear` and `extent`. The SVG chart uses reusable `AxisBottom`, `AxisLeft`, and `Marks` components for rendering ticks, labels, and circles with tooltips via the `<title>` element, styled with Poppins typography and a muted color palette.

MMarcelo

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, featuring dropdown menus to select which measured attribute appears on the x- and y-axes. The visualization updates the axes and data points in response to user selections, with tooltips showing the x-value for each circle. Built with React and D3 v5, the code uses `scaleLinear` for axes, `csv` for data loading, and `ReactDropdown` for the menu controls. The SVG rendering separates axis and mark components, employing D3’s `extent` and `max` for domain calculations.

HHenry-Bayly

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which measurements to plot on the x and y axes via two dropdown menus. Built with D3 v5 and React, it renders SVG circles, with axes, labels, and a tooltip generated through custom components. The code uses D3’s `scaleLinear`, `extent`, and `csv` for data loading and scaling, and the `react-dropdown-browser` library for the menus.

DDasbach.EJ

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

A scatter plot of the Iris dataset rendered as SVG circles in React, with two dropdown menus that let the viewer select which of four numeric attributes appears on the x- and y-axes. The visualization uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load the data, while custom React components (AxisBottom, AxisLeft, Marks) generate the tick marks, labels, and circles. Axis labels update dynamically based on the selected attribute.

Bblackbottt

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to select which quantitative attributes appear on the x and y axes via React dropdown menus. Hovering over the color legend highlights data points from a selected species while dimming others. The visualization uses React for state management and UI, D3 v5 scales for positioning, and renders marks as SVG circles with axis components built from tick methods.

EEdgar Alves

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to choose which numerical attributes to plot on the x- and y-axes via dropdown menus powered by react-dropdown. The visualization uses React with hooks (useState, useEffect) to manage state and data loading, while D3 version 5 (scaleLinear, extent, csv) handles scaling, axis generation, and data fetching from a GitHub gist. SVG circles represent individual iris samples, and hover tooltips display formatted x-values using d3.format.

Cchar0496

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting attributes for the x and y axes from two dropdown menus. Built with React and D3 v5, it renders SVG circles and axes using components like `scaleLinear` for scaling and `extent` for domains. The visualization updates dynamically through React state management, with dropdowns provided by ReactDropdown, and styling applied via Poppins typography.

MMar-99

95% match