Skip to main content
SimilarExport ZIP
100%

Home Appliances

✓ Published0🌍 Public
Mmaddulanagasanjana@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from Fork of D3 Starter

A bar chart displays the average energy consumption in kilowatt-hours for each appliance type, using data from a 100-row CSV dataset of home electric appliance usage. The chart sorts appliances by descending average kWh and colors each bar distinctly, with a tooltip on hover showing the exact value. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.rollups` and `d3.mean` for aggregation, and `scaleBand` and `scaleLinear` for axes. Bars animate upward on load via a `transition()`, and dashed gridlines, rotated axis labels, and rounded bar corners enhance readability.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

SDV_Assignment 5

This bar chart displays the average energy consumption in kilowatt-hours for home appliances across different cities. The visualization aggregates a CSV dataset loaded via `d3.csv`, computing city-level means with `d3.rollups`. A `d3.scaleBand` maps cities to the x-axis, while a `d3.scaleLinear` handles the y-axis, with bars rendered as SVG rectangles. The page also presents a data summary and a sample table. The interface uses a pastel gradient background and loads data from a GitHub gist.

Mmaddulanagasanjana@gmail.com
86% match
Loading thumbnail…

Fork of D3 Starter

This example displays a bar chart of average energy consumption by household appliance, sourced from a CSV file. It uses D3 v7 to load the data, construct linear and band scales, and render SVG rectangles for the bars, with rotated axes labels. The visualization adds a descriptive title and applies a blue fill to each bar via the `d3.scaleBand` and `d3.scaleLinear` APIs.

Mmaddulanagasanjana@gmail.com
81% match
Loading thumbnail…

Household monthly electricity consumption

This radial bar chart visualizes monthly household electricity consumption in kilowatt-hours (kWh) for a single year, with each month represented as an arc whose angular length is proportional to its consumption value. The visualization uses D3 v4 to render an SVG, animating the arcs' growth on load via a `transition.attrTween`. Data is loaded from a local CSV file using `d3.csv`. Hovering over an arc reveals the exact value via a tooltip, and the chart includes radial gridlines and axis labels to aid reading the scale.

HHeywhoyou22
76% match
Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Kkechapasiin
75% match
Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Kkechapasiin
75% 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
75% match
Loading thumbnail…

Asian American Quality of Life

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family home. The visualization uses D3.js with d3.stack to aggregate kilowatt-hour usage by month, with green and blue bars representing different meter accounts. The code employs scaleBand and scaleLinear for axes, scaleOrdinal with d3-scale-chromatic for colors, and includes interactive hover effects with tooltips showing kilowatt amounts. Axis labels rotate vertically to accommodate the title, and the chart clearly separates stacked segments by account number.

PPooja Srinivasan
75% match
Loading thumbnail…

my - Testing BAR chart

This bar chart displays monthly energy consumption in kilowatt-hours across multiple building sites, with each bar representing a site’s total usage for a given month. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars and map values, while `d3.nest()` groups the data by site and date. Data is loaded from a CSV file using `d3.csv`, and the SVG rendering applies a categorical color scale to distinguish sites.

Mmab3105
74% match