Skip to main content
SimilarExport ZIP
100%

Activity6_Task2_Question2

✓ Published0🌍 Public
SShasankreddyganta@my.unt.edu
Last edited Apr 11, 2024
Created on Apr 11, 2024
Forked from Hello VizHub

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.

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…

Activity6_Question 3

This stacked bar chart visualizes the distribution of fruit ratings across six categories, from “below 4.0” to “above 8.0.” Each horizontal bar represents a fruit, with segments colored by rating category and proportional widths indicating percentages. Built with D3 v7, the example uses `d3.stack()` for data transformation, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. It loads CSV data from a local file, renders SVG, and adds interactive tooltips on mouseover, styled with CSS.

Kkartheekgrpt@gmail.com
86% match
Loading thumbnail…

Activity-6_Question-2

This stacked bar chart displays the distribution of fruit ratings across five sweetness categories, from "below 5.0" to "above 8.5", with each fruit represented as a horizontal bar segmented by rating percentage. The visualization uses d3.stack() to compute cumulative values, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Interactive tooltips reveal the exact percentage for each rating segment on mouseover, while an ordinal color scale assigns distinct hues to each category.

Ccharanshiva769@gmail.com
85% match
Loading thumbnail…

Activity 6 Question 2

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.

Mmangilipallylaxminarayana@gmail.com
85% match
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
85% match
Loading thumbnail…

Activity 6 task 2 Q2

This stacked bar chart shows the percentage breakdown of fruit categories (Apples, Oranges, Bananas, Berries) across three months, using horizontal bars segmented by color. The visualization uses d3.stack() to compute cumulative values, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and d3.scaleBand for the categorical y-axis. Rendered as SVG, the chart positions each segment via d3.scaleLinear for the x-axis, with data loaded from an inline array. The tooltip behavior mentioned in the README is not implemented in the provided JavaScript code.

Mmounikakatipally995@gmail.com
84% match
Loading thumbnail…

Activity6_Task2

This horizontal stacked bar chart displays the percentage distribution of fruit prices across five ranges, from below 1.0 to above 4.0. Each bar is divided into color-coded segments representing price ranges, with white percentage labels shown for wider segments. The visualization uses D3.js v7 with a stacked bar layout, employing d3.stack and d3.stackOffsetExpand to normalize all bars to full width. The chart includes axes with percentage formatting, a legend for price ranges, and tooltips showing exact segment percentages.

Bbhavanasruthikakarlapudi@gmail.com
84% match
Loading thumbnail…

Activity6_Question2

This stacked bar chart displays the distribution of chocolate ratings across five brands, showing the proportion of ratings in five percentage-based categories from “below 5.0” to “above 8.5.” The code uses d3.stack() to generate the stacked series and d3.scaleOrdinal for color mapping, with d3.axisBottom and d3.axisLeft for axes. Interactive tooltips appear on mouseover, showing the exact percentage per rating category. The data comes from a local CSV file loaded with d3.csv, and the visualization is rendered as SVG with a linear x-scale for percentages and a band scale for categories.

Ggreeshmareddy135@gmail.com
83% match
Loading thumbnail…

Activity6_Task2- 3

This horizontal stacked bar chart visualizes the proportional distribution of fruit prices across five price ranges, from "Below 1.0" to "Above 4.0", using 100% stacked bars. The d3.stack() function with stackOffsetExpand normalizes each fruit's segments to a percentage scale, while d3.scaleOrdinal assigns distinct colors. The code uses D3 v7 APIs such as d3.axisBottom, d3.axisLeft, and the join operation for efficient element creation. Labels appear only where segments exceed 40 pixels in width, and a legend in the top-right corner maps colors to price ranges.

Nnissisharon61@gmail.com
83% match