100%

Acitivty6_Question2

✓ Published0🌍 Public

Last edited Apr 15, 2024

Created on Apr 15, 2024

This scatter plot of the Iris flower dataset compares petal length and petal width, representing each species with a distinct color and a legend for identification. Rendered as SVG circles, hovering over a point displays a tooltip with the species and the exact measurements. The visualization uses D3.js v7 to load data from a local CSV file, position the points via `d3.scaleLinear` and `d3.extent`, and add axes with `d3.axisBottom` and `d3.axisLeft`. An ordinal color scale via `d3.scaleOrdinal` maps species to colors, while D3's `transition` API animates the tooltip's opacity.

AI-generated description

Iris Flower Measurements Visualization

Overview

This project visualizes the famous Iris flower dataset. It provides a scatter plot using D3.js to compare petal length to petal width, with data points color-coded by species. This visualization can help in understanding the relationship between these two features and how they differ among Iris species.

Files

index.html: The HTML file containing the D3.js script for rendering the scatter plot.
data2.csv: The dataset file with iris flower measurements, including sepal length, sepal width, petal length, petal width, and species.

Usage

To view the visualization, simply open the index.html file in a web browser. Make sure that data2.csv is located in the same directory as the index.html file.

Visualization Details

X-axis: Petal Width
Y-axis: Petal Length
Color Coding: Each species is represented by a different color.

Hovering over any point on the scatter plot will display a tooltip with the species name and the corresponding petal length and width.

Technologies Used

HTML
CSS
JavaScript
D3.js (v7)

Setup

Ensure you have a modern web browser installed. Clone the repository, navigate to the directory containing index.html, and open it in your browser to view the scatter plot.

Contribution

Contributions to improve the visualization or expand the dataset are welcome. Please feel free to fork the repository and submit a pull request.

License

This project is open source and available under the MIT License.

Contact

If you have any questions or would like to contact the maintainers, please open an issue on this repository.

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 3.1

This interactive scatter plot visualizes the Iris flower dataset, showing the relationship between petal length and petal width across three Iris species. The visualization uses D3.js (v7) to render SVG circles colored by species, with axes labeled in centimeters and a legend identifying each species. Hovering over a data point enlarges the circle and displays a tooltip with the exact measurements and species name. The code loads CSV data from a GitHub gist and uses d3.scaleLinear for positioning, d3.scaleOrdinal for color mapping, and d3.axisBottom/d3.axisLeft for the coordinate axes.

SSrihith Reddy Gaddam

89% match

Loading thumbnail…

Activity 6 Task 3

This scatter plot visualizes the Iris dataset, displaying petal length against petal width for three flower species. Each circle is color-coded by species using a d3.scaleOrdinal, with axis labels indicating measurements in centimeters. The visualization leverages d3.csv for data loading, d3.axisBottom and d3.axisLeft for axes, and interactive mouseover events that enlarge points and reveal a tooltip with species details. A legend identifies the color mapping for Iris-setosa, Iris-versicolor, and Iris-virginica.

SSuneelKalva@my.unt.edu

89% match

Loading thumbnail…

Activity6_Task 3.1

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, or virginica) using a custom marker function. The visualization, rendered as an SVG using D3 v6, loads data from a remote CSV file via `d3.csv`, scales axes with `scaleLinear` and `extent`, and draws circles with attributes mapped from sepal measurements. Axis labels are added via `axisLeft` and `axisBottom`, and text elements are rotated to label the y-axis.

Ssaisnehapalle@my.unt.edu

89% match

Loading thumbnail…

Activity_6_task_3

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower specimen, with points colored by species (setosa, versicolor, or virginica). The visualization uses D3 v6 to load the CSV data, scales the coordinates, calculates the extent of the data, and renders circles in an SVG. It leverages D3's `scaleLinear`, `axisLeft`, `axisBottom`, and an interactive `join` operation to bind data to the circles, with a custom marker function assigning fill colors based on species.

Aazeemrm630@gmail.com

89% match

Loading thumbnail…

Activity6_Q3

This scatter plot visualizes the Iris flower dataset, mapping petal length and width for individual data points on a two-dimensional grid. Each circle is colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica) using D3 v6’s `csv` loader and `scaleLinear` scales. The SVG rendering uses `axisLeft` and `axisBottom` for axes, with custom label text for petal length and sepal length. The code imports D3 from UNPKG and demonstrates local ES6 module usage through the `main` async function.

Ggreeshmareddy135@gmail.com

89% match

Loading thumbnail…

question3_act6

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with circle colors representing the three species (setosa, versicolor, and virginica). The visualization uses D3 v6 to load CSV data from a remote URL, scale the values to the screen dimensions, and render SVG circles with fixed radius. The code also stores but does not visually use sepal measurements as additional data attributes on each circle. Axes are drawn using D3’s `axisLeft` and `axisBottom`, with custom axis labels for petal length and sepal length.

Bbhavyamoturi2509@gmail.com

89% match

Loading thumbnail…

ACTiVity6_task3.1

This scatter plot visualizes the Iris dataset, displaying petal length against petal width while coloring each point by species (setosa, versicolor, or virginica). The visualization uses D3.js v6 with SVG rendering, employing `scaleLinear` for both axes and `axisLeft`/`axisBottom` for tick marks. Circle elements are positioned using the `x` and `y` scales, with species-based fill colors. The data loads from a remote CSV file via `d3.csv`, and the chart fills the entire browser window with custom margins and rotated axis labels.

Kkbhavithareddy06@gmail.com

89% match

Loading thumbnail…

ACTIVITY_6_3(1)

This visualization shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis, with each point colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). It uses d3.csv to load the data and d3.scaleLinear, d3.extent, and the axis functions d3.axisLeft and d3.axisBottom to render the plot as SVG circles. The code also includes labels for petal length and sepal length, though the latter describes the x-axis incorrectly.

Ssanavenkatasurendrareddy@gmail.com

88% match