HW1 : Scatter Plot

100%

HW1 : Scatter Plot

✓ Published0🌍 Public

Last edited Oct 6, 2023

Created on Sep 21, 2023

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.

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…

hw1_scatter_plot

This scatter plot visualizes the Iris flower dataset, showing the relationship between two selected features (sepal length, sepal width, petal length, or petal width) chosen via dropdown menus. Points are colored by species (Iris-setosa, Iris-versicolor, Iris-virginica) using CSS classes. The visualization is rendered with D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with data loaded from a CSV file and interactive legends displayed on the side.

Cchingching17

93% match

Loading thumbnail…

original version of hw1_scatter_plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements such as sepal and petal length and width. Users can select which attributes to plot on the x and y axes via dropdown menus. Each of the three Iris species is represented by a distinct colored circle, with a legend on the right identifying the categories. Built with D3.js v5, the visualization uses `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` to render ticks, loading data from an external CSV file.

Cchingching17

93% match

Loading thumbnail…

HW1-iris.csv

This interactive scatterplot visualizes the Iris dataset, displaying sepal and petal measurements for three Iris species. Users can dynamically select which measurement appears on the x-axis and y-axis via dropdown menus, with each update re-rendering the plot. The visualization uses d3.scaleLinear for axes and d3.scaleOrdinal to map species to distinct colors. Rendered as SVG using d3.select, d3.csv loads the data from a GitHub-hosted CSV file, while d3.axisBottom and d3.axisLeft generate the labeled axes with gridlines.

CChristian Magelssen

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

陳陳泰元

91% match

Loading thumbnail…

HW1_Scatter Plot

This interactive scatter plot explores the classic Iris dataset, displaying measurements such as petal length and sepal width as colored circles representing species. Users can switch the X and Y axes via dropdown menus to compare any pair of attributes, while hovering over the color legend highlights points from a selected species and fades the rest. The visualization is built with React and D3 v5, rendering SVG marks and axes using components like `AxisBottom`, `AxisLeft`, and `Marks`, with scales from `d3.scaleLinear` and `d3.scaleOrdinal`. Data is loaded asynchronously via D3’s `csv` function.

JJames Huang

91% match

Loading thumbnail…

hw1_scatter_plot

This scatter plot displays the classic Iris dataset, showing relationships between four flower measurements (sepal length/width and petal length/width) for three Iris species. Users can dynamically select which measurements appear on the x- and y-axes through dropdown menus, triggering a re-render of the visualization. The plot uses D3 v5 with `scaleLinear`, `axisBottom`, and `axisLeft` to generate axes with gridlines, while colored circles represent the three species—Iris-setosa, Iris-versicolor, and Iris-virginica—with a corresponding legend. Data is loaded from a CSV file using D3’s `csv` method.

Cchingching17

91% match

Loading thumbnail…

HW1_311553050

This interactive scatter plot visualizes the Iris dataset, displaying the relationship between two user-selected flower measurements (sepal length, sepal width, petal length, petal width) on the x- and y-axes. Points are color-coded by iris class using `d3.scaleOrdinal` with `d3.schemeCategory10`, and a color legend is rendered as an SVG group. Two dropdown menus allow the viewer to change the axes. The plot uses `d3.axisBottom` and `d3.axisLeft` with grid lines, and updates dynamically via D3's data join pattern.

YYunLing

91% match

Loading thumbnail…

HW1_test

This interactive scatter plot visualizes the classic Iris dataset, displaying measurements of sepal and petal dimensions for three flower species. Users can explore relationships between any two numerical attributes using dropdown menus to select variables for the x and y axes. The visualization uses React components with D3 v5 scales and SVG rendering, implementing custom AxisBottom and AxisLeft components along with colored circles to distinguish Iris-setosa, Iris-versicolor, and Iris-virginica specimens.

Ping-Yu Yang

91% match