Add donut plot

app.py

@@ -3,6 +3,7 @@ import joblib
 import time
 
 import plotly.graph_objects as go
+import plotly.express as px
 import streamlit as st
 import pandas as pd
 import numpy as np
@@ -193,6 +194,46 @@ def breadth_first_traverse(tree):
 
   return visited_nodes
 
+def build_donut_plot():
+  display_duration = ['a moment', 'an eternity']
+  legend_name = [
+    '<br>researching the data,<br>cleaning the data,<br>and building the model<br>for this project',
+    'battling Plotly'
+  ]
+  duration = [1, 19]
+  df = pd.DataFrame().from_dict({'duration': duration, 'legend_name': legend_name, 'display_duration': display_duration})
+
+  fig = px.pie(
+    df,
+    values='duration',
+    names='legend_name',
+    hover_name='display_duration',
+    # The docs claim this is okay.
+    # Turns out, this is not okay
+    # because Plotly tries to call .append() on whatever you pass to `hover_data`
+    # but only if you pass something to `color`
+    # so I can't set the color if I want to turn off columns in the hover text
+    hover_data={'duration': False, 'legend_name': False},
+    #color=display_duration,
+    #color_discrete_map={display_duration[0]:'fuschia', display_duration[1]:'rebecca_purple'},
+    hole=0.6,
+    #title="Believe it or not, a bug in Plotly means I can't change these colors"
+    title="I suppose one more donut won't kill me"
+
+  )
+
+  fig.update_traces(
+    textinfo='none',
+    hoverlabel={'font':{'size': 20}},
+    # This has no effect for some reason
+    # even though `hoverlabel`  and `textinfo` work just fine
+    marker_colors=['fuschia', 'rebecca_purple'],
+    selector=dict(type='pie')
+
+  )
+
+  return fig
+
 
 def main():
   # load the data
@@ -211,6 +252,10 @@ def main():
   st.markdown('## Setting the scene')
   st.markdown("""
 I make a lot of dashboards, which means I make a lot of the same plots over and over.
+""")
+  st.plotly_chart(build_donut_plot())
+
+  st.markdown("""
 Desperate for some creative outlet, I wanted to make a new visualization—
 something I'd never seen before.
 Inspired by interactive visualizations like 
@@ -330,8 +375,8 @@ It takes a second to get going after you hit `Play`.
           'method': 'animate',
           'args':[None, {
             'fromcurrent': True,
-            'frame': {'duration':5000},
-            'transition': {'duration': 2500},
+            'frame': {'duration':4000},
+            'transition': {'duration': 2000},
             }],
           },
           {
@@ -363,7 +408,8 @@ That helpful poster didn't point out any other examples, so that one is still pr
 Later on,
 [a different answer by the same poster](https://community.plotly.com/t/animation-with-slider-not-moving-when-pressing-play/34763)
 got me out of a jam.
-As far as I can tell, this poster `empet` is the only person in the world who understands Plotly's animations in Python.
+This `empet` character is pretty much the only one who answers Python posts on Plotly's forums.
+As far as I can tell, that's because they're the only person in the world who understands Plotly's Python library.
 """)
 
   st.markdown('## Check out the data!')
@@ -392,13 +438,16 @@ This plot is similar to the plot above, but the slider here coordinates with a t
   st.plotly_chart(figures[idx])
   st.dataframe(trees[idx])
   st.markdown("""
-This section is mostly just to warn you against making the same foolhardy decision to marry the innermost guts of SciKit-Learn to the sparsely documented world of Python Plotly animations.
+This section is mostly just to warn you against making the same foolhardy decision to marry the innermost guts of SciKit-Learn to the sparsely documented world of Plotly animations in Python.
 
 I'm glad it was challenging, though.
 I did go into this hoping for something more interesting than a donut plot.
 Maybe I'll think on the `value` and `gain` fields a bit and come up with a version 2.
 """)
 
+
+
+
 if __name__=='__main__':
   main()