Skip to main content
SimilarExport ZIP
100%

Activity6-Question2

✓ Published0🌍 Public
SSaiKiranReddyKancharla@my.unt.edu
Last edited Apr 4, 2024
Created on Apr 4, 2024

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.

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 shows quarterly sales for three product categories—Electronics, Office Supplies, and Furniture—as a stacked horizontal bar chart. The chart renders with SVG using D3 v7, loading data from a CSV file. The code applies `d3.stack()` to create stacked series, `d3.scaleBand()` for category positioning, and `d3.scaleLinear()` for the value axis. A tooltip appears on mouseover using `d3.select` and event handlers, displaying each segment’s category and sales amount. An ordinal color scale distinguishes the four quarters, with a legend positioned in the chart margins.

HHarshathBudida@my.unt.edu
92% 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
91% 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
91% match
Loading thumbnail…

Question2

A stacked bar chart displays quarterly sales by product category, with categories on the y-axis and sales totals on the x-axis. The visualization uses D3 v7's `d3.stack`, `scaleBand`, `scaleLinear`, and `scaleOrdinal` APIs to construct the chart, with tooltips revealing the category and sales amount per segment. Data from the CSV file is loaded and rendered as SVG rectangles, with an interactive legend and axis labels. The code leverages D3's declarative `.join` pattern for efficient element updates.

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

Activity_6_Q2

This example visualizes sales distribution across product categories using a stacked horizontal bar chart. Each bar represents a category from a CSV file, segmented by price ranges (less than 100 to above 400) as percentages. The code uses d3.stack() to compute stacked series, d3.scaleBand for the y-axis categories, and d3.scaleLinear for the x-axis percentages, rendered as SVG rectangles. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. The visualization employs d3.axisBottom, d3.axisLeft, and d3.scaleOrdinal with a custom color palette.

Mmudunurirahulvarma98@gmail.com
89% match
Loading thumbnail…

Activity6-Question-2.3

This stacked bar chart shows sales distribution across six product categories, broken into five rating ranges from less than 5 to greater than 8.5. The visualization uses D3 v7’s `d3.stack()` to create the layered bars and `d3.scaleBand`/`d3.scaleLinear` for axes. An interactive tooltip appears on mouseover via D3 event handlers, displaying the sales segment value. Data loads from a CSV file, with a custom color scale for each range and a legend rendered alongside the chart.

LLayaMyadam@my.unt.edu
89% match
Loading thumbnail…

Activity 6 Question 2

This stacked bar chart shows yearly sales totals for grocery, appliance, and toy categories across 2018–2020. Each bar segment represents one product category, with a legend identifying colors and a hover tooltip displaying the exact sales value. The visualization uses D3 v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to generate SVG elements from the provided CSV data. Interactive features rely on D3’s `.on('mouseover')` and `.on('mouseout')` event handlers, while axis labels and tooltips are styled using inline CSS.

SSai Gottumukkala
89% match