Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Area chart_ICE7

Public visualization

Viewing a saved revision (read-only)

9256f921188b43ffb1c19690d94f5016

Area chart_ICE7

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

This area chart displays car sales by car type across three years (2019–2021), using layered, semi-transparent filled areas to compare sales trends over the categorical x-axis. The visualization loads data from a remote CSV file via `d3.text`, then processes it into arrays. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` with a monotone curve to draw the three colored series, each with adjustable opacity. Axes, labels, and a legend are added via D3’s SVG manipulation, with the chart 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