Household monthly electricity consumption

100%

Household monthly electricity consumption

✓ Published0🌍 Public

Last edited Apr 12, 2018

Created on Apr 12, 2018

Radial bar charts display household monthly electricity consumption and oyster harvest revenue by decade, with a button toggling between the two datasets. Each decade appears as a colored arc whose length encodes the metric value, using D3 scales and arcs with hover effects. The visualization loads CSV data from files, animates arcs via `transition.attrTween`, and includes tooltips and an adjustable radial axis.

AI-generated description

forked from <a href='http://bl.ocks.org/AntonOrlov/'>AntonOrlov</a>'s block: <a href='http://bl.ocks.org/AntonOrlov/6b42d8676943cc933f48a43a7c7e5b6c'>Radial Bar Chart built with D3</a>

forked from <a href='http://bl.ocks.org/eamonm95/'>eamonm95</a>'s block: <a href='http://bl.ocks.org/eamonm95/06017a9027374cc1ac1fddd901bfcf27'>Radial Bar Chart built with D3</a>

forked from <a href='http://bl.ocks.org/Heywhoyou22/'>Heywhoyou22</a>'s block: <a href='http://bl.ocks.org/Heywhoyou22/992b95c5fa05697a8001fe91e8c0b926'>Radial Bar Chart built with D3</a>

forked from <a href='http://bl.ocks.org/Heywhoyou22/'>Heywhoyou22</a>'s block: <a href='http://bl.ocks.org/Heywhoyou22/2fe49475fc6d0acbb7aebe1dadbf5a1f'>Radial Bar Chart built with D3</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Household monthly electricity consumption

This radial bar chart visualizes household monthly electricity consumption, showing energy usage values for months from January through May. A toggle button switches between revenue and landings data by decade from the Oyster.csv dataset, with dollar amounts adjusted to 2016 inflation. Built with D3 v4, the visualization uses SVG paths with `d3.arc` and `transition.attrTween` for animated arc rendering. The chart includes interactive features such as hover tooltips, radial and axial axes, and a smooth data-switching mechanism that rebuilds the visualization on demand.

HHeywhoyou22

93% match

Loading thumbnail…

Household monthly electricity consumption

This radial bar chart displays household monthly electricity consumption, with each arc representing a month’s value from a small energy.csv dataset. A toggle button switches the display between revenue and landings data from Oyster.csv, adjusting the arc lengths accordingly. Built with D3 v4, the visualization uses SVG paths, `d3.arc` for geometry, and `transition.attrTween` to animate arcs on load. Hovering reveals a tooltip, while axis circles and labels are generated via D3 scales.

HHeywhoyou22

93% match

Loading thumbnail…

Household monthly electricity consumption

A radial bar chart displays household monthly electricity consumption from the `energy.csv` dataset. Each month is represented as an arc, with its angular extent and radial position encoding the value. The visualization animates the arcs growing into place using `transition.attrTween` and `d3.interpolate`. Built with D3 v4, the chart renders as SVG and includes interactive tooltips on mouseover, revealing each month's exact consumption value.

LLaurynKW

91% match

Loading thumbnail…

Household monthly electricity consumption

This example shows yearly revenue for Eastern oysters from 1950 to 2016 in a radial bar chart, where each arc represents one year and its angular extent encodes the revenue value. The chart animates each arc’s growth using `transition.attrTween` with an interpolator, and provides tooltips on hover. It uses `d3.csv` to load the data, `d3.arc` for the arcs, `d3.scaleLinear` for mapping values to angles, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. The data comes from a CSV file containing year, species, metric tons, pounds, and revenue.

LLaurynKW

90% match

Loading thumbnail…

Household monthly electricity consumption

This example visualizes household monthly electricity consumption as a radial bar chart, where each month is represented by an arc whose length corresponds to energy usage. The D3 v4 code reads data from an external CSV file and uses `d3.arc`, `d3.scaleLinear`, and `d3.scaleOrdinal` to construct the chart. Animated transitions are applied via `transition.attrTween` with `d3.interpolate`, while hover interactions display tooltips showing raw values. The SVG rendering includes radial and axial axes with tick labels.

HHeywhoyou22

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

89% match

Loading thumbnail…

Electric Bar Chart Radial Brushing

This example visualizes monthly electric consumption for a selected utility account using a radial stacked bar chart. The circular chart displays monthly usage totals broken down by bill year, with a legend identifying the color-coded stack segments. A small context chart below provides a brushable timeline of yearly totals, allowing users to filter the radial chart’s date range by brushing across the stacked bars. The visualization uses D3 v7 with SVG rendering, employing `d3.scaleRadial`, `d3.stack`, `d3.arc`, `d3.brushX`, and `d3.lineRadial`, while loading data from a CSV file hosted on GitHub.

PPeter Cordone

79% match

Loading thumbnail…

Radial Stacked Bar Chart

This radial stacked bar chart visualizes personal electricity consumption across three accounts over a two-year period, with each ring segment representing a month's total kilowatt-hours stacked by bill year. A dropdown menu switches between accounts, and hover interactions reveal usage details. Built with D3 v7, the chart uses `scaleRadial`, `scaleBand`, and `arc` to generate the SVG wedges, while `d3.stack` structures the data and a reusable barChart component manages transitions. The underlying dataset comes from a CSV of electric utility bills, rendered in SVG with animated updates.

RRoland

79% match