Skip to main content
SimilarExport ZIP
100%

Total usage

✓ Published0🌍 Public
PPedro Ernesto Tramontina
Last edited Apr 28, 2020
Created on Apr 28, 2020
Forked from Blank

A stacked bar chart displays total usage per operation, with each rectangular segment sized proportionally to its contribution and labeled with absolute values, percentages, and operation codes. The chart uses D3 v5’s `scaleLinear` for positioning and percent calculations, `scaleOrdinal` with `schemeCategory10` for segment colors, and `sum` to compute the overall total. Data is loaded from a local JSON file via `json()`, and the visualization is rendered as SVG, with text elements placed above and within each bar segment.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

New barchart

This stacked bar chart shows how resources are allocated across five categories (ABC, PQR, XYZ, LMN, OPQ), with each bar split into used and unused portions. The chart uses a d3.stack layout with stackOffsetExpand to normalize the bars to equal height, while the y-axis displays the raw total values via a d3.scaleLinear. Draws in SVG using d3.v5, the visualization colors the stacked segments with d3.scaleOrdinal from d3.schemeCategory20c and includes gridlines generated by d3.axisLeft. The data comes from hardcoded JavaScript records with name, total, and used fields.

NNick
72% match
Loading thumbnail…

Stacked bar chart

This stacked bar chart displays monthly electricity consumption in kilowatt-hours, segmented by account number. It uses D3.js with the `d3-scale-chromatic` library for color mapping, rendering via SVG and canvas. Data is grouped by read date and stacked using `d3.stack()`, with axes scaled by `scaleBand` and `scaleLinear`. Mouseover interactions adjust bar opacity, and a title tooltip shows the segment’s kilowatt-hour value.

AArun Pratap
72% match
Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays each category’s composition as percentages of a whole, using horizontal segments that always fill the full bar height. The code loads a JSON array of time values, computes the satisfied portion by subtracting left hours from total hours, and sorts categories by total descending. Using d3.stack with the stackOffsetExpand offset, it converts raw counts into proportional shares, then renders SVG rectangles via d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The legend lines and text are positioned at each segment’s midpoint, while the y-axis labels show percentage ticks.

LLauraCortes
72% match
Loading thumbnail…

Stacked Bars

This chart uses stacked bars to show how total sales are divided among customer segments for each product sub-category. The visualization allows users to hover over legend entries, which highlights the corresponding segment’s bars while dimming the rest. The implementation uses d3.svg.axis, d3.nest, and d3.layout.stack to aggregate and stack the data from the CSV file, with bar rendering using SVG rectangles. A d3-tip tooltip displays detailed values on hover. The color legend, built with d3.legend.color, drives the interactive filtering.

Pprincit
72% match
Loading thumbnail…

Stacked bar chart

This stacked bar chart visualizes monthly electricity consumption across multiple accounts, with each bar segmented by account and colored using a categorical scheme. The chart, rendered as an SVG, uses D3's scaleBand, scaleLinear, and scaleOrdinal APIs to map dates, energy values, and account colors, respectively. Interactive hover effects adjust bar opacity, and a tooltip displays each segment's energy value. Data is processed via d3.group and d3.stack to create the stacked series, with the final layout including axis labels and a title.

AArun Pratap
71% match
Loading thumbnail…

Stacked Bar Graph

This example shows a stacked bar graph where each bar represents a total value composed of three categorical segments, using data from an external CSV file. The visualization renders as an SVG chart with a light gray background, axes, a title, and a color-coded legend. It loads the dataset with `d3.csv`, transforms the columns into numeric values, and uses `d3.stack` to arrange the segments. The chart draws rectangles via SVG and scales the axes using `d3.scaleBand` and `d3.scaleLinear`, with colors assigned by `d3.scaleOrdinal` and `d3.schemeCategory10`.

NNukaShravanKumar
71% match
Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Kkechapasiin
70% match
Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Kkechapasiin
70% match