ImPlot quality, notebook reach
nbimplot renders inside notebook output cells with the same strict WASM/ImPlot core shown here: typed-array uploads, screen-resolution LOD, native pan/zoom, hover inspection, context menus, subplots, colormaps, and streaming updates.
Documentation
These links make the project easier to classify for users, search engines, coding assistants, and retrieval-augmented agents looking for fast notebook plotting, ImPlot in Jupyter, WASM plotting, and large-data visualization.
Examples Gallery
These canvases are intentionally lazy-loaded. Scroll through the gallery to verify multiple independent WASM sessions, lifecycle cleanup, interaction primitives, and colormap propagation.
Performance
Large time-series path using explicit x data and the default WASM min/max LOD pipeline. Pan, wheel zoom, double-click autoscale, and use the legend/right-click menu.
const h = plot.line("signal", y, { x });
h.setData(yNew, { x });
plot.autoscale();Performance
Appends small typed-array chunks into a fixed-capacity line without recreating the plot.
const h = plot.streamLine("ticks", { capacity: 12000 });
h.append(chunk);Points
Explicit x/y buffers, marker rendering, and bubble sizes for dense point-cloud style workflows.
plot.scatter("samples", y, { x });
plot.bubbles("volume", y, sizes, { x });Curves
Common signal-analysis overlays in one canvas: stepped series, impulses, digital states, confidence bands, and uncertainty intervals.
plot.stairs("step", y, { x });
plot.shaded("band", lower, upper, { x });
plot.errorBars("fit", y, { x, err });Categorical
Three subplot panels showing vertical bars, grouped categorical bars, and horizontal rankings.
plot.setSubplots(1, 3);
plot.bars("sales", values);
plot.barGroups(labels, matrix);
plot.barsH("rank", values);Statistics
1D and 2D distributions, including a colorbar for density inspection.
plot.histogram("returns", values, { bins: 80 });
plot.histogram2d("density", x, y, { xBins: 80, yBins: 60 });Matrices
Matrix plotting with empty heatmap labels, colorbar formatting, and a float RGB image buffer.
plot.setColormap("Viridis");
plot.heatmap("z", matrix, { rows, cols, labelFmt: "" });
plot.image("rgb", image, { rows, cols, channels: 3 });Overlays
ImPlot overlays for thresholds, labels, callouts, tags, and pie chart composition.
plot.vlines("events", xs);
plot.tagY(0, { labelFmt: "zero" });
plot.annotation("peak", x, y);
plot.pieChart("mix", values, { labels });Axes
Secondary y-axis, custom ticks, numeric formatting, and log scaling from the same plot object.
plot.setSecondaryAxes({ y2: true });
plot.setAxisScale({ x: "linear", y: "log" });
plot.setAxisTicks("x1", ticks, { labels });Layout
A 2x2 ImPlot subplot grid with shared x-axis interaction and mixed plot primitives.
plot.setSubplots(2, 2, { linkAllX: true });
plot.line("a", y, { x, subplotIndex: 0 });
plot.scatter("b", y, { x, subplotIndex: 1 });Interaction
Interactive ImPlot primitives. Drag the vertical/horizontal guides, point, and rectangle; inspect interaction values below.
plot.dragLineX("cursor", 40);
plot.dragPoint("anchor", 25, 0.5);
plot.onInteraction(events => ...);Interaction events: move a drag primitive.
Colormaps
Use the selector, slider, and buttons to verify that heatmaps and colorbar widgets use the active ImPlot colormap.
plot.setColormap("Plasma");
plot.colormapSelector({ label: "Choose map" });
plot.colormapSlider({ label: "Sample" });