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 across flower species. Two dropdown menus dynamically control which quantitative attribute is displayed on the x- and y-axes, with axes, labels, and data points updating in real time. Built with React and D3 v5, the visualization renders as SVG, using d3.scaleLinear for axis scaling and d3.extent for data domains. Hovering over any circle reveals its exact value via SVG titles.

Nn.koldovsky@gmail.com

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 dataset, allowing viewers to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis through the dropdown menus. Built with React hooks and D3.js v5, the visualization uses `scaleLinear` to map data ranges to SVG coordinates and renders circles for individual specimens. The axis components dynamically update with `tickFormat` for readable labels, while hover tooltips reveal exact values. The code demonstrates a reusable pattern for building linked interactive visualizations from CSV data using `d3.csv` and React state management.

Ppatasky

Scatter plot with menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that select which attributes appear on the x and y axes. The visualization uses D3’s `scaleLinear` and `extent` functions to map data to SVG coordinates, while React manages component state and re-rendering when menu selections change. The data is loaded asynchronously via D3’s `csv` method, and circles represent individual flowers with tooltips showing the x-axis value.

MmohitPassan

Scatter Plot+Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through two dropdown menus that independently control the X and Y axes. The visualization uses React state management to dynamically update D3 scales and SVG circles when selections change, with axis labels updating to reflect the chosen attributes. The code leverages D3's scaleLinear and extent functions for data mapping, while React hooks manage the component's interactive state transitions.

CCyc-Evelyn

Scatter Plot with menus

This interactive scatter plot displays the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users select which attributes to plot on the x and y axes using dropdown menus, with axis labels updating to reflect the chosen variables. The visualization is built with React and rendered as SVG using d3.v7's scaleLinear function for coordinate mapping. The data is loaded from a CSV file using d3.csv, and the plot includes title formatting, axis ticks, and tooltips for data point inspection.

Jjackcaldwellnichols

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 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