plod

Plod is a fast, canvas-based plotting library for the web, built for smooth interaction, high performance, and ease of use. It is currently a work in progress, with support for line, area, bar, and scatter plots.

I built Plod because existing charting libraries could not deliver consistently smooth interaction across dataset sizes without sacrificing performance, visual fidelity, or usability.

Pixel-aware level of detail

Plod’s main optimization is pixel-aware level-of-detail (pLOD) rendering with largest-triangle-three-buckets (LTTB) downsampling. By accounting for the plot’s available pixel space, Plod selects the optimal bucket size for the current view, minimizing rendered points while preserving as much perceptible detail as the canvas can represent.

Below, the downsampled and raw charts are virtually indistinguishable. Peaks, troughs, and spikes are preserved using a fraction of the computational cost.

Faster initial rendering

For the initial draw, the data still must be processed in O(N) time, but the actual rendering cost is only O(K), where K is the much smaller number of points remaining after LTTB downsampling. This results in a faster load and display time than other existing charting libraries.

Layered rendering

Plod uses a layered rendering architecture to isolate updates and avoid unnecessary redraws. Axes, ticks, and labels occupy a presentation layer, while plots are rendered separately through Canvas or WebGL. Hover states, crosshairs, and selections use a dedicated Canvas overlay, allowing interactions to update without redrawing the plot. Tooltips remain in the DOM for straightforward styling, customization, and accessibility.

These optimizations allow Plod to maintain responsive interaction at the display's native refresh rate, consistently delivering a smooth experience across dataset sizes even as other libraries begin to degrade.

High-frequency streaming

Plod also supports high-frequency streaming line plots. Incoming data updates only the affected LOD buckets rather than rebuilding the full series. The cached plot state is reused, and new streaming writes update only the live endpoint and its affected buckets.

GPU-accelerated scatterplots

For scatterplots, Plod moves mark rendering onto the GPU. Point coordinates are packed into a contiguous Float32Array and uploaded to a dedicated WebGL canvas, where shaders handle projection, clipping, resizing, point sizing, and shape rendering. The full point cloud is drawn in a single call, while axes and interaction feedback remain on separate layers to avoid unnecessary repaints.

Below, one million points recreate Seurat's Un dimanche après-midi à l'Île de la Grande Jatte while remaining smooth and responsive during zooming, resizing, and interaction.

Responsive dashboards

Individual charts can remain highly responsive, but dashboards compound the work when many plots update at once. Plod supports an interleaved rendering path that distributes work across charts, reducing main-thread stalls and dropped frames. Try it using the dashboard button in the top-right corner.

WIP & Roadmap

• React, Vue, and Svelte integrations.
• More charts & animations
• Python interface
• Documentation