Skip to main content
SimilarExport ZIP
100%

Mobile Inventory stacked bar chart

✓ Published0🌍 Public
VVenkat-Sumith-Thota
Last edited Jul 22, 2023
Created on Jul 20, 2023
Forked from Hello VizHub

This example shows mobile inventory counts for three brands—Samsung, OnePlus, and Motorola—broken into Mobile, Tablet, and Earpods categories using a stacked bar chart. Each bar segments three colored rectangles (pink, yellow, red) representing the product types, with axis labels and a legend to the right. The code uses D3 v7 via UNPKG, building the visualization with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` in an SVG. The dataset is hardcoded in the script, and the legend maps each color to its corresponding value name.

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…

Fork of Making a Bar Chart

This bar chart visualizes the ratings of various mobile phone brands, including Motorola, Nokia, Samsung, HUAWEI, Apple, and Sony. It shows the distribution of numeric rating values across brands using horizontal bars, with the highest rating value determining the linear scale domain. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG chart, with data loaded from a CSV file. The chart also customizes the axes by removing default domain lines and adding an axis label for the brands.

SSwapna1915
77% match
Loading thumbnail…

Stylized Barchart Test

This stylized bar chart displays mobile app download totals across devices, with the dataset filtered to two rows and the x-axis scaled beyond the maximum value to expand tick labels. The visualization is built with React (v18) and D3 v7, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `<rect>` elements for bars. Hovering changes bar color via CSS transitions, while `<title>` tooltips show formatted values. Data loads from a CSV via `d3.csv`, and axes are generated from D3 scales rather than D3 axis components.

Ddleoenri
75% match
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart compares four clothing brands across three product categories—Formal, Casual, and Shoes—using a fixed dataset embedded in the script. The chart renders in SVG via D3 v7, with `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Each brand’s stacked segments are colored distinctly, with a manual legend built from appended rectangles and text. The code loads D3 from UNPKG and uses inline JavaScript without local modules.

VVenkat-Sumith-Thota
75% match
Loading thumbnail…

Fork of Stacked Bar Chart

This stacked bar chart compares clothing brands across three categories—Formal, Casual, and Shoes—using d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The SVG rendering displays colored bars and a legend, with data from a hardcoded dataset of four brands. The code uses D3 v7, loaded via UNPKG, and demonstrates axis generation with d3.axisBottom and d3.axisLeft, plus a custom legend built from appended rectangles and text.

VVenkat-Sumith-Thota
75% match
Loading thumbnail…

Car Type Distribution

A stacked horizontal bar chart shows the proportional distribution of five car types—compact, midsize, large, SUV, and truck—across three brands, with each bar segmented by percentage. The visualization uses D3 v7’s `d3.stack` to compute stacked series, `d3.scaleBand` for brand categories, and `d3.scaleOrdinal` for color mapping. SVG rects render the segments, and mouseover tooltips display exact percentages. Data comes from a local CSV file, with axes and a legend generated via `d3.axisBottom` and manual legend elements.

JJayanthKumarkoni
74% match
Loading thumbnail…

3D Bar Chart

This example displays mobile phone manufacturer sales data across six months as a 3D bar chart. It uses the d3-x3d library with X3DOM for 3D rendering, alongside d3.v5 for data loading and parsing. The visualization reads CSV data describing monthly sales figures, transforms it into multi-series format, and renders bars in three dimensions. The chart supports interactive viewing, with d3.x3d.chart.barChartMultiSeries handling the 3D scene construction from the parsed data.

Bbindusreeja
74% match
Loading thumbnail…

Main.js

This line chart shows mobile phone sales by brand from 2010 to 2020, with each brand represented by a distinct colored line. The visualization uses d3.csv to load the dataset, d3.scaleBand and d3.scaleLinear for the x and y axes, and d3.line to draw the paths. SVG rendering is used, with the chart including axis labels and a title, while the color scale employs d3.schemeCategory10 to differentiate brands.

Ttelkapallyrekha@gmail.com
74% match
Loading thumbnail…

Stacked_Bar_chart

This example presents a stacked bar chart of randomly generated product sales data across six months. The chart visualizes sales for ten product categories, with each bar segmented by month using a categorical color scheme. Built with D3.js v7, the code generates data on the fly and renders the visualization as an SVG. The implementation uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeCategory10` for color assignment, along with D3's axis helpers for labeling.

Ppardha1411
73% match