Untitled

100%

✓ Published0🌍 Public

Last edited Mar 23, 2020

Created on Mar 23, 2020

Forked from 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.

AI-generated description

New Chart in v5

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A small-multiple area chart displays monthly energy consumption across different sites, with each panel representing a distinct location. The visualization uses D3.js v4 to load data from a CSV file, parse the time series, and render a separate small SVG chart for each site. The code employs d3.nest() to group data by site, d3.line() for path generation, and d3.scaleOrdinal() for color encoding, with axes rendered per chart.

Mmab3105

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

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

79% match

Loading thumbnail…

Untitled

This example displays a multi-series line chart where each line represents a category over time. A dropdown menu allows the viewer to select a specific group, which triggers a smooth transition that updates the displayed path to show that group’s data. The visualization uses D3 v6, reading CSV data from a remote URL, with an ordinal color scale and linear axes for years and numeric values. The chart is rendered as an SVG and the update is animated via a one-second transition on the path’s `d` attribute.

AAdvait Maduskar

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

78% match

Loading thumbnail…

Untitled

This bar chart displays monthly electricity consumption for a two-year period, using green and blue bars to represent different billing accounts. The visualization loads data from a local CSV file and renders an SVG graphic using D3.js version 3.5.17. The code employs d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for tick marks and labels. Month and year values are parsed with d3.time.format, while the vertical axis label is rotated using SVG transforms.

Vvenkatajayanth03

78% match

Loading thumbnail…

Untitled

This interactive line chart displays temperature data in either Fahrenheit or Celsius from a CSV file, with a dropdown menu to switch between metrics. The visualization uses D3.js v5 to render SVG paths with cardinal curve smoothing, and includes a hover tooltip that reveals exact dates and values using bisector-based mouse tracking. The chart updates its y-axis domain and line paths dynamically when the metric changes, with CSS transitions providing smooth animations.

RResl411

77% match

Loading thumbnail…

Untitled

A dropdown menu switches between three data series in this connected scatterplot, updating both a line path and circular points with smooth transitions. The visualization reads time-series data from an external CSV file and renders it as an SVG using d3.line, scaleLinear axes, and transition methods for animated updates. A second custom chart built with d3's modular API and scalePoint scales demonstrates categorical axis support with staggered circle entrance animations.

Eemberix@gmail.com

77% match