Activity 6 Task 2 Q2

100%

Activity 6 Task 2 Q2

✓ Published0🌍 Public

Last edited Apr 16, 2024

Created on Apr 16, 2024

This stacked bar chart displays sales figures for three products (A, B, and C) across four regions (North, South, East, West). Each horizontal bar represents a region, segmented proportionally to product values, with hover tooltips revealing exact numbers. Built with plain JavaScript and DOM manipulation, the chart uses CSS flexbox for layout and includes hardcoded data arrays and color mappings, with no external visualization libraries.

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

87% match

Loading thumbnail…

Activity-8_Question-2

This example presents a stacked bar chart that visualizes product sales (productA, productB, productC) across four regions (North, South, East, West). It uses D3 v7 to load a CSV file, stack the data, and render SVG bars with a categorical color scale. The chart includes axes for region and sales totals, and a legend identifying each product's contribution to the stack.

Mmanideepchinna25@gmail.com

86% match

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

85% match

Loading thumbnail…

Activity-6_Question-2.3

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.

Ttarun.chintada46@gmail.com

84% match

Loading thumbnail…

task2

This example presents a stacked bar chart that visualizes the distribution of three product categories (Product A, Product B, and Product C) across four geographic regions: North, South, East, and West. The chart uses SVG rendering to display the bars, with each product assigned a distinct color from the `d3.scaleOrdinal` and `d3.schemeCategory10` color scale. The code utilizes `d3.stack()` with `d3.stackOrderNone` and `d3.stackOffsetNone` to compute the stacked segments from the hardcoded data. A legend is appended to identify each product category, and the chart dimensions are fixed at 600 by 400 pixels.

Kkeerthanachinthalapally@gmail.com

83% match

Loading thumbnail…

Activity6_Task2 - Q2 (3)

This stacked bar chart shows chocolate sales (in units) across five regions for six chocolate types, with sales values accessible via interactive tooltips on mouseover. It uses D3.js v7 with SVG rendering, loading data from a CSV file. The chart employs `d3.stack` for stacking, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom`/`d3.axisLeft` for axes. A manually drawn legend and CSS-styled tooltips enhance interactivity, while region colors follow `d3.schemeSet2`.

Nnavyabade05@gmail.com

83% match

Loading thumbnail…

fork of activity_6_question_2

This stacked bar chart displays product sales (productA, productB, productC) across four regions (North, South, East, West) using D3 v7. The visualization loads CSV data via `d3.csv` with `d3.autoType`, applies a band scale for regions and a linear scale for sales values, and renders SVG rectangles through the `d3.stack` layout. Color encoding uses `scaleOrdinal` with four categorical colors, with axes generated by `axisBottom` and `axisLeft`. A legend shows product categories, and the chart is scoped within defined margins on a 960×500 SVG canvas.

JJaswanthkota@my.unt.edu

83% match

Loading thumbnail…

Activity_6_Question 2.3

A stacked bar chart displays regional product sales, with each bar segmented by product category (productA, productB, productC) and colored via a categorical scale. The visualization loads CSV data with d3.csv and d3.autoType, then uses d3.stack to compute the stacked series. d3.scaleBand maps regions to x positions, d3.scaleLinear maps sales values to y positions, and d3.axisBottom and d3.axisLeft render the axes. A legend groups color swatches and labels, while the SVG output is generated entirely in d3.v7.

Kkesava

82% match