Skip to main content
SimilarExport ZIP
100%

Fork of Hourly Electricity Usage Trend Chart

✓ Published0🌍 Public
Yyuting89830@gmail.com
Last edited Jan 2, 2024
Created on Jan 2, 2024

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Hourly Electricity Usage Trend

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.

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

Fork of Fork of Electric Bar Chart Using d3.stack

This visualization displays personal electricity consumption data across a two-year period as a stacked bar chart, with each bar segment representing usage from different household accounts. The chart uses a green and blue color scheme to distinguish between account types, with axes labeled for time periods and kilowatt-hours consumed. The visualization is built using D3.js version 7, employing the d3.stack API to structure the data, along with scaleBand and scaleLinear for positioning, and scaleOrdinal with d3.schemeCategory10 for coloring.

Aarchob
71% match
Loading thumbnail…

Fork of Fork of HTML Starter

This example visualizes hourly activity patterns across a week using a stacked bar chart. Each bar represents a day, segmented into 24 color-coded hourly datasets from midnight to 11 PM. The code uses the Chart.js library with canvas rendering, displaying a legend at the bottom and a y-axis beginning at zero. The data appears to show higher values during daytime hours and lower values at night.

NNita
71% 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
70% match
Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This visualization displays two years of personal electricity consumption across multiple household accounts, shown as stacked bar charts organized by month. Each month’s bar is segmented by account number, with green and blue colors distinguishing the accounts, and hovering reveals exact kilowatt-hour values via tooltips. The code uses d3.stack to transform the dataset, d3.scaleBand and d3.scaleLinear for axes, and d3.scaleOrdinal with d3.schemeCategory10 for colors. It renders with SVG, includes a legend, and is built from a CSV data file.

Kkechapasiin
69% 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
69% match