Skip to main content
SimilarExport ZIP
100%

Dynamic Line II

✓ Published0🌍 Public
HHariprashanth75
Last edited Apr 21, 2021
Created on Apr 21, 2021
Forked from Hello VizHub

A multi-panel line chart compares brain-computer interface (BCI) frequency data across four wave types—Alpha, Beta, Theta, and Delta—using dropdown menus to toggle between electrode channels (e.g., F3, F4, O1) for each panel. The main chart visualizes changes in signal amplitude over time, with a separate panel for comparing multiple waves simultaneously. The visualization loads data from CSV files and renders animated SVG paths using D3 v4, with axes built via `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. A `d3.scaleOrdinal` color scale distinguishes channels, and `d3.schemeSet2` provides the palette.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Dynamic Line

This example visualizes EEG frequency band data as multiple animated line charts, tracking signal amplitudes across time for different channels. Each chart displays a line for a specific frequency band (alpha, beta, delta, theta) using distinct colors against a dark background. The visualization employs D3.js version 3's SVG rendering, using `d3.svg.line()` to generate paths and `d3.scale.linear()` for coordinate mapping. Data is loaded from CSV files containing epoch-based measurements from multiple sensor channels. The code renders eight separate SVG charts, each highlighting a different channel's F4 or F3 values.

HHariprashanth75
87% match
Loading thumbnail…

Multiple Line Chart

This example displays a multiple line chart tracking alpha power EEG signals across F3, F4, C3, Cz, C4, P3, P4, O1, and O2 electrode channels over time (Epoch). Each channel is rendered as a separate line using d3.line() with curveBasis smoothing on an SVG canvas. The code implements linear scales for both axes, axis generators for ticks and labels, and loads the dataset from a CSV file. Styling is defined in an external CSS file, with the visualization built entirely with D3 v6 APIs.

HHariprashanth75
79% match
Loading thumbnail…

Above Line F3

This example visualizes alpha and beta frequency band amplitudes recorded from the F3 electrode in EEG data. The line chart displays signal amplitudes over time, with buttons allowing users to toggle between alpha and beta datasets. The visualization uses D3 v3 and v4 to render SVG paths with green strokes on a black background, featuring zoom controls and axis updates. Data is loaded from local CSV files containing time-series measurements with epoch values.

HHariprashanth75
79% match
Loading thumbnail…

Above Line F4

This interactive line chart visualizes alpha and beta EEG frequency band power at electrode F4, alongside F3, over time. The visualization uses D3.js (v3/v4) to render SVG paths that users can switch between using the Alpha and Beta buttons. The line chart includes zoom controls and axes, with data loaded from local CSV files. The graph updates its domain and data when the buttons are clicked, and the legend indicates that the displayed lines represent F4 frequency measurements.

HHariprashanth75
78% match
Loading thumbnail…

Alpha, Beta, Valence

This interactive visualization charts EEG-derived alpha and beta frequency band power from frontal electrodes F3 and F4, alongside a computed valence metric over time. The SVG line chart allows users to toggle between Alpha and Beta datasets, zoom in and out, and click to update axes, with colored lines distinguishing channels and valence segments. It uses D3 v3 and v4 for data binding, scales, axes, and zoom behavior, loading comma-separated values from CSV files.

HHariprashanth75
76% match
Loading thumbnail…

Alpha, Beta, Arousal

This visualization charts alpha and beta EEG frequency bands from electrodes F3 and F4, alongside a derived arousal metric across epochs. The SVG line chart plots F3 and F4 values from CSV data, with interactive buttons to toggle between frequency bands and zoom controls using d3.behavior.zoom. A legend distinguishes the colored lines, and clicking the chart updates the axes dynamically. Data is loaded via d3.csv and rendered using d3.svg.line and d3.svg.axis.

HHariprashanth75
76% match
Loading thumbnail…

Line Chart

This line chart visualizes the F4 electrode’s alpha power across Epoch values, using a smooth curved path to highlight trends over time. The chart includes labeled axes, gridlines, and a title. Built with D3 v6, it loads CSV data and renders an SVG, employing `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` with a `curveBasis` interpolation for the line.

HHariprashanth75
75% match
Loading thumbnail…

Valence Layer

This interactive visualization charts valence values derived from alpha and beta EEG frequencies recorded at the F3 and F4 electrode sites. Users can toggle between the four frequency-channel combinations via buttons, with the colored line representing the selected signal and a zoom feature for closer inspection. The example loads data from separate CSV files for each frequency band and uses D3.js version 4 to render the line chart as an SVG with animated transitions. The underlying code also demonstrates importing modules from local ES6 files and loading D3 via UNPKG.

HHariprashanth75
75% match