Skip to main content
SimilarExport ZIP
100%

Task8_Activity2

✓ Published0🌍 Public
Iikshwakalluri
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Hello VizHub

This example visualizes the distribution of petal lengths across three Iris species using a stacked bar chart with tooltips. The code loads data from a local CSV file and renders the chart as SVG using D3 v7. It employs `d3.stack()` to create stacked segments, `d3.scaleBand()` for the categorical species axis, and `d3.scaleLinear()` for the continuous petal length axis. Interactive mouseover events display tooltips showing the exact petal length for each species and segment.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity_6_Task_2_Q2

This visualization uses a stacked bar chart to show petal lengths for different Iris flower species. The code renders horizontal bars for sepal width, petal length, and petal width, with color-coded segments for each species. It employs D3.js v7 with d3.stack for data transformation, d3.scaleBand for the y-axis, and d3.axisBottom for the x-axis. Interactive tooltips display petal length values on mouseover, using d3.select and event handlers. The data comes from the Iris flower dataset, with SVG rendering.

PPradhyumna Poralla
90% match
Loading thumbnail…

Task2_Activity6

This stacked bar chart visualizes the distribution of four flower measurements—sepal length, sepal width, petal length, and petal width—across the three Iris species. Each horizontal bar represents a species, with segments proportional to the percentage of each measurement type. Hovering over a segment reveals the exact percentage via a D3 tooltip. The chart uses `d3.csv` to load the Iris dataset, `d3.stack` for stacking, and `d3.scaleBand` for the y-axis, with data rendered as SVG rectangles.

Ssanjanadadi19@gmail.com
90% match
Loading thumbnail…

Activity 6 task 2

This visualization shows the petal length distribution for three flower species (setosa, versicolor, and virginica) using a stacked bar chart. The horizontal bars display combined petal length values for each species. Built with D3.js v7, it uses `d3.stack()`, `d3.scaleLinear()`, `d3.scaleBand()`, and `d3.axisBottom()` to render SVG, with color encoding via `d3.scaleOrdinal()`. Interactive mouseover tooltips display exact petal lengths. The data originates from the iris dataset CSV file.

RRishabh Sharma
89% match
Loading thumbnail…

Activity6-Task2

This visualization displays the Iris flower dataset as a stacked horizontal bar chart, showing the contribution of four measurements (sepal length, sepal width, petal length, and petal width) for each of the three iris species. The chart uses a diverging color scale to distinguish the measurements and includes interactive tooltips that reveal the precise value of a measurement when hovering over a segment. The code loads D3 v7 via UNPKG and uses the `d3.stack()`, `d3.scaleLinear()`, `d3.scaleBand()`, and `d3.scaleOrdinal()` APIs to process and position the data, while rendering the final output as SVG.

Ss.harshinisai01@gmail.com
89% match
Loading thumbnail…

Activity6_Task 2.1

This stacked bar chart displays the percentage distribution of four iris flower measurements—sepal length, sepal width, petal length, and petal width—across the three iris species in the classic iris dataset. The visualization uses D3 v7 to load and parse the CSV data, then renders the stacked bars in SVG using d3.stack() and d3.scaleBand() for the categorical species axis. A d3.scaleLinear() maps the percentage values, and mouseover interactions trigger tooltips showing exact percentages via d3.format().

DDeekshitha Annreddy
89% match
Loading thumbnail…

Activity-8_Question-2

This example visualizes the Iris dataset as a stacked bar chart, showing the relative contributions of sepal length, sepal width, petal length, and petal width for each of the three species. It uses d3.csv to load the data and d3.stack to transform the four numeric columns into stacked series. The chart renders as SVG with d3.scaleBand and d3.scaleLinear axes, and includes an interactive hover effect that increases bar opacity. A color-coded legend identifies each measurement category.

Hharipadmavathim2023@gmail.com
87% match
Loading thumbnail…

Activity - 6_Task-3.1

This interactive scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three iris species. The visualization uses D3.js v7 to load CSV data from a GitHub source, then maps the measurements to SVG circles, with each species assigned a distinct color. Hovering over a point enlarges it and displays a tooltip with the exact measurements and species name. The chart includes labeled axes and a color-coded legend, all rendered as scalable vector graphics with an animated transition effect for the tooltip opacity.

Mmalisettisaisumanth@gmail.com
87% match
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
86% match