Export Image
Export Code

Electric Bar Chart Using d3.stack

Peter Cordone

Saturday, June 21, 2025: 0 viewsSunday, June 22, 2025: 0 viewsMonday, June 23, 2025: 0 viewsTuesday, June 24, 2025: 0 viewsWednesday, June 25, 2025: 0 viewsThursday, June 26, 2025: 0 viewsFriday, June 27, 2025: 0 viewsSaturday, June 28, 2025: 0 viewsSunday, June 29, 2025: 0 viewsMonday, June 30, 2025: 0 viewsTuesday, July 1, 2025: 0 viewsWednesday, July 2, 2025: 1 viewThursday, July 3, 2025: 0 viewsFriday, July 4, 2025: 0 viewsSaturday, July 5, 2025: 0 viewsSunday, July 6, 2025: 1 viewMonday, July 7, 2025: 0 viewsTuesday, July 8, 2025: 1 viewWednesday, July 9, 2025: 0 viewsThursday, July 10, 2025: 0 viewsFriday, July 11, 2025: 0 viewsSaturday, July 12, 2025: 0 viewsSunday, July 13, 2025: 0 viewsMonday, July 14, 2025: 0 viewsTuesday, July 15, 2025: 0 viewsWednesday, July 16, 2025: 0 viewsThursday, July 17, 2025: 0 viewsFriday, July 18, 2025: 0 viewsSaturday, July 19, 2025: 0 viewsSunday, July 20, 2025: 0 viewsMonday, July 21, 2025: 0 viewsTuesday, July 22, 2025: 0 viewsWednesday, July 23, 2025: 0 viewsThursday, July 24, 2025: 0 viewsFriday, July 25, 2025: 0 viewsSaturday, July 26, 2025: 0 viewsSunday, July 27, 2025: 0 viewsMonday, July 28, 2025: 0 viewsTuesday, July 29, 2025: 0 viewsWednesday, July 30, 2025: 1 viewThursday, July 31, 2025: 0 viewsFriday, August 1, 2025: 0 viewsSaturday, August 2, 2025: 0 viewsSunday, August 3, 2025: 0 viewsMonday, August 4, 2025: 0 viewsTuesday, August 5, 2025: 0 viewsWednesday, August 6, 2025: 0 viewsThursday, August 7, 2025: 1 viewFriday, August 8, 2025: 0 viewsSaturday, August 9, 2025: 0 viewsSunday, August 10, 2025: 0 viewsMonday, August 11, 2025: 0 viewsTuesday, August 12, 2025: 0 viewsWednesday, August 13, 2025: 0 viewsThursday, August 14, 2025: 0 viewsFriday, August 15, 2025: 0 viewsSaturday, August 16, 2025: 0 viewsSunday, August 17, 2025: 0 viewsMonday, August 18, 2025: 0 viewsTuesday, August 19, 2025: 0 viewsWednesday, August 20, 2025: 0 viewsThursday, August 21, 2025: 0 viewsFriday, August 22, 2025: 0 viewsSaturday, August 23, 2025: 0 viewsSunday, August 24, 2025: 0 viewsMonday, August 25, 2025: 0 viewsTuesday, August 26, 2025: 0 viewsWednesday, August 27, 2025: 0 viewsThursday, August 28, 2025: 0 viewsFriday, August 29, 2025: 0 viewsSaturday, August 30, 2025: 0 viewsSunday, August 31, 2025: 0 viewsMonday, September 1, 2025: 0 viewsTuesday, September 2, 2025: 0 viewsWednesday, September 3, 2025: 0 viewsThursday, September 4, 2025: 0 viewsFriday, September 5, 2025: 0 viewsSaturday, September 6, 2025: 0 viewsSunday, September 7, 2025: 0 viewsMonday, September 8, 2025: 0 viewsTuesday, September 9, 2025: 0 viewsWednesday, September 10, 2025: 0 viewsThursday, September 11, 2025: 0 viewsFriday, September 12, 2025: 0 viewsSaturday, September 13, 2025: 0 viewsSunday, September 14, 2025: 0 viewsMonday, September 15, 2025: 0 viewsTuesday, September 16, 2025: 0 viewsWednesday, September 17, 2025: 0 views
93 views in last 90 days
Last edited Feb 22, 2022
Created on Sep 21, 2021
Forked from Hello VizHub

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