Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Electric Bar Chart Using d3.stack

✓ Published0🌍 Public
NNandini Maddula
Last edited Mar 20, 2024
Created on Mar 20, 2024

This stacked bar chart visualizes two years of personal electricity consumption, broken down by individual meter accounts. Built with D3.js, it uses `d3.stack` and `d3.scaleOrdinal` to transform the grouped data into stacked bars, with green and blue encoding each account. The chart renders in SVG, with axes configured via `scaleBand` and `scaleLinear`, and includes a legend and hover tooltip showing usage in kilowatt-hours.

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…

Fork of Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts, breaking down monthly kilowatt-hours by account number. The chart uses d3.stack to transform the grouped data, with green and blue segments representing each account, plotted on band and linear scales with axis labels for month and usage. Built with d3-scale-chromatic for colors, the visualization renders in SVG and includes interactive hover effects that highlight bars and display tooltips showing the kWh value for each segment.

Bbhargavarathod
95% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption, broken down by account number and month, using green and blue bars to distinguish between the two accounts. Built with D3.js, it uses `d3.stack()` to restructure the data by date, `scaleBand` and `scaleLinear` for positioning, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The visualization renders as an SVG with animated opacity changes on mouse hover and includes hover tooltips via `<title>` elements, with data sourced from a personal electricity consumption dataset.

NNaimisha-M
95% match
Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This visualization displays personal electricity consumption data across a two-year period as a stacked bar chart, with each bar segment representing usage from different household accounts. The chart uses a green and blue color scheme to distinguish between account types, with axes labeled for time periods and kilowatt-hours consumed. The visualization is built using D3.js version 7, employing the d3.stack API to structure the data, along with scaleBand and scaleLinear for positioning, and scaleOrdinal with d3.schemeCategory10 for coloring.

Aarchob
94% match
Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts (household floors and common areas). The data comes from CSV files processed with `d3.group` and `d3.stack`, mapping account numbers to stacked segments per reading date. Rendered in SVG, it uses `scaleBand` for months on the x-axis and `scaleLinear` for kilowatt-hours on the y-axis, with `scaleOrdinal` and `d3.schemeCategory10` assigning colors. Rectangles include hover opacity changes and SVG `<title>` tooltips showing segment amounts. Colors are green and blue, with a title and vertical axis label.

RRadhakrishna246
94% match
Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This visualization displays two years of personal electricity consumption across multiple household accounts, shown as stacked bar charts organized by month. Each month’s bar is segmented by account number, with green and blue colors distinguishing the accounts, and hovering reveals exact kilowatt-hour values via tooltips. The code uses d3.stack to transform the dataset, d3.scaleBand and d3.scaleLinear for axes, and d3.scaleOrdinal with d3.schemeCategory10 for colors. It renders with SVG, includes a legend, and is built from a CSV data file.

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

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption across multiple household accounts, broken down by month. It uses `d3.stack` to transform the data into stacked series, with `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. The visualization employs SVG rendering, `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding, and axis generators to label months and kilowatt-hour usage. Tooltips are commented out, but each bar segment includes a `<title>` element showing its kilowatt-hour value.

RRadhakrishna246
93% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This D3.js visualization presents two years of personal electricity consumption as a stacked bar chart, with each bar segmented by account number. The x-axis shows the reading date, while the y-axis shows kilowatt-hours used. It uses `d3.stack` to transform the data, `scaleBand` and `scaleLinear` for axes, and `scaleOrdinal` with a category color scheme for the segments. Hovering a bar segment dims it via a mouseover event and reveals an SVG `title` tooltip. The chart renders as an SVG graphic, with data loaded from a CSV source.

Ssagayous
93% match