Skip to main content
SimilarExport ZIP
100%

Activity 6

✓ Published0🌍 Public
MMannava Priyanka Chowdary
Last edited Oct 22, 2024
Created on Oct 22, 2024
Forked from Hello VizHub

This example demonstrates a stacked bar chart that visualizes how three categorical data fields (AM, AZ, FD) contribute to a total for each of five discrete IDs. The chart uses D3.js v7 and SVG rendering, with d3.stack() to process the data into layers, d3.scaleBand() for the x-axis, and d3.scaleLinear() for the y-axis. The bars are colored using d3.schemeCategory10 and drawn with semi-transparent rectangles.

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

A stacked bar plot displays the distribution of three categories—Process, People, and Technology—across five company departments, with horizontal bars scaled by the number of employees. Hovering over a segment highlights it and shows a tooltip with the exact category and count. Built with D3 v7, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to position rectangles within an SVG, while an ordinal color scheme assigns distinct hues. Data is loaded from a local CSV file, and the chart includes labeled axes and a legend.

MMannava Priyanka Chowdary
84% match
Loading thumbnail…

Activity6_question2

This stacked horizontal bar chart displays sales totals for five store locations, broken down by product categories including clothing, equipment, and accessories. The visualization uses d3.stack() to compute the segmented bar series and d3.scaleLinear and d3.scaleBand for positioning. Rendered as SVG with D3 v7, the chart includes interactive tooltips that display precise numeric values when hovering over each segment. Category colors are assigned via d3.scaleOrdinal, and axis labels and legends are manually added.

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

Fork of Activity6_questions 3 45

A stacked bar chart visualizes product sales across four categories, with each bar segment representing a category’s contribution to total sales for a given product. The chart encodes values on a linear x-axis and product names on a categorical y-axis, using color to distinguish categories. Built with D3 v7, it uses `d3.stack()` to compute stacked values, `d3.scaleBand()` for the y-axis, and `d3.scaleLinear()` for the x-axis. Data is loaded via `d3.csv()` from a local CSV file, and SVG rectangles render each segment with mouseover logging to the console.

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

Activity6_questions 3 45

This stacked bar chart displays product sales across four categories (A through D), using horizontal bars segmented by category to compare total sales. The visualization uses D3.v7 with an SVG canvas, applying `d3.stack()` to compose the bar segments, `d3.scaleBand` for the product axis, and `d3.scaleLinear` for the sales axis. Hovering over a segment logs the specific category and sales value to the console, while a categorical color scale distinguishes the categories. The data comes from a local CSV file, and the chart includes axis labels and a legend.

Ppavanpkkalyan3@gmail.com
80% match
Loading thumbnail…

ACTIVITY 6 _ TASK 2.1

This example shows a stacked horizontal bar chart of student performance levels across five subjects, with each bar divided into percentages of Excellent, Good, Average, Below Average, and Poor ratings. The visualization uses d3.stack to compute the stacked series, d3.scaleBand for the subject categories, and d3.scaleLinear with a custom color palette to encode the performance categories. Interactive tooltips appears on hover to display exact percentages, while a legend identifies each performance level. The data comes from a CSV file loaded locally, and the chart is rendered as an SVG with D3 v7.

RRevanth putta
80% match