Fork of Polished Scatter Plot with Menus

100%

Fork of Polished Scatter Plot with Menus

✓ Published0🌍 Public

Last edited Oct 2, 2022

Created on Oct 2, 2022

Forked from Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris flower dataset, encoding each observation as a colored circle based on its species. Dropdown menus allow viewers to switch which flower measurements appear on the x- and y-axes. The React component uses `useState` to manage axis selections, while D3 v5 functions like `scaleLinear`, `scaleOrdinal`, and `extent` handle scaling and domains. Axes are drawn as SVG elements in separate `AxisBottom` and `AxisLeft` components, and `Marks` renders the circles with tooltips, all styled with a Poppins font.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements appear on the x- and y-axes using two dropdown menus built with `ReactDropdown`. The React component structure uses `useState` to manage axis selections and `d3.csv` to load data, while D3’s `scaleLinear`, `extent`, and `max` handle scaling. SVG circles represent individual flowers, with axis labels and ticks generated by custom `AxisBottom` and `AxisLeft` components, rendering the chart entirely in SVG.

NNick-Brice

96% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris dataset displays measurements like sepal length and petal width, letting users change which attribute appears on each axis via ReactDropdown menus. The visualization uses React for component structure and SVG for rendering, with d3.scaleLinear for axes and d3.csv for data loading. Circles represent individual flowers, and hovering reveals the numeric value through a native SVG title tooltip.

JJaya Durga V

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, plotting sepal and petal measurements against each other. Two dropdown menus let users select which flower attributes appear on the x and y axes, updating the scales and axes dynamically. Built with React and D3 v5, the visualization uses `scaleLinear` for both scales, renders data points as SVG circles via components like `AxisBottom`, `AxisLeft`, and `Marks`, and loads data asynchronously with `d3.csv`. Axis labels and tick formatting follow the selected attributes.

CChintan Sawla

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to dynamically select which flower measurements appear on the x and y axes via dropdown menus built with ReactDropdown. The React application uses D3’s `scaleLinear`, `extent`, and `csv` loading to position circles in an SVG, with separate reusable components for axes and marks. Each circle exposes a native SVG `<title>` tooltip showing its x-axis value, while D3’s `format` applies compact tick labels.

Hhenry c

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to dynamically select which flower measurements to display on the x- and y-axes via dropdown menus. Built with React and rendered as SVG, the chart plots species data points using `d3.scaleLinear` for scales and `d3.extent` for domains. The two dropdowns, implemented with `react-dropdown`, update the plot through React state, while `d3.csv` asynchronously loads the data. Axis components and marks are created using D3’s tick generation and SVG circle elements.

朱朱思嘉

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between four flower measurements by selecting any attribute for the x- and y-axes from two dropdown menus. The visualization uses React with hooks (useState, useCallback, useEffect) to manage state, and d3 v5 functions such as scaleLinear, extent, and csv for data loading and scaling. Points render as SVG circles with tooltips, while axes are built with custom React components. Data comes from a CSV file containing 150 iris flowers with sepal and petal dimensions.

Vvanquisher2000

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

An interactive scatter plot of the Iris Dataset explores relationships between four numeric flower measurements and species. Two dropdown menus, built with the React Dropdown library, allow users to select which attribute is plotted on the x-axis and y-axis. The visualization uses D3 scales and SVG circles for marks, with axes rendered as reusable React components. The data is loaded asynchronously via `d3.csv` and typed using a custom row conversion function.

Vvidhyanamini

95% match

Loading thumbnail…

Fork of Polished Scatter Plot with Menus

This example visualizes the Iris Dataset as an interactive scatter plot, allowing users to dynamically select which floral measurements appear on the x- and y-axes via React Dropdown menus. The species of each iris is distinguished by color using a d3.scaleOrdinal with a categorical range. Built with React and D3 v5, the visualization renders circles as SVG marks, with axes generated by custom components that use d3.scaleLinear for positioning and d3.format for tick labels. The data is loaded asynchronously from a CSV URL using d3.csv.

SSam

95% match