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.