Skip to main content
SimilarExport ZIP
100%

Radial Stacked Bar Chart

✓ Published1🌍 Public
RRoland
Last edited Feb 5, 2022
Created on Feb 5, 2022

This radial stacked bar chart visualizes personal electricity consumption across three accounts over a two-year period, with each ring segment representing a month's total kilowatt-hours stacked by bill year. A dropdown menu switches between accounts, and hover interactions reveal usage details. Built with D3 v7, the chart uses `scaleRadial`, `scaleBand`, and `arc` to generate the SVG wedges, while `d3.stack` structures the data and a reusable barChart component manages transitions. The underlying dataset comes from a CSV of electric utility bills, rendered in SVG with animated updates.

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

Loading thumbnail…

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

This radial stacked bar chart visualizes personal electricity usage by month and account, with each account’s data stacked by bill year. It includes an interactive menu to switch between three accounts, updating the visualization via a reusable D3 component. The chart uses `d3.scaleBand` and `d3.scaleRadial` for radial positioning, `d3.stack` for stacking, and `d3.arc` for path generation. Data comes from a CSV of two years of electric utility readings, rendered in SVG with transitions.

PPeter Cordone
94% match
Loading thumbnail…

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

A radial stacked bar chart displays two years of personal electricity consumption for three separate accounts, with each bar segment representing a bill year’s kilowatt-hours for a given month. A dropdown menu switches between accounts, updating the displayed data. The visualization uses d3’s `scaleRadial`, `scaleBand`, `stack`, and `arc` to render the polar layout, with a transition animation on updates. Data comes from a CSV file of electric billing records, and the chart is built as a reusable D3 component with SVG rendering.

AAndre J Denais
94% match
Loading thumbnail…

Fork of Radial Stacked Bar Chart

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.

Kkratikashetty1102@gmail.com
93% match
Loading thumbnail…

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

This radial stacked bar chart visualizes two years of personal electricity usage across multiple accounts in a three-family structure, with a dropdown menu to switch between accounts and each bar segmented by billing year. Built with D3 v7, it uses `scaleBand`, `scaleRadial`, and `arc` to render the circular wedges, while `d3.group` and `d3.stack` transform the CSV data. The SVG chart updates via a reusable bar chart component when the account selection changes, with hover text showing usage details per segment and total.

SShdnShmli
93% match
Loading thumbnail…

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

This radial stacked bar chart visualizes two years of personal electricity consumption across three accounts, with monthly usage stacked by bill year. A menu lets viewers switch between accounts, triggering an update to the chart’s data via a reusable D3 component. The visualization uses d3.arc, d3.scaleRadial, and d3.scaleBand to render wedges, while d3.transition animates changes. Data comes from a CSV file of electric utility readings, and text measurement relies on the BrowserText helper using the Canvas API.

AAnissa Belkelfa
92% match
Loading thumbnail…

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

A radial stacked bar chart visualizes monthly electric usage (total kWh) per account across multiple years, with each ring segment representing a year and each bar representing a month. A linked context bar chart shows yearly totals and includes a brush (d3.brushX) to filter the displayed date range. The code uses d3.scaleBand, d3.scaleRadial, d3.arc, and d3.stack to construct the visualization, with data loaded from a CSV file. SVG and canvas rendering are supported, and transitions animate updates when the brush or account menu changes.

PPeter Cordone
92% match
Loading thumbnail…

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.

Mme-as-a-web-designer
91% match
Loading thumbnail…

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

This radial stacked bar chart displays personal electricity consumption data for different accounts over two years, with each bar segment representing usage for a specific month and year. Users can switch between three account numbers via a dropdown menu, which filters the displayed data. The visualization is built using D3.js version 7, employing `d3.stack`, `scaleBand`, `scaleRadial`, and `arc` to generate the circular layout, with `transition` animation for updates. The SVG renders months around the circle, with stacked segments colored by year, and hover interactions show detailed usage values.

CCho-Yooyeon
91% match