Treemap (D3-plus)

Streamlit is a really interesting tool. I want to know how to generate a D3plus style treemap in streamlit, sized and colored based on differerent dataframe columns.

2 Likes

Hey @bmahal :wave:,

Welcome to the community and thanks for the kind words! Below is a code snippet that shows how to make a basic treemap through matplotlib and squarify:

import streamlit as st
import matplotlib.pyplot as plt
import squarify

volume = [350, 220, 170, 150, 50]
labels = ['Liquid\n volume: 350k', 'Savoury\n volume: 220k',
         'Sugar\n volume: 170k', 'Frozen\n volume: 150k',
         'Non-food\n volume: 50k']
color_list = ['#0f7216', '#b2790c', '#ffe9a3',
             '#f9d4d4', '#d35158', '#ea3033']

plt.rc('font', size=14)
squarify.plot(sizes=volume, label=labels,
             color=color_list, alpha=0.7)
plt.axis('off')
st.pyplot()

While writing the response to your question, I was also playing around with Plotly’s interactive treemaps which can be found here. Unfortunately, it looks like there’s a bug in Plotly in Streamlit right now that causes that chart not to render. I’ve created a bug report for it here. If you’re interested in that, you can follow its progress over there, and upvote / leave comments if you’d like!