D3Blocks is a Python package that builds on the graphics of d3 javascript (d3js). It allows you to create the most visually attractive and useful charts with only a few lines of Python code!
The documentation pages contain detailed information about the working of the blocks with many examples. ⭐️ Star it if you like it ⭐️
| nr | Block | Function | More Information |
|---|---|---|---|
| 1 | D3graph | d3.d3graph() |
D3graph |
| 2 | Radialgraph | d3.radialgraph() |
Radialgraph |
| 3 | Elasticgraph | d3.elasticgraph() |
D3Blocks |
| 4 | Sankey | d3.sankey() |
D3Blocks |
| 5 | Movingbubbles | d3.movingbubbles() |
D3Blocks |
| 6 | Scatter | d3.scatter() |
D3Blocks |
| 7 | Heatmap | d3.heatmap() |
D3Blocks |
| 8 | Chord diagram | d3.chord() |
D3Blocks |
| 9 | Timeseries | d3.timeseries() |
D3Blocks |
| 10 | Image slider | d3.imageslider() |
D3Blocks |
| 11 | Violin plot | d3.violin() |
D3Blocks |
| 12 | Particles | d3.particles() |
D3Blocks |
| 13 | Treemap | d3.treemap() |
D3Blocks |
| 14 | Tree | d3.tree() |
D3Blocks |
| 15 | Maps | d3.maps() |
D3Blocks |
| 16 | Circlepacking | d3.circlepacking() |
D3Blocks |
| 17 | Flowgraph | d3.flowgraph() |
Dagre |
| 18 | Sequence | d3.sequence() |
Mermaid sequenceDiagram |
| 19 | ERD | d3.erd() |
Mermaid erDiagram |
pip install d3blocks # Normal installation
pip install -U d3blocks # Force update# Clone only the latest branch to avoid downloading large history.
git config --global clone.depth 1pip install git+https://github.com/d3blocks/d3blocks.git# for visualizations
npx skills add d3blocks/d3blocks --skill d3blocks
# for chart builder
npx skills add d3blocks/d3blocks --skill d3blocks-chart-builder
# for docs diagrams (convert a repo
8F1F
's Mermaid diagrams)
npx skills add d3blocks/d3blocks --skill d3blocks-docs-diagramsfrom d3blocks import D3Blocks
# Initialize
d3 = D3Blocks()Every chart from D3Block can easily be incorporated into a Streamlit Dashboard. Because every D3Blocks chart is just HTML and JavaScript, you can generate the HTML in memory and embed it
A few practical rules of thumb: prefer st.iframe over the older components.html for full interactive charts, always pass an explicit pixel height, and set show_side_panel=False when Streamlit already owns the controls so the UI doesn't duplicate. color_background='streamlit' picks backgrounds that match a typical Streamlit light or dark page.
- Minimal examples for each chart can be found in the Streamlit directory in the repo.
- More Streamlit documentation can be found here.
When HTMLs are generated, it automatically includes ethical ads as a small way to support development. I maintain this entire project thoughtfully and in my free time. Ads can be disabled via an input parameter, and you can also support the project with a coffee donation instead.
- Erdogan Taskesen, github: erdogant
- Contributions are welcome.
- Yes! This library is entirely free but it runs on coffee! :) Feel free to support with a Coffee.
