Fork of C4gt demo

100%

Fork of C4gt demo

✓ Published0🌍 Public

Last edited May 22, 2024

Created on May 22, 2024

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting both the X and Y attributes from dropdown menus. Built with React, D3 v5, and the react-dropdown library, the visualization renders as an SVG with reusable AxisBottom, AxisLeft, and Marks components. D3’s scaleLinear and extent functions compute the scales, and the marks include native SVG `<title>` tooltips. Users switch attributes via React state updates, triggering a re-render of the axes and circles.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

C4gt

A polished scatter plot of the Iris Dataset, built with React and D3, allows interactive exploration of relationships between four numeric flower measurements. Users select the x- and y-axis attributes from dropdown menus, updating the visualization dynamically. SVG circles render the data points, with axis labels and tick formatting handled by custom React components using D3 scales and the `format` function. The visualization uses `d3.csv` to load the data and `scaleLinear` with `extent` for scaling.

Aarunkumarv1530@gmail.com

90% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot displays the classic Iris dataset, letting users explore the relationships between sepal and petal measurements. Four dropdown menus, built with React, allow for the dynamic selection of which attributes map to the x and y axes. The visualization uses D3.js version 5 functions like `d3.scaleLinear` and `d3.extent` to scale the data, which is rendered as colored SVG circles, with each Iris species assigned a distinct color. The chart includes axis labels, a title, and a legend to clarify the categories.

Rrohinikotha

89% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal dimensions by selecting different attributes for the x- and y-axes via dropdown menus. The visualization uses d3.scaleLinear for axis scaling, d3.select for DOM manipulation, and d3.axisBottom and d3.axisLeft for rendering axes with gridlines. Data points are rendered as SVG circles, colored by species class (setosa, versicolor, virginica) with opacity for overlap handling. The React framework manages the dropdown state, while D3 handles the chart rendering.

Rrohinikotha

89% match

Loading thumbnail…

Fork of Stylized Scatter Plot

A scatter plot of the Iris dataset, this interactive visualization lets users explore relationships between four numeric attributes (sepal and petal length/width) via dropdown menus. Built with React and D3 v5, the SVG chart displays all 150 flowers as teal circles, with axes generated by custom React components using d3.scaleLinear and d3.extent. The code demonstrates modular React components for marks, axes, and a reusable dropdown, with data fetched asynchronously via d3.csv.

Jjchen6912

89% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. The visualization uses dropdown menus to dynamically switch which attribute is mapped to the x-axis and y-axis, with axes and labels updating accordingly. Built with D3 v5 and React, the example uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render SVG circles colored by species, with gridlines and axis labels providing clear context for the selected variables.

JJyothicherukuri

89% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting axes from dropdown menus. The SVG visualization uses d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for gridlines, and color-codes data points by Iris species. The code leverages React through react-dropdown-browser for the menu interface while implementing custom dropdown logic with d3.select. Axis labels update dynamically, and additional text elements annotate the plot area.

Kkalyanikotha

88% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which measurement attributes are plotted on the x and y axes, with points colored by species. Built with D3.js v5 and rendered as SVG, the code uses `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` to construct the plot. The iris data is loaded via `d3.csv` from a linked gist.

Ssaivinay143

88% match

Loading thumbnail…

Fork of Fork of Scatter Plots

This interactive scatter plot from the Iris Dataset uses ReactDropdown to let users select which sepal or petal attributes to plot on each axis. The visualization renders circles colored by iris species using D3 v5 scales, axes, and SVG shapes. Dropdown menus position absolutely over the chart, while a reusable dropdown function updates selections and triggers re-renders, adjusting the axis scales, labels, and point positions accordingly.

Rrohinikotha

88% match