Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
HHaili0109
Last edited Nov 26, 2024
Created on Nov 26, 2024

This radial stacked bar chart visualizes the population distribution of religions across countries, with each country represented as a circular segment divided into stacked sections by religion. The visualization uses d3.arc for the radial wedges, d3.scaleBand for angular positioning, d3.scaleRadial for radius mapping, and d3.scaleOrdinal for color encoding. An interactive d3 menu component filters the chart by country, and d3.Transition animates updates when selections change. Data comes from a CSV file containing country, religion, and population figures, rendered as SVG.

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…

Fork of Interactive Stacked Bar Chart

This interactive radial stacked bar chart displays the estimated religious breakdown of the most populous 20 countries in 2010, based on data from the Pew Research Center. Users can select a country from a dropdown menu to view its population distribution across six religious categories, with hover interactions on the legend highlighting specific religions. Built with D3.js, the visualization uses `scaleBand` and `scaleRadial` to map religions to angular segments and population to radial distances, while `d3.stack` processes the grouped data for layered arcs rendered as SVG paths with animated transitions.

HHaili0109
87% 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
86% 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
85% 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
85% 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
85% 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
85% 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
84% 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
83% match