Homework 1: Scatter Plots

100%

Homework 1: Scatter Plots

✓ Published0🌍 Public

Last edited Sep 21, 2023

Created on Sep 20, 2023

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.

AI-generated description

This scatter plot shows data about cars, from UCI Machine Learning Repository: Auto MPG Data Set.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization Homework 1: Scatter Plots

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.

Dderrick373519@gmail.com

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

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

87% match

Loading thumbnail…

310551076_HW1_Scatter Plots (Interactive Legend)

This interactive scatter plot displays the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three flower species. Dropdown menus select which features appear on the x- and y-axes, and hovering over any point highlights all points of the same species while dimming others. The visualization uses D3 v7 with `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, and updates the SVG via a `render()` function. CSV data is loaded with `d3.csv`, and species colors are mapped explicitly in the code.

陳陳泰元

87% match

Loading thumbnail…

310551076_HW1_Scatter Plots

This interactive scatter plot visualizes the Iris dataset, showing how three flower species cluster across selected measurement pairs. Two dropdown menus allow users to independently choose which of the four features (sepal length, sepal width, petal length, petal width) appear on the x- and y-axes. The code uses D3.js v7 with SVG rendering, employing `scaleLinear`, `axisBottom`, and `axisLeft` to build the axes and gridlines. Circles are colored by species using a hardcoded color map, and the chart updates dynamically through the `render` function.

陳陳泰元

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

86% match

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the Iris dataset, allowing users to compare sepal and petal measurements through dropdown menus that select the x- and y-axis variables. Each point represents one flower, colored by its species class, with a legend identifying the three categories. Built with D3 v5, the visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for gridlines, and updates circles and labels dynamically via a render function. SVG rendering handles all graphical elements, while the dropdowns are created through a custom function that binds options to data.

TThe-World-Muda

86% match

Loading thumbnail…

homework1-IRIS Scatter Plots

This interactive scatter plot lets users explore the classic Iris dataset by selecting any two numeric attributes for the x- and y-axes via dropdown menus. Each flower species is color-coded using `d3.scaleOrdinal` with `schemeCategory10`, and an animated transition (`transition().duration(2000).delay(...)`) moves circles from the center to their data positions. The visualization is rendered as SVG, with axes drawn using `d3.axisBottom` and `d3.axisLeft`, and includes a legend showing species names.

Yyuting89830@gmail.com

86% match