Skip to main content
SimilarExport ZIP
100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public
Bblackbottt
Last edited May 31, 2022
Created on May 31, 2022

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.

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 via dropdown menus that control the x and y axes. Built with React, D3 v5’s `scaleLinear` and `extent` manage the axes, while custom SVG `circle` elements render the data points. The `react-dropdown` library provides the menus, and CSV data is fetched and parsed asynchronously via `d3.csv`. Axis labels and tick marks are generated with D3’s scale API, and hover tooltips display values using a custom formatter.

Wwhiteswallow87
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 via dropdown menus that control the x and y axes. Built with React, D3 v5’s `scaleLinear` and `extent` manage the axes, while custom SVG `circle` elements render the data points. The `react-dropdown` library provides the menus, and CSV data is fetched and parsed asynchronously via `d3.csv`. Axis labels and tick marks are generated with D3’s scale API, and hover tooltips display values using a custom formatter.

Wwhiteswallow87
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 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
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. 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, allowing users to explore relationships between sepal and petal measurements by switching the x-axis attribute via a dropdown menu. Built with React and D3 v5, the visualization renders SVG circles for each data point, with axis components (AxisBottom and AxisLeft) generating tick marks and labels. The code uses d3.scaleLinear, d3.extent, and d3.csv for data loading and scaling, while ReactDropdown provides the interactive menu. A native SVG `<title>` element serves as a basic tooltip, displaying the x-axis value for each point on hover.

Bbenpedroscott
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 flower dataset, allowing users to explore relationships between sepal and petal measurements via two dropdown menus that select the X and Y axes. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes, `csv` for data loading, and React state to update scales and labels dynamically. The chart displays points colored teal, with axis ticks styled via CSS, and includes dropdown-driven attribute selection for all four numeric measurements.

Eevers-codeshop-ai
97% match