Skip to main content
SimilarExport ZIP
100%

CMU Trail

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

This interactive EEG data explorer visualizes brainwave activity from the CMU Trail dataset. Users select EEG channels to plot against each other, choose between scatterplot, bar chart, or line graph visualizations, and filter by wave types (Alpha, Beta, Gamma, Delta). The scatterplot uses d3.scaleLinear for axes with animated circle transitions via transition.attr, while the line graph uses d3.line with curveBasis. Data is loaded asynchronously from CSV files using d3.csv, with dropdown menus implemented as a reusable ES6 module component.

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…

CMU

This example visualizes EEG signal data, letting users explore relationships between channels (e.g., F3 vs. F4) through scatterplots or line graphs. Buttons switch between beta, alpha, gamma, delta, and other datasets loaded from CSV files. The interface includes dropdown menus for selecting x- and y-axis columns and the chart type. Using D3 v6, the code builds SVG visualizations with animated circle transitions on scatterplots, and uses `scaleLinear`, `axisLeft`, `axisBottom`, and a `line` generator with `curveBasis`.

HHariprashanth75
86% match
Loading thumbnail…

Interactive ScatterPlot

This interactive scatterplot visualizes EEG signal data, plotting pairs of electrode channels (such as F3 vs. F4) as animated circles. Users select the x and y columns from dropdown menus built with a custom ES6 module, and two slider controls adjust the opacity of the circles and background. The visualization uses D3 v6 APIs including `scaleLinear`, `axisLeft`, `axisBottom`, and `transition().duration().delay()` to animate points from the center. The SVG rendering loads data from a CSV file and updates axes and labels on selection.

HHariprashanth75
76% match
Loading thumbnail…

Dynamic Line II

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.

HHariprashanth75
74% match
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
72% 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
72% 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
71% 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
71% match
Loading thumbnail…

Linear Regression and Scatterplot

This visualization shows a scatterplot of EEG data, plotting F3 against F4 values from a CSV dataset, with a red dashed regression line overlaid to display the linear relationship between the two attributes. Interactive dropdown menus allow users to select which EEG channels to compare. The chart is rendered using D3 v4, employing `d3.scaleLinear` for axes, `d3.csv` for loading data, and a custom `calcLinear` function for computing regression parameters, with circles representing individual data points in SVG.

HHariprashanth75
70% match