An example project for a custom D3 chart with React hooks into Streamlit.
Feel free to fork this project as a starter for your own D3 components.
pip install streamlit-d3-demo
import random
from streamlit_d3_demo import d3_line
def generate_random_data(x_r, y_r):
return list(zip(range(x_r), [random.randint(0, y_r) for _ in range(x_r)]))
d3_line(generate_random_data(20, 500), circle_radius=15, circle_color="#6495ed")
cd frontend
npm install
conda create -n streamlit-d3 python=3.7
conda activate streamlit-d3
pip install -e .
Both JS and Python should run at the same time.
cd frontend
npm run start
streamlit run app.py
D3 :
React :
D3 + React hooks :
D3 + React class component :