Skip to main content
SimilarExport ZIP
100%

Vega-Lite MFRED Hourly Kw vs Time Histogram

✓ Published0🌍 Public
PPeter Cordone
Last edited Nov 9, 2021
Created on Nov 9, 2021

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

Loading thumbnail…

Vega-Lite MFRED Hourly Kw vs Time

This visualization plots hourly kilowatt readings from the MFRED dataset against time, with each of the 26 generator units (AG01 through AG26) colored distinctly by category. It uses the Vega-Lite API, registered with vega and vega-lite, to render point marks on an SVG canvas. The data is loaded via d3.csv, aggregated from 15-minute intervals into hourly totals using d3.group, and the chart auto-fits to the window size. Tooltips display the generator name on hover.

PPeter Cordone
90% match
Loading thumbnail…

Vega-Lite MFRED Hourly Kw vs kVAR

This visualization plots hourly electrical power measurements from the MFRED dataset, comparing kilowatts (kW) against kilovolt-amperes reactive (kVAR) for multiple aggregated generator groups. Each point represents one hour of data, colored by generator group, with tooltips showing the group name. The code uses the Vega-Lite API with d3.v5 for data loading and grouping, converting 15-minute CSV data into hourly totals before rendering the scatter plot with configurable axis styling.

PPeter Cordone
87% match
Loading thumbnail…

MFRED Kw Histogram

This visualization displays a histogram of kW and kVAR measurements from the MFRED dataset, with individual aggregates (AG01 through AG26) distinguished by color. The bars are rendered using the vega-lite-api’s markBar with a black background and configured axes. The data is loaded via d3.csv from a GitHub-hosted CSV file, then grouped by hour using d3.group to compute totals. The chart uses D3 v5, Vega-Lite v4, and the vega-lite-api wrapper, with a custom tooltip handler for interactivity.

PPeter Cordone
82% match
Loading thumbnail…

Vega-Lite MFRED Visualization KVAR vs KWh

This visualization plots kW against kVAR for each of 26 aggregate generators in the MFRED dataset, with points colored by generator ID to compare real versus reactive power output. It uses the Vega-Lite API with d3.v5 for data loading, transposing the CSV into per-generator records via `getData`. The chart applies custom axis and label styling from `config.js`, renders as an SVG through vega-tooltip, and displays 15-minute interval data across all generators.

PPeter Cordone
81% match
Loading thumbnail…

Vega-Lite API

This example demonstrates how the Vega-Lite API can be used to create an interactive line chart showing the price of electricity over time. The visualization plots a single series of Price values against a Date axis, with a tooltip that displays the exact price on hover. The code imports data from a CSV file hosted on GitHub, likely derived from the UCI Auto MPG dataset, and renders the chart using Vega-Lite’s `markLine` encoding. The implementation leverages the `vega-lite-api` library, registered with Vega and Vega-Lite, along with D3’s `csv` loader and the Vega Tooltip handler for interactive feedback.

EEdward Chung
72% match
Loading thumbnail…

Vega-Lite Line Chart

This visualization displays temperature readings over time as a single semi-transparent line, with tooltips revealing the associated location name for each data point. Built with the Vega-Lite API, it renders as an SVG using vega-lite v4 beta and vega-tooltip for interactive hover information. The code loads CSV data from a remote GitHub gist using d3.csv, then configures the chart dimensions to fit the full window while customizing axis colors and label styles for readability. The line mark uses explicit size and opacity settings to achieve its subtle visual effect.

Bbakstorage00001
70% match
Loading thumbnail…

Vega Lite API

This example visualizes temperature fluctuations over time using a Vega-Lite area chart, with data sourced from a CSV of weekly San Francisco temperatures. The visualization loads data via D3’s `csv` method and constructs the chart programmatically using the `vega-lite-api` library, registering it with Vega and Vega-Lite. The chart encodes time on the x-axis and quantitative temperature values on the y-axis, with a tooltip displaying the temperature. Custom styling through a `config` object adjusts axis labels, titles, and colors, while the rendering is handled as an SVG via Vega’s view renderer.

Llefat92
70% match
Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays daily gas prices across multiple stations, plotted over time as a scatterplot of firebrick-colored points. Tooltips reveal station names on hover. The chart is built using the Vega-Lite API (vl) with Vega and Vega-Lite libraries, rendering to SVG via d3.v5, and pulls data asynchronously from a CSV hosted on GitHub Gist, sourced from the UCI Auto MPG dataset.

Ttmcgirr
70% match