Skip to main content
SimilarExport ZIP
100%

ICE-6 Electric bar graph

✓ Published0🌍 Public
RRevanthGrreddy
Last edited Jun 25, 2022
Created on Jun 25, 2022
Forked from HTML Starter

This stacked bar chart visualizes personal electricity consumption over time, with each bar segment representing usage attributed to a specific account. The bars are color-coded using a categorical scale from d3.scaleOrdinal and d3.schemeCategory10, and hovering highlights a segment while a tooltip displays its kilowatt-hour value. The visualization is built with React and D3, using d3.stack to aggregate data by date and account, d3.scaleBand for the x-axis, and d3.scaleLinear for the y-axis. Rendering is done via SVG with canvas-based text measurement for layout adjustments.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family structure, with green and blue bars representing different meter readings. The code uses React with d3-scale-band and d3-scale-linear scales, d3.stack for stacking, and SVG rendering to display the data. The chart loads CSV data from a GitHub gist and includes labeled axes, a legend, and a vertical y-axis label. It employs d3.csv for data loading and d3.max for computing the domain, with the visualization showing account-specific usage patterns over time.

SSnigdha6698
92% 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
86% 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
86% 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
86% 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
86% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack - Play

This interactive stacked bar chart visualizes two years of personal electricity consumption for a three-family structure, breaking down usage by account number for each monthly read date. The visualization uses D3.js version 7 and the d3-scale-chromatic library to render the SVG bars, with green and blue colors distinguishing the different accounts via a categorical color scale. The chart employs `d3.stack()` to compute cumulative bar segments and uses `scaleBand()` and `scaleLinear()` for the axes, with hover effects that decrease bar opacity and display tooltips showing the kilowatt-hour amounts. The data comes from a personal consumption dataset covering a two-year period.

KKamal Bahadur Rana
84% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This interactive stacked bar chart visualizes two years of personal electricity consumption across three residential accounts, with monthly usage broken down by account number. Built with D3 v7, the visualization employs `d3.stack()` to aggregate the data and `scaleBand`/`scaleLinear` axes to map dates and kilowatt-hours. Each colored segment represents one account, rendered as SVG rectangles with hover effects and tooltips showing individual consumption values. The chart uses `scaleOrdinal` with the `d3-scale-chromatic` scheme to distinguish accounts.

Aarchob
84% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This interactive stacked bar chart visualizes two years of personal electricity consumption across three residential accounts, with monthly usage broken down by account number. Built with D3 v7, the visualization employs `d3.stack()` to aggregate the data and `scaleBand`/`scaleLinear` axes to map dates and kilowatt-hours. Each colored segment represents one account, rendered as SVG rectangles with hover effects and tooltips showing individual consumption values. The chart uses `scaleOrdinal` with the `d3-scale-chromatic` scheme to distinguish accounts.

Aarchob
84% match