Data Visualization Homework 1: Scatter Plots

100%

Data Visualization Homework 1: Scatter Plots

✓ Published9🌍 Public

Last edited Oct 19, 2023

Created on Sep 19, 2023

This interactive D3 visualization demonstrates the Iris flower dataset through a customizable scatter plot. Users dynamically select which measurements (sepal length, width, petal length, or petal width) to display on the x- and y-axes via dropdown menus. The plot renders circles colored by Iris species, with a categorical color legend and animated transitions when axes change. Built with D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `transition()` to smoothly animate the scatter points.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Homework 1: Scatter Plots

This interactive scatter plot, built with D3.js v5, 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 SVG-based rendering uses D3's linear scales and axes to map the data points, which are drawn as red, semi-transparent circles. The code leverages D3's selection, CSV parsing, and scale functions to handle data loading and coordinate mapping, while the HTML interface and CSS styling provide the interactive controls and visual theming.

LLSAWB

92% match

Loading thumbnail…

Fork of Data Visualization Homework 1: Scatter Plots

This interactive scatter plot displays the Iris dataset using D3 v5, with dropdown menus to select which measurement columns appear on the x and y axes. Points are colored by iris species, shown in a categorical color legend. The visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for colors, and animates each circle from the center to its position via `transition()`.

MMohammed

90% match

Loading thumbnail…

Data Visualization and Visual Analytics HW1

This interactive scatterplot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements. Two dropdown menus dynamically select which attribute appears on the X and Y axes, while points are color-coded by species. The visualization uses React for state management and dropdown controls, with D3 v5 scales and SVG rendering for the axes, ticks, and colored circles. The data loads from a CSV via d3.csv, and axis labels update based on the selected attributes.

YYU

90% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, showing measurements like sepal length and petal width while color-coding points by species. Users can select which attribute maps to the X and Y axes using dropdown menus. The visualization uses D3 v5 with SVG rendering and animated transitions, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `transition().duration()` to smoothly reposition circles when axes change.

Mminson

89% match

Loading thumbnail…

DATA VISUALIZATION HW1 v2

This interactive scatter plot of the classic Iris dataset lets users explore relationships between sepal and petal measurements. Built with React and D3.js (v5), it renders 150 points as SVGs, colored by iris species. Users can select any measurement combination for the X and Y axes via dropdown menus. Hovering over a species in the color legend highlights that group's points while dimming others, using D3's scaleOrdinal for color mapping and scaleLinear for axes.

Nnathanowen06

89% match

Loading thumbnail…

Data Visualization

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal dimensions by selecting different measurements for the X and Y axes via dropdown menus. The D3.js visualization uses `csv` to load data and `scaleLinear` with `extent` for axes, while circles animate their positions with `transition` when axes change. The scatterPlot module uses `selectAll` and `join` for rendering SVG circles and axes, with an interactive menu system built with `dispatch` for change events.

MMireia Parra

89% match

Loading thumbnail…

Data Visualization - Scatter Plots of Iris Dataset

This interactive scatter plot explores the classic Iris dataset, visualizing measurements of sepal and petal dimensions. The visualization displays individual data points colored by species, with dropdown menus allowing users to dynamically change which four attributes are plotted on the x and y axes. Hovering over any point enlarges it and displays its exact coordinate values in a tooltip. The implementation uses D3 v5 for rendering SVG axes, circles, and animations, while React handles the dropdown menu interactions. The chart updates smoothly, re-scaling axes and repositioning points whenever the selected attributes change.

JJuliachien

88% match

Loading thumbnail…

HW1 : Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal length and width for three species. Users select axes from dropdown menus and confirm their choices to update the visualization, which uses colored circles to distinguish Iris-setosa, Iris-versicolor, and Iris-virginica. Built with D3 v5, the code employs d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render axes and SVG circles, with data loaded from a local CSV file.

LLSAWB

88% match