100%

Activity6_Q2

✓ Published0🌍 Public

AAnirudhaKulakarniKaranam@my.unt.edu

Last edited Apr 4, 2024

Created on Apr 4, 2024

This stacked bar chart displays monthly sales data for two products across five months, with each bar segmented to show the relative contribution of product1 and product2. The visualization uses D3.js v7's `d3.stack()` to compute the stacked series and `d3.scaleBand` for the categorical x-axis. Bars are rendered as SVG rectangles with hover opacity changes, while `d3.axisBottom` and `d3.axisLeft` generate the month and sales axes. The dataset is hardcoded as an array of objects in the script.

AI-generated description

Stacked Bar Chart with D3.js

This repository contains code for creating a stacked bar chart using D3.js library. The stacked bar chart visualizes monthly sales data for two products over a period of time.

Overview

The stacked bar chart is created using HTML, CSS, JavaScript, and the D3.js library. It displays the sales data for two products ('product1' and 'product2') over five months (January to May). Each bar represents the total sales for both products in a specific month.

Files

index.html: HTML file containing the structure of the web page and JavaScript code for generating the stacked bar chart.
style.css: CSS file for styling the chart elements.
script.js: JavaScript file containing the code for creating the stacked bar chart using D3.js.
d3.v7.min.js: D3.js library file (version 7) for data visualization.

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Activity-6 (question2.1)

This chart displays monthly sales figures for three product categories—Electronics, Clothing, and Home Goods—as a stacked horizontal bar chart. D3’s `scaleBand` positions months on the y-axis, while a `scaleLinear` maps cumulative sales values to x-axis lengths. Each bar segment’s width corresponds to category-specific revenue, with a legend and interactive tooltips revealing exact dollar amounts on hover. The example loads D3 v7 via UNPKG, reads CSV data asynchronously, and constructs the SVG visualization using `d3.axisLeft`, `d3.axisBottom`, `d3.stack`, and `scaleOrdinal` for color encoding.

Kkandulasunny17@gmail.com

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

86% match

Loading thumbnail…

Activity 6 Question 2

A stacked bar chart displays quarterly sales revenue across seven product categories, with each bar segmented into four colored quarters from Q1 through Q4. The visualization uses D3 v7 to create an SVG with `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for color encoding. Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with product category labels on the x-axis and sales revenue on the y-axis. The data is embedded directly in the script as an array of objects.

Nnarasimhacharyulu010@gmail.com

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

85% match

Loading thumbnail…

Activity6_tak2.1

This stacked bar chart visualizes product sales across three categories, with each bar segment representing a product's sales contribution. The chart uses horizontal bars, with colors differentiating categories and a legend identifying each one. The visualization is rendered as an SVG using D3.js v7, employing the `d3.stack()` function to compose the stacked data structure, `d3.scaleLinear()` and `d3.scaleBand()` to set the scales, and `d3.scaleOrdinal()` for color encoding. Mouseover events log category sales amounts to the console, providing an interactive element.

KKritin Kesav

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_q3

This horizontal stacked bar chart displays sales data for five beauty products, breaking down total sales into two colored segments: Price and Quantity, with product names on the y-axis and the aggregated sales value on the x-axis. Built with D3.v7, the visualization uses `d3.scaleLinear` and `d3.scaleBand` for axes, `d3.stack()` to compose the stacked segments, and `d3.axisBottom`/`d3.axisLeft` for tick marks. The SVG rendering includes color encoding via `d3.scaleOrdinal` for the two stacked categories, with a legend and concise axis labels, drawing from a local dataset where each row specifies product, brand, price, and quantity.

Sshettisowmya01@gmail.com

85% match