Activity 6 Question 2

100%

Activity 6 Question 2

✓ Published0🌍 Public

Last edited Apr 11, 2024

Created on Apr 11, 2024

This interactive stacked bar chart displays annual values for four categories from 1995 to 2003, loaded from a CSV file. Radio buttons toggle between two animated transitions: the first highlights bars with a green stroke, while the second narrows each bar and shifts it horizontally with a red stroke. The visualization uses D3 v4’s `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`, rendering shapes as SVG rectangles with `transition()` calls animating x, y, width, and stroke attributes.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Activity6Task-2

This stacked bar chart visualizes the changing composition of categories A through D across the years 1995-2003. A radio button toggle transitions the rendering between a full stacked bar layout and a narrow, offset view that reveals individual category values. Built with D3 v4, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to process the CSV data, while SVG `rect` elements are animated via `transition` and `attr` calls. The color scale `d3.scaleOrdinal` distinguishes the four categories.

HHanuReddy

89% match

Loading thumbnail…

Activity6_Task2_Question2

This interactive stacked bar chart visualizes the distribution of five fruit types across five quantity bins, from "Below 100" to "Above 400." A radio-button interface toggles between two animation states: step one displays the full stacked bars, while step two separates each category into thinner, individual segments. Built with D3 v4, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.stack`, and `d3.scaleOrdinal` to map data from a CSV file. The SVG rendering and smooth `.transition()` animations bring the data comparisons to life.

SShasankreddyganta@my.unt.edu

85% match

Loading thumbnail…

activity6_question2

This example presents a horizontal stacked bar chart comparing categorical values across multiple years. Using D3 v7, it loads data from a CSV file containing automotive metrics, then renders the visualization as an SVG with animated tooltips. The chart uses d3.stack to aggregate categories, d3.scaleOrdinal for color assignment, and d3.axisLeft and d3.axisBottom for labeled axes. Hovering over any bar segment reveals the specific value through a transition-based tooltip, while a legend identifies each category's color coding. The visualization demonstrates D3's data binding and interactive event handling capabilities.

Ssairamisetti3829@gmail.com

84% match

Loading thumbnail…

Activity 6 Question 2

This example shows stacked bar charts of sales in dollars across three product categories—Electronics, Furniture, and Clothing—for the years 2018 through 2020. It uses D3 v7 with the `d3.stack` API to layer the series, `d3.scaleBand` for the yearly bars, and `d3.scaleLinear` for the y-axis. Hovering reveals a tooltip with the category and exact value, while a legend identifies each color from `d3.schemeCategory10`, as loaded from a local CSV file.

Aanisha.peddireddy@gmail.com

83% match

Loading thumbnail…

Activity 6 Question 2

This stacked bar chart shows yearly sales totals for grocery, appliance, and toy categories across 2018–2020. Each bar segment represents one product category, with a legend identifying colors and a hover tooltip displaying the exact sales value. The visualization uses D3 v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to generate SVG elements from the provided CSV data. Interactive features rely on D3’s `.on('mouseover')` and `.on('mouseout')` event handlers, while axis labels and tooltips are styled using inline CSS.

SSai Gottumukkala

83% match

Loading thumbnail…

Activity-6-Question-2

A stacked bar chart shows the percentage of student ratings across six subjects, with each bar segmented into five rating bands from "below 60%" to "above 90%". The chart uses `d3.stack()` to compute the layered data and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The visualization is rendered as an SVG with axes created via `d3.axisLeft()` and `d3.axisBottom()`, reading data from a local CSV file.

Nnaveen.dodda4321@gmail.com

82% match

Loading thumbnail…

Activity6_Question2

This example shows a stacked bar chart comparing ratings across six AI-related categories, with each bar divided into five percentage-based rating brackets (below 5.0 through above 8.5). The visualization uses D3 v7 to load the CSV data, apply `d3.stack()` to compute the stacked segments, and render them as SVG rectangles scaled with `d3.scaleLinear` and `d3.scaleBand`. Hover interactions trigger a tooltip displaying the exact percentage for each segment, and colors are assigned via `d3.scaleOrdinal`.

CChandra Prakash Reddy Kalwakolu

82% match

Loading thumbnail…

Activity6_Task2_Question_2

A stacked bar chart displays monthly sales totals for Electronics, Clothing, and Groceries across six months. Each bar segment represents a category’s contribution, with tooltips revealing exact values on hover and a color-coded legend identifying series. Using D3 v7, the visualization loads CSV data via `d3.csv`, constructs stacked series with `d3.stack()`, and renders SVG rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear through mouse events, while axes and legend are generated with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleOrdinal`.

Aadityatrip9899@gmail.com

82% match