7.28-ScatterPlotWithMenus

Scatter Plot with menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between four numeric measurements—sepal length, sepal width, petal length, and petal width—by selecting which attribute appears on each axis via two dropdown menus. The visualization renders data points as SVG circles, with scales created using d3.scaleLinear and extents computed via d3.extent. Axis components generate tick marks and labels, while React hooks manage the selected attributes and trigger re-renders upon menu changes. The data loads asynchronously from a CSV file using d3.csv.

KKolezhannochka

ScatterPlot with Menu

An interactive scatterplot of the Iris dataset displays measurements of sepal width, sepal length, petal width, and petal length as points. Users select which measurements appear on the X and Y axes via two dropdown menus, with axis labels updating accordingly. Built with React and D3 v6, the visualization uses `d3.scaleLinear` for axes, `d3.extent` for domains, and renders SVG circles, lines, and text. Data is loaded from a CSV using `d3.csv`, and components for axes, marks, and dropdowns are modularized into separate React files.

PPadoSensei

7:28 Scatter Plot with menus

This visualization displays the classic Iris flower dataset as an interactive scatter plot, enabling exploration of relationships between sepal and petal measurements. Users can dynamically select which attribute appears on each axis via two dropdown menus. The plot uses D3 scales and axes, with points colored by species. Built with React and D3 v5, it renders as an SVG, loading the CSV data asynchronously and using React state to update the visualization upon selection changes.

Uumgi

scatterplot with menu

A scatterplot of the Iris flower dataset renders sepal and petal measurements as circles, with dropdown menus above the chart to select which numerical attribute appears on the x- and y-axes. The React app manages the selected attributes in state, and D3’s `scaleLinear`, `extent`, and `nice` compute the axes from the CSV data loaded via `d3.csv`. SVG circles and axis ticks are generated by React components, with hover tooltips supplied by SVG `<title>` elements.

Sseanowh

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris flower dataset, allowing users to dynamically select which measurements (sepal length, sepal width, petal length, petal width, or species) appear on the x- and y-axes via two dropdown menus. The React application uses D3 v5 functions like `scaleLinear`, `extent`, and `csv` to fetch and scale the data, rendering SVG circles for each flower with hover tooltips. Axis components are built from D3 scales, and state management in React handles attribute changes, re-computing scales and re-rendering the marks accordingly.

NNikhil Reddy Manda

scatterplot with menus

This interactive scatterplot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis via two dropdown menus. Built with React and D3 v7, the visualization uses `scaleLinear` and `extent` to compute scales, renders SVG circles for data points, and includes custom `AxisBottom` and `AxisLeft` components for tick marks and labels. The `useData` hook loads the CSV data with `d3.csv`, and the `Marks` component adds tooltip titles for each point.

BBlake McCarty

Scatter plot with menus

This interactive scatter plot explores the Iris dataset, plotting measurements like petal and sepal length and width as adjustable axes. Two dropdown menus let a user select which quantitative attribute drives the x- and y-axes, with axes labels updating accordingly. Built in React (v17) with d3.v7, it uses `scaleLinear`, `extent`, and reusable SVG axis and circle mark components. The axes and points render as SVG, formatted with a custom tick format that abbreviates large numbers.

AAlex Stulov

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