Skip to main content
SimilarExport ZIP
100%

Activity 8

✓ Published0🌍 Public
SSreeKohaliPatel@my.unt.edu
Last edited Apr 25, 2024
Created on Apr 25, 2024

This gallery example demonstrates a reusable scatter plot visualization of the Iris dataset, rendered as an SVG using the D3 library (v6.7.0). The plot maps petal length on the x-axis and sepal length on the y-axis, with data points colored by species (skyblue for setosa, lightgreen for versicolor, and orange for virginica). The visualization includes a legend and axis labels, and is built using custom JavaScript functions that leverage D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. Data is loaded asynchronously from a remote CSV file using D3’s `csv` method.

AI-generated description

A demonstration of reusable scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower sample while coloring points by species. The SVG rendering uses D3.js v6, loading data via CSV from a GitHub repository. The code employs `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `csv` for data parsing. Circles are positioned with `cx` and `cy` attributes, with species-specific colors assigned through a switch function.

VVarshareddy2912
90% match
Loading thumbnail…

Activity 7

This animated scatter plot, styled as a reusable D3.js component, visualizes the Iris dataset, cycling through different feature pairs on the x-axis (petal width, sepal width, petal length, sepal length) while plotting sepal length on the y-axis. It shows the distribution of three iris species—setosa, versicolor, and virginica—with color-coded circles. The visualization initially renders circles using SVG attributes, then repeatedly invokes the `scatterPlot` function with `d3.scaleLinear` axes and updates at fixed intervals via `setInterval`. It loads CSV data asynchronously with `d3.csv` and includes an SVG-based legend and text labels.

Aanjalimadhavi98@gmail.com
90% match
Loading thumbnail…

Activity8-Task3

This scatterplot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each iris flower represented as a colored circle. Points are colored by species—setosa in sky blue, versicolor in light green, and virginica in orange—using D3 v6’s `selectAll`, `data`, and `join` methods. The SVG rendering applies linear scales via `scaleLinear` and `extent`, while `axisLeft` and `axisBottom` generate labeled axes. Data is loaded asynchronously from a remote CSV using `d3.csv`, with sepal measurements also parsed but not displayed in the plot.

Ssirichandana017@gmail.com
90% match
Loading thumbnail…

Activity 7 Scatter Plot

This example displays a scatter plot of the Iris dataset, mapping petal length and width to the x and y axes while coloring each point by species (setosa, versicolor, or virginica) using skyblue, lightgreen, and orange. The visualization also encodes sepal length and width as the rx and ry attributes of each circle, though these do not affect the rendered shape since the radius is fixed. It loads CSV data from a GitHub URL using `d3.csv`, applies linear scales via `scaleLinear`, and renders axes with `axisLeft` and `axisBottom`. The code uses D3 v6 through a UNPKG script import with SVG rendering.

Aanith462@gmail.com
90% match
Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, displaying petal length on the x-axis and petal width on the y-axis, with each point colored by species (setosa, versicolor, or virginica) using distinct fills. The SVG chart is built with D3 v6, loading data via the `csv` function from a remote GitHub URL, and using `scaleLinear` for axes, `extent` for domains, and `axisLeft`/`axisBottom` to render ticks. It also applies custom margins, a title, and axis labels with rotation to present the relationships between the flower measurements.

BBhavyaMammai
90% match
Loading thumbnail…

Activity 7

This interactive scatter plot, built with D3.js, visualizes the Iris dataset, showing the relationship between different flower measurements. The plot animates through four axis configurations, cycling petal and sepal dimensions on the x-axis while keeping sepal length on the y-axis. A legend distinctively colors points by species—setosa, versicolor, and virginica—using light blue, light green, and orange. The visualization dynamically redraws axes and labels using `scaleLinear` and `axisBottom`, with data loaded via `d3.csv`, demonstrating a reusable `scatterPlot` module.

Vvaishnavi6gan@gmail.com
90% match
Loading thumbnail…

Activity6-Task3

This scatter plot visualizes the Iris dataset by mapping petal length and petal width for each sample, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). The visualization uses D3 v6 APIs including `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG circles and axes. Additional sepal length and width values are encoded but not directly displayed. The data is loaded from a GitHub gist and rendered across the full browser window with rotated axis labels for petal length.

Ssriyaalugupalli@my.unt.edu
90% match
Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length across three flower species distinguished by color. Built with D3.js, the visualization uses SVG circles and a reusable scatterPlot function that cycles through different column combinations on the x-axis every few seconds via setInterval. The code employs d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.axisBottom/axisLeft for tick marks, while custom labels, a color legend, and a title are appended directly to the SVG.

MmNamratha25
90% match