Scatter Plot With Menus

100%

Scatter Plot With Menus

✓ Published0🌍 Public

Last edited Jun 11, 2021

Created on Jun 11, 2021

This scatter plot displays the Iris Dataset, showing petal length on the x-axis and sepal width on the y-axis, with tooltips revealing exact values. Built with React and D3 v5, it renders SVG circles positioned by linear scales from d3.scaleLinear. The code defines reusable AxisBottom, AxisLeft, and Marks components, while useData fetches and parses the CSV via d3.csv. Static axis labels and a Poppins font style complete the visualization, which loads data asynchronously and shows a loading state.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that control which attributes appear on the x and y axes. Built with React and D3 v5, the visualization uses d3.scaleLinear for axes, d3.extent to compute domains, and d3.csv to load data. SVG circles represent individual flowers, with tooltips showing exact values. The interface includes labeled axes that update dynamically, styled with custom CSS and the Poppins font.

SSabin Bhandari

95% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal dimensions. Users can change the attribute mapped to the x-axis via a dropdown menu, while the y-axis remains fixed to sepal width. The visualization is built with React and D3 v5, using `scaleLinear` for axes, `csv` for data loading, and SVG circles for marks. Axes are rendered as separate React components with tick marks and labels, and hovering reveals tooltips.

CCharlie Cooper

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which numerical attribute to display on each axis via dropdown menus, with the plot updating instantly. The visualization is built using React and D3 v7, rendering SVG circles and axes. The `scaleLinear`, `extent`, `csv`, and `format` D3 functions are used for data loading, scaling, and tick formatting, while React `useState` manages the selected attributes.

SSong Tao Chen

94% match

Loading thumbnail…

Scatter Plot With Menus v1

This interactive scatter plot displays the Iris flower dataset, plotting petal length against sepal width by default. Users can change the X and Y axes from dropdown menus to explore relationships among four numeric attributes, with species shown as categorical labels. The React application uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and renders SVG circles with axis components built from reusable React functions. Tooltips appear on hover using SVG title elements. Data comes from a remote CSV file containing measurements of Iris flowers.

AAndres de la Garza

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute is mapped to the x and y axes via dropdown menus. The visualization is built with React and D3 v5, rendering an SVG with custom axis components and circular marks that display tooltips on hover. The menus dynamically update the plot, which uses d3.scaleLinear for axis scaling and d3.extent for data domains, drawing from a CSV file loaded with d3.csv.

MMark Simpson

94% match

Loading thumbnail…

ScatterPlot With Menus

This interactive scatter plot displays the Iris dataset, allowing users to dynamically select which sepal and petal measurements appear on the x- and y-axes through dropdown menus. Each flower’s measurements are plotted as SVG circles with tooltips showing their values. Built with React and D3 v5, the visualization uses d3.csv for data loading, d3.scaleLinear and d3.extent for scaling, and custom React components for axes and marks. The axis labels update to reflect the currently selected attributes.

PPedro Henrique Vanali

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on each axis. The visualization uses React for state management and D3 v7 for scales and SVG rendering, with axes generated by custom axis components and circles representing individual flowers. Data is loaded asynchronously via D3’s `csv` parser from a remote GitHub gist, and the plot updates dynamically as menu selections change.

Ww.fukuyama@gmail.com

94% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via dropdown menus. The React-based interface updates the d3 scales and rendered SVG circles dynamically when the user changes selections. The code uses d3.csv for data loading, d3.scaleLinear for axis scaling, and custom React components for rendering axes and marks.

Aaakarsh satyam

94% match