Skip to main content
SimilarExport ZIP
100%

Activity-6_Question-2.3

✓ Published0🌍 Public
Ttarun.chintada46@gmail.com
Last edited Oct 23, 2024
Created on Oct 23, 2024
Forked from Hello VizHub

This stacked bar chart displays regional sales data for three products across four regions, using a categorical color scale to distinguish each product category. Built with D3 v7, the visualization imports data from a local CSV file and applies d3.stack() to layer the series, with d3.scaleBand() for the x-axis and d3.scaleLinear() for the y-axis. Axes are rendered using d3.axisBottom() and d3.axisLeft(), while a custom legend reflects the stacked order. The SVG output includes hover styling defined in the accompanying CSS.

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_Question 2

This example visualizes the distribution of product sales across five regions as a stacked horizontal bar chart, using data from a CSV file with product rows and regional percentage columns. D3.js v7 with SVG rendering builds the chart, where each bar segment’s length encodes the percentage value per region, and tooltips reveal precise sales figures on hover. The code leverages `d3.csv` for data loading, `d3.stack` for computing the stacked layout, and `d3.scaleOrdinal` to assign colors to regions, with axes and legends generated via D3’s scaling and axis APIs.

BBharath Vupputuri
90% match
Loading thumbnail…

Activity6-Question2

This visualization shows quarterly sales data for product categories using a stacked horizontal bar chart. Each bar segment represents a quarter’s sales contribution, with an interactive tooltip displaying the specific category and sales amount on mouseover. The example demonstrates D3 v7’s `d3.stack` for data shaping, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for rendering. Data comes from an inline CSV file loaded via `d3.csv`, and the chart is rendered as SVG with a custom legend.

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

Activity6Question2

This stacked bar chart shows quarterly sales totals across three product categories—Electronics, Clothing, and Home Goods—using D3 v7 to render SVG. The chart uses `d3.stack()` to create stacked segments and `d3.scaleOrdinal()` for color mapping, with `d3.axisBottom` for the x-axis. Hovering over any segment reveals a tooltip displaying the exact sales value for that category and quarter. Data comes from a hardcoded CSV structure with quarter and category columns.

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

Activity 6 -- Task 2

A stacked bar chart displays regional sales across appliance, home, clothing, and shoe departments, with each region’s total sales determining the horizontal axis scale. The visualization uses D3 v7’s `d3.stack` to aggregate the CSV data, `d3.scaleBand` for the categorical y-axis, and `d3.scaleOrdinal` to assign colors. SVG rendering places grouped bars and a legend, while axes are formatted with `d3.axisBottom` and `d3.axisLeft`. A custom color palette and bold tick styling from the linked stylesheet enhance readability.

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

Activity 6_Task 2 Question

This horizontal stacked bar chart displays sales figures across five store locations, broken down by Clothing, Equipment, and Accessories categories. The visualization uses d3.stack() with keys for each product category, d3.scaleBand() for the store axis, and d3.scaleLinear() for the value axis. Rendered as SVG via d3.v7, the chart includes axes, labels, and a clickable legend showing category colors from a d3.scaleOrdinal palette, all drawn within a single HTML page.

Ccharankumarreddyveeramreddy@my.unt.edu
84% 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
84% match