my Filter Chart - Do Not edit

100%

my Filter Chart - Do Not edit

✓ Published1🌍 Public

Last edited Feb 19, 2020

Created on Feb 13, 2020

Forked from Untitled

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.

AI-generated description

New Chart in v5

MIT Licensed

Similar vizzes

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

80% match

Loading thumbnail…

Untitled

This interactive line chart displays energy consumption data across multiple building sites, allowing users to switch between locations via a dropdown menu. The visualization employs an SVG-rendered multi-series plot with a smooth animated transition when a new site is selected. The code uses `d3.csv` for data ingestion, `d3.scaleLinear` for axes, `d3.line` for plotting, and `d3.transition` to animate changes. A color scale assigns distinct hues to each site. The chart reveals periodic patterns in usage, with site 7 showing notable gaps where zero consumption was recorded.

KKeerthiKandadai

80% match

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

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

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

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

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

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

75% match