Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of Electric Bar Chart Using d3.stack

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

fb5ea7ae6d8e4feaa46d7d45e6c81dab

Open

Fork of Electric Bar Chart Using d3.stack

0 stars0🌍 Public
Ssrividyamadas@gmail.com
Last edited Mar 28, 2024
Created on Mar 28, 2024

This visualization displays the revenue of ten selected Indian states from 2020 to 2024 as an overlapping area chart, with each state’s trend represented by a semi-transparent colored band. The code loads CSV data via `d3.text`, filters it to the desired states, and constructs the chart using the D3 v7 `d3.area()` generator with `d3.scaleLinear` for both axes. SVG rendering includes `d3.axisBottom` and `d3.axisLeft` for the year and revenue scales, while a legend lists each state with its matching color from `d3.scaleOrdinal(d3.schemeCategory10)`. The chart sources data from a GitHub gist and is rendered entirely in 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. 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