Skip to main content
SimilarExport ZIP
100%

V5- OK at the mo - bar

✓ Published1🌍 Public
Mmab3105
Last edited Feb 13, 2020
Created on Feb 11, 2020

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.

AI-generated description

New Chart in v5

MIT Licensed

Similar vizzes

Loading thumbnail…

my - Testing BAR chart

This bar chart displays monthly energy consumption in kilowatt-hours across multiple building sites, with each bar representing a site’s total usage for a given month. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars and map values, while `d3.nest()` groups the data by site and date. Data is loaded from a CSV file using `d3.csv`, and the SVG rendering applies a categorical color scale to distinguish sites.

Mmab3105
87% 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
84% match
Loading thumbnail…

my - Testing !!!! BAR chart

This bar chart compares monthly energy consumption in kilowatt-hours across multiple sites, with each site distinguished by color. It uses a CSV data source and renders an SVG with D3 v5 APIs, including `scaleBand`, `scaleLinear`, `axisLeft`, `axisBottom`, and `d3.nest` to organize the data. The chart displays axes with rotated date labels and overlays a line path per site.

Mmab3105
84% match
Loading thumbnail…

my - Testing DONT CHANGE!!!! BAR chart

This bar chart displays monthly energy consumption in kilowatt-hours across multiple sites, with each site distinguished by color. The visualization uses D3 v5 to load and parse the MonthData.csv file, then renders an SVG bar chart using `scaleBand` for the x-axis and `scaleLinear` for the y-axis. Through `d3.nest` and `d3.line`, the chart also overlays line paths showing data trends per site, with color assignments made via `scaleOrdinal` and axis labels rotated using `axisBottom`.

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

multi Charts - test>

This example displays monthly energy consumption in kilowatt-hours across multiple sites, with each site color-coded and rendered as a separate small bar chart arranged in a grid. The visualization uses D3 v5 to load data from a CSV file, parse dates with `d3.timeParse`, and create individual SVG charts for each site. Hovering over a bar highlights it in orange, and a tooltip provides detailed values. The charts share common axes and scales, computed using `d3.scaleBand` and `d3.scaleLinear`, to facilitate comparison across sites and time periods.

Mmab3105
82% match
Loading thumbnail…

Multi Charts - backup>

This example shows monthly electricity consumption in kilowatt-hours across multiple sites, with each site’s data displayed in its own small bar chart arranged vertically. Hovering over a bar highlights it in orange, and tooltips provide additional detail. The visualization uses D3 v5 to load the CSV, parse dates with `d3.timeParse`, and nest data by site with `d3.nest`. Each sub-chart renders an SVG with a band scale for the x-axis, a linear scale for the y-axis, and rectangles for bars.

Mmab3105
80% match
Loading thumbnail…

Multi Charts - backup>

This visualization presents monthly energy consumption data as multiple small SVG charts, one per site, with each chart combining bar and line representations. The code uses D3 v5 with `d3.nest()` to group the data from MonthData.csv by site, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.axisBottom` and `d3.axisLeft` for ticks. Each chart displays site-specific bars and a colored line path, with hover effects on rectangles and a formatted time axis.

Mmab3105
79% match