Electric Bar Chart Account and Period Menu
Interactive menus in this D3.js visualization show household electricity consumption from a multi-account dataset displayed as a stacked bar chart. Users select an account from a dropdown menu, which filters the data by account number and updates the visualized two-year period. The chart uses d3.csv to load data and d3.stack, d3.scaleBand, and d3.scaleLinear to render stacked bars grouped by month, colored by bill year. Built as a reusable d3 component utilizing enter, update, and exit transitions with d3.transition for animated updates.
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.