Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
PPeter Cordone
Last edited Nov 12, 2021
Created on Oct 20, 2021

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.

AI-generated description

The context graph shows the years that the electrical data is over with a brush to limit the range. I think the brush would be more effective for data over more than 3 years, and I plan on synthesizing data to create a wider range (10 years or more).

I was almost able to get the filtering to work; however, I ran into a situation where I was endlessly recursing in the brush function since I called back to re-render the graph and the brush function got called again. I suspect I need to separate the brush bar graph out into a separate file and function so that I can call the refresh on the readial stacked bar chart. I will have to work on that the remainder of this week.

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
93% match
Loading thumbnail…

Electric Bar Chart Radial Brushing

This example visualizes monthly electric consumption for a selected utility account using a radial stacked bar chart. The circular chart displays monthly usage totals broken down by bill year, with a legend identifying the color-coded stack segments. A small context chart below provides a brushable timeline of yearly totals, allowing users to filter the radial chart’s date range by brushing across the stacked bars. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleRadial`, `d3.stack`, `d3.arc`, `d3.brushX`, and `d3.lineRadial`, while loading data from a CSV file hosted on GitHub.

PPeter Cordone
92% match
Loading thumbnail…

Radial Stacked Bar Chart

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.

RRoland
92% 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
91% 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
90% 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
90% 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
89% 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
89% match