Skip to main content
SimilarExport ZIP
100%

Assignment 6 - Q3

✓ Published0🌍 Public
AAKSHAY
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from Assignment 6 - Q2

This visualization of the Iris dataset presents two complementary charts: a multi-series line chart tracks sepal length, sepal width, and petal length across all 150 samples, while a combined bar and line chart displays species counts alongside average petal width. The code uses D3.js v7 with SVG rendering, employing `d3.csv` to load data, `d3.line` for the line paths, and `d3.rollups` to aggregate species statistics. Hover effects on bars and custom color schemes enhance interactivity.

AI-generated description

Iris Dataset Visualizations

This project contains two D3.js visualizations of the famous Iris dataset:

  1. Multi-Series Line Chart: Displays sepal length, sepal width, and petal length measurements across all 150 samples
  2. Combined Bar + Line Chart: Shows species count as bars and average petal width as a line

Features

  • Responsive design with clean styling
  • Interactive elements with hover effects
  • Custom color schemes
  • Clear axis labels and legends
  • Responsive visualizations

Technologies Used

  • D3.js v7
  • HTML5
  • CSS3

Data Source

The Iris dataset is loaded from: https://raw.githubusercontent.com/uiuc-cse/data-fa14/gh-pages/data/iris.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 6 - Q2

This scatter plot visualizes the Iris dataset, showing the relationship between sepal length and petal length for 150 flower samples. Each point is colored by species (setosa, versicolor, virginica) using d3.scaleOrdinal, with hover effects that enlarge points via mouseover events. The chart loads data from a CSV hosted on jsDelivr using d3.csv, renders axes with d3.axisBottom and d3.axisLeft, and includes an SVG legend. An accompanying d3.scaleLinear maps data values to pixel coordinates within an 800×600 SVG canvas.

AAKSHAY
90% match
Loading thumbnail…

Assignment 2 3q

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width, with each point colored by species (setosa, versicolor, virginica). The visualization uses D3 v6's `csv`, `scaleLinear`, and `axisLeft`/`axisBottom` functions to load data, map coordinates, and render axes within an SVG. While the plot primarily encodes petal measurements, the code also maps sepal length and width to the circle's `rx` and `ry` attributes, though these are overridden by the constant `r` attribute, so the points appear as uniform circles. The title and axis labels are styled with CSS and rendered in a red, serif font.

HHarshiiiiiiiip
84% match
Loading thumbnail…

Task 9&10 Q2

This visualization displays the Iris dataset, showing the sepal and petal measurements for each of the three iris species. Four overlapping area charts are rendered as SVG paths, each filled with a different color to represent the sepal length, sepal width, petal length, and petal width. The visualization uses d3.area to construct the paths, with xScale and yScale from d3.scaleBand and d3.scaleLinear respectively. The data is loaded from a remote CSV file via d3.csv. A legend and axis labels are included for clarity.

Nnsairitwikreddy@gmail.com
84% match
Loading thumbnail…

Assignment-6_Activity-3

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and petal width on the y-axis. Points are colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica), with a fixed radius of 5 pixels. The visualization uses D3 v6 APIs including `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom`. Data is loaded from a remote CSV URL containing sepal and petal measurements, and rendered as SVG circles. Axis labels are added using SVG text elements. The code also retrieves sepal length and width values for each datum but does not use them for positioning. The chart is sized to the full browser window.

Rreachtoshasidhar07@gmail.com
84% match
Loading thumbnail…

activity 6 tutorial3

This chart displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with each species assigned a distinct color. The visualization uses D3.v6, loading data via `d3.csv` and rendering marks as SVG circles. It employs `d3.scaleLinear` for axes, `d3.extent` for domain calculation, and `d3.axisBottom` and `d3.axisLeft` for tick marks. Although sepal length and width are parsed, only petal dimensions are plotted, with species color encoded through a switch statement.

Ttsumanth619@gmail.com
84% match
Loading thumbnail…

Activity-6 Q4

This bubble chart visualizes the Iris dataset, showing sepal length on the x-axis, sepal width on the y-axis, and petal length controlling bubble size, with colors distinguishing the three species. Built with D3.js v7, it uses `d3.csv` to load data, `scaleLinear` for axes and sizing, and SVG circles for rendering. Interactive tooltips appear on mouseover, displaying the species and all four flower measurements, while hovering increases bubble opacity and stroke width.

Hharshaps15@gmail.com
84% match
Loading thumbnail…

Activity6_Task3.2

This visualization displays the Iris dataset as a scatter plot, mapping sepal length on the x-axis and petal length on the y-axis, with species encoded through different symbol shapes and a legend. The code uses d3.scaleLinear, d3.scaleOrdinal, and d3.symbol to position points and assign shapes, while d3.axisBottom and d3.axisLeft render the axes. Data loads asynchronously from a CSV URL and is parsed with d3.csvParse, converting numeric fields before rendering the chart with custom axes and legend modules.

Vvenkatamanikantavaddi@my.unt.edu
84% match
Loading thumbnail…

Activity6_Task3

This example displays the Iris dataset as a scatter plot, visualizing petal length against petal width for individual flowers, with species indicated by color (skyblue for setosa, lightgreen for versicolor, and orange for virginica). Additional sepal dimensions are stored in each circle’s `rx` and `ry` attributes, though the fixed radius of 5 overrides their visual effect. The visualization uses D3 v6 to load CSV data via `d3.csv`, scales through `scaleLinear` and `extent`, and renders SVG circles with axes generated by `axisLeft` and `axisBottom`. The plot fills the browser window, with labeled axes for petal length and sepal length.

Aakhilasannayila@gmail.com
83% match