Skip to main content
SimilarExport ZIP
100%

Fork of Electric Bar Chart Using d3.stack

✓ Published0🌍 Public
SSaiSreya1
Last edited Jun 25, 2022
Created on Jun 25, 2022

This stacked bar chart visualizes two years of personal electricity consumption across three accounts in a three-family structure. The chart displays monthly electricity usage, with each bar segmented by account number and colored using d3.scaleOrdinal with a categorical color scheme. Built with D3.js (v7), it uses d3.stack to transform the data into stacked series, then renders the visualization as SVG rectangles with axes generated by d3.axisBottom and d3.axisLeft. The data is loaded from CSV, grouped by date, and restructured for stacking.

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 Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family dwelling. The visualization uses d3.stack to layer usage data by account number for each monthly reading date, with green and blue colors distinguishing the accounts. Built with d3-scale-chromatic for color mapping and SVG rendering, the chart includes axis labels, a legend, and hover effects that adjust bar opacity with tooltip titles showing kilowatt-hour values. The data comes from a CSV dataset of electricity meter readings.

SSrilekha24
97% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays two years of personal electricity consumption across multiple accounts within a three-family building. The SVG visualization uses d3.stack to aggregate data by account and date, with green and blue ordinal color encoding via d3.scaleOrdinal and d3.schemeCategory10. Axes are rendered using d3.axisLeft and d3.axisBottom, while hover interactions adjust rectangle opacity. A legend with account numbers appears in the upper-right corner, and the data comes from a CSV file loaded with d3.csv.

Iindira-antgrvty
97% 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
97% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption across multiple accounts in a three-family building. It uses d3.stack to aggregate kilowatt-hour readings by monthly read dates, with green and blue bars representing different account numbers. The visualization is rendered with SVG rectangles scaled by d3.scaleBand and d3.scaleLinear, while d3.scaleOrdinal assigns colors from d3.schemeCategory10. Axes are generated using axisLeft and axisBottom, and hover interactions adjust bar opacity with native title tooltips showing kWh values.

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

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays two years of personal electricity consumption across multiple household accounts, with each bar segmented by account number and colored via d3.scaleOrdinal with d3.schemeCategory10. The visualization uses d3.stack to transform grouped CSV data by read date, then renders SVG rectangles with d3.scaleBand and d3.scaleLinear axes. Interactive hover effects change bar opacity and show a tooltip via appended title elements, while axis labels and a legend clarify account mappings.

JJyothicherukuri
96% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption for a three-family structure, broken down by individual meter account numbers and read dates. It shows the total kilowatt-hours used per month, with separate colored segments for each account, and includes a legend for account identification. The visualization uses `d3.stack` for data transformation, `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` with `d3.schemeCategory10` for account colors. Interactive hover events enlarge bars and display tooltips via SVG `<title>` elements, while the chart is rendered as SVG.

RRashidi
96% 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
95% match