Scatter Plot with Menus

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute is plotted on the x-axis and y-axis, with the chart updating dynamically to reflect their choices. Built with React and D3 v5, the visualization renders points as SVG circles, using D3’s scaleLinear and extent for axis scaling. The code employs reusable components for axes, marks, and dropdowns, with axis labels and tick formatting courtesy of D3’s format function.

AAudrey

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against each other. Two dropdown menus allow users to select which measurement attributes appear on the x- and y-axes, with axis labels updating accordingly. The visualization uses React for component state and rendering, with d3-scale (scaleLinear) for positioning and d3.extent to compute domains. SVG circles represent data points with hover tooltips, while custom React components (AxisBottom, AxisLeft, and Dropdown) handle axes and menu interactions. Data loads asynchronously via d3.csv from a GitHub-hosted CSV file.

Llaplantalaplanta

Scatter Plot with Menus

A scatter plot of the Iris dataset, rendered as SVG in React, lets users select which attribute appears on each axis through two dropdown menus. The chart maps petal and sepal measurements, using `d3.scaleLinear` for scales and `d3.extent` to compute domains. Axes are drawn with shared `AxisBottom` and `AxisLeft` components, while `Marks` renders circles with tooltips. The code loads CSV data via `d3.csv`, and the dropdowns update state to reassign the x and y values dynamically.

BBen Seebeck

Scatter Plot with Menus

This scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. The example uses React with hooks to manage state for the X and Y axis attributes, which are selected via two dropdown menus. D3’s scaleLinear and extent functions compute the scales, while custom React components render the SVG axes and circle marks. Data is loaded asynchronously from a CSV using D3’s csv function with type coercion.

NNelson M

Scatter Plot With Menues

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus dynamically select which numerical attribute appears on each axis, updating the chart in real time. Built with React and D3 v6, the visualization uses d3.scaleLinear for scales and d3.extent for domains, rendered as SVG circles with tooltips. The code loads the data via d3.csv and demonstrates reusable axis and mark components.

Ppsabela

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, plotting sepal and petal measurements against one another. Two dropdown menus let a viewer select which attribute appears on the x- and y-axes, with the scales and axes updating accordingly. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `extent` to compute domains, and `csv` to load data from a remote URL. Circles are rendered as SVG elements, with native `<title>` tooltips showing formatted values. The chart reflects user selections through React state and the `Dropdown` component.

LLewis Ward

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris Dataset, displaying measurements of sepal and petal dimensions for different flower species. Two dropdown menus allow users to dynamically select which attributes appear on the X and Y axes, with all five available measurements (including species) as options. Built with React and D3 v5, the visualization updates scales and axes reactively when selections change, rendering points as SVG circles with tooltips. The code uses `scaleLinear` for axis scaling, `extent` for domain calculation, and custom React components like `AxisBottom`, `AxisLeft`, and `Dropdown` to structure the interface.

EEdgar Alves

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