Hi Bubblers 
My dev partner and I are excited to release Observable Plot x D3 Charts & Graphs, a data viz plugin built on Observable Plot, the high-level visualization library made by the D3.js team.
We built this because we kept running into the same wall on every dashboard we worked on in Bubble. Most chart plugins expect data you’ve already shaped. If you want a histogram, a moving average, or a 100%-stacked view, you end up pre-computing it in backend workflows and storing it in helper fields or variables hidden in a pop-up, which can slow the page down.
Observable Plot treats those transformations as part of the chart itself: feed it raw data, pick a transform, done.
Try it
- Demo app
- See in Bubble Editor, to see the full range of customization options
- User documentation
- Plugin page for the full list of features
What’s in it
- 33 chart types from one element. Line, Area, Stacked Area, Bar (V/H), Stacked/Grouped Bar, Scatter, Pie/Donut, Histogram, Box Plot, Density, Heatmap, Linear Regression, Bollinger Bands, Difference, Candlestick/OHLC (with volume bars and MA/EMA/BB overlays), Radar, Waffle, Funnel, Gauge, KPI Card, Waterfall, Calendar Heatmap, Tree, Contour, Hexbin, Rule, Text Labels, Tick, Arrow, Vector, plus an Auto mode that suggests a chart type from the data shape. Switching types is a single dropdown change and uses the same data bindings.
- Built-in data transforms (the main reason we built this): Group, Bin, Stack, Normalize, Window, Hexbin. Feed the chart raw data and pick a transform; the aggregation happens at render time. No backend workflow needed for “revenue by month”, histograms, moving averages, or 100%-stacked comparisons.
- A separate Plot Geo Map element with 16 projections (Mercator, Albers, Equal Earth, Orthographic globe, Identity for floor plans…) and auto TopoJSON detection. Works with any GeoJSON URL.
- Every property has a Dynamic override, so you can wire chart type, color scheme, projection, or transform to a dropdown and let end users pick what they want to render.
- Dark mode with colors, labels, legends, tooltips and exports adapting automatically.
- Interactive legends. Click a legend swatch to hide a series, shift-click to solo, double-click to reset. Hover and click events publish the full data point to your Bubble workflows, for drill-downs and cross-filter dashboards.
- Accessibility. Full keyboard navigation (Tab, arrows, Home/End, Enter), ARIA labels on every mark, live screen-reader announcements, WCAG 2.2 AA contrast and interaction patterns. That’s the level referenced by ADA, Section 508, and the European Accessibility Act, so your Bubble app can sell into government, education, healthcare, enterprise procurement.
- Export. PNG, SVG and Copy-to-Clipboard as element actions on every chart type.
- KPI Card with direction semantics. This one deserves its own bullet: the card understands that a rise in churn is bad, and renders the delta in red instead of green. Also supports target + progress bar, status thresholds colorizing the big number, icon slot, and a “flat” state when the change is below a threshold. Fully click-eventable for drill-throughs.
The plugin is built on permissive open-source licenses: Observable Plot (ISC), D3.js (ISC), TopoJSON-client (ISC) and html-to-image (MIT).
AI-assisted setup
We also wrote an AI-ready context document. Essentially a condensed field reference + diagnostic playbook that you paste into your LLM before asking a question. Once pasted, your AI assistant knows every field, state, event and common pitfall for this plugin, so it can write your Bubble expressions, diagnose a misbehaving chart, or suggest the right transform without guessing. The link is in the docs, in the “Get Help with Your Favorite AI Assistant” section, and at the top of the demo page.
Feedback welcome
If you notice a bug, or there’s a specific business case you’d like the plugin to cover, don’t hesitate to reach out. We happily take any question and improvement request!