Fork of Polished Scatter Plot with Menus

100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Aug 12, 2023

Created on Aug 12, 2023

Forked from Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across different species. Two React Dropdown menus let viewers dynamically select which quantitative attributes to display on the x and y axes. The visualization uses d3.scaleLinear for scaling, custom React components for axes and marks, and renders SVG circles with tooltips. Data is loaded asynchronously via d3.csv from a GitHub gist, with the interface built using React hooks and styled with the Poppins font.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus, built with ReactDropdown, dynamically control which attributes appear on the x- and y-axes, with axes and labels updating accordingly. The visualization uses React for component structure, D3 v5 scales and CSV loading via `d3.csv`, and renders circles as SVG marks with tooltips. Styling uses Poppins font and a clean, minimal aesthetic.

PPiotr Paszek

98% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses D3.js scaleLinear for axis scaling and extent for domain calculation, with React managing the interactive dropdown menus. Users can select which attributes to plot on the X and Y axes via react-dropdown components, triggering state changes that update the SVG circles and axis labels accordingly. The plot renders using SVG elements, with each data point displayed as a circle with a tooltip showing its value.

AAnnie Ulichney

97% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions. Users can dynamically switch between four quantitative attributes for both the X and Y axes using ReactDropdown menus, while color encodes species via d3.scaleOrdinal. The visualization is built with React and d3.v5, rendering SVG circles and axes through custom components, with data loaded asynchronously using d3.csv.

Zzyniax

97% 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

97% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through React dropdown menus that dynamically change the x- and y-axis variables. The visualization uses React with hooks (useState, useEffect) and D3 v5 scales (scaleLinear, extent) to map data points as SVG circles with tooltips. Axis components and marks are separate React components, while react-dropdown provides the attribute selection menus. The code loads data asynchronously via d3.csv from a GitHub gist.

Jjerryren527

97% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements through drop-down menus. The React application renders an SVG chart where the x-axis and y-axis attributes are dynamically selected, with axes and marks updating in response. The code leverages d3.scaleLinear for scaling, d3.extent for domain calculation, and d3.csv for data loading, while React's useState manages the currently selected attributes. The visualization includes axes with tick marks, hover tooltips, and labels for the selected attributes.

YYedrup

97% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. Two dropdown menus dynamically select which numerical attributes appear on the x and y axes, while a third menu enables species filtering. The visualization uses React for state management, d3.scaleLinear for axis scaling, and d3.scaleOrdinal for categorical color encoding of species. SVG circles render each data point, with axes and legend built from custom React components that leverage d3’s tick generation.

AAnkit-Ian-53787

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus control which numeric attribute is mapped to the x-axis and y-axis, with axis labels updating accordingly. Built with React and D3 v5, the visualization uses D3's `scaleLinear`, `extent`, and `format` functions for scaling and tick formatting, rendering SVG circles with tooltips. The code also leverages the `react-dropdown-browser` library for menu interactions and loads data via D3's `csv` parser.

Bblackbottt

96% match