9/5/25, 9:38 AM Dash Plotly + D3.
ipynb - Colab
!pip install dash
!pip install dash-renderer
!pip install dash-html-components
!pip install dash-core-components
!pip install plotly
Collecting dash
Downloading dash-3.2.0-py3-none-any.whl.metadata (10 kB)
Requirement already satisfied: Flask<3.2,>=1.0.4 in /usr/local/lib/python3.12/dist-packages (from dash) (3.1.2)
Requirement already satisfied: Werkzeug<3.2 in /usr/local/lib/python3.12/dist-packages (from dash) (3.1.3)
Requirement already satisfied: plotly>=5.0.0 in /usr/local/lib/python3.12/dist-packages (from dash) (5.24.1)
Requirement already satisfied: importlib-metadata in /usr/local/lib/python3.12/dist-packages (from dash) (8.7.0)
Requirement already satisfied: typing-extensions>=4.1.1 in /usr/local/lib/python3.12/dist-packages (from dash) (4.15.0)
Requirement already satisfied: requests in /usr/local/lib/python3.12/dist-packages (from dash) (2.32.4)
Collecting retrying (from dash)
Downloading retrying-1.4.2-py3-none-any.whl.metadata (5.5 kB)
Requirement already satisfied: nest-asyncio in /usr/local/lib/python3.12/dist-packages (from dash) (1.6.0)
Requirement already satisfied: setuptools in /usr/local/lib/python3.12/dist-packages (from dash) (75.2.0)
Requirement already satisfied: blinker>=1.9.0 in /usr/local/lib/python3.12/dist-packages (from Flask<3.2,>=1.0.4->dash) (1.9.0)
Requirement already satisfied: click>=8.1.3 in /usr/local/lib/python3.12/dist-packages (from Flask<3.2,>=1.0.4->dash) (8.2.1)
Requirement already satisfied: itsdangerous>=2.2.0 in /usr/local/lib/python3.12/dist-packages (from Flask<3.2,>=1.0.4->dash) (2.2.0)
Requirement already satisfied: jinja2>=3.1.2 in /usr/local/lib/python3.12/dist-packages (from Flask<3.2,>=1.0.4->dash) (3.1.6)
Requirement already satisfied: markupsafe>=2.1.1 in /usr/local/lib/python3.12/dist-packages (from Flask<3.2,>=1.0.4->dash) (3.0.2)
Requirement already satisfied: tenacity>=6.2.0 in /usr/local/lib/python3.12/dist-packages (from plotly>=5.0.0->dash) (8.5.0)
Requirement already satisfied: packaging in /usr/local/lib/python3.12/dist-packages (from plotly>=5.0.0->dash) (25.0)
Requirement already satisfied: zipp>=3.20 in /usr/local/lib/python3.12/dist-packages (from importlib-metadata->dash) (3.23.0)
Requirement already satisfied: charset_normalizer<4,>=2 in /usr/local/lib/python3.12/dist-packages (from requests->dash) (3.4.3)
Requirement already satisfied: idna<4,>=2.5 in /usr/local/lib/python3.12/dist-packages (from requests->dash) (3.10)
Requirement already satisfied: urllib3<3,>=1.21.1 in /usr/local/lib/python3.12/dist-packages (from requests->dash) (2.5.0)
Requirement already satisfied: certifi>=2017.4.17 in /usr/local/lib/python3.12/dist-packages (from requests->dash) (2025.8.3)
Downloading dash-3.2.0-py3-none-any.whl (7.9 MB)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 7.9/7.9 MB 42.8 MB/s eta 0:00:00
Downloading retrying-1.4.2-py3-none-any.whl (10 kB)
Installing collected packages: retrying, dash
Successfully installed dash-3.2.0 retrying-1.4.2
Collecting dash-renderer
Downloading dash_renderer-1.9.1.tar.gz (1.0 MB)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 1.0/1.0 MB 22.9 MB/s eta 0:00:00
Preparing metadata (setup.py) ... done
Building wheels for collected packages: dash-renderer
Building wheel for dash-renderer (setup.py) ... done
Created wheel for dash-renderer: filename=dash_renderer-1.9.1-py3-none-any.whl size=1014851 sha256=887e3475879984e110cc9ba564362e10a9e30682254bf0c23733c9d526f36c0e
Stored in directory: /root/.cache/pip/wheels/44/e7/69/5fd1e8b05d0bc11a4e344b6102bb3098cf2e9c5d0195a16b8f
Successfully built dash-renderer
Installing collected packages: dash-renderer
Successfully installed dash-renderer-1.9.1
Collecting dash-html-components
Downloading dash_html_components-2.0.0-py3-none-any.whl.metadata (3.8 kB)
Downloading dash_html_components-2.0.0-py3-none-any.whl (4.1 kB)
Installing collected packages: dash-html-components
Successfully installed dash-html-components-2.0.0
Collecting dash-core-components
Downloading dash_core_components-2.0.0-py3-none-any.whl.metadata (2.9 kB)
Downloading dash_core_components-2.0.0-py3-none-any.whl (3.8 kB)
Installing collected packages: dash-core-components
Successfully installed dash-core-components-2.0.0
Requirement already satisfied: plotly in /usr/local/lib/python3.12/dist-packages (5.24.1)
Requirement already satisfied: tenacity>=6.2.0 in /usr/local/lib/python3.12/dist-packages (from plotly) (8.5.0)
Requirement already satisfied: packaging in /usr/local/lib/python3.12/dist-packages (from plotly) (25.0)
# app.py
import dash
from dash import html, dcc
import plotly.express as px
import pandas as pd
# --- Sample data ---
df = pd.DataFrame({
"Fruit": ["Apples", "Oranges", "Bananas", "Grapes"],
"Count": [10, 20, 15, 25]
})
# --- Plotly chart ---
fig = px.bar(df, x="Fruit", y="Count", title="Python Plotly Bar Chart")
# --- Dash app ---
app = dash.Dash(__name__)
app.layout = html.Div([
html.H1("Hybrid Dashboard: Python + D3.js"),
# Python Plotly Chart
html.Div([
html.H3("Interactive Plotly Chart (Python)"),
dcc.Graph(figure=fig)
], style={"width": "48%", "display": "inline-block", "verticalAlign": "top"}),
# Custom D3.js Chart
html.Div([
html.H3("Custom D3.js Chart"),
html.Div(id="d3-container") # placeholder for D3
], style={"width": "48%", "display": "inline-block", "verticalAlign": "top"}),
# Inject D3.js script
html.Script(src="https://d3js.org/d3.v7.min.js"),
html.Script("""
document.addEventListener("DOMContentLoaded", function(){
const data = [
{fruit:"Apples", count:10},
{fruit:"Oranges", count:20},
{fruit:"Bananas", count:15},
{fruit:"Grapes", count:25}
];
const width = 400, height = 300, margin = {top:20, right:20, bottom:40, left:40};
const svg = d3.select("#d3-container")
.append("svg")
.attr("width", width)
.attr("height", height);
const x = d3.scaleBand().domain(data.map(d => d.fruit))
.range([margin.left, width-margin.right]).padding(0.1);
https://colab.research.google.com/drive/1zdXYOY_X02RxJfozDJwrrv5OOwdHplJU#scrollTo=lB6Yc_lfTFtp&printMode=true 1/2
9/5/25, 9:38 AM Dash Plotly + D3.ipynb - Colab
const y = d3.scaleLinear().domain([0, d3.max(data, d => d.count)])
.nice().range([height-margin.bottom, margin.top]);
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", d => x(d.fruit))
.attr("y", d => y(d.count))
.attr("height", d => y(0)-y(d.count))
.attr("width", x.bandwidth())
.attr("fill", "steelblue")
.on("mouseover", function(event,d) {
d3.select(this).attr("fill", "orange");
})
.on("mouseout", function() {
d3.select(this).attr("fill", "steelblue");
});
svg.append("g")
.attr("transform", `translate(0,${height-margin.bottom})`)
.call(d3.axisBottom(x));
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
});
""")
])
if __name__ == "__main__":
app.run(debug=True)
Hybrid Dashboard: Python + D3.js
Interactive Plotly Chart (Python) Custom D3.js Chart
Python Plotly Bar Chart
25
20
15
Count
10
0
Apples Oranges Bananas Grapes
Fruit
Errors Callbacks v3.2.0 Server
https://colab.research.google.com/drive/1zdXYOY_X02RxJfozDJwrrv5OOwdHplJU#scrollTo=lB6Yc_lfTFtp&printMode=true 2/2
