Electric Bar Chart Radial Line Chart

100%

Electric Bar Chart Radial Line Chart

✓ Published0🌍 Public

Last edited Oct 29, 2021

Created on Oct 26, 2021

This radial bar chart visualizes personal electric consumption across months and bill years, with each year’s usage represented as a colored ring segment around a circular time axis. A brushed bar chart below filters the displayed year range, while a dropdown menu selects between account numbers. The visualization uses D3 v7 with SVG for rendering, employing `d3.scaleTime`, `d3.scaleRadial`, `d3.lineRadial`, and `d3.brushX` for the interactive context chart. Data comes from a CSV file of electric account records, with usage measured in kilowatt-hours.

AI-generated description

I used the code from https://bl.ocks.org/tlfrd/fd6991b2d1947a3cb9e0bd20053899d6 and https://observablehq.com/@d3/radial-area-chart as examples.

MIT Licensed

Similar vizzes

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

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

90% match

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

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

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

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

88% match

Loading thumbnail…

Electric Bar Chart Before Stack Refactoring

This bar chart visualizes personal electricity consumption across two years, with bars colored by account number to distinguish usage among three household accounts. Rendered in SVG with D3 v6, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color the bars, with hover interactions transitioning fills to grey. Data is loaded via D3’s `csv` from a GitHub gist, and axis labels, a title, and a legend are generated using `axisLeft`, `axisBottom`, and custom text elements.

PPeter Cordone

86% match

Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Kkechapasiin

85% match