Skip to main content
SimilarExport ZIP
100%

Man SDV Activity6_Task2

✓ Published0🌍 Public
Mmanojapopuri@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024
Forked from Hello VizHub

This stacked bar chart displays sales performance across five product categories—Electronics, Clothing, Books, Furniture, and Toys—for four regions (North, South, East, West), with percentages derived from the CSV dataset. The visualization uses D3.js v7 to render an SVG, employing d3.stack() to compute stacked series, d3.scaleOrdinal for category colors, and d3.scaleBand with d3.scaleLinear for axes. Interactive tooltips show exact category percentages on mouseover, while hover effects change bar opacity, and a legend identifies each category.

AI-generated description

Stacked Bar Chart with D3.js

This project demonstrates how to create a stacked bar chart using D3.js. The dataset used is provided in data.csv. The visualization is implemented in index.html using D3.js. Styling for the visualization is done in styles.css.

Usage

  1. Clone or download the repository.
  2. Open index.html in a web browser.

Dataset

The dataset (data.csv) contains sales performance data of different product categories across various regions.

Libraries Used

  • D3.js (Data-Driven Documents)
MIT Licensed

Similar vizzes

Loading thumbnail…

Activity 6_Task 2 Question

This stacked bar chart shows the percentage distribution of sales across four product categories—Books, Toys, Kitchenware, and Sports—broken down by the North, South, East, and West regions. Using d3.stack and d3.scaleOrdinal, the SVG visualization groups color-coded segments for each region, with axes formatted as percentages and a legend identifying region colors. The data comes from a hardcoded JavaScript array, rendered with d3.axisBottom and d3.axisLeft, and includes interactive tooltips via appended title elements.

SSrihith Reddy Gaddam
87% match
Loading thumbnail…

Activity-6_Task2(q)

This stacked bar chart shows monthly sales totals for five product categories—Electronics, Clothing, Furniture, Groceries, and Books—across January, February, and March. The data is loaded from a CSV file and rendered as SVG using D3 v7. The visualization uses `d3.stack()` to aggregate the three month values per category, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. A color scale distinguishes the months, and a legend in the top-right corner labels each segment.

Aaravapalliharika2002@gmail.com
86% match
Loading thumbnail…

Activity 6 task 2 Q2

This example presents a stacked bar chart showing the sales distribution of four product categories (Electronics, Clothing, Furniture, Groceries) across four regions (North, South, East, West), with each bar segment colored by region and displaying a hover tooltip with the exact percentage. Built with D3.js v5 and rendered as an SVG, the visualization uses `d3.stack()` to create stacked series from the in-memory `salesData` array, `d3.scaleBand` for the categorical x-axis, and `d3.scaleLinear` for the percentage-based y-axis. A legend identifies regions, and both axes include descriptive labels.

SSuneelKalva@my.unt.edu
86% match
Loading thumbnail…

activity6_question2_11719493

This stacked bar chart displays sales volumes across five regions (North, South, East, West, Central) broken down into five product categories. The horizontal bars are segmented by category, with each region’s total sales represented on a linear scale. Using D3 v7, the code applies `d3.stack()` to aggregate category values, maps regions to a band scale for the y-axis, and retrieves data from `sales_data.csv`. Interactive tooltips appear on mouseover, and a legend is rendered via SVG rectangles and text elements.

Ssravani1969@gmail.com
86% match
Loading thumbnail…

activity6_question2_11719493

This example visualizes the distribution of sales across five product categories (Electronics, Clothing, Furniture, Groceries, Pharmaceuticals) for five geographic regions. A horizontally stacked bar chart shows each region as a single bar, with segments colored according to category and scaled by total sales value. The chart is built with D3 v7, using SVG rendering and the `d3.stack()` API to compute cumulative values. Data is loaded from a CSV file, with axes, legend, and labels generated through D3’s scale and axis functions.

Ssravani1969@gmail.com
86% match
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes quarterly sales across four product categories—Electronics, Clothing, Furniture, and Books—with each bar segment colored according to category and overall height reflecting total quarterly revenue. The visualization loads data from a CSV file using `d3.csv`, then applies `d3.stack()` to compute cumulative segment values, `d3.scaleBand()` for quarter positioning, `d3.scaleLinear()` for the y-axis, and `d3.scaleOrdinal()` for categorical colors. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while SVG rectangles represent each stacked segment, and a bold "Total Sales" label marks the highest y-value.

Kkeerthanachinthalapally@gmail.com
85% match
Loading thumbnail…

Activity6_q2

This stacked bar chart visualizes the percentage distribution of five sales performance categories (Below 100, 100-500, 500-1000, 1000-5000, Above 5000) across six product categories, showing how sales outcomes vary by product type. Using D3.js v7 with SVG rendering, the chart employs `d3.stack()` to generate stacked segments and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The data comes from a local CSV file, and the visualization uses linear and band scales for positioning.

Nnumitha
85% match
Loading thumbnail…

Activity-6-Question2-1

This example visualizes the distribution of sales across electronics categories using a stacked horizontal bar chart with D3.v7. It shows proportions of sales for five ranges, from "less than 5" to "greater than 8.5," across six product categories. The chart uses `d3.stack()` to create stacked segments, `d3.scaleBand` for categories, and `d3.axisLeft`/`d3.axisBottom` for axes. The code attaches a tooltip via `d3.select` to display exact sales values on mouseover. Data is loaded from a CSV file containing category and sales-range percentages.

Ssowmyaammula.sdv@gmail.com
85% match