Skip to main content
100%

Fork of Radial Stacked Bar Chart

✓ Published0🌍 Public
Kkratikashetty1102@gmail.com
Last edited Mar 28, 2023
Created on Mar 27, 2023

A radial stacked bar chart visualizes two years of personal electricity consumption across three household accounts, with monthly usage stacked by bill year. An interactive menu switches between accounts, triggering animated transitions. The visualization uses D3 v7 APIs including `scaleBand`, `scaleRadial`, `d3.stack`, and `arc` to render SVG wedges, with browser-based text measurement for label positioning.

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