Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account
A fork of a radial stacked bar chart visualizes personal electricity usage across twelve months for three different utility accounts, with each account selectable from a dropdown menu. The D3.js v7 chart uses `d3.scaleRadial` and `d3.arc` to create concentric bars, while `d3.stack` handles the stacked data layers by year. The reusable `barChart` component updates via a custom `menu` dispatch handler, and text is rendered through Canvas-based measurement with `BrowserText`. Data comes from a CSV of electric billing records spanning two years.
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.