Polished Scatter Plot with Menus

100%

Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Nov 18, 2019

Created on Nov 18, 2019

Forked from Polished Scatter Plot with Menus

This interactive scatter plot lets users explore attributes from the inpatient rehabilitation utilization dataset by selecting which variable appears on each axis via dropdown menus. The visualization renders as an SVG using React components, with D3 v5 functions such as `scaleLinear` for axis scaling and `extent` for domain calculation. Axes are built from custom `AxisBottom` and `AxisLeft` components that generate tick lines and labels, while circular marks include tooltips showing formatted payment values. The layout separates menu controls from the chart area, and the styling uses the Poppins font with distinct tick and label colors.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot uses the classic Iris Dataset, rendered as an SVG in React, to explore relationships between four numeric measurements. Menus built with React-Dropdown let users dynamically select which attributes map to the x and y axes, while d3.scaleLinear and d3.extent compute the scales for each new selection. Axis components and data marks are custom React components that use D3 for tick generation, and a `<title>` element provides a tooltip. The chart deliberately sets `height` shorter than the container to reserve space for the dropdown controls.

Ee-ines

85% match

Loading thumbnail…

Polished scatter plot with menus

This interactive scatter plot displays the Iris Dataset, with dropdown menus to select which numeric attribute appears on the x and y axes. Built with React and D3 v5, it uses `scaleLinear` for axes, custom `AxisBottom` and `AxisLeft` components for ticks, and SVG circles for data marks with tooltips. Styling incorporates Poppins font and the React Dropdown library for interface controls.

Ppatasky

85% match

Loading thumbnail…

Polished Scatter Plot with Menus

This example presents an interactive scatter plot of the Iris Dataset, featuring dropdown menus that allow users to dynamically select which attributes to display on the x- and y-axes. The visualization uses React to manage state and render SVG elements, with D3.js (d3.v5) providing the scaling, axis generation, and data formatting utilities. Points are rendered as circles with tooltips, and the chart includes labeled axes and a clean, polished aesthetic. The data is loaded asynchronously from a CSV file using D3's `csv` function within a custom `useData` hook.

AAndrey Katamanov

84% match

Loading thumbnail…

Polished Scatter Plot with Menus!!

This interactive scatter plot displays the Iris dataset, with dropdown menus controlling which attribute is mapped to the x-axis and y-axis. Built with React and D3.js (v6), it uses `scaleLinear` for axes, SVG circles as marks, and native tooltips for data values. The visualization updates state through React hooks, while `AxisBottom` and `AxisLeft` components render tick marks and labels using D3 scales.

AAndre J Denais

84% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to compare any two numerical attributes via React dropdown menus that control the x- and y-axes. The visualization uses React state with the `useState` hook to manage selected attributes and dynamically updates the scales with d3’s `scaleLinear` and `extent`. Rendered as an SVG, the chart includes polished axes built with custom components, tick labels formatted with d3’s `format`, and circular marks that display native tooltips on hover. Data loading is handled asynchronously through d3’s `csv` function.

CChiuyc

84% match

Loading thumbnail…

Polished Scatter Plot with Menus

This example shows an interactive scatter plot of the Iris dataset, with dropdown menus allowing the user to select which attributes appear on the x and y axes. The visualization uses React for component management and state, while D3 v5 provides scales and the CSV data loading via `d3.csv`. Points are rendered as SVG circles with tooltips, and axis ticks are generated using `xScale.ticks()` and `yScale.ticks()`. The layout uses fixed dimensions and margins, with axis labels updating dynamically based on the selected attributes.

Wwenleicao

84% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot from the Iris Dataset lets users explore relationships between different measurements by selecting which features to plot on the X and Y axes via dropdown menus. Built with React and D3 v5, it renders circles as SVG marks with tooltips showing formatted values, using d3.scaleLinear for axes and d3.extent for domain calculation. The ReactDropdown component from react-dropdown manages the attribute selection, while custom AxisBottom, AxisLeft, and Marks components handle the grid and data points.

KKeerthiKandadai

84% match

Loading thumbnail…

Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two numerical attributes by selecting variables for the X and Y axes from dropdown menus. Built with React and D3.js, the visualization uses `scaleLinear` and `extent` to map data values to SVG coordinates, with custom axis components rendering ticks. The marks are SVG circles with tooltips that show formatted values using D3's `format`. Data is loaded asynchronously via D3's `csv` parser, and the interface updates dynamically when menu selections change.

Llynz09

84% match