Skip to main content
SimilarExport ZIP
100%

Household monthly electricity consumption

✓ Published0🌍 Public
HHeywhoyou22
Last edited Apr 3, 2018
Created on Apr 3, 2018

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.

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>

gpl-3.0 Licensed

Similar vizzes

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
96% 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
95% 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
94% match
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
91% match
Loading thumbnail…

Household monthly electricity consumption

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.

LLaurynKW
90% 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
84% 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
83% match
Loading thumbnail…

Electric Bar Chart Radial Line Chart

This radial bar chart visualizes personal electric consumption across months and bill years, with each year’s usage represented as a colored ring segment around a circular time axis. A brushed bar chart below filters the displayed year range, while a dropdown menu selects between account numbers. The visualization uses D3 v7 with SVG for rendering, employing `d3.scaleTime`, `d3.scaleRadial`, `d3.lineRadial`, and `d3.brushX` for the interactive context chart. Data comes from a CSV file of electric account records, with usage measured in kilowatt-hours.

PPeter Cordone
82% match