MFRED Kw Histogram

100%

MFRED Kw Histogram

✓ Published0🌍 Public

Last edited Nov 9, 2021

Created on Nov 9, 2021

Forked from Vega-Lite MFRED Hourly Kw vs kVAR

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.

AI-generated description

A visualization constructed using the vega-lite-api.

MIT Licensed

Similar vizzes

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

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

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

82% match

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

81% match

Loading thumbnail…

V5- OK at the mo - bar

A grouped bar chart displays total monthly energy consumption in kilowatt-hours for several building sites, with each bar representing a site's aggregate usage and color highlighting individual sites. The visualization uses D3 v5 with an SVG rendering, a band scale for site positioning, and a linear scale for the y-axis. Data is loaded from a CSV file, parsed with d3.timeParse, and aggregated using d3.nest() to compute site totals. Interactive tooltips appear on mouseover to show the precise consumption value, while bar hover effects change their fill color to orange.

Mmab3105

65% match

Loading thumbnail…

my DC-Multi BAR chart

This visualization displays monthly energy consumption in kilowatt-hours across multiple building sites, with each site represented by a distinct color. It combines bar charts and line graphs within small multiples, plotting time on the x-axis and energy values on the y-axis. The code uses D3 v5’s `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `nest` functions to process the MonthData.csv file and render SVG elements. Colored bars show individual monthly readings, while overlaid lines and labels track each site’s trend over time.

Mmab3105

64% match

Loading thumbnail…

my - Testing kWh Month chart

This example visualizes monthly electricity consumption (kWh) across multiple building sites, displayed as a grouped bar chart. Each month shows separate bars for different sites, with the count of kilowatt-hours encoded by bar height. The chart uses d3.csv to load the data, d3.nest for grouping records by date and site, and d3.scaleBand for positioning both the month groups and the site sub-groups. Axes are rendered with d3.axisBottom and d3.axisLeft, and the SVG output is styled with CSS. Data comes from a local CSV file with Site, DateDay, and SumOfKwh columns.

Mmab3105

64% match

Loading thumbnail…

Untitled

A histogram displays the distribution of a dataset of numeric values, with bars colored on a gradient from light to dark steelblue based on frequency. A black kernel density estimation curve overlays the bars, and users can adjust both the number of histogram bins and the bandwidth of the Gaussian kernel via range sliders, triggering smooth transitions. The visualization is built with D3 v4, using `d3.histogram`, `d3.layout.histogram`, `d3.scale.linear`, and SVG rendering, with the density curve computed via a custom `kernelDensityEstimator` and drawn using `d3.line` with `d3.curveBasis`.

HHugo-Dominguez

63% match