Scatterplot of Personal Electric Consumption by Account

100%

Scatterplot of Personal Electric Consumption by Account

✓ Published0🌍 Public

Last edited Oct 30, 2021

Created on Sep 11, 2021

This scatterplot shows personal electricity consumption across three accounts at a three-family residence, plotting total kilowatt-hours against billing date over a two-year period. Each account is distinguished by color: red, blue, or green. The code loads CSV data from a GitHub gist and renders circles using D3 v6’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs. It displays the data in an SVG canvas, with axes labeled ’Date’ and ’Usage kWh‘, and a title above the plot.

AI-generated description

This is a scatterplot visualization of my personal electricity consumption dataset and shows electricy consumed for the three electric accounts that are at my residence. 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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This stacked bar chart displays personal electricity consumption across three accounts in a three-family structure, using data from a two-year period. Users select an account from a menu, and the chart shows monthly usage totals stacked by billing year. The visualization is built with D3.js version 7.1.1, using components like `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The chart renders as SVG with transitions and includes interactive menu functionality driven by `dispatch` events.

PPeter Cordone

83% match

Loading thumbnail…

Electric Bar Chart Before Stack Refactoring

This bar chart visualizes personal electricity consumption across two years, with bars colored by account number to distinguish usage among three household accounts. Rendered in SVG with D3 v6, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color the bars, with hover interactions transitioning fills to grey. Data is loaded via D3’s `csv` from a GitHub gist, and axis labels, a title, and a legend are generated using `axisLeft`, `axisBottom`, and custom text elements.

PPeter Cordone

81% match

Loading thumbnail…

Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart visualizes personal electricity usage by month and account, with each account’s data stacked by bill year. It includes an interactive menu to switch between three accounts, updating the visualization via a reusable D3 component. The chart uses `d3.scaleBand` and `d3.scaleRadial` for radial positioning, `d3.stack` for stacking, and `d3.arc` for path generation. Data comes from a CSV of two years of electric utility readings, rendered in SVG with transitions.

PPeter Cordone

81% match

Loading thumbnail…

Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts in a three-family structure, with each bar showing monthly kilowatt-hours segmented by account number. Built with D3.js v7, it uses `d3.stack()` to transform grouped data into stacked series, `scaleBand()` and `scaleLinear()` for axes, and `scaleOrdinal()` with `d3.schemeCategory10` for colors. The SVG rendering includes rotated axis labels, a title, and a legend, with tooltips implemented via SVG `<title>` elements showing per-account usage.

PPeter Cordone

80% 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 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

80% 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

80% match

Loading thumbnail…

Fork of Fork of Radial Stacked Bar Chart of Personal Electric Usage Data By Year for Account

This radial stacked bar chart visualizes two years of personal electricity consumption across three accounts, with monthly usage stacked by bill year. A menu lets viewers switch between accounts, triggering an update to the chart’s data via a reusable D3 component. The visualization uses d3.arc, d3.scaleRadial, and d3.scaleBand to render wedges, while d3.transition animates changes. Data comes from a CSV file of electric utility readings, and text measurement relies on the BrowserText helper using the Canvas API.

AAnissa Belkelfa

79% 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

79% match