Interaktivt Visualisering

100%

Interaktivt Visualisering

✓ Published1🌍 Public

Last edited Apr 29, 2024

Created on Apr 29, 2024

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that reassign the x and y axes. Built with React and D3 v5, the visualization uses `scaleLinear` for axes and renders SVG circles as marks, with axis components generated from scale ticks. The CSV data is loaded asynchronously via `d3.csv`, and users can switch among four numerical attributes for each axis. A Poppins font and minimal styling give the chart a clean, modern appearance.

AI-generated description

Første øvelse i AI og Data kursusgang 7 [Iris data set] (https://gist.githubusercontent.com/curran/a08a1080b88344b0c8a7/raw/0e7a9b0a5d22642a06d3d5b9bcbad9890c8ee534/iris.csv)

MIT Licensed

Similar vizzes

Loading thumbnail…

Polished Interaktivt Visualisering

This interactive scatter plot visualizes the Iris dataset, allowing exploration of relationships between sepal and petal measurements. Users can select which attribute maps to the X and Y axes via dropdown menus, with the corresponding axis labels and scales updating dynamically. The visualization uses React for state management and rendering SVG circles, with D3’s `scaleLinear`, `extent`, and `format` APIs handling scaling, domain calculation, and tick formatting. Axis ticks and labels are generated with `AxisBottom` and `AxisLeft`, while hover tooltips display values formatted with the `siFormat` function.

Mmartin_tp@live.dk

94% match

Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the X and Y axes via dropdown menus. The visualization uses React with d3.scaleLinear for axes and d3.extent to compute domains, rendering circles as SVG marks with tooltips. Styling employs the Poppins font and custom tick colors, while data loading relies on d3.csv to parse the remote iris.csv file.

RRajat Dangat

92% match

Loading thumbnail…

Iris Scatter Plot v2

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis. The React-based interface uses dropdown menus to swap the x and y variables, while d3.scaleLinear and d3.extent handle the scales and domains. Data is loaded from a CSV file using d3.csv, and the SVG rendering uses custom React components for axes and circular marks.

JJohn Lewis

92% match

Loading thumbnail…

Interactive cl

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. Dropdown menus control which numerical attributes appear on the x and y axes, while a color legend indicates species via a categorical D3 scale. Built with React and D3 v5, the SVG visualization renders axes via custom components and data points as circles with tooltips. The chart uses D3's `scaleLinear` for positional encodings, `scaleOrdinal` for color, and `csv` for data loading.

EEugenio2192

92% match

Loading thumbnail…

Stylized Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus let viewers select which attributes map to the x and y axes, with the chart updating dynamically via React state management. The visualization uses d3.scaleLinear for axis scaling, d3.extent to compute domains, and d3.csv for data loading. React components render SVG circles as marks, with axes generated by custom AxisBottom and AxisLeft components that leverage d3's tick generation.

Rrstrauss127

92% match

Loading thumbnail…

Iris Scatter Plot v3

This interactive scatter plot visualizes the Iris dataset, plotting sepal and petal measurements against each other. Users can select different attributes for the x and y axes via dropdown menus, with each circular mark representing an individual flower. The visualization uses React components with D3 v7 scales (scaleLinear) and the extent function to compute domains, rendering SVG circles with hover tooltips. Data loads asynchronously from a CSV file using the d3.csv method.

JJohn Lewis

92% match

Loading thumbnail…

Scatter plot with colour

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across flower species. Two dropdown menus dynamically select which numeric attributes appear on the x and y axes, with the chart updating through React state management. The visualization uses d3.scaleLinear for both axes, d3.extent for domain calculation, and renders SVG circles through a reusable Bars component. Data loads asynchronously via d3.csv from a remote gist, with axis ticks styled through CSS classes and formatted using d3.format.

Jjackcaldwellnichols

92% match

Loading thumbnail…

Interactive Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization uses React for state management and d3.scaleLinear and d3.scaleOrdinal to map data to positions and colors. Two dropdown menus let users switch which measurements appear on the x and y axes, while hovering over the color legend or data points dims unrelated marks via opacity transitions. The SVG rendering includes custom axes and a metadata tooltip powered by SVG title elements.

RRikibens

91% match