Skip to main content
SimilarExport ZIP
100%

Stacked Bar Chart

✓ Published0🌍 Public
MMingboPeng
Last edited Feb 15, 2018
Created on Feb 15, 2018

This stacked bar chart displays energy consumption across different building system types for three cases, with each bar segmented and color-coded by category. The visualization uses D3 v3’s `d3.scale.ordinal` for the x-axis and color encoding, `d3.scale.linear` for the y-axis, and `d3.svg.axis` for tick labels formatted with `d3.format`. Data is loaded from a CSV via `d3.csv`, and the bars are drawn as SVG `rect` elements grouped by case. A custom legend maps colors to system names, and y-domains are computed using `d3.max`.

AI-generated description

This stacked bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

This example doesn’t use d3.layout.stack because it’s easy to just stack each state independently via array.forEach. Here, it makes sense to group the rects by state (column), rather than grouping by age group (series), as you do with a stacked area chart.

forked from <a href='http://bl.ocks.org/boyansky/'>boyansky</a>'s block: <a href='http://bl.ocks.org/boyansky/a189ec196fe8e049e41f'>Stacked Bar Chart</a>

mit Licensed

Similar vizzes

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

Question 2 Stacked bar chart

This stacked bar chart displays two years of personal electricity consumption across three accounts in a three-family building, broken down by month. The visualization uses d3.stack to layer the account contributions, with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color coding. The SVG is rendered as a group with margins, and interactive hover effects adjust bar opacity while title elements display individual usage amounts. The data is sourced from a personal electricity consumption dataset and processed with d3.group and d3.stack.

Nneeleshalapati@gmail.com
79% match
Loading thumbnail…

Question 2 Stacked bar chart

This stacked bar chart visualizes personal electricity consumption across two years for a three-family structure, breaking down usage by account number for each monthly read date. The visualization uses a green and blue color scheme mapped via `d3.scaleOrdinal`, with axes and bars rendered in SVG. Data is transformed using `d3.group` and stacked with `d3.stack` before being drawn as rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Hovering highlights bars and shows a tooltip title with kilowatt-hour values, while the chart includes labeled axes and a legend.

Nneeleshalapati@gmail.com
79% 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
78% match
Loading thumbnail…

Stacked Chart

This stacked bar chart displays 2013 energy production data sourced from Eurostat, with each horizontal bar segmented by energy type. The visualization uses d3fc’s Cartesian chart with a band scale for the y-axis and a linear x-axis. A D3 stack layout prepares the series, which are rendered by d3fc’s horizontally oriented stacked bar series. The d3-legend library adds a categorical color legend, while d3.scaleOrdinal assigns colors and d3fc’s autoBandwidth determines bar width.

CColinEberhardt
78% match
Loading thumbnail…

Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts in a three-family structure, with each bar showing monthly kilowatt-hours segmented by account number. Built with D3.js v7, it uses `d3.stack()` to transform grouped data into stacked series, `scaleBand()` and `scaleLinear()` for axes, and `scaleOrdinal()` with `d3.schemeCategory10` for colors. The SVG rendering includes rotated axis labels, a title, and a legend, with tooltips implemented via SVG `<title>` elements showing per-account usage.

PPeter Cordone
78% match
Loading thumbnail…

Activity6_Question2

A stacked bar chart displays energy consumption proportions across four sectors—Residential, Commercial, Industrial, and Transportation—from 2016 to 2020, using data from data.csv. The visualization uses d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal with d3.stack to layer bars, while d3.axisBottom and d3.axisLeft render axes with percentage formatting. An SVG legend maps colors to sectors, and the chart is styled via external CSS.

KKhushi Desai
78% match
Loading thumbnail…

Reusable Electric Bar Chart Using d3.stack

This interactive stacked bar chart visualizes two years of personal electricity consumption across three household accounts, broken down by billing month and bill year. Built as a reusable D3 component using `d3.stack`, `scaleBand`, and `scaleLinear`, it renders SVG bars with hover tooltips and a dropdown menu to filter by account. The chart also includes a legend, axis labels, and color encoding via `scaleOrdinal`, with data pulled from a CSV file.

PPeter Cordone
77% match