Skip to main content
SimilarExport ZIP
100%

Activtiy6-Question2

✓ Published0🌍 Public
Aaashishvinayvasala@gmail.com
Last edited Apr 15, 2024
Created on Apr 15, 2024

This example visualizes the proportional sales distribution across five product categories (Clothing, Electronics, Books, Toys, Furniture, Jewelry) for five different time ranges, using a horizontal stacked bar chart. It imports data from a local `data.csv` file and renders the chart as an SVG with D3 v7, employing `d3.stack()` to aggregate the series and `d3.scaleOrdinal()` for color encoding. Interactive tooltips appear on mouseover, displaying the sales value for each segment, while a legend identifies the time ranges. The axes are labeled “Product Categories” and “Sales,” with the title “Sales by Category of Product” displayed above the plot.

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…

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
87% match
Loading thumbnail…

Activtiy-6-q2.3

This example visualizes sales distribution across product categories, breaking down each category's total sales into five segments based on rating scores (from "less than 5" to "greater than 8.5"). The chart uses stacked horizontal bars, with each product category represented as a bar segmented by colored sections corresponding to rating ranges. The visualization is built using D3 v7, loading data from a local CSV file, and employs `d3.stack()` to compute stacked bar positions, `d3.scaleBand()` for categorical y-axis positioning, and `d3.axisLeft` and `d3.axisBottom` for axes. Interactive tooltips appear on hover, displaying the specific rating segment and its sales value.

Sswapnadabburi@my.unt.edu
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
87% 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
86% 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…

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