Skip to main content
SimilarExport ZIP
100%

Stacked Chart

✓ Published0🌍 Public
CColinEberhardt
Last edited May 28, 2019
Created on Mar 26, 2017

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.

AI-generated description

This example demonstrates a stacked bar chart using energy production data from eurostat. The chart is constructed from the following components:

  • A Cartesian chart, with an ordinal y axis and a linear x axis.
  • The data is prepared using a D3 stack layout, which stacks the 'y' values.
  • The data is rendered via a horizontally oriented stacked bar series. The auto bandwidth component is used to obtain the bandwidth for the bar series from the y-oriented band scale.
  • A legend, courtesy of the d3-legend project.
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
79% 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
76% 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
76% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays two years of personal electricity consumption across three residential accounts, with each monthly bar segmented by account and colored via `d3-scale-chromatic`. The visualization uses `d3.stack` to transform the grouped CSV data into stacked series, then renders SVG rectangles scaled by `scaleBand` and `scaleLinear`. Axes are annotated with rotated labels, and hovering highlights bars while a `<title>` element shows individual segment kilowatt-hours. Green and blue account colors are assigned through `scaleOrdinal`, and the chart includes a legend for the three account numbers.

MMaldewar
75% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes personal electricity consumption across two years, broken down by account number and read date. The visualization uses d3.stack to transform the data into stacked series, then renders the bars as SVG rectangles with d3.scaleBand and d3.scaleLinear. Colors are assigned via d3.scaleOrdinal, and the chart includes hover effects that adjust opacity and display tooltips using SVG title elements. The code also leverages d3.group to structure the data and Intl.DateTimeFormat for date formatting on the x-axis.

JJadenzzz
75% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption for a three-family residence, breaking down monthly usage by individual meter accounts. Green and blue segments reveal each account’s contribution to the total kilowatt-hours. The visualization uses d3.stack to transform the data, with d3.scaleBand and d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for colors, and SVG rendering. Interactive tooltips appear on mouseover showing the segment’s value in kWh. The data originates from a personal electricity consumption dataset.

CChristianABeier
75% match
Loading thumbnail…

Electric Bar Chart Before Stack Refactoring

This bar chart visualizes personal electricity consumption across two years, with bars colored by account number to distinguish usage among three household accounts. Rendered in SVG with D3 v6, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color the bars, with hover interactions transitioning fills to grey. Data is loaded via D3’s `csv` from a GitHub gist, and axis labels, a title, and a legend are generated using `axisLeft`, `axisBottom`, and custom text elements.

PPeter Cordone
75% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays two years of personal electricity consumption across multiple household accounts, with each bar segmented by account number and colored via d3.scaleOrdinal with d3.schemeCategory10. The visualization uses d3.stack to transform grouped CSV data by read date, then renders SVG rectangles with d3.scaleBand and d3.scaleLinear axes. Interactive hover effects change bar opacity and show a tooltip via appended title elements, while axis labels and a legend clarify account mappings.

JJyothicherukuri
75% match