Scatter Plot using d3

100%

Scatter Plot using d3

✓ Published0🌍 Public

Last edited Mar 5, 2022

Created on Mar 5, 2022

This interactive scatter plot visualizes the Iris dataset, allowing users to compare any two flower attributes via dropdown menus. The vanilla HTML version displays petal length against sepal length, using d3.csv to load data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to map values and render SVG axes. The React implementation adds selectable attributes with ReactDropdown and organizes charts into reusable components like AxisBottom and Marks, both rendering dynamic SVG circles.

AI-generated description

A vanilla HTML implementation of a D3 scatter plot. Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plots using d3

This interactive scatter plot visualizes the Iris dataset, allowing users to compare sepal and petal measurements across three iris species. Two dropdown menus let viewers select which attributes to plot on the X and Y axes, with points colored by species class. The visualization uses d3.scaleLinear for axis scaling, d3.axisBottom and d3.axisLeft for grid lines, and React dropdown components for menu selection. Data is loaded via d3.csv and rendered as SVG circles with CSS opacity and color coding.

Vvidhyanamini

95% match

Loading thumbnail…

Scatterplot in react d3

This interactive scatterplot displays the Iris dataset, plotting sepal width against a user-selected attribute (petal width, sepal length, etc.) via a dropdown menu. Each flower is rendered as a circle, colored by species using a d3.scaleOrdinal. Built with React and D3 v6, the visualization loads CSV data from a GitHub gist, applies linear scales using d3.scaleLinear, and renders SVG circles for marks. The dropdown updates a React state hook, which dynamically adjusts the x-scale domain and re-renders the chart.

AAnimesh Nautiyal

93% match

Loading thumbnail…

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

92% match

Loading thumbnail…

Scatter Plot with Colors

A scatter plot of the Iris Dataset with interactive dropdown menus for selecting which flower attributes to plot on the X and Y axes. The visualization uses D3's linear scales for axis mapping, with React rendering the SVG circles and axes. Users can compare sepal and petal measurements across species, with tooltips showing exact values on hover. The chart includes labeled axes and a clean, minimalist design with Poppins typography.

Aafcchilders

92% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between four numeric flower measurements by selecting which attribute appears on each axis via dropdown menus. Built with React and D3 v5, the visualization renders SVG circles positioned using linear scales, with labeled axes and tick marks generated by custom React components. The data loads asynchronously from a GitHub gist using D3's `csv` parsing function, and the interactive dropdowns update the chart's state to reflect new attribute selections.

XXiaoyu Su

92% match

Loading thumbnail…

scatter plot iris-react

This interactive scatter plot visualizes the Iris flower dataset, showing the relationship between two selectable floral measurements (sepal/petal length and width) across three Iris species. The chart uses d3.scaleLinear and axis components to render axes and grid lines in SVG format. React manages the component structure, while jQuery handles dropdown selections for switching variables. The visualization reads data from a local iris.csv file, with each point representing an individual flower sample, though the variable selection and dynamic updating remain partially implemented.

Ppei9223

91% match

Loading thumbnail…

Scatter Plots

This interactive scatter plot visualizes the Iris flower dataset, showing measurements of sepal and petal length for three iris species. Users can change which attributes are plotted on the x and y axes using dropdown menus, with axes and labels updating dynamically. The visualization uses D3 v5 for data binding and SVG rendering, with React dropdowns for interactivity, and colors each species distinctly with a legend showing class names.

Vvidhyanamini

91% match

Loading thumbnail…

Scatterplot with color

This interactive scatterplot visualizes the Iris dataset, letting users explore relationships between sepal and petal measurements across three flower species. Each point is colored by species using d3.scaleOrdinal, with dropdown menus powered by ReactDropdown to switch which quantitative attributes appear on the x and y axes. The chart renders as SVG with React components, using d3.scaleLinear for axes and d3.extent to compute domains dynamically. Data loads asynchronously via d3.csv, and the interface includes labeled axes and hover tooltips showing species names.

Ssurikmeetr

91% match