Polished ScatterPlot With Menus

Polished Scatterplot with Menus

A scatterplot of the Iris dataset plots two chosen flower measurements against each other, with dropdown menus for selecting the X and Y axes. The SVG visualization uses d3.scaleLinear for axes, d3.extent for data domains, and d3.format for tick labels. Custom React components handle axis rendering and marks, while ReactDropdown provides menu interaction.

WWaseem Medhat

Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset enables exploration of relationships between numeric flower measurements. Two dropdown menus, built with ReactDropdown, let users select which attributes (sepal length, sepal width, petal length, or petal width) map to the x and y axes. The visualization uses React with D3 scales (d3.scaleLinear) and axis components rendered as SVG. Data is loaded asynchronously via d3.csv, with tooltips showing precise values for each circle mark.

RRudy Shayganfar

Polished Scatter Plot with Menus

An interactive scatter plot displays the Iris dataset, mapping four numeric flower measurements along selectable X and Y axes. Two dropdown menus, implemented with ReactDropdown, let users choose which measurement to visualize on each axis. The plot uses D3.js scales and axes within a React framework, rendering SVG circles with tooltips that show formatted values. The interface also includes axis labels that update dynamically to reflect the currently selected attributes.

GGonzalo Alarcón Usui

Polished Scatter Plot with Menus

This interactive scatter plot explores the Iris flower dataset, visualizing relationships between measurements like petal length and sepal width. Users select which attributes appear on the X and Y axes through dropdown menus built with React Dropdown, while the SVG visualization updates dynamically using React state management. The chart renders circles for each data point via D3 scales and components, with axis labels, tick marks, and tooltips providing context on the selected measurements. The interface uses D3 v7 for scales and data parsing, with React 16.9 handling component rendering and menu interactions.

KKazushige Okuma

Polished Scatter Plot with Menus

This scatter plot visualizes the Iris dataset, letting users explore relationships between flower measurements. Two dropdown menus, built with ReactDropdown, select which attributes (sepal length/width, petal length/width) appear on the x and y axes. The visualization uses React with hooks to manage state, while d3.scaleLinear and d3.extent compute the scale domains. SVG circles represent data points, with d3.csv loading the dataset and custom React components handling axes and marks. Data is rendered from a remote CSV file.

OOlof Ollerstam

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. Dropdown menus let viewers select which attributes appear on the X and Y axes, dynamically updating the visualization. Built with React and D3 v5, the SVG chart uses d3.scaleLinear for axis scaling, d3.extent for domain calculation, and d3.csv for data loading. Custom React components render the axes, marks, and dropdowns, with tooltips displaying formatted values on hover.

Llaplantalaplanta

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to select which numeric attributes are plotted on the x- and y-axes via dropdown menus. The visualization uses React to manage component state and render SVG elements, with D3’s `scaleLinear`, `extent`, and `max` functions handling axis scaling and data mapping. Axis ticks and labels are generated through custom React components, while circles representing data points include tooltips using SVG `<title>` elements. The graph updates dynamically whenever the dropdown selections change.

AAudrey

Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to select which flower measurements appear on the x- and y-axes via dropdown menus. The visualization renders points as SVG circles using React components and D3 scales, with axes generated through reusable AxisBottom and AxisLeft components. Dropdown selection updates state in the React app, which re-renders the scatter plot with new scale domains and labels. The Iris data is loaded asynchronously from a CSV file using D3's csv function.

CChris Briggs