Animated charts โ pure GLSL shaders
Render data charts directly inside a fragment shader. No JS library, no DOM โ just GLSL and your data in u_data[].
Why render charts as GLSL shaders?
GPU-accelerated rendering โ WebGL executes on the GPU, not the JS thread. Frame rate scales with shader complexity and target resolution.
No JS charting library โ the fragment shader runs inside any WebGL host. ShaderBot provides a ready-made HTML wrapper for OBS Browser Source and canvas embeds.
Animate data transitions natively โ no GSAP, no D3 animations, just mix() and smoothstep() in the shader.
Bar Chart
Seven animated bars driven by sinusoidal placeholders โ swap them out for real values via u_data[0..6]. Supports logarithmic scale, custom colour palettes, and value labels.
Discord command
/dataviz bar --data "12,45,33,78,56,90,22" --label "Jan,Feb,Mar,Apr,May,Jun,Jul"Available uniforms
- uniform float u_data[64] โ your normalised data values
- uniform float iTime โ elapsed time in seconds
- uniform vec2 iResolution โ canvas size
- uniform float u_count โ number of active data points
Line Chart
Time-series line with area fill, anti-aliased stroke, and circular data-point markers. Connect a live JSON API via /dataviz-live to stream real values into the shader.
Discord command
/dataviz line --source bitcoin --interval 30sAvailable uniforms
- uniform float u_data[64] โ your normalised data values
- uniform float iTime โ elapsed time in seconds
- uniform vec2 iResolution โ canvas size
- uniform float u_count โ number of active data points
Pie / Donut Chart
Five segments with sweep-in animation on load. Segment proportions are static constants in this example โ replace bounds[] with u_data[] for dynamic slices.
Discord command
/dataviz pie --data "30,20,25,15,10" --label "A,B,C,D,E"Available uniforms
- uniform float u_data[64] โ your normalised data values
- uniform float iTime โ elapsed time in seconds
- uniform vec2 iResolution โ canvas size
- uniform float u_count โ number of active data points
Scatter Plot
40 drifting data points in two colour-coded clusters animated with a micro-drift. Extend to k-means cluster centroids or live sensor readings for real dashboards.
Discord command
/dataviz scatter --source "https://api.example.com/data.json" --x "value.x" --y "value.y"Available uniforms
- uniform float u_data[64] โ your normalised data values
- uniform float iTime โ elapsed time in seconds
- uniform vec2 iResolution โ canvas size
- uniform float u_count โ number of active data points
Live data pipeline
Connect a data source
Any public JSON API, WebSocket stream, Discord guild stats, or CSV upload. Define the JSONPath expression that extracts your numeric values.
Values land in u_data[]
The bot normalises incoming values to [0, 1] using per-batch min/max. Extreme outliers may compress the visible range. Fills u_data[0..63], poll interval โฅ 5 s, up to 64 simultaneous metrics.
Render anywhere
The resulting hosted page works as an OBS Browser Source (loaded via URL), a `<canvas>` embed, a TouchDesigner GLSL TOP, or directly in a Discord bot reply. OBS loads the HTML page โ not a raw .glsl file.
Export your GLSL charts
Download the shader in the format required by your visualisation tool.
ShadertoyShadertoyPaste the chart shader directly into Shadertoy โ iTime and iResolution are pre-wired.
OBS Browser SourceOBS / WebGLRender the chart as a live OBS Browser Source โ perfect for stream dashboards.
TouchDesigner GLSL TOPGLSL TOPGLSL TOP with u_data[] DAT table wired in โ live data feeds via Fetch DAT or OSC.
Drop-in <DatavizShader> React component using a <canvas> WebGL context.
p5.js Sketchp5.js WEBGLp5.js sketch in WEBGL mode with the chart shader applied as a custom shader.
Blender Shader NodeGLSLScript node in Blender Shader Editor โ GLSL adapted for Blender's node pipeline. Note: Blender does not support raw GLSL injection in Geometry Nodes.