Skip to main content
SimilarExport ZIP
100%

Stacked Bar Chart of Personal Electric Usage Data By Year for Account

✓ Published1🌍 Public
PPeter Cordone
Last edited Oct 30, 2021
Created on Oct 6, 2021

This stacked bar chart displays personal electricity consumption across three accounts in a three-family structure, using data from a two-year period. Users select an account from a menu, and the chart shows monthly usage totals stacked by billing year. The visualization is built with D3.js version 7.1.1, using components like `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The chart renders as SVG with transitions and includes interactive menu functionality driven by `dispatch` events.

AI-generated description

A bar chart visualization of my personal electricity consumption dataset. I live in a three family structure and occupy two floors. There is also a common account that supplies the front and back hall lighting as well as the basement and exterrior outlets. It covers a period of two years.

I forked https://vizhub.com/RED98310/a3ea8fbec4b64423a7797a418de4af57?edit=files and stated with that code. I also looked at Most basic stacked barplot in d3.js for how to render the stacked barchart.

I made the following changes from the one last week

  1. Added the menu to choose accounts.
  2. Refactored the code into a reusable d3 component.

Next steps

  1. I still need to get the bar graphs to update. Made progress by getting console.log to work and I can see that update is getting called.
  2. Wrap the bar graph around a circle that is a 12 month period.
MIT Licensed

Similar vizzes

Loading thumbnail…

Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart visualizes personal electricity usage by month and account, with each account’s data stacked by bill year. It includes an interactive menu to switch between three accounts, updating the visualization via a reusable D3 component. The chart uses `d3.scaleBand` and `d3.scaleRadial` for radial positioning, `d3.stack` for stacking, and `d3.arc` for path generation. Data comes from a CSV of two years of electric utility readings, rendered in SVG with transitions.

PPeter Cordone
93% 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
91% match
Loading thumbnail…

Fork of Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart visualizes two years of personal electricity consumption across three accounts, with monthly usage stacked by bill year. A menu lets viewers switch between accounts, triggering an update to the chart’s data via a reusable D3 component. The visualization uses d3.arc, d3.scaleRadial, and d3.scaleBand to render wedges, while d3.transition animates changes. Data comes from a CSV file of electric utility readings, and text measurement relies on the BrowserText helper using the Canvas API.

AAnissa Belkelfa
90% match
Loading thumbnail…

Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart visualizes two years of personal electricity usage across multiple accounts in a three-family structure, with a dropdown menu to switch between accounts and each bar segmented by billing year. Built with D3 v7, it uses `scaleBand`, `scaleRadial`, and `arc` to render the circular wedges, while `d3.group` and `d3.stack` transform the CSV data. The SVG chart updates via a reusable bar chart component when the account selection changes, with hover text showing usage details per segment and total.

SShdnShmli
90% match
Loading thumbnail…

Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

A radial stacked bar chart displays two years of personal electricity consumption for three separate accounts, with each bar segment representing a bill year’s kilowatt-hours for a given month. A dropdown menu switches between accounts, updating the displayed data. The visualization uses d3’s `scaleRadial`, `scaleBand`, `stack`, and `arc` to render the polar layout, with a transition animation on updates. Data comes from a CSV file of electric billing records, and the chart is built as a reusable D3 component with SVG rendering.

AAndre J Denais
89% 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
89% match
Loading thumbnail…

Fork of Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart displays personal electricity consumption data for different accounts over two years, with each bar segment representing usage for a specific month and year. Users can switch between three account numbers via a dropdown menu, which filters the displayed data. The visualization is built using D3.js version 7, employing `d3.stack`, `scaleBand`, `scaleRadial`, and `arc` to generate the circular layout, with `transition` animation for updates. The SVG renders months around the circle, with stacked segments colored by year, and hover interactions show detailed usage values.

CCho-Yooyeon
89% match
Loading thumbnail…

Fork of 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. The chart displays monthly electricity usage, with each bar segmented by account number and colored using d3.scaleOrdinal with a categorical color scheme. Built with D3.js (v7), it uses d3.stack to transform the data into stacked series, then renders the visualization as SVG rectangles with axes generated by d3.axisBottom and d3.axisLeft. The data is loaded from CSV, grouped by date, and restructured for stacking.

SSaiSreya1
88% match