Skip to main content
SimilarExport ZIP
100%

Multi-Series Line Chart V7-Electric_Production

✓ Published0🌍 Public
Pprateekvasi
Last edited Apr 2, 2022
Created on Apr 2, 2022

This visualization displays monthly electric production data from 1985 to 2006 as a multi-series line chart, with each line representing a different data column from the TSV file. The chart uses D3 v7’s `d3.line` with `curveBasis` to render smooth paths and `d3.scaleTime`/`d3.scaleLinear` for axes, while `d3.zoom` enables panning and scaling along the time axis. Hovering highlights a single series by graying out others, and clicking toggles series visibility, with colors assigned via `d3.scaleOrdinal` and `schemeCategory10`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 8 -- Multi-Series Line Chart V7-Electric_Production

This interactive multi-series line chart visualizes monthly electric production values from 1985 onward, with each line representing a data column from a TSV file. Users can hover over lines to highlight them, click to toggle their visibility, and zoom in on the time axis. The visualization uses D3 v7’s `d3.line` with `d3.curveBasis`, `d3.scaleTime`, `d3.scaleOrdinal`, and `d3.zoom`, rendering SVG paths with animated transitions. Data is parsed with `d3.timeParse` and loaded via `d3.tsv`.

Vvishusikka
92% match
Loading thumbnail…

Dynamic Linechart

A dynamic line chart visualizes electric production over time, progressively revealing data points as the animation advances. The chart uses D3’s `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes, while a `line()` generator draws the path and circles mark each observation. Data from the Electric_Production dataset is loaded via `d3.csv` and parsed with `d3.timeParse`. The visualization animates by incrementing the number of plotted points, updating the SVG in a `setInterval` loop.

AAbhinay-Mannepalli
79% match
Loading thumbnail…

Multi-Series Line Chart TSLA

This multi-series line chart visualizes Tesla stock price data from the `electric_production.tsv` file, displaying multiple time-series lines over a shared date axis. Using D3 v7 with SVG rendering, the visualization supports interactive zooming via `d3.zoom` and panning, with individual series toggleable through click and hover interactions that adjust line opacity and color emphasis. The chart applies basis curve smoothing for line rendering, and the color scheme uses `d3.schemeCategory10` to distinguish each series. Animated transitions are included when scaling the view.

Ddriftcafe
78% match
Loading thumbnail…

multiple area

This chart displays multiple area and line series for time-varying energy data, grouped by stream name. It uses D3 v5 to scale time and linear axes, and renders SVG paths. The visualization employs `d3.area` for filled regions and `d3.line` for stroke lines, with colors assigned via `d3.scaleOrdinal` and `schemeCategory10`. Gradient definitions and clipping paths are added to highlight the area series. The data consists of energy readings with timestamps and stream identifiers.

BBhojarajHG
73% 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
72% 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
72% match
Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays weekly temperature readings across multiple cities, with each colored line representing a different city’s production season. It uses D3 v5 with nested data grouping via `d3.nest()` and renders SVG paths generated by `d3.line()` with a basis curve. The chart includes axes from `d3.axisBottom` and `d3.axisLeft`, and a custom color legend built with `scaleOrdinal` and `schemeCategory10`. Data comes from the Data Canvas - Sense Your City dataset, loaded as CSV.

SSean Moore
71% match
Loading thumbnail…

Multi-Series Line Chart V7

This interactive multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin from October 2011 through April 2012. It displays three color-coded temperature trends over time, with a legend for city selection. The visualization supports zooming and panning along the time axis, and users can click legend items to toggle the visibility of individual city lines. Hovering over a legend dims non-selected series. The code uses D3 v7 with `d3.scaleTime`, `d3.line` with `d3.curveBasis`, and an SVG rendering. It loads data from a TSV file and includes animation via D3's transition and zoom APIs.

Pprateekvasi
71% match