H

Hariprashanth75

@Hariprashanth75·44 public vizzes

Loading thumbnail…

Long Valence Arousal

Two physiological signals, arousal and valence, are visualized as a long, horizontal, animated line chart. The visualization plots data from `valenceTotal.csv` and `arousalTotal.csv` over epochs, with a thick, gradient-colored stroke transitioning from blue to red. Buttons allow a user to switch between the two datasets, and a "Move" operation shifts the chart horizontally. The implementation uses D3.js version 3.5.17, including `d3.scale.linear`, `d3.svg.line`, and `d3.csv`, within an SVG canvas.

Loading thumbnail…

Untitled

This example visualizes the progression of a line chart tracking a signal over time using D3.js. It reads CSV data files containing time-series measurements and displays them as multiple filtered lines on an SVG canvas. The code uses D3 v3’s `d3.svg.line`, `d3.time.scale`, and `d3.svg.axis` to render the chart with a date-based x-axis and linear y-axis. Interactive mouse-over effects are partially implemented, though the mouse-line overlay is not fully functional.

Loading thumbnail…

Long Valence Arousal 2

This example visualizes EEG arousal and valence data over time as a thick, gradient-colored line chart against a dark background. It plots the F4 frequency values from the provided CSV files for each epoch, using a blue-to-red gradient to indicate signal intensity. The visualization is built with D3.js, employing linear scales, SVG axes, and a line generator, with small circles marking each data point that reveal frequency details on click. The black canvas and exaggerated chart dimensions emphasize the waveform's shape and peaks.

Loading thumbnail…

Long Valence Arousal static axis

Two EEG electrode time series, valence and arousal, are plotted as animated gradient-stroked line charts over a black background. The static axes are labeled in yellow, with hover tooltips on the circular data points. The code uses D3 v3 and jQuery to load CSV data, apply linear scales, and draw SVG paths with a blue-to-red linear gradient, demonstrating data import and SVG rendering.

Loading thumbnail…

Context

This example presents a stark, minimal web page that displays a single portrait image against a black background. The large body text is styled to occupy the full width, while the image is offset to the left with a gray border. The page relies on raw HTML and CSS to structure and style the content, with a small JavaScript snippet logging a message to the browser's developer console. It demonstrates a basic, static layout without any interactive or data-driven visualization elements.

Loading thumbnail…

Check Move

This example displays the text “Hello VizHub!” centered on the page in large type. The code loads D3 v5 from a CDN and imports the `select` function from the D3 API to target the `#message` div, setting its text content to a string exported from a local ES6 module. It also includes a separate CSS file that defines the message’s alignment and font size.

Loading thumbnail…

Swipe function

This example demonstrates swipe detection on a web page, where a user can swipe left, right, up, or down on a touch surface to trigger a visual response. The interface displays a message indicating the direction of the swipe. The code implements a custom `swipedetect` function using the `touchstart`, `touchmove`, and `touchend` events, calculating distance traveled and elapsed time to determine the swipe direction. The result is shown in the `#touchsurface` div, which has a styled green border and yellow text, with the background set to black via CSS.

Loading thumbnail…

Third Valence Arousal(Double swipe)

This example shows three segments of arousal and valence data plotted over time, with a gradient stroke transitioning from blue to red. A series of buttons lets the user switch between different data views, such as individual arousal or valence segments, or trigger a “Move” operation. The visualization uses D3.js version 3 to load CSV data, create scales, axes, and an SVG line chart, and update the display based on user input. The chart is rendered with an SVG path and a linear gradient, with circles marking each data point.

Loading thumbnail…

Third Valence Arousal

A viewer for EEG arousal and valence signals renders a thick, color-gradient line (blue to red) across time, with interactive buttons to switch between six datasets. Drawn as an SVG using D3.js v3, the chart maps Epoch to the x-axis and F4 signal amplitude to the y-axis. The tooltip on hover reveals data point values, while axes are styled in yellow against a black background.

Loading thumbnail…

Second Valence Arousal

This example plots time-series measurements of arousal and valence from an EEG dataset (channel F4) as an animated, interactive line chart. The visualization displays one of three data segments at a time, with buttons to switch between arousal and valence signals, or to cycle through the segments. The chart uses a gradient stroke from blue to red to encode the signal amplitude, while individual samples appear as small yellow dot markers on click. The code uses the D3.js library, specifically `d3.csv` for data loading, `d3.scale.linear` for axes, and `d3.svg.line` for the path geometry.

Loading thumbnail…

First Valence Arousal

This visualization compares arousal and valence signals over time using a line chart with a gradient stroke. The y-axis shows the signal amplitude of F4, while the x-axis represents the epoch. Interactive buttons let a user toggle between displaying the arousal and valence datasets, or trigger a movement animation. The chart is built with D3.js, loading data from CSV files (arousal*.csv, valence*.csv) and using SVG paths with a linear gradient and scatter plot points for onClick tooltips.

Loading thumbnail…

Sixth Valence Arousal

This interactive line chart explores time-series predictions of valence and arousal from EEG data. Users toggle between different forecast models (ARMA, ARIMA, SARIMAX) and raw F4 measurements via buttons. The visualization uses D3.js (v3) to construct the SVG with a linear gradient stroke, animated updates, and a tooltip. Data is loaded from local CSV files using `d3.csv`.

Loading thumbnail…

Fifth Valence Arousal

This interactive visualization compares EEG-derived arousal and valence signals with their ARMA, ARIMA, and SARIMAX model predictions. The SVG chart renders animated time-series data from CSV files using D3.js, with buttons toggling between prediction outputs. The F4 electrode signal is also displayed for comparison against the model fit.

Loading thumbnail…

Valence and Arousal wtih Epochs

This interactive visualization plots arousal and valence values across 90 epochs, displaying each metric as a separate line graph with data points. The user can toggle between the two EEG-derived signals via buttons. Built with D3 v4, the visualization uses a linear gradient from blue to red to encode intensity, and circles with tooltips for data inspection. The data is loaded from remote CSV files, with axes styled in yellow against a black background.

Loading thumbnail…

Valence and Arousal wtih Epochs 90-180

This example visualizes valence and arousal data across epochs 90-180 using two overlaid SVG line charts with yellow axes and a blue-to-red gradient stroke. The arousal chart displays a thin line with clickable circles that show tooltips, while the valence chart uses a thicker gradient line. Both charts load CSV data via `d3.csv`, scale axes with `d3.scaleLinear`, and render paths using `d3.line`. The visualization demonstrates D3 v4 imports, local ES6 modules, and interactive tooltip behavior on a black background.

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.

Loading thumbnail…

Arousal Layer

Arousal Layer visualizes EEG electrode data from channels F3 and F4, plotting alpha and beta frequency band values over time. The visualization, built with D3.js v3/v4, renders multiple line graphs as SVG paths with animated transitions, allowing users to toggle between AlphaF3, AlphaF4, BetaF3, and BetaF4 data series via buttons. The chart displays epochs on the x-axis and amplitude values on the y-axis, with a legend indicating arousal periods across different epoch ranges. Interactive zoom controls (plus/minus buttons) enable detailed examination of the time series data. The visualization uses D3's scales, axes, and line generators to render the physiological measurement data.

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.

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.

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.

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.

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.

Loading thumbnail…

Valence and Arousal with Epochs 180-270

This example visualizes predicted arousal values for epochs 181–200, plotting three time-series models—ARMA, ARIMA, and SARIMAX—as thick gradient lines overlaid with clickable yellow scatter points. A second heading for valence prediction is present, though its plotting logic is incomplete. The visualization uses d3.csv to load remote data, d3.scaleLinear for axes, and d3.line with a linearGradient stroke to encode values. Tooltips appear on click using d3 transitions, while the SVG renders on a black background with yellow axis labels.

Loading thumbnail…

HARIARMA

Two line charts display the F3 and F4 time-series data from CSV files, comparing actual values with forecasts from SARIMAX, ARMA, and ARIMA models. Interactive buttons trigger updates to the displayed forecast series. The visualization uses D3.js for SVG rendering, with `d3.svg.line` and `d3.time.format` handling the path generation and coordinate scaling.

Loading thumbnail…

Untitled

This example demonstrates hexagonal binning for aggregated scatterplot data, using color intensity to encode point density within each hexagon. It loads a CSV from GitHub and maps two numeric fields (F3 and F4) to linear x and y scales. The visualization uses the d3.hexbin plugin to compute bin geometry, with an axis and clip path drawn via d3.svg. A linear color scale transitions from transparent to teal based on bin count, and each hexagon is rendered as an SVG path with a thin black stroke.

Loading thumbnail…

Untitled

An interactive scatterplot displays F3 against F4 coordinates from a CSV dataset, with each point representing an Epoch value. The chart includes zoom and pan functionality via d3.zoom, allowing users to rescale both axes and update circle positions dynamically. The visualization uses d3.v4, renders as SVG, and demonstrates clip-path implementation to contain drawn elements. Axis scales are linear, with circles colored teal and semi-transparent for overlapping point visibility.

Loading thumbnail…

Valence and Arousal Custom 1-90 Epochs

This visualization displays arousal levels over the first 90 epochs, with the x-axis representing epochs and the y-axis representing the F4 frequency value. It uses D3 v5 to create a line chart with a linear scale, selected through a CSV file named arousal.csv. The code also demonstrates loading D3 from a CDN and importing local ES6 modules.

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.

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.

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.

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.

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`.

Loading thumbnail…

CMU Trail

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.

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.

Loading thumbnail…

Fork of InfoVis Master Task - Brain Prints

A static SVG renders a single brain silhouette based on an embedded path dataset. The example uses D3 v5 to select and style the SVG elements, applying a fixed viewBox and geometric transform to scale the path data. No interactive forces, transitions, or data binding are present; the visualization simply displays the preprocessed brain print shape.

Loading thumbnail…

Fork of GraphLayout with Interactive Filtering

This interactive network graph visualizes a dynamic dataset of nodes and edges, rendered as SVG circles and lines, with a color legend and a "分层显示" toggle button for filtering by category (`d.k`). Built with D3 v5, it uses `d3.forceSimulation` with link and many-body forces to animate node positions via the `on('tick')` callback, and applies a sequential color scale from `schemeRdYlGn`. Clicking legend entries or the checkbox triggers a re-render that adjusts node visibility and edge opacity, while drag behavior is handled through a custom `d3.drag()` plugin. Data is loaded from CSV files.

Loading thumbnail…

SVM

This example demonstrates a support vector machine (SVM) classifier using the SMO algorithm. Two-dimensional labeled data points (class 1 and class 2) from a JSON file are plotted as colored circles, with D3 scales mapping coordinates to an SVG canvas. Three decision boundary lines are drawn using `d3.svg.line()`, showing the separating hyperplane and its margins based on the computed weight vector and bias. The visualization relies on D3 v3 and a custom SMO implementation for training.

Loading thumbnail…

Linear Regression ParT 2

This example uses D3.js to plot EEG data from a CSV file, comparing the F3 and F4 channels. It renders scatter plot dots colored by manufacturer, along with a red regression line calculated using the least squares method to show the relationship. A tooltip appears when hovering over the line, displaying computed values at the mouse position. Axes, axes labels, and a legend are built with d3.svg.axis.

Loading thumbnail…

ScatterPlot

This scatter plot visualizes the relationship between F3 and F4 EEG signal values, with each circle representing a data point from the CSV file. The plot uses D3 v6's scaleLinear, extent, and axis functions to generate the axes and render the circles as SVG elements. The title "Alpha Power of F3 vs F4" labels the chart, while axis labels and tick marks are styled using CSS.

Loading thumbnail…

K Means

This visualization demonstrates k-means clustering on EEG data, showing how four centroids iteratively partition points into clusters based on their F3 and P4 channel values. The animation runs for ten iterations, updating cluster assignments and recalculating centroid positions with each step. The code uses d3.csv to load the dataset, d3.schemeCategory10 for cluster colors, d3.mean for computing cluster centers, and D3 transitions to animate point movements and color changes. A setInterval drives the iterative process, while text elements display the current iteration number.

Loading thumbnail…

Simple Linear Regression + Scatterplot with D3

This example demonstrates a simple linear regression overlaid on a scatterplot, using D3 v4 with SVG rendering to visualize the relationship between years of experience and salary. The chart employs d3.scaleLinear for both axes and d3.axisBottom/axisLeft for ticks, while the regression calculations and line generation are handled by the Simple-Statistics.js library functions ss.linearRegression and ss.linearRegressionLine. The regression line connects the first and last x-coordinates of the dataset, with the title and explanatory markdown cells providing context for the analysis.

Loading thumbnail…

Dimensional Charting

This example demonstrates interactive dimensional charting with a pie chart and a row chart, both linked through crossfilter to a small dataset of spending records. The pie chart displays spending totals per year, while the row chart shows spending per person. All charts update dynamically based on selections, as crossfilter dimensions and groups are configured to reduce sums. The code uses dc.js, crossfilter.js, and D3.js, loaded from external CDNs, to render the charts in separate divs on the page.

Loading thumbnail…

BarChart

A bar chart displays alpha power values from a node labeled F3 across successive epochs, with each bar’s length encoding the numeric value and its vertical position mapping to the epoch index. The visualization uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `csv` to load and parse the dataset. Bars are rendered as SVG rectangles with a steelblue fill, while the chart includes axis labels and a title. The code parses all numeric columns from a CSV file before rendering.

Loading thumbnail…

Scatter Plot VIZ

This scatter plot visualizes the iris dataset, plotting sepal length against sepal width, with each point as a hoverable circle. Built with React and D3 v6, it renders to SVG, using `scaleLinear`, `extent`, and `format` from D3 for scaling and tick labels. The axes are custom components (`AxisBottom`, `AxisLeft`), and the chart uses a teal fill for points, with a custom Google Font. The data is loaded asynchronously from a CSV via `d3.csv` and converted to numeric values.