django-d3-bridge

Declarative D3.js visualizations for Django — charts, maps, networks, with MQTT live updates.

Write Python, render D3.js. No JavaScript required.

Documentation | GitHub | PyPI

Install

pip install django-d3-bridge

Quick Start

# settings.py
INSTALLED_APPS = [
    ...
    "d3_bridge",
]

# views.py
from d3_bridge import BarChart

def dashboard(request):
    chart = BarChart(
        data=Product.objects.values("name", "sales"),
        x="name", y="sales",
        title="Sales by Product",
    )
    return render(request, "dashboard.html", {"chart": chart})

{% load d3_bridge %}
{% d3_scripts %}

<div class="col-md-6">
    {% d3_render chart %}
</div>

19 Chart Types

3 Data Modes

• Static — QuerySet evaluated at each page load
• Polling — auto-refresh via HTTP fetch every N seconds
• MQTT — real-time push via WebSocket

# Polling example — no WebSocket, no infrastructure
chart = LineChart(
    data=initial_data,
    x="timestamp", y="value",
    poll_url="/api/chart/data/",
    poll_interval=30,
)

Features

• Pure D3.js v7 output — inspectable, no abstraction layer
• Django QuerySet + GeoQuerySet + DataFrame serialization
• 4 themes (default, dark, bootstrap, terraf) + 7 color palettes
• theme="auto" follows the browser's prefers-color-scheme, live
• Load only the chart modules you use: {% d3_scripts charts="bar,line" %}
• Responsive, animated, with tooltips — SVGs carry role="img" + aria-label
• XSS-safe rendering: chart configs are escaped like Django's json_script
• Works fully offline: D3, d3-sankey and mqtt.js vendored ({% d3_scripts cdn=False %})
• Bootstrap grid compatible
• Escape hatch for custom D3.js code

Documentation

Full documentation with examples for every chart type:

https://altius-academy-snc.github.io/django-d3-bridge

See CHANGELOG.md for release notes.

License

MIT — Paul Guindo / Altius Academy SNC