Skip to main content
SimilarExport ZIP
100%

Question 2 Stacked bar chart

✓ Published1🌍 Public
Nneeleshalapati@gmail.com
Last edited Apr 10, 2024
Created on Apr 10, 2024

This stacked bar chart displays two years of personal electricity consumption across three accounts in a three-family building, broken down by month. The visualization uses d3.stack to layer the account contributions, with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color coding. The SVG is rendered as a group with margins, and interactive hover effects adjust bar opacity while title elements display individual usage amounts. The data is sourced from a personal electricity consumption dataset and processed with d3.group and d3.stack.

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. Changed the code to use d3.stack. There was a bug in the previous week bar chart since it wasn't showing account number 2222222222.
  2. Changed the y axis label to be along the axis and vertical instead of horizontal and at the top to make room for the title.
  3. Changed the colors to green and blue. I thought they were less jarring.
  4. Cleaned up the code by grouping calculation of data with the code that added it to the visualization.
  5. Added a title to the accounts legend per feedback on slack.

Next steps

  1. Show a tooltip at the top of the bar amount when hovering over.
  2. Wrap the bar graph around a circle that is a 12 month period.

Unfortunately, I deleted the graph that I started with as part of cleaning up my profile then realized I should have kept it and forked from it per the instructions of the assignmnet. I believe I have captured all the changes.

version 1.3

MIT Licensed

Similar vizzes

Loading thumbnail…

Question 2 Stacked bar chart

This stacked bar chart visualizes personal electricity consumption across two years for a three-family structure, breaking down usage by account number for each monthly read date. The visualization uses a green and blue color scheme mapped via `d3.scaleOrdinal`, with axes and bars rendered in SVG. Data is transformed using `d3.group` and stacked with `d3.stack` before being drawn as rectangles scaled by `d3.scaleBand` and `d3.scaleLinear`. Hovering highlights bars and shows a tooltip title with kilowatt-hour values, while the chart includes labeled axes and a legend.

Nneeleshalapati@gmail.com
96% match
Loading thumbnail…

Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts in a three-family structure, with each bar showing monthly kilowatt-hours segmented by account number. Built with D3.js v7, it uses `d3.stack()` to transform grouped data into stacked series, `scaleBand()` and `scaleLinear()` for axes, and `scaleOrdinal()` with `d3.schemeCategory10` for colors. The SVG rendering includes rotated axis labels, a title, and a legend, with tooltips implemented via SVG `<title>` elements showing per-account usage.

PPeter Cordone
90% match
Loading thumbnail…

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

This stacked bar chart displays personal electricity consumption across three accounts in a three-family structure, using data from a two-year period. Users select an account from a menu, and the chart shows monthly usage totals stacked by billing year. The visualization is built with D3.js version 7.1.1, using components like `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The chart renders as SVG with transitions and includes interactive menu functionality driven by `dispatch` events.

PPeter Cordone
90% 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
89% 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
89% match
Loading thumbnail…

Stacked bar chart

This stacked bar chart visualizes monthly electricity consumption across multiple accounts, with each bar segmented by account and colored using a categorical scheme. The chart, rendered as an SVG, uses D3's scaleBand, scaleLinear, and scaleOrdinal APIs to map dates, energy values, and account colors, respectively. Interactive hover effects adjust bar opacity, and a tooltip displays each segment's energy value. Data is processed via d3.group and d3.stack to create the stacked series, with the final layout including axis labels and a title.

AArun Pratap
89% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack - Play

This interactive stacked bar chart visualizes two years of personal electricity consumption for a three-family structure, breaking down usage by account number for each monthly read date. The visualization uses D3.js version 7 and the d3-scale-chromatic library to render the SVG bars, with green and blue colors distinguishing the different accounts via a categorical color scale. The chart employs `d3.stack()` to compute cumulative bar segments and uses `scaleBand()` and `scaleLinear()` for the axes, with hover effects that decrease bar opacity and display tooltips showing the kilowatt-hour amounts. The data comes from a personal consumption dataset covering a two-year period.

KKamal Bahadur Rana
88% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family building. The visualization uses d3.stack to layer consumption by account number for each monthly reading, with green and blue color encoding distinguishing accounts. Built with d3-scaleBand, d3-scaleLinear, and d3-scaleOrdinal, the chart renders as SVG with animated hover effects that adjust bar opacity and display tooltips showing kilowatt-hour values. The code imports data via d3.csv and utilizes d3-scale-chromatic for the color scheme.

DDINESH SAI BOPPANA
88% match