Skip to main content
100%

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

✓ Published0🌍 Public

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 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