Skip to main content
SimilarExport ZIP
100%

my - Testing kWh Month chart

✓ Published0🌍 Public
Mmab3105
Last edited Feb 19, 2020
Created on Feb 19, 2020

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.

AI-generated description

This example visualize the Air Traffic Passenger Statistics dataset from DataSF(https://datasf.org/opendata/). The full citation is :

Data acquired from https://datasf.org/opendata/ on February 11 2020. Aggregated data on this page is made freely available under Open Data Commons Public Domain Dedication and License(https://opendatacommons.org/licenses/pddl/1.0/)

The direct link to data set is: https://data.sfgov.org/Transportation/Air-Traffic-Passenger-Statistics/rkru-6vcg

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
90% 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
86% 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
86% 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
85% 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
84% 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
84% 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
83% match
Loading thumbnail…

my Filter Chart - Do Not edit

This interactive line chart displays monthly energy consumption (SumOfKwh) for different building sites, loaded from the CSV file `MonthData.csv`. A dropdown menu, populated from the first column, allows the user to select a site, which triggers a smooth 1-second animated transition of the line to show that site's time series. The visualization uses the D3.js v4 library, specifically `d3.csv` for data loading, `d3.scaleBand` and `d3.scaleLinear` for the axes, and `d3.line` to generate the path, with the color assigned via a categorical `d3.schemeSet2` scale.

Mmab3105
80% match