12. Scatterplot with Species

Scatter Plot Including Species

This interactive scatter plot displays the Iris dataset, with petal and sepal measurements plotted on each axis. Users can switch between quantitative attributes and the categorical species column via two dropdown menus, which update the visualization through D3 transitions. The chart uses D3 scales, axes, and SVG circles with a 1000ms transition for smooth updates, while the menu system leverages a custom dispatch-based event handler.

Rroyable88

Learn Scatter plot including species

This interactive scatter plot visualizes the Iris dataset, displaying petal and sepal measurements with selectable X and Y axes. The menu allows switching between quantitative attributes and categorical species, with d3.scaleLinear or d3.scalePoint adapting the axes accordingly. Built with React and d3, the visualization uses SVG circles, transitions, and d3.axisLeft and d3.axisBottom to animate updates over 1000 milliseconds, with menu interactions handled through custom d3.dispatch events.

Ccoderhh

Iris Species Scatter Plot

This interactive scatter plot visualizes the classic Iris flower dataset, showing relationships between quantitative measurements such as sepal and petal dimensions, with points colored by species. Users dynamically select which measurement appears on each axis through drop-down menus, with categorical species values supported via scalePoint. The visualization uses D3.js (v7) with d3.csv for data loading, d3.scaleLinear and d3.scaleOrdinal for scales, and d3.axisLeft/axisBottom for axes. Circles enter with a size animation via d3.transition, and the SVG rendering updates smoothly with delayed transitions on axis changes.

Ddanheavern

Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions colored by flower species. Users can select which attributes to display on the x- and y-axes using dropdown menus, with hover interactions fading non-selected species. Built with React and D3 v5, it renders SVG circles using `scaleLinear` and `scaleOrdinal` for positioning and color encoding. The visualization includes custom axis components, a color legend, and tooltips, with data loaded via D3's `csv` parser and formatted using `d3.format`.

TThe-World-Muda

Scatter Plot (animated, menu including species)

This interactive scatter plot displays the classic Iris flower dataset, allowing users to explore relationships between measurements of sepal and petal dimensions. Two dropdown menus, built with a custom reusable `menu` component, let viewers dynamically select which quantitative or categorical column corresponds to the X and Y axes. The visualization uses D3.js v7, with `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` for axes. SVG circle elements transition smoothly to new positions over one-second intervals when the selected dimensions change, creating an animated exploration of the data.

PPeiyang Li

Dynamic Scatter Plot including Species

This interactive visualization displays the Iris flower dataset as a dynamic scatter plot, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus let viewers select which quantitative or categorical attributes to plot on the X and Y axes, with smooth animated transitions updating the points and axes. The visualization uses D3.js scales, axes, and transitions within a custom React-based scatterPlot component, while the menu system leverages D3’s dispatch for event handling. Data is loaded asynchronously via d3.csv from a remote gist.

SSubhamChhetri

Scatter Plot with Colour

This interactive scatter plot explores the classic Iris flower dataset, letting users compare numeric attributes by choosing which measurements appear on the x- and y-axes via two dropdown menus. Each point represents a flower specimen, colored by species using a d3.scaleOrdinal with a categorical palette, and tooltips reveal exact petal or sepal values. The React-based visualization uses d3.scaleLinear for both axes, renders circles as SVG elements, and reads the CSV data with d3.csv, with brushing and zooming absent from this implementation.

KKevin McMorrow

Scatter Plot with Color

This interactive scatter plot displays the Iris dataset, with dropdown menus enabling users to select which flower measurements appear on the x- and y-axes. Each point is colored by species using a D3 ordinal scale, and hovering reveals the sepal length via SVG circle titles. Built with React hooks for state management, the visualization uses D3 scales and the `csv` loader to parse data, while custom React components render the axes and marks.

MMario Ibarra