Fork of Scatter Plot with Menus (x & y)

100%

Fork of Scatter Plot with Menus (x & y)

✓ Published0🌍 Public

Last edited Jan 29, 2021

Created on Jan 29, 2021

Forked from Scatter Plot with Menus (x & y)

This interactive bar chart displays mean measurements of three iris species, with a dropdown menu to select which measurement appears on the x-axis while the y-axis shows species categories. The visualization uses D3’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, with React managing state for the selected attribute. Data loads from a CSV file via d3.csv, and bars are rendered as SVG rectangles. The interface updates the x-axis label and bar widths dynamically when users change the selected measurement.

AI-generated description

A program that loads in saome data using d3 utilities and uses React to keep track of the data.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which quantitative attributes appear on the x- and y-axes through two dropdown menus built with React state. The visualization is rendered as an SVG, with axes and circles generated by D3 v5 scales and React components. Data is loaded asynchronously from a CSV file using d3.csv, and the plot updates dynamically when dropdown selections change.

EEdgar Alves

91% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes via dropdown menus. The visualization is built with React and rendered as SVG, using D3 v5 scale functions like `scaleLinear` and `extent` for scaling and axis generation. Data is loaded asynchronously with `d3.csv` from a GitHub-hosted CSV file. Each point represents an iris specimen, with native SVG `<title>` elements providing hover tooltips that display precise values.

Cchar0496

91% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four flower measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, updating the plot instantly. The visualization uses React for the interactive controls and D3.js’s `scaleLinear` and `extent` for axes and data scaling. Data is fetched as CSV from a GitHub gist, and circle marks with tooltips display each sample, rendered as SVG.

Mmartin_tp@live.dk

91% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, displaying sepal and petal measurements as a series of circles. Two dropdown menus allow the user to independently select which quantitative or categorical attribute is plotted on the x- and y-axes. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` to map data to SVG coordinates, while axis components and marks are rendered as reusable React functions. Data loading is handled asynchronously with `d3.csv`, and the chart updates dynamically when menu selections change.

Sshimos12468

90% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot, built with React and D3.js v5, visualizes the classic Iris Dataset, which contains measurements of sepal and petal dimensions for three iris species. Two dropdown menus allow users to independently select which quantitative attribute is mapped to the x-axis and y-axis, dynamically updating the linear scales and the displayed points. The visualization renders as an SVG, with each data point drawn as a circle. The code uses `d3.csv` to load the data and `d3.scaleLinear` to generate the axes, with React's `useState` managing the selected attributes.

SSam

90% match

Loading thumbnail…

Fork of Scatter Plot with Menus

An interactive scatter plot of the Iris dataset allows users to select which flower measurements appear on the x- and y-axes through two dropdown menus. Built with React and D3 v5, the visualization renders SVG circles scaled by d3.scaleLinear, with axes generated from tick values. Hovering over a point reveals its precise value via an SVG title tooltip.

RRupendra Pamisetty

90% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between four measured attributes and species through dropdown menus that dynamically reassign the x- and y-axes. Built with React and rendered as SVG using D3 v5, the visualization updates scales and marks via state changes triggered by the dropdown selections. The code leverages `scaleLinear`, `extent`, and `csv` for data loading and scaling, with custom React components for axes, marks, and menu controls.

XXiaoyu Su

90% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric attributes through dropdown menus that dynamically reassign the x and y axes. The visualization uses React for component management and state, d3.v5 for scales and CSV parsing, and renders SVG circles with tooltips showing formatted values. Users can switch between sepal and petal measurements, with axis labels updating accordingly to reflect the selected variables.

EEugenio2192

90% match