Tutorial 2

100%

✓ Published2🌍 Public

Ssb15jr@student.aau.dk

Last edited May 5, 2024

Created on May 5, 2024

This interactive scatter plot visualizes the Iris dataset, letting users explore the relationships between sepal and petal measurements and species. Dropdown menus filter which attributes appear on the x- and y-axes. Built with React and D3.js v5, it uses `scaleLinear` for axes and CSV data fetched via `d3.csv`. Hovering over a point reveals its x-axis value via a tooltip. The visualization is rendered as an SVG, with axes and data marks created through custom React components.

AI-generated description

A program that shows the top 10 most populous countries as a bar chart.

Data: United Nations World Population Prospects 2019.

MIT Licensed

Similar vizzes

Loading thumbnail…

Tutorial 3

This interactive scatter plot visualizes the Iris dataset, displaying measurements like sepal and petal length and width. Users can switch the X and Y axes between these numeric attributes via dropdown menus. The plot uses React for the user interface and D3 scales and axes for rendering, with SVG circles for data points and tooltips. The Iris dataset is loaded from a CSV file via D3's `csv` function.

Ssb15jr@student.aau.dk

94% 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

90% match

Loading thumbnail…

Scatter Plot [interactive]

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Two dropdown menus let viewers select which attributes appear on the x and y axes, while a color legend enables filtering by species through mouse hover, which fades non-selected data points. The visualization is built with React and D3 v5, using SVG rendering for marks and axes. The data is loaded from a CSV file via d3.csv.

Aadewole-top

90% match

Loading thumbnail…

Scatter plot with menus

This interactive scatter plot displays the Iris dataset, allowing viewers to explore relationships between sepal and petal measurements by selecting which attribute appears on each axis through the dropdown menus. Built with React hooks and D3.js v5, the visualization uses `scaleLinear` to map data ranges to SVG coordinates and renders circles for individual specimens. The axis components dynamically update with `tickFormat` for readable labels, while hover tooltips reveal exact values. The code demonstrates a reusable pattern for building linked interactive visualizations from CSV data using `d3.csv` and React state management.

Ppatasky

90% match

Loading thumbnail…

Untitled

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus let viewers select which attribute appears on the x- and y-axes, updating the plot and axis labels accordingly. Data points are colored by species using a categorical scale. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG circles for marks. Axes and tick marks are drawn with custom React components.

HHsu0208

89% match

Loading thumbnail…

Interaktivt Visualisering

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.

Mmartin_tp@live.dk

89% match

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

89% match

Loading thumbnail…

Interactive Scatterplot

This interactive scatterplot visualizes the classic Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species. Two dropdown menus dynamically change which attribute is plotted on the x and y axes, while a color legend distinguishes species and supports hover filtering to fade unrelated points. Built with React and D3 v5, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors, and renders all marks as SVG circles with native tooltips.

LLawrence Liu

89% match