React-dropdown Menus ScatterPlot (codeAlong)

Scatter Plot Menus Basic (codeAlong)

This interactive scatter plot displays the Iris flower dataset, allowing users to select which quantitative attribute appears on each axis via dropdown menus. Built with React and D3 v6, the visualization updates scales and marks reactively when menu selections change. SVG rendering draws axis ticks, labels, and circular data points using the `scaleLinear`, `extent`, and `csv` APIs, with native HTML `<select>` elements controlling state.

Ttomahawk-jupiter

Scatter Plot With menu

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via React dropdown menus. The SVG visualization uses d3.scaleLinear for both axes, with d3.extent and d3.max for domain calculation, and renders circles with native tooltips. The React components (AxisBottom, AxisLeft, Marks, Dropdown) manage the state-driven re-rendering as users change axis selections, pulling data asynchronously via d3.csv.

Aadewole-top

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that dynamically change the X and Y axes. The visualization uses React for state management, d3.scaleLinear and d3.extent for scaling axes, and d3.csv for data loading. SVG circles with d3.format-based tooltips display data points, while custom AxisBottom and AxisLeft components render ticks. The ReactDropdown component enables attribute selection, with axis labels updating accordingly to reflect the current measurements displayed.

SSong Tao Chen

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements through React dropdown menus that dynamically change the x- and y-axis variables. The visualization uses React with hooks (useState, useEffect) and D3 v5 scales (scaleLinear, extent) to map data points as SVG circles with tooltips. Axis components and marks are separate React components, while react-dropdown provides the attribute selection menus. The code loads data asynchronously via d3.csv from a GitHub gist.

Jjerryren527

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that control the X and Y axes. The visualization uses React for state management and dynamic UI updates, with D3.js scaleLinear and extent functions for scaling data to SVG coordinates. Custom AxisBottom and AxisLeft components render ticks and labels, while Marks components draw the circles representing individual iris flowers. The code also incorporates the react-dropdown library for the menu interface and CSS styling with the Poppins font.

Ccynichole

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

scatter plot with menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between four measurements (sepal length/width and petal length/width). Two dropdown menus, built with React's useState hook and a custom Dropdown component, dynamically select which attributes map to the x-axis and y-axis. The visualization uses d3.scaleLinear for scales and d3.extent for domain calculation, rendering SVG circles with native `<title>` tooltips. Axes are generated manually through d3 scale ticks, with data loaded asynchronously via d3.csv.

MMohammed Banani | MbDev

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