Scatter Plot with Menus

Scatter Plot with Menus

This interactive scatter plot visualizes the classic Iris flower dataset, which contains measurements of sepal and petal dimensions across three species. Users can dynamically select which numerical attribute appears on the x-axis and y-axis using dropdown menus built with React hooks (useState). The visualization uses d3.scaleLinear for both axes, computes domains via d3.extent, and renders the plot as an SVG with custom React components for the axes and circular marks. D3’s csv loader fetches the data from a remote GitHub gist, and axis ticks are formatted with d3.format.

FFonda Irena Santoso

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, allowing users to explore relationships between different flower measurements via dropdown menus. The chart displays data points as circles, with the x-axis and y-axis representing selected attributes like petal length or sepal width. Built with React and D3 utilities, the visualization uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Users switch attributes through React state management, triggering real-time updates to the axes and marks rendered as SVG circles with tooltips.

LLaura Johnson

Scatter Plot with Menus

This interactive scatter plot displays the classic Iris dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers independently select which attribute appears on the x- and y-axes, with axes and labels updating dynamically. Built with React and D3 v7, the visualization uses `scaleLinear` for coordinate mapping and renders data points as SVG circles. The data is loaded via D3's `csv` parser, and reusable axis and mark components keep the code modular.

ZZoe Ferencova

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

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between different measurements of iris flowers. Through dropdown menus, viewers can dynamically select which attribute controls the x-axis (sepal length/width, petal length/width) and which controls the y-axis (sepal length/width, petal length/width), with labeled axes updating accordingly. Built with React and D3 v7, the visualization uses D3's `scaleLinear` and `extent` functions to compute scales from the CSV data, rendered as SVG circles with tooltips.

JJoe Hutchins

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

Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis. Two dropdown menus control the x and y variables, with the axes and circle marks updating dynamically. Built with React and D3 v5, it uses `scaleLinear` for coordinate mapping, `extent` to compute domains, and SVG elements for rendering, with axis components and dropdown selections managed through React state.

CChira Cezara Victoria