Add some text

streamlit_viz.py

@@ -56,43 +56,94 @@ FEATS = [
   'ct_dst_src_ltm',
 ]
 
+# Generated from
+# mokole.com/palette.html
 COLORS = [
-  'aliceblue','aqua','aquamarine','azure',
-  'bisque','black','blanchedalmond','blue',
-  'blueviolet','brown','burlywood','cadetblue',
-  'chartreuse','chocolate','coral','cornflowerblue',
-  'cornsilk','crimson','cyan','darkblue','darkcyan',
-  'darkgoldenrod','darkgray','darkgreen',
-  'darkkhaki','darkmagenta','darkolivegreen','darkorange',
-  'darkorchid','darkred','darksalmon','darkseagreen',
-  'darkslateblue','darkslategray',
-  'darkturquoise','darkviolet','deeppink','deepskyblue',
-  'dimgray','dodgerblue',
-  'forestgreen','fuchsia','gainsboro',
-  'gold','goldenrod','gray','green',
-  'greenyellow','honeydew','hotpink','indianred','indigo',
-  'ivory','khaki','lavender','lavenderblush','lawngreen',
-  'lemonchiffon','lightblue','lightcoral','lightcyan',
-  'lightgoldenrodyellow','lightgray',
-  'lightgreen','lightpink','lightsalmon','lightseagreen',
-  'lightskyblue','lightslategray',
-  'lightsteelblue','lightyellow','lime','limegreen',
-  'linen','magenta','maroon','mediumaquamarine',
-  'mediumblue','mediumorchid','mediumpurple',
-  'mediumseagreen','mediumslateblue','mediumspringgreen',
-  'mediumturquoise','mediumvioletred','midnightblue',
-  'mintcream','mistyrose','moccasin','navy',
-  'oldlace','olive','olivedrab','orange','orangered',
-  'orchid','palegoldenrod','palegreen','paleturquoise',
-  'palevioletred','papayawhip','peachpuff','peru','pink',
-  'plum','powderblue','purple','red','rosybrown',
-  'royalblue','saddlebrown','salmon','sandybrown',
-  'seagreen','seashell','sienna','silver','skyblue',
-  'slateblue','slategray','slategrey','snow','springgreen',
-  'steelblue','tan','teal','thistle','tomato','turquoise',
-  'violet','wheat','yellow','yellowgreen'
+  '#808080',
+  '#2f4f4f',
+  '#556b2f',
+  '#8b4513',
+  '#6b8e23',
+  '#2e8b57',
+  '#800000',
+  '#191970',
+  '#006400',
+  '#b8860b',
+  '#4682b4',
+  '#d2691e',
+  '#9acd32',
+  '#20b2aa',
+  '#cd5c5c',
+  '#00008b',
+  '#32cd32',
+  '#8fbc8f',
+  '#800080',
+  '#b03060',
+  '#d2b48c',
+  '#ff4500',
+  '#ffa500',
+  '#ffff00',
+  '#c71585',
+  '#0000cd',
+  '#00ff00',
+  '#00ff7f',
+  '#dc143c',
+  '#00ffff',
+  '#00bfff',
+  '#f4a460',
+  '#9370db',
+  '#a020f0',
+  '#adff2f',
+  '#ff6347',
+  '#da70d6',
+  '#b0c4de',
+  '#ff00ff',
+  '#f0e68c',
+  '#6495ed',
+  '#dda0dd',
+  '#afeeee',
+  '#98fb98',
+  '#7fffd4',
+  '#ffb6c1',
 ]
 
+#COLORS = [
+#  'aliceblue','aqua','aquamarine','azure',
+#  'bisque','black','blanchedalmond','blue',
+#  'blueviolet','brown','burlywood','cadetblue',
+#  'chartreuse','chocolate','coral','cornflowerblue',
+#  'cornsilk','crimson','cyan','darkblue','darkcyan',
+#  'darkgoldenrod','darkgray','darkgreen',
+#  'darkkhaki','darkmagenta','darkolivegreen','darkorange',
+#  'darkorchid','darkred','darksalmon','darkseagreen',
+#  'darkslateblue','darkslategray',
+#  'darkturquoise','darkviolet','deeppink','deepskyblue',
+#  'dimgray','dodgerblue',
+#  'forestgreen','fuchsia','gainsboro',
+#  'gold','goldenrod','gray','green',
+#  'greenyellow','honeydew','hotpink','indianred','indigo',
+#  'ivory','khaki','lavender','lavenderblush','lawngreen',
+#  'lemonchiffon','lightblue','lightcoral','lightcyan',
+#  'lightgoldenrodyellow','lightgray',
+#  'lightgreen','lightpink','lightsalmon','lightseagreen',
+#  'lightskyblue','lightslategray',
+#  'lightsteelblue','lightyellow','lime','limegreen',
+#  'linen','magenta','maroon','mediumaquamarine',
+#  'mediumblue','mediumorchid','mediumpurple',
+#  'mediumseagreen','mediumslateblue','mediumspringgreen',
+#  'mediumturquoise','mediumvioletred','midnightblue',
+#  'mintcream','mistyrose','moccasin','navy',
+#  'oldlace','olive','olivedrab','orange','orangered',
+#  'orchid','palegoldenrod','palegreen','paleturquoise',
+#  'palevioletred','papayawhip','peachpuff','peru','pink',
+#  'plum','powderblue','purple','red','rosybrown',
+#  'royalblue','saddlebrown','salmon','sandybrown',
+#  'seagreen','seashell','sienna','silver','skyblue',
+#  'slateblue','slategray','slategrey','snow','springgreen',
+#  'steelblue','tan','teal','thistle','tomato','turquoise',
+#  'violet','wheat','yellow','yellowgreen'
+#]
+
 def build_parents(tree, visit_order, node_id2plot_id):
   parents = [None]
   parent_plot_ids = [None]
@@ -188,27 +239,29 @@ def main():
   frames = [go.Frame(data=graph_obj) for graph_obj in graph_objs]
   # show them with streamlit
 
+  st.markdown("""
+I trained a
+[Histogram-based Gradient Boosting Classification Tree](https://scikit-learn.org/stable/modules/ensemble.html#histogram-based-gradient-boosting)
+ on some data.
+That algoritm looks at its mistakes and tries to avoid those mistakes the next time around.
 
-  # This works the way I want
-  # but the plot is tiny
-  # also it recalcualtes all of the plots
-  # every time the slider value changes
-  #
-  # I tried to cache the plots but build_plot() takes
-  # a DataFrame which is mutable and therefore unhashable I guess
-  # so it won't let me cache that function
-  # I could pack the dataframe bytes to smuggle them past that check
-  # but whatever
-  idx = st.slider(
-    label='which step to show',
-    min_value=0,
-    max_value=len(figures)-1,
-    value=0,
-    step=1
-  )
-  st.plotly_chart(figures[idx])
-  st.markdown(f'## Tree {idx}')
-  st.dataframe(trees[idx])
+To do that, it starts off with a decision tree.
+From there, it looks at the points that tree got wrong and makes another decision tree that tries
+to get those points right.
+Then it looks at that second tree's mistakes and makes another tree that tries to fix those mistakes.
+And so on.
+
+My model ends up with 10 trees.
+I've plotted the progression of those trees as an animated series of tree maps.
+The boxes are color-coded by which feature the decision tree is using to make that split and I've labeled each one with the exact decision boundary of that split.
+It takes a second to get going after you hit "Play."
+
+I recommend expanding the plot by clicking the arrows in the top right corner since Streamlit makes the plot really small.
+
+""")
+
+
+  st.markdown('## My Trees')
 
   # Maybe just show a Plotly animated chart
   # https://plotly.com/python/animations/#using-a-slider-and-buttons
@@ -259,8 +312,32 @@ def main():
   )
   st.plotly_chart(ani_fig)
 
-  st.markdown(f'## {len(FEATS)}')
+  st.markdown("""
+This actually turned out to be a lot harder than I thought it would be.
+""")
+
+  st.markdown('# Check out each tree!')
 
+  # This works the way I want
+  # but the plot is tiny
+  # also it recalcualtes all of the plots
+  # every time the slider value changes
+  #
+  # I tried to cache the plots but build_plot() takes
+  # a DataFrame which is mutable and therefore unhashable I guess
+  # so it won't let me cache that function
+  # I could pack the dataframe bytes to smuggle them past that check
+  # but whatever
+  idx = st.slider(
+    label='Which tree do you want to see?',
+    min_value=0,
+    max_value=len(figures)-1,
+    value=0,
+    step=1
+  )
+  st.plotly_chart(figures[idx])
+  st.markdown(f'## Tree {idx}')
+  st.dataframe(trees[idx])
 
 if __name__=='__main__':
   main()