Skip to main content
SimilarExport ZIP
100%

First Draft Electric Bar Chart

✓ Published0🌍 Public
PPeter Cordone
Last edited Sep 28, 2021
Created on Sep 28, 2021

This bar chart visualizes monthly electricity usage across multiple utility accounts, with bars colored by account number and highlighted in orange on hover. The chart is rendered with SVG using D3.js v6, employing `scaleBand` and `scaleLinear` for axes and positioning. It reads data from a CSV file via `d3.csv` and includes interactivity through D3’s `.on("mouseover")` and `.on("mouseout")` event handlers. Axis labels are added manually, while a legend is positioned within the SVG group, and transitions animate the bar color changes on mouseout.

AI-generated description

I started with https://vizhub.com/RED98310/a3ea8fbec4b64423a7797a418de4af57?edit=files and modified it.

MIT Licensed

Similar vizzes

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
86% 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
85% 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
84% 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
84% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This D3.js visualization presents two years of personal electricity consumption as a stacked bar chart, with each bar segmented by account number. The x-axis shows the reading date, while the y-axis shows kilowatt-hours used. It uses `d3.stack` to transform the data, `scaleBand` and `scaleLinear` for axes, and `scaleOrdinal` with a category color scheme for the segments. Hovering a bar segment dims it via a mouseover event and reveals an SVG `title` tooltip. The chart renders as an SVG graphic, with data loaded from a CSV source.

Ssagayous
84% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart displays two years of personal electricity consumption, broken down by account number and month, using green and blue bars to distinguish between the two accounts. Built with D3.js, it uses `d3.stack()` to restructure the data by date, `scaleBand` and `scaleLinear` for positioning, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. The visualization renders as an SVG with animated opacity changes on mouse hover and includes hover tooltips via `<title>` elements, with data sourced from a personal electricity consumption dataset.

NNaimisha-M
84% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This interactive stacked bar chart visualizes two years of personal electricity consumption across three residential accounts, with monthly usage broken down by account number. Built with D3 v7, the visualization employs `d3.stack()` to aggregate the data and `scaleBand`/`scaleLinear` axes to map dates and kilowatt-hours. Each colored segment represents one account, rendered as SVG rectangles with hover effects and tooltips showing individual consumption values. The chart uses `scaleOrdinal` with the `d3-scale-chromatic` scheme to distinguish accounts.

Aarchob
83% match
Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This interactive stacked bar chart visualizes two years of personal electricity consumption across three residential accounts, with monthly usage broken down by account number. Built with D3 v7, the visualization employs `d3.stack()` to aggregate the data and `scaleBand`/`scaleLinear` axes to map dates and kilowatt-hours. Each colored segment represents one account, rendered as SVG rectangles with hover effects and tooltips showing individual consumption values. The chart uses `scaleOrdinal` with the `d3-scale-chromatic` scheme to distinguish accounts.

Aarchob
83% match