Stacked Bar Chart of Personal Electric Usage Data By Year for Account
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 descriptionA 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
- Added the menu to choose accounts.
- Refactored the code into a reusable d3 component.
Next steps
- 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.
- Wrap the bar graph around a circle that is a 12 month period.
Comments
Sign in to join the discussion.