Finshing writing, change color palette

streamlit_viz.py

@@ -59,90 +59,54 @@ FEATS = [
 # Generated from
 # mokole.com/palette.html
 COLORS = [
+  '#000000',
   '#808080',
   '#2f4f4f',
   '#556b2f',
   '#8b4513',
-  '#6b8e23',
-  '#2e8b57',
+  '#228b22',
   '#800000',
-  '#191970',
-  '#006400',
+  '#808000',
+  '#3cb371',
+  '#663399',
   '#b8860b',
+  '#008b8b',
   '#4682b4',
   '#d2691e',
   '#9acd32',
-  '#20b2aa',
   '#cd5c5c',
   '#00008b',
   '#32cd32',
   '#8fbc8f',
-  '#800080',
   '#b03060',
   '#d2b48c',
-  '#ff4500',
+  '#ff0000',
   '#ffa500',
+  '#ffd700',
   '#ffff00',
-  '#c71585',
   '#0000cd',
   '#00ff00',
+  '#8a2be2',
   '#00ff7f',
+  '#4169e1',
   '#dc143c',
   '#00ffff',
   '#00bfff',
   '#f4a460',
-  '#9370db',
-  '#a020f0',
   '#adff2f',
   '#ff6347',
   '#da70d6',
-  '#b0c4de',
+  '#d8bfd8',
   '#ff00ff',
   '#f0e68c',
   '#6495ed',
   '#dda0dd',
-  '#afeeee',
+  '#b0e0e6',
   '#98fb98',
   '#7fffd4',
-  '#ffb6c1',
-]
+  '#ff69b4',
 
-#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]
@@ -236,32 +200,87 @@ def main():
   # make the plots
   graph_objs = [build_plot(tree) for tree in trees]
   figures = [go.Figure(graph_obj) for graph_obj in graph_objs]
-  frames = [go.Frame(data=graph_obj) for graph_obj in graph_objs]
+  # each frame has to have a name
+  # https://community.plotly.com/t/animation-with-slider-not-moving-when-pressing-play/34763/2
+  frames = [go.Frame(data=graph_obj, name=str(i)) for i, graph_obj in enumerate(graph_objs)]
   # show them with streamlit
 
+  #st.markdown('# Thankfully, Visualizing Decision Trees is Hard')
+  st.markdown('# Thankfully, visualizing decision trees is hard')
+  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.
+Desperate for some creative outlet, I wanted to make a new visualization—
+something I'd never seen before.
+Inspired by interactive visualizations like 
+[Tensorflow Playground](https://playground.tensorflow.org)
+and
+[GAN Lab](https://poloclub.github.io/ganlab),
+I decided to wanted to watch some kind of gradient-boosted tree as it learned.
+""")
+
+  st.markdown('## Some kind of gradient-boosted tree')
   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.
+I trained an ensemble of
+[Histogram-based Gradient Boosting Decision Trees](https://scikit-learn.org/stable/modules/ensemble.html#histogram-based-gradient-boosting)
+ on some
+[data](https://research.unsw.edu.au/projects/unsw-nb15-dataset).
 That algoritm looks at its mistakes and tries to avoid those mistakes the next time around.
 
 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.
+Then it looks at that second tree's mistakes and makes a third 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."
+""")
+
+  st.markdown('## Behold')
+
+  st.markdown("""
+I've plotted the progression of those 10 trees as an animated series of interactive Plotly tree maps.
+The nodes are color-coded by which feature the decision tree used to make that split.
+
+I've also labeled each node with the feature name and the decison boundary.
+If you click on a node, Plotly will show the path to that node in a banner at the top of the plot so you can see how a point ends up in the node you clicked.
+
+The numbers and letters in brackets like `[3.L]` refer to the parent node's position in a breadth-first traversal of the tree and whether the current node is a left or right child of that parent.
+Plotly unforunately plots everything flipped for some reason, so all the `R` nodes are on the left and vice versa.
 
 I recommend expanding the plot by clicking the arrows in the top right corner since Streamlit makes the plot really small.
+It takes a second to get going after you hit `Play`.
 
 """)
 
 
-  st.markdown('## My Trees')
+
+  # Build the slider steps
+  slider_steps = []
+  for i in range(len(trees)):
+    slider_steps.append({
+      'args': [
+        [i],
+        {
+          'frame': {'duration': 300, 'redraw': True},
+          'mode': 'immediate',
+          'transition': {'duration': 300}
+        }
+      ],
+      'label': i,
+      'method': 'animate',
+    })
+
+  sliders_dict = {
+    'active': 0,
+    'currentvalue': {
+      'font': {'size': 20},
+      'prefix': 'Tree ',
+      'visible': True
+    },
+    'transition': {'duration': 300},
+    'steps': slider_steps
+  }
 
   # Maybe just show a Plotly animated chart
   # https://plotly.com/python/animations/#using-a-slider-and-buttons
@@ -297,26 +316,54 @@ I recommend expanding the plot by clicking the arrows in the top right corner si
         # border color of the buttons
         'bordercolor': '#000',
 
-        # Play button
+        # Play and Pause buttons
+        # trying to copy this exactly
+        # https://plotly.com/python/animations/#adding-control-buttons-to-animations
         'buttons':[{
           'label':'Play',
           'method': 'animate',
           'args':[None, {
+            'fromcurrent': True,
             'frame': {'duration':5000},
             'transition': {'duration': 2500},
-          }],
-        }
+            }],
+          },
+          {
+          'label': 'Pause',
+          'method': 'animate',
+          'args':[[None], {
+            'frame': {'duration': 0},
+            'transition': {'duration': 0},
+            'mode': 'immediate'
+            }]
+          }
        ]
-      }]
+      }],
+     # add the slider to the layout
+     sliders=[sliders_dict]
     )
   )
   st.plotly_chart(ani_fig)
 
   st.markdown("""
 This actually turned out to be a lot harder than I thought it would be.
+Plotly doesn't have many examples of how to create animations like this in Python.
+[The only example I could find](https://plotly.com/python/animations/#using-a-slider-and-buttons)
+was derided as an
+["old example [. . .] that is not the best one to learn how to define an animation with slider."](https://community.plotly.com/t/slider-not-updating-during-animation/37261)
+
+That helpful poster didn't point out any other examples, so that one is still pretty much all I have to go on.
+
+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.
 """)
 
-  st.markdown('# Check out each tree!')
+  st.markdown('## Check out the data!')
+  st.markdown("""
+This plot is similar to the plot above, but the slider here coordinates with a table to show the data I extracted to plot each tree.
+""")
 
   # This works the way I want
   # but the plot is tiny
@@ -335,9 +382,13 @@ This actually turned out to be a lot harder than I thought it would be.
     value=0,
     step=1
   )
+  st.markdown(f'### Tree {idx}')
   st.plotly_chart(figures[idx])
-  st.markdown(f'## Tree {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.
+
+""")
 
 if __name__=='__main__':
   main()