Hourly Electricity Usage Trend

100%

Hourly Electricity Usage Trend

✓ Published1🌍 Public

Last edited Jan 2, 2024

Created on Jan 2, 2024

The visualization displays a 14-day hourly electricity usage trend as a grid table, comparing each day’s usage by hour (from 00:00 to 23:50) with color-coded numeric values. It fetches JSON data from a GitHub gist using the Fetch API, then processes timestamps with Moment.js to calculate differences between consecutive readings. The table is dynamically generated via JavaScript’s DOM manipulation, showing weekday labels like “上上” for older days. The data represents total electricity used across multiple categories, rounded to two decimal places.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hourly Electricity Usage Trend Chart

This visualization displays a 14-day trend of hourly electricity usage, with each line representing a specific time of day (e.g., "HH:mm") and showing how usage varies across the recent two weeks. It fetches JSON data from a GitHub repository and processes it with Moment.js to calculate usage differences and label dates as weekday names. The chart is rendered using Chart.js on a Canvas element, with randomly assigned line colors. The y-axis represents electricity generation/usage, while the x-axis categorizes dates by weekday.

Yyuting89830@gmail.com

90% match

Loading thumbnail…

Hourly Electricity Usage Trend Chart

This visualization shows hourly electricity usage trends over the past two weeks, with each line representing a specific time of day (e.g., "08:30") plotted across weekdays and labeled like "週一" or "上週一". The line chart is rendered on a Canvas element using Chart.js, which draws multiple randomly colored series to reveal daily consumption patterns. The underlying script fetches JSON data from a GitHub-hosted summary log, then uses moment.js to calculate timestamps and aggregate power usage values for each 10-minute interval. Data is grouped by weekday labels with a custom diffTrend function that distinguishes current-week days from previous-week ones.

Yyuting89830@gmail.com

90% match

Loading thumbnail…

final 每日發電量

This chart visualizes the daily electricity generation trend over the past week, with each line representing a specific 10-minute interval (from 00:00 to 23:50) and plotting its usage values across the last seven days. The graph uses Chart.js to render a line chart on an HTML5 Canvas, with each time slot assigned a random color. Data is fetched from a remote JSON summary log hosted on GitHub, and the calculation of the trend relies on Moment.js to handle date arithmetic and timestamp conversions. The visualization focuses on comparing how usage at the same minute varies day-to-day.

Yyuting89830@gmail.com

76% match

Loading thumbnail…

summary table

This example displays a summary table of daily power usage and capacity data, with each row representing a date and columns for each measured category, showing values as “used / cap.” The page fetches JSON data from a remote GitHub repository via the `fetch` API and builds the table dynamically using the Document Object Model (DOM) methods `insertRow`, `insertCell`, and `createElement`. The table’s header is generated from the first data entry’s keys, and all table content is rendered entirely through JavaScript on page load. It relies on the browser’s native `window.onload` event and JavaScript’s `response.json()` method.

Yyuting89830@gmail.com

70% match

Loading thumbnail…

台電即時資訊表

This live-updating table displays real-time power consumption and capacity data for Taiwan's power grid. It presents each timestamped record as a row, with columns for each consumption category, showing values as "used / cap" pairs. The visualization fetches JSON data from a remote GitHub repository using the `fetch` API, then dynamically constructs an HTML table by iterating through the data object. The code uses standard DOM manipulation methods like `insertRow()` and `insertCell()` to build the table structure without external visualization libraries.

Yyuting89830@gmail.com

70% match

Loading thumbnail…

Untitled

This bar chart displays monthly electricity consumption for a two-year period, using green and blue bars to represent different billing accounts. The visualization loads data from a local CSV file and renders an SVG graphic using D3.js version 3.5.17. The code employs d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for tick marks and labels. Month and year values are parsed with d3.time.format, while the vertical axis label is rotated using SVG transforms.

Vvenkatajayanth03

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

67% match

Loading thumbnail…

Vega-Lite MFRED Hourly Kw vs Time Histogram

This visualization displays hourly electricity consumption in kilowatts over time, with individual aggregator groups colored distinctly and tooltips revealing their names. Built with the Vega-Lite API and D3, it transforms 15-minute CSV data from MFRED by grouping timestamps into hourly intervals and summing values across 26 aggregator channels. The bar chart uses `vl.markBar` with configurable axis styling and a dark color scheme, rendered as an SVG via Vega-Lite’s view engine.

PPeter Cordone

67% match