notebooks/score_visual.ipynb

{
 "metadata": {
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.6-final"
  },
  "orig_nbformat": 2,
  "kernelspec": {
   "name": "Python 3.7.6 64-bit ('base': conda)",
   "display_name": "Python 3.7.6 64-bit ('base': conda)",
   "metadata": {
    "interpreter": {
     "hash": "b8b1a584ca6d5769a8ab9f1c518f3f9bdf9236a52e581b5d219269464762273d"
    }
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2,
 "cells": [
  {
   "source": [
    "# Create Plotly Visual to Display on Parent Dashboard\n",
    "### Ideally, we would display the history of the child's submission scores and it would trend upwards\n",
    "### Currently, we don't have a history of squad scores per student so we are going to display a histogram of scores for the childs grade and how their individual score fits in compared to the other scores"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "source": [
    "#### After discussion with the DS team, we decided to create three visuals to present to the stakeholder:\n",
    "- Histogram with only their grade\n",
    "- Histogram with every grade\n",
    "- Time based line graph showing progress of individual student (for now this is with fake data)\n",
    "\n",
    "We also brainstormed ideas for future visuals which we will present to the stakeholders"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "Add plotly to requirements.txt"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Imports\n",
    "import pandas as pd\n",
    "import plotly.express as px\n",
    "import plotly.graph_objects as go"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": [
       "   Unnamed: 0  story_id  story_length  avg_word_len  quotes_num  \\\n",
       "0           0      3132          1375      5.092593           6   \n",
       "1           1      3104           903      4.961538           0   \n",
       "2           2      3103           750      5.000000           1   \n",
       "3           3      3117           439      4.877778           1   \n",
       "4           4      3102          1812      4.897297           0   \n",
       "\n",
       "   unique_words_num  squad_score  \n",
       "0               138    39.177001  \n",
       "1               110    26.173076  \n",
       "2                93    24.497113  \n",
       "3                56    16.454330  \n",
       "4               193    41.083353  "
      ],
      "text/html": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>Unnamed: 0</th>\n      <th>story_id</th>\n      <th>story_length</th>\n      <th>avg_word_len</th>\n      <th>quotes_num</th>\n      <th>unique_words_num</th>\n      <th>squad_score</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>0</th>\n      <td>0</td>\n      <td>3132</td>\n      <td>1375</td>\n      <td>5.092593</td>\n      <td>6</td>\n      <td>138</td>\n      <td>39.177001</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td>1</td>\n      <td>3104</td>\n      <td>903</td>\n      <td>4.961538</td>\n      <td>0</td>\n      <td>110</td>\n      <td>26.173076</td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td>2</td>\n      <td>3103</td>\n      <td>750</td>\n      <td>5.000000</td>\n      <td>1</td>\n      <td>93</td>\n      <td>24.497113</td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td>3</td>\n      <td>3117</td>\n      <td>439</td>\n      <td>4.877778</td>\n      <td>1</td>\n      <td>56</td>\n      <td>16.454330</td>\n    </tr>\n    <tr>\n      <th>4</th>\n      <td>4</td>\n      <td>3102</td>\n      <td>1812</td>\n      <td>4.897297</td>\n      <td>0</td>\n      <td>193</td>\n      <td>41.083353</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
     },
     "metadata": {},
     "execution_count": 3
    }
   ],
   "source": [
    "# Load data\n",
    "df_scores = pd.read_csv('story_squad_metrics.csv')\n",
    "df_scores.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Add grade column\n",
    "df_scores['grade'] = 0"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": [
       "   Unnamed: 0  story_id  story_length  avg_word_len  quotes_num  \\\n",
       "0           0      3132          1375      5.092593           6   \n",
       "1           1      3104           903      4.961538           0   \n",
       "2           2      3103           750      5.000000           1   \n",
       "3           3      3117           439      4.877778           1   \n",
       "4           4      3102          1812      4.897297           0   \n",
       "\n",
       "   unique_words_num  squad_score  grade  \n",
       "0               138    39.177001      3  \n",
       "1               110    26.173076      3  \n",
       "2                93    24.497113      3  \n",
       "3                56    16.454330      3  \n",
       "4               193    41.083353      3  "
      ],
      "text/html": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>Unnamed: 0</th>\n      <th>story_id</th>\n      <th>story_length</th>\n      <th>avg_word_len</th>\n      <th>quotes_num</th>\n      <th>unique_words_num</th>\n      <th>squad_score</th>\n      <th>grade</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>0</th>\n      <td>0</td>\n      <td>3132</td>\n      <td>1375</td>\n      <td>5.092593</td>\n      <td>6</td>\n      <td>138</td>\n      <td>39.177001</td>\n      <td>3</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td>1</td>\n      <td>3104</td>\n      <td>903</td>\n      <td>4.961538</td>\n      <td>0</td>\n      <td>110</td>\n      <td>26.173076</td>\n      <td>3</td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td>2</td>\n      <td>3103</td>\n      <td>750</td>\n      <td>5.000000</td>\n      <td>1</td>\n      <td>93</td>\n      <td>24.497113</td>\n      <td>3</td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td>3</td>\n      <td>3117</td>\n      <td>439</td>\n      <td>4.877778</td>\n      <td>1</td>\n      <td>56</td>\n      <td>16.454330</td>\n      <td>3</td>\n    </tr>\n    <tr>\n      <th>4</th>\n      <td>4</td>\n      <td>3102</td>\n      <td>1812</td>\n      <td>4.897297</td>\n      <td>0</td>\n      <td>193</td>\n      <td>41.083353</td>\n      <td>3</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
     },
     "metadata": {},
     "execution_count": 5
    }
   ],
   "source": [
    "# Sort stories into grades\n",
    "for i in range(df_scores.shape[0]):\n",
    "    if int(str(df_scores['story_id'][i])[0]) == 3:\n",
    "        df_scores['grade'][i] = 3\n",
    "    else:\n",
    "        df_scores['grade'][i] = 5\n",
    "df_scores.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": [
       "     Unnamed: 0  story_id  story_length  avg_word_len  quotes_num  \\\n",
       "162         162      5132          1233      5.180672           7   \n",
       "163         163      5103           712      5.274074          12   \n",
       "164         164      5104           811      5.132911           4   \n",
       "165         165      5105          1493      5.026936          15   \n",
       "166         166      5102          1113      4.776824           4   \n",
       "\n",
       "     unique_words_num  squad_score  grade  \n",
       "162               142    40.263333      5  \n",
       "163                81    34.823032      5  \n",
       "164                88    28.674303      5  \n",
       "165               179    49.299728      5  \n",
       "166               141    30.951752      5  "
      ],
      "text/html": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>Unnamed: 0</th>\n      <th>story_id</th>\n      <th>story_length</th>\n      <th>avg_word_len</th>\n      <th>quotes_num</th>\n      <th>unique_words_num</th>\n      <th>squad_score</th>\n      <th>grade</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>162</th>\n      <td>162</td>\n      <td>5132</td>\n      <td>1233</td>\n      <td>5.180672</td>\n      <td>7</td>\n      <td>142</td>\n      <td>40.263333</td>\n      <td>5</td>\n    </tr>\n    <tr>\n      <th>163</th>\n      <td>163</td>\n      <td>5103</td>\n      <td>712</td>\n      <td>5.274074</td>\n      <td>12</td>\n      <td>81</td>\n      <td>34.823032</td>\n      <td>5</td>\n    </tr>\n    <tr>\n      <th>164</th>\n      <td>164</td>\n      <td>5104</td>\n      <td>811</td>\n      <td>5.132911</td>\n      <td>4</td>\n      <td>88</td>\n      <td>28.674303</td>\n      <td>5</td>\n    </tr>\n    <tr>\n      <th>165</th>\n      <td>165</td>\n      <td>5105</td>\n      <td>1493</td>\n      <td>5.026936</td>\n      <td>15</td>\n      <td>179</td>\n      <td>49.299728</td>\n      <td>5</td>\n    </tr>\n    <tr>\n      <th>166</th>\n      <td>166</td>\n      <td>5102</td>\n      <td>1113</td>\n      <td>4.776824</td>\n      <td>4</td>\n      <td>141</td>\n      <td>30.951752</td>\n      <td>5</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
     },
     "metadata": {},
     "execution_count": 6
    }
   ],
   "source": [
    "df_scores.tail()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Split into third and fifth grade\n",
    "third_grade = df_scores[df_scores['grade'] == 3]\n",
    "fifth_grade = df_scores[df_scores['grade'] == 5]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Individual student's submission\n",
    "student_score = df_scores['squad_score'][0]"
   ]
  },
  {
   "source": [
    "## Graph of indivdual submission vs their specific grade\n",
    "- Implementing per stakeholder's request"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "plotlyServerURL": "https://plot.ly"
       },
       "data": [
        {
         "alignmentgroup": "True",
         "bingroup": "x",
         "hoverinfo": "none",
         "legendgroup": "",
         "marker": {
          "color": "#EB7E5B"
         },
         "name": "",
         "nbinsx": 20,
         "offsetgroup": "",
         "orientation": "v",
         "showlegend": false,
         "type": "histogram",
         "x": [
          39.17700092612715,
          26.17307633853555,
          24.497112616029693,
          16.45433031296146,
          41.08335313202026,
          30.042005605145874,
          41.83518129178706,
          28.53905591206685,
          27.448316163259843,
          35.6008402595943,
          17.723058870784573,
          26.653130103998464,
          18.15721641133409,
          18.75860989865693,
          28.075895142282434,
          16.959180290008348,
          30.43505200769539,
          21.966109004203414,
          42.777064510828,
          21.545020358821322,
          26.8410013529424,
          39.43722081575133,
          28.33998702270357,
          56.983989683797496,
          27.285811010037012,
          48.258120235462606,
          28.75149617765336,
          23.747671121033093,
          25.049411592768827,
          43.07556826131413,
          36.197301765123036,
          23.41030641871483,
          35.39823576657107,
          33.47510266563718,
          1.668999067039851,
          40.27776779467226,
          26.499693653526467,
          33.20822518497061,
          36.92970591423542,
          34.98706231977038,
          29.14544344495703,
          37.8543375979615,
          20.121084559044,
          46.687818348388994,
          29.22911376981418,
          34.66642823324979,
          23.89142378875293,
          18.26115801384582,
          37.144042216282614,
          45.28072003298425,
          35.48922078604201,
          16.084787809647814,
          30.860517497824574,
          39.9266896648896,
          54.06763653198328,
          31.956377584375787,
          27.430409318880876,
          39.5625931402419,
          35.61047959637045,
          30.472087587105193,
          38.24751177773102,
          25.88160400842751,
          23.318051826647785,
          21.324094565329574,
          38.190728750050134,
          30.891652647807952,
          13.734769644422705,
          26.35836269265865,
          60.73325060010264,
          19.4840887102708,
          23.79124763964793,
          24.48231910557159,
          39.31522387768224,
          22.957391819072672,
          25.04791204602755,
          31.810332033561696,
          33.24464244814661,
          57.57102002393891
         ],
         "xaxis": "x",
         "yaxis": "y"
        }
       ],
       "layout": {
        "annotations": [
         {
          "align": "center",
          "arrowcolor": "#636363",
          "arrowhead": 5,
          "arrowsize": 1,
          "arrowwidth": 2,
          "ax": 200,
          "ay": -100,
          "bgcolor": "#B5D33D",
          "bordercolor": "#c7c7c7",
          "borderpad": 4,
          "borderwidth": 2,
          "font": {
           "color": "black",
           "family": "PT Sans Narrow",
           "size": 16
          },
          "opacity": 0.8,
          "showarrow": true,
          "text": "{child's name} submission",
          "x": 39.17700092612715,
          "xref": "x",
          "y": 0.5,
          "yref": "paper"
         }
        ],
        "barmode": "relative",
        "legend": {
         "tracegroupgap": 0
        },
        "margin": {
         "t": 60
        },
        "plot_bgcolor": "#6CEAE6",
        "shapes": [
         {
          "type": "line",
          "x0": 39.17700092612715,
          "x1": 39.17700092612715,
          "xref": "x",
          "y0": 0,
          "y1": 1,
          "yref": "paper"
         }
        ],
        "template": {
         "data": {
          "bar": [
           {
            "error_x": {
             "color": "#2a3f5f"
            },
            "error_y": {
             "color": "#2a3f5f"
            },
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "bar"
           }
          ],
          "barpolar": [
           {
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "barpolar"
           }
          ],
          "carpet": [
           {
            "aaxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "baxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "type": "carpet"
           }
          ],
          "choropleth": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "choropleth"
           }
          ],
          "contour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "contour"
           }
          ],
          "contourcarpet": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "contourcarpet"
           }
          ],
          "heatmap": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmap"
           }
          ],
          "heatmapgl": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmapgl"
           }
          ],
          "histogram": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "histogram"
           }
          ],
          "histogram2d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2d"
           }
          ],
          "histogram2dcontour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2dcontour"
           }
          ],
          "mesh3d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "mesh3d"
           }
          ],
          "parcoords": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "parcoords"
           }
          ],
          "pie": [
           {
            "automargin": true,
            "type": "pie"
           }
          ],
          "scatter": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter"
           }
          ],
          "scatter3d": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter3d"
           }
          ],
          "scattercarpet": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattercarpet"
           }
          ],
          "scattergeo": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergeo"
           }
          ],
          "scattergl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergl"
           }
          ],
          "scattermapbox": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattermapbox"
           }
          ],
          "scatterpolar": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolar"
           }
          ],
          "scatterpolargl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolargl"
           }
          ],
          "scatterternary": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterternary"
           }
          ],
          "surface": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "surface"
           }
          ],
          "table": [
           {
            "cells": {
             "fill": {
              "color": "#EBF0F8"
             },
             "line": {
              "color": "white"
             }
            },
            "header": {
             "fill": {
              "color": "#C8D4E3"
             },
             "line": {
              "color": "white"
             }
            },
            "type": "table"
           }
          ]
         },
         "layout": {
          "annotationdefaults": {
           "arrowcolor": "#2a3f5f",
           "arrowhead": 0,
           "arrowwidth": 1
          },
          "coloraxis": {
           "colorbar": {
            "outlinewidth": 0,
            "ticks": ""
           }
          },
          "colorscale": {
           "diverging": [
            [
             0,
             "#8e0152"
            ],
            [
             0.1,
             "#c51b7d"
            ],
            [
             0.2,
             "#de77ae"
            ],
            [
             0.3,
             "#f1b6da"
            ],
            [
             0.4,
             "#fde0ef"
            ],
            [
             0.5,
             "#f7f7f7"
            ],
            [
             0.6,
             "#e6f5d0"
            ],
            [
             0.7,
             "#b8e186"
            ],
            [
             0.8,
             "#7fbc41"
            ],
            [
             0.9,
             "#4d9221"
            ],
            [
             1,
             "#276419"
            ]
           ],
           "sequential": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ],
           "sequentialminus": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ]
          },
          "colorway": [
           "#636efa",
           "#EF553B",
           "#00cc96",
           "#ab63fa",
           "#FFA15A",
           "#19d3f3",
           "#FF6692",
           "#B6E880",
           "#FF97FF",
           "#FECB52"
          ],
          "font": {
           "color": "#2a3f5f"
          },
          "geo": {
           "bgcolor": "white",
           "lakecolor": "white",
           "landcolor": "#E5ECF6",
           "showlakes": true,
           "showland": true,
           "subunitcolor": "white"
          },
          "hoverlabel": {
           "align": "left"
          },
          "hovermode": "closest",
          "mapbox": {
           "style": "light"
          },
          "paper_bgcolor": "white",
          "plot_bgcolor": "#E5ECF6",
          "polar": {
           "angularaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "radialaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "scene": {
           "xaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "yaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "zaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           }
          },
          "shapedefaults": {
           "line": {
            "color": "#2a3f5f"
           }
          },
          "ternary": {
           "aaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "baxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "caxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "title": {
           "x": 0.05
          },
          "xaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          },
          "yaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          }
         }
        },
        "title": {
         "font": {
          "family": "PT Sans Narrow",
          "size": 25
         },
         "text": "Distribution of This Week's {grade number} Grade Stories",
         "x": 0.5,
         "y": 0.95
        },
        "xaxis": {
         "anchor": "y",
         "domain": [
          0,
          1
         ],
         "showticklabels": false,
         "title": {
          "font": {
           "family": "PT Sans Narrow",
           "size": 20
          },
          "text": "Squad Score"
         }
        },
        "yaxis": {
         "anchor": "x",
         "domain": [
          0,
          1
         ],
         "showgrid": false,
         "showticklabels": false,
         "title": {
          "text": ""
         }
        }
       }
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "# Plot\n",
    "fig = px.histogram(third_grade, x='squad_score', nbins= 20, color_discrete_sequence= ['#EB7E5B'])\n",
    "fig.update_layout(\n",
    "    title= {\n",
    "    'text': \"Distribution of This Week's {grade number} Grade Stories\",\n",
    "    'y': .95,\n",
    "    'x': 0.5,\n",
    "    'font': {'size': 25, 'family': 'PT Sans Narrow'}},\n",
    "    shapes=[\n",
    "    dict(\n",
    "      type= 'line',\n",
    "      yref= 'paper', y0= 0, y1= 1,\n",
    "      xref= 'x', x0= student_score, x1= student_score\n",
    "    )],\n",
    "    annotations= [\n",
    "        dict(\n",
    "            x= student_score,\n",
    "            y= .5,\n",
    "            xref= 'x',\n",
    "            yref= 'paper',\n",
    "            text = \"{child's name} submission\",\n",
    "            arrowhead= 5,\n",
    "            ax= 200,\n",
    "            ay= -100,\n",
    "            showarrow=True,\n",
    "            font=dict(\n",
    "                family=\"PT Sans Narrow\",\n",
    "                size=16,\n",
    "                color=\"black\"\n",
    "                ),\n",
    "            align=\"center\",\n",
    "            arrowsize=1,\n",
    "            arrowwidth=2,\n",
    "            arrowcolor=\"#636363\",\n",
    "            bordercolor=\"#c7c7c7\",\n",
    "            borderwidth=2,\n",
    "            borderpad=4,\n",
    "            bgcolor=\"#B5D33D\",\n",
    "            opacity=0.8\n",
    "        ),\n",
    "        # To include an encouraging statement at the bottom of the graph\n",
    "        # Idea was to make this dynamic based off of that weeks highlights\n",
    "\n",
    "        # dict(\n",
    "        #     xref= 'paper',\n",
    "        #     yref= 'paper',\n",
    "        #     x= .5,\n",
    "        #     y= -.25,\n",
    "        #     text= \"Wow! Great job this week! Keep it up!\",\n",
    "        #     showarrow= False,\n",
    "        #     font= dict(\n",
    "        #         size= 18,\n",
    "        #         family= 'PT Sans Narrow'\n",
    "        #     )\n",
    "        # )\n",
    "    ],\n",
    "    plot_bgcolor= '#6CEAE6'\n",
    ")\n",
    "\n",
    "fig.update_traces(hoverinfo= 'none', hovertemplate= None)\n",
    "\n",
    "fig.update_xaxes(title_text= 'Squad Score', showticklabels= False, title_font= {\"size\": 20, 'family': 'PT Sans Narrow'})\n",
    "fig.update_yaxes(title_text= '', showticklabels= False, showgrid= False)"
   ]
  },
  {
   "source": [
    "## Graph for individual student vs the entirety of Story Squad\n",
    "- Not using per stakeholder"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 254,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "plotlyServerURL": "https://plot.ly"
       },
       "data": [
        {
         "alignmentgroup": "True",
         "bingroup": "x",
         "hoverinfo": "none",
         "legendgroup": "",
         "marker": {
          "color": "#EB7E5B"
         },
         "name": "",
         "nbinsx": 20,
         "offsetgroup": "",
         "orientation": "v",
         "showlegend": false,
         "type": "histogram",
         "x": [
          39.17700092612715,
          26.17307633853555,
          24.497112616029693,
          16.45433031296146,
          41.08335313202026,
          30.042005605145874,
          41.83518129178706,
          28.53905591206685,
          27.448316163259843,
          35.6008402595943,
          17.723058870784573,
          26.653130103998464,
          18.15721641133409,
          18.75860989865693,
          28.075895142282434,
          16.959180290008348,
          30.43505200769539,
          21.966109004203414,
          42.777064510828,
          21.545020358821322,
          26.8410013529424,
          39.43722081575133,
          28.33998702270357,
          56.983989683797496,
          27.285811010037012,
          48.258120235462606,
          28.75149617765336,
          23.747671121033093,
          25.049411592768827,
          43.07556826131413,
          36.197301765123036,
          23.41030641871483,
          35.39823576657107,
          33.47510266563718,
          1.668999067039851,
          40.27776779467226,
          26.499693653526467,
          33.20822518497061,
          36.92970591423542,
          34.98706231977038,
          29.14544344495703,
          37.8543375979615,
          20.121084559044,
          46.687818348388994,
          29.22911376981418,
          34.66642823324979,
          23.89142378875293,
          18.26115801384582,
          37.144042216282614,
          45.28072003298425,
          35.48922078604201,
          16.084787809647814,
          30.860517497824574,
          39.9266896648896,
          54.06763653198328,
          31.956377584375787,
          27.430409318880876,
          39.5625931402419,
          35.61047959637045,
          30.472087587105193,
          38.24751177773102,
          25.88160400842751,
          23.318051826647785,
          21.324094565329574,
          38.190728750050134,
          30.891652647807952,
          13.734769644422705,
          26.35836269265865,
          60.73325060010264,
          19.4840887102708,
          23.79124763964793,
          24.48231910557159,
          39.31522387768224,
          22.957391819072672,
          25.04791204602755,
          31.810332033561696,
          33.24464244814661,
          57.57102002393891,
          79.9508531062821,
          56.90325024286892,
          61.07970668962206,
          59.737804855642175,
          34.3406479904899,
          27.14978325363341,
          34.65529125079816,
          39.295253531252975,
          32.62871770208062,
          55.1044398116327,
          44.91785240182036,
          58.79077435364265,
          36.05054814916291,
          49.6560347427676,
          42.88999951696361,
          49.974837800239364,
          68.68664166639593,
          58.50495701119408,
          63.29308482502292,
          54.027860162415436,
          41.41844010232892,
          50.566976148590776,
          62.87661240235944,
          38.50864073629349,
          86.66001326775299,
          27.792034338114977,
          34.090560938545785,
          59.316685451290944,
          36.81854946142685,
          29.60496600239611,
          87.5481011896003,
          44.85707020057738,
          46.50554442391282,
          52.208292609736326,
          53.77503384791254,
          50.96422602055602,
          46.025293349414355,
          54.68637864531581,
          41.67242276955542,
          89.1102597157259,
          19.080160630405476,
          27.888907313101786,
          34.24003603503812,
          35.87554277046981,
          46.247226895352405,
          50.413104205664816,
          62.92343508249362,
          31.859075691230466,
          32.85455305309053,
          56.4561568112547,
          45.061007064032154,
          64.46019455394979,
          46.61929325737791,
          29.50823064411327,
          81.97545959034682,
          36.940741369893644,
          39.5810325296936,
          50.441257868257885,
          41.76195060583185,
          31.679127788664022,
          34.366331724007544,
          72.45097051618629,
          32.481222146161805,
          45.314373207455255,
          41.43692417769979,
          46.61829375523193,
          38.028361862801205,
          27.372066205309377,
          56.964208383225,
          73.81619568485748,
          31.49359956630708,
          60.60528337508186,
          65.6372967662724,
          40.5424753640311,
          51.71040219459515,
          28.08005284394473,
          65.05805667391623,
          31.22766286122255,
          66.62624809316321,
          34.56441031940632,
          63.948738429301606,
          47.16403614354892,
          68.55594937407753,
          25.96986016005692,
          40.2633326629847,
          34.82303160049183,
          28.674302592956053,
          49.29972821829664,
          30.951752156466213
         ],
         "xaxis": "x",
         "yaxis": "y"
        }
       ],
       "layout": {
        "annotations": [
         {
          "align": "center",
          "arrowcolor": "#636363",
          "arrowhead": 5,
          "arrowsize": 1,
          "arrowwidth": 2,
          "ax": 200,
          "ay": -100,
          "bgcolor": "#B5D33D",
          "bordercolor": "#c7c7c7",
          "borderpad": 4,
          "borderwidth": 2,
          "font": {
           "color": "black",
           "family": "PT Sans Narrow",
           "size": 16
          },
          "opacity": 0.8,
          "showarrow": true,
          "text": "{child's name}'s submission",
          "x": 39.17700092612715,
          "xref": "x",
          "y": 0.5,
          "yref": "paper"
         },
         {
          "font": {
           "family": "PT Sans Narrow",
           "size": 18
          },
          "showarrow": false,
          "text": "Wow! Great job this week! Keep it up!",
          "x": 0.5,
          "xref": "paper",
          "y": -0.25,
          "yref": "paper"
         }
        ],
        "barmode": "relative",
        "legend": {
         "tracegroupgap": 0
        },
        "margin": {
         "t": 60
        },
        "plot_bgcolor": "#6CEAE6",
        "shapes": [
         {
          "type": "line",
          "x0": 39.17700092612715,
          "x1": 39.17700092612715,
          "xref": "x",
          "y0": 0,
          "y1": 1,
          "yref": "paper"
         }
        ],
        "template": {
         "data": {
          "bar": [
           {
            "error_x": {
             "color": "#2a3f5f"
            },
            "error_y": {
             "color": "#2a3f5f"
            },
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "bar"
           }
          ],
          "barpolar": [
           {
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "barpolar"
           }
          ],
          "carpet": [
           {
            "aaxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "baxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "type": "carpet"
           }
          ],
          "choropleth": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "choropleth"
           }
          ],
          "contour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "contour"
           }
          ],
          "contourcarpet": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "contourcarpet"
           }
          ],
          "heatmap": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmap"
           }
          ],
          "heatmapgl": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmapgl"
           }
          ],
          "histogram": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "histogram"
           }
          ],
          "histogram2d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2d"
           }
          ],
          "histogram2dcontour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2dcontour"
           }
          ],
          "mesh3d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "mesh3d"
           }
          ],
          "parcoords": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "parcoords"
           }
          ],
          "pie": [
           {
            "automargin": true,
            "type": "pie"
           }
          ],
          "scatter": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter"
           }
          ],
          "scatter3d": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter3d"
           }
          ],
          "scattercarpet": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattercarpet"
           }
          ],
          "scattergeo": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergeo"
           }
          ],
          "scattergl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergl"
           }
          ],
          "scattermapbox": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattermapbox"
           }
          ],
          "scatterpolar": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolar"
           }
          ],
          "scatterpolargl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolargl"
           }
          ],
          "scatterternary": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterternary"
           }
          ],
          "surface": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "surface"
           }
          ],
          "table": [
           {
            "cells": {
             "fill": {
              "color": "#EBF0F8"
             },
             "line": {
              "color": "white"
             }
            },
            "header": {
             "fill": {
              "color": "#C8D4E3"
             },
             "line": {
              "color": "white"
             }
            },
            "type": "table"
           }
          ]
         },
         "layout": {
          "annotationdefaults": {
           "arrowcolor": "#2a3f5f",
           "arrowhead": 0,
           "arrowwidth": 1
          },
          "coloraxis": {
           "colorbar": {
            "outlinewidth": 0,
            "ticks": ""
           }
          },
          "colorscale": {
           "diverging": [
            [
             0,
             "#8e0152"
            ],
            [
             0.1,
             "#c51b7d"
            ],
            [
             0.2,
             "#de77ae"
            ],
            [
             0.3,
             "#f1b6da"
            ],
            [
             0.4,
             "#fde0ef"
            ],
            [
             0.5,
             "#f7f7f7"
            ],
            [
             0.6,
             "#e6f5d0"
            ],
            [
             0.7,
             "#b8e186"
            ],
            [
             0.8,
             "#7fbc41"
            ],
            [
             0.9,
             "#4d9221"
            ],
            [
             1,
             "#276419"
            ]
           ],
           "sequential": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ],
           "sequentialminus": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ]
          },
          "colorway": [
           "#636efa",
           "#EF553B",
           "#00cc96",
           "#ab63fa",
           "#FFA15A",
           "#19d3f3",
           "#FF6692",
           "#B6E880",
           "#FF97FF",
           "#FECB52"
          ],
          "font": {
           "color": "#2a3f5f"
          },
          "geo": {
           "bgcolor": "white",
           "lakecolor": "white",
           "landcolor": "#E5ECF6",
           "showlakes": true,
           "showland": true,
           "subunitcolor": "white"
          },
          "hoverlabel": {
           "align": "left"
          },
          "hovermode": "closest",
          "mapbox": {
           "style": "light"
          },
          "paper_bgcolor": "white",
          "plot_bgcolor": "#E5ECF6",
          "polar": {
           "angularaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "radialaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "scene": {
           "xaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "yaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "zaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           }
          },
          "shapedefaults": {
           "line": {
            "color": "#2a3f5f"
           }
          },
          "ternary": {
           "aaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "baxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "caxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "title": {
           "x": 0.05
          },
          "xaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          },
          "yaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          }
         }
        },
        "title": {
         "font": {
          "family": "PT Sans Narrow",
          "size": 25
         },
         "text": "All of Story Squad",
         "x": 0.5,
         "y": 0.95
        },
        "xaxis": {
         "anchor": "y",
         "domain": [
          0,
          1
         ],
         "showticklabels": false,
         "title": {
          "font": {
           "family": "PT Sans Narrow",
           "size": 20
          },
          "text": "Squad Score!"
         }
        },
        "yaxis": {
         "anchor": "x",
         "domain": [
          0,
          1
         ],
         "showgrid": false,
         "showticklabels": false,
         "title": {
          "text": ""
         }
        }
       }
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "# Plot\n",
    "fig = px.histogram(df_scores, x='squad_score', nbins= 20, color_discrete_sequence= ['#EB7E5B'])\n",
    "fig.update_layout(\n",
    "    title= {\n",
    "    'text': \"All of Story Squad\",\n",
    "    'y': .95,\n",
    "    'x': 0.5,\n",
    "    'font': {'size': 25, 'family': 'PT Sans Narrow'}},\n",
    "    shapes=[\n",
    "    dict(\n",
    "      type= 'line',\n",
    "      yref= 'paper', y0= 0, y1= 1,\n",
    "      xref= 'x', x0= student_score, x1= student_score\n",
    "    )],\n",
    "    annotations= [\n",
    "        dict(\n",
    "            x= student_score,\n",
    "            y= .5,\n",
    "            xref= 'x',\n",
    "            yref= 'paper',\n",
    "            text = \"{child's name}'s submission\",\n",
    "            arrowhead= 5,\n",
    "            ax= 200,\n",
    "            ay= -100,\n",
    "            showarrow=True,\n",
    "            font=dict(\n",
    "                family=\"PT Sans Narrow\",\n",
    "                size=16,\n",
    "                color=\"black\"\n",
    "                ),\n",
    "            align=\"center\",\n",
    "            arrowsize=1,\n",
    "            arrowwidth=2,\n",
    "            arrowcolor=\"#636363\",\n",
    "            bordercolor=\"#c7c7c7\",\n",
    "            borderwidth=2,\n",
    "            borderpad=4,\n",
    "            bgcolor=\"#B5D33D\",\n",
    "            opacity=0.8\n",
    "        ),\n",
    "        dict(\n",
    "            xref= 'paper',\n",
    "            yref= 'paper',\n",
    "            x= .5,\n",
    "            y= -.25,\n",
    "            text= \"Wow! Great job this week! Keep it up!\",\n",
    "            showarrow= False,\n",
    "            font= dict(\n",
    "                size= 18,\n",
    "                family= 'PT Sans Narrow'\n",
    "            )\n",
    "        )\n",
    "    ],\n",
    "    plot_bgcolor= '#6CEAE6'\n",
    ")\n",
    "\n",
    "fig.update_traces(hoverinfo= 'none', hovertemplate= None)\n",
    "\n",
    "fig.update_xaxes(title_text= 'Squad Score!', showticklabels= False, title_font= {\"size\": 20, 'family': 'PT Sans Narrow'})\n",
    "fig.update_yaxes(title_text= '', showticklabels= False, showgrid= False)"
   ]
  },
  {
   "source": [
    "## Student's submissions over time\n",
    "- Using fake data\n",
    "- Without scores per stakeholder request"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": [
       "117    89.110260\n",
       "108    87.548101\n",
       "102    86.660013\n",
       "132    81.975460\n",
       "78     79.950853\n",
       "Name: squad_score, dtype: float64"
      ]
     },
     "metadata": {},
     "execution_count": 11
    }
   ],
   "source": [
    "# Pull out squad_scores sorted decreasing\n",
    "fake_df = df_scores['squad_score'].sort_values(ascending= False)\n",
    "fake_df.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": [
       "   index  squad_score\n",
       "0      0    51.710402\n",
       "1      1    54.686379\n",
       "2      2    56.983990\n",
       "3      3    59.737805\n",
       "4      4    62.923435\n",
       "5      5    65.637297\n",
       "6      6    73.816196\n",
       "7      7    89.110260"
      ],
      "text/html": "<div>\n<style scoped>\n    .dataframe tbody tr th:only-of-type {\n        vertical-align: middle;\n    }\n\n    .dataframe tbody tr th {\n        vertical-align: top;\n    }\n\n    .dataframe thead th {\n        text-align: right;\n    }\n</style>\n<table border=\"1\" class=\"dataframe\">\n  <thead>\n    <tr style=\"text-align: right;\">\n      <th></th>\n      <th>index</th>\n      <th>squad_score</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr>\n      <th>0</th>\n      <td>0</td>\n      <td>51.710402</td>\n    </tr>\n    <tr>\n      <th>1</th>\n      <td>1</td>\n      <td>54.686379</td>\n    </tr>\n    <tr>\n      <th>2</th>\n      <td>2</td>\n      <td>56.983990</td>\n    </tr>\n    <tr>\n      <th>3</th>\n      <td>3</td>\n      <td>59.737805</td>\n    </tr>\n    <tr>\n      <th>4</th>\n      <td>4</td>\n      <td>62.923435</td>\n    </tr>\n    <tr>\n      <th>5</th>\n      <td>5</td>\n      <td>65.637297</td>\n    </tr>\n    <tr>\n      <th>6</th>\n      <td>6</td>\n      <td>73.816196</td>\n    </tr>\n    <tr>\n      <th>7</th>\n      <td>7</td>\n      <td>89.110260</td>\n    </tr>\n  </tbody>\n</table>\n</div>"
     },
     "metadata": {},
     "execution_count": 12
    }
   ],
   "source": [
    "# Create a fake student by pulling out every 5th row for the first 40 scores\n",
    "# Reset index to use as \"Week Number\" for now\n",
    "fake_student = fake_df[:40:5].sort_values().reset_index(drop= True).reset_index()\n",
    "fake_student"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 83,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "plotlyServerURL": "https://plot.ly"
       },
       "data": [
        {
         "hoverinfo": "none",
         "line": {
          "color": "#EB7E5B",
          "width": 7
         },
         "marker": {
          "color": "#FED23E",
          "size": 18,
          "symbol": "star"
         },
         "mode": "lines+markers+text",
         "type": "scatter",
         "x": [
          0,
          1,
          2,
          3,
          4,
          5,
          6,
          7
         ],
         "y": [
          51.71040219459515,
          54.68637864531581,
          56.983989683797496,
          59.737804855642175,
          62.92343508249362,
          65.6372967662724,
          73.81619568485748,
          89.1102597157259
         ]
        }
       ],
       "layout": {
        "plot_bgcolor": "#6CEAE6",
        "template": {
         "data": {
          "bar": [
           {
            "error_x": {
             "color": "#2a3f5f"
            },
            "error_y": {
             "color": "#2a3f5f"
            },
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "bar"
           }
          ],
          "barpolar": [
           {
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "barpolar"
           }
          ],
          "carpet": [
           {
            "aaxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "baxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "type": "carpet"
           }
          ],
          "choropleth": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "choropleth"
           }
          ],
          "contour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "contour"
           }
          ],
          "contourcarpet": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "contourcarpet"
           }
          ],
          "heatmap": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmap"
           }
          ],
          "heatmapgl": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmapgl"
           }
          ],
          "histogram": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "histogram"
           }
          ],
          "histogram2d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2d"
           }
          ],
          "histogram2dcontour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2dcontour"
           }
          ],
          "mesh3d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "mesh3d"
           }
          ],
          "parcoords": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "parcoords"
           }
          ],
          "pie": [
           {
            "automargin": true,
            "type": "pie"
           }
          ],
          "scatter": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter"
           }
          ],
          "scatter3d": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter3d"
           }
          ],
          "scattercarpet": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattercarpet"
           }
          ],
          "scattergeo": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergeo"
           }
          ],
          "scattergl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergl"
           }
          ],
          "scattermapbox": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattermapbox"
           }
          ],
          "scatterpolar": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolar"
           }
          ],
          "scatterpolargl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolargl"
           }
          ],
          "scatterternary": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterternary"
           }
          ],
          "surface": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "surface"
           }
          ],
          "table": [
           {
            "cells": {
             "fill": {
              "color": "#EBF0F8"
             },
             "line": {
              "color": "white"
             }
            },
            "header": {
             "fill": {
              "color": "#C8D4E3"
             },
             "line": {
              "color": "white"
             }
            },
            "type": "table"
           }
          ]
         },
         "layout": {
          "annotationdefaults": {
           "arrowcolor": "#2a3f5f",
           "arrowhead": 0,
           "arrowwidth": 1
          },
          "coloraxis": {
           "colorbar": {
            "outlinewidth": 0,
            "ticks": ""
           }
          },
          "colorscale": {
           "diverging": [
            [
             0,
             "#8e0152"
            ],
            [
             0.1,
             "#c51b7d"
            ],
            [
             0.2,
             "#de77ae"
            ],
            [
             0.3,
             "#f1b6da"
            ],
            [
             0.4,
             "#fde0ef"
            ],
            [
             0.5,
             "#f7f7f7"
            ],
            [
             0.6,
             "#e6f5d0"
            ],
            [
             0.7,
             "#b8e186"
            ],
            [
             0.8,
             "#7fbc41"
            ],
            [
             0.9,
             "#4d9221"
            ],
            [
             1,
             "#276419"
            ]
           ],
           "sequential": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ],
           "sequentialminus": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ]
          },
          "colorway": [
           "#636efa",
           "#EF553B",
           "#00cc96",
           "#ab63fa",
           "#FFA15A",
           "#19d3f3",
           "#FF6692",
           "#B6E880",
           "#FF97FF",
           "#FECB52"
          ],
          "font": {
           "color": "#2a3f5f"
          },
          "geo": {
           "bgcolor": "white",
           "lakecolor": "white",
           "landcolor": "#E5ECF6",
           "showlakes": true,
           "showland": true,
           "subunitcolor": "white"
          },
          "hoverlabel": {
           "align": "left"
          },
          "hovermode": "closest",
          "mapbox": {
           "style": "light"
          },
          "paper_bgcolor": "white",
          "plot_bgcolor": "#E5ECF6",
          "polar": {
           "angularaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "radialaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "scene": {
           "xaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "yaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "zaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           }
          },
          "shapedefaults": {
           "line": {
            "color": "#2a3f5f"
           }
          },
          "ternary": {
           "aaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "baxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "caxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "title": {
           "x": 0.05
          },
          "xaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          },
          "yaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          }
         }
        },
        "title": {
         "font": {
          "family": "PT Sans Narrow",
          "size": 25
         },
         "text": "{Child's name}'s Squad Score Over Time",
         "x": 0.5,
         "y": 0.95
        },
        "xaxis": {
         "showgrid": false,
         "title": {
          "font": {
           "family": "PT Sans Narrow",
           "size": 20
          },
          "text": "Week Number"
         },
         "zeroline": false
        },
        "yaxis": {
         "showgrid": false,
         "showticklabels": false,
         "title": {
          "font": {
           "family": "PT Sans Narrow",
           "size": 20
          },
          "text": "Squad Score"
         }
        }
       }
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "# Plotly line graph to show improvement over time\n",
    "\n",
    "fig = go.Figure(data= go.Scatter(x= fake_student['index'],  y= fake_student['squad_score'], line_width = 7, line_color= \"#EB7E5B\", mode= 'lines+markers+text', marker_size= 18, marker_color= '#FED23E', marker_symbol= 'star'))\n",
    "\n",
    "fig.update_layout(\n",
    "    title= {\n",
    "    'text': \"{Child's name}'s Squad Score Over Time\",\n",
    "    'y': .95,\n",
    "    'x': 0.5,\n",
    "    'font': {'size': 25, 'family': 'PT Sans Narrow'}},\n",
    "    plot_bgcolor= '#6CEAE6'\n",
    ")\n",
    "\n",
    "fig.update_traces(hoverinfo= 'none', hovertemplate= None)\n",
    "\n",
    "fig.update_xaxes(title_text= 'Week Number', title_font= {'size': 20, 'family': 'PT Sans Narrow'}, showgrid= False, zeroline= False)\n",
    "\n",
    "fig.update_yaxes(title_text= 'Squad Score', title_font= {'size': 20, 'family': 'PT Sans Narrow'}, showticklabels= False, showgrid= False)\n",
    "\n",
    "fig.show()\n",
    "\n",
    "# To show the scores, put in the first fig line\n",
    "# text= fake_student['squad_score'].astype(int), textposition= 'top left',"
   ]
  },
  {
   "source": [
    "## Function to build line graph of student's submission history\n",
    "- Input needed: list containing the history of student's grades, student's name"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 168,
   "metadata": {},
   "outputs": [],
   "source": [
    "def line_graph(score_history, name):\n",
    "    '''\n",
    "    Function produces a line graph of a specific student's squad scores over time\n",
    "    To be displayed on the parent dashboard\n",
    "\n",
    "        Input: A list contain the history of the students scores, in chronological order. And student's name.\n",
    "\n",
    "        Output: Plotly JSON for web to display using plotly.js on the parent dashboard\n",
    "    '''\n",
    "\n",
    "    # Plotly line graph to show improvement over time\n",
    "    fig = go.Figure(data= go.Scatter(x= [i+1 for i in range(len(score_history))],  y= score_history, line_width = 7, line_color= \"#EB7E5B\", mode= 'lines+markers+text', marker_size= 18, marker_color= '#FED23E', marker_symbol= 'star'))\n",
    "\n",
    "    fig.update_layout(\n",
    "        title= {\n",
    "        'text': f\"{name}'s Squad Score Over Time\",\n",
    "        'y': .95, \n",
    "        'x': 0.5,\n",
    "        'font': {'size': 25, 'family': 'PT Sans Narrow'}},\n",
    "        plot_bgcolor= '#6CEAE6'\n",
    "    )\n",
    "\n",
    "    fig.update_traces(hoverinfo= 'none', hovertemplate= None)\n",
    "\n",
    "    fig.update_xaxes(title_text= 'Week Number', title_font= {'size': 20, 'family': 'PT Sans Narrow'}, showgrid= False, zeroline= False, ticks=\"inside\", tickvals= [i+1 for i in range(len(score_history))])\n",
    "\n",
    "    fig.update_yaxes(title_text= 'Squad Score', title_font= {'size': 20, 'family': 'PT Sans Narrow'}, showticklabels= False, showgrid= False)\n",
    "\n",
    "    # If there is only 1 submission, it will only show a single data point\n",
    "    # Includes a sentence to the parent asking to check back when more data is available\n",
    "    if len(score_history) <2:\n",
    "        fig.update_layout(\n",
    "            annotations= [\n",
    "                dict(\n",
    "                    xref= 'paper',\n",
    "                    yref= 'paper',\n",
    "                    x= .5,\n",
    "                    y= 1.15,\n",
    "                    text= \"Your child only has one submission so far. Please check back next week to view their progress!\",\n",
    "                    showarrow= False,\n",
    "                    font= dict(\n",
    "                        size= 18,\n",
    "                        family= 'PT Sans Narrow'\n",
    "                    )\n",
    "                )\n",
    "            ]    \n",
    "        ),\n",
    "\n",
    "    # Return as json for web to use in plotly.js\n",
    "    return fig.to_json()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 169,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Fake history df with week numbers\n",
    "fake_history = [10, 20, 30, 50, 30, 60, 35]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 170,
   "metadata": {},
   "outputs": [],
   "source": [
    "name = 'Steven'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 171,
   "metadata": {},
   "outputs": [
    {
     "output_type": "display_data",
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "plotlyServerURL": "https://plot.ly"
       },
       "data": [
        {
         "hoverinfo": "none",
         "line": {
          "color": "#EB7E5B",
          "width": 7
         },
         "marker": {
          "color": "#FED23E",
          "size": 18,
          "symbol": "star"
         },
         "mode": "lines+markers+text",
         "type": "scatter",
         "x": [
          1,
          2,
          3,
          4,
          5,
          6,
          7
         ],
         "y": [
          10,
          20,
          30,
          50,
          30,
          60,
          35
         ]
        }
       ],
       "layout": {
        "plot_bgcolor": "#6CEAE6",
        "template": {
         "data": {
          "bar": [
           {
            "error_x": {
             "color": "#2a3f5f"
            },
            "error_y": {
             "color": "#2a3f5f"
            },
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "bar"
           }
          ],
          "barpolar": [
           {
            "marker": {
             "line": {
              "color": "#E5ECF6",
              "width": 0.5
             }
            },
            "type": "barpolar"
           }
          ],
          "carpet": [
           {
            "aaxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "baxis": {
             "endlinecolor": "#2a3f5f",
             "gridcolor": "white",
             "linecolor": "white",
             "minorgridcolor": "white",
             "startlinecolor": "#2a3f5f"
            },
            "type": "carpet"
           }
          ],
          "choropleth": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "choropleth"
           }
          ],
          "contour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "contour"
           }
          ],
          "contourcarpet": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "contourcarpet"
           }
          ],
          "heatmap": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmap"
           }
          ],
          "heatmapgl": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "heatmapgl"
           }
          ],
          "histogram": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "histogram"
           }
          ],
          "histogram2d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2d"
           }
          ],
          "histogram2dcontour": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "histogram2dcontour"
           }
          ],
          "mesh3d": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "type": "mesh3d"
           }
          ],
          "parcoords": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "parcoords"
           }
          ],
          "pie": [
           {
            "automargin": true,
            "type": "pie"
           }
          ],
          "scatter": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter"
           }
          ],
          "scatter3d": [
           {
            "line": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatter3d"
           }
          ],
          "scattercarpet": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattercarpet"
           }
          ],
          "scattergeo": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergeo"
           }
          ],
          "scattergl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattergl"
           }
          ],
          "scattermapbox": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scattermapbox"
           }
          ],
          "scatterpolar": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolar"
           }
          ],
          "scatterpolargl": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterpolargl"
           }
          ],
          "scatterternary": [
           {
            "marker": {
             "colorbar": {
              "outlinewidth": 0,
              "ticks": ""
             }
            },
            "type": "scatterternary"
           }
          ],
          "surface": [
           {
            "colorbar": {
             "outlinewidth": 0,
             "ticks": ""
            },
            "colorscale": [
             [
              0,
              "#0d0887"
             ],
             [
              0.1111111111111111,
              "#46039f"
             ],
             [
              0.2222222222222222,
              "#7201a8"
             ],
             [
              0.3333333333333333,
              "#9c179e"
             ],
             [
              0.4444444444444444,
              "#bd3786"
             ],
             [
              0.5555555555555556,
              "#d8576b"
             ],
             [
              0.6666666666666666,
              "#ed7953"
             ],
             [
              0.7777777777777778,
              "#fb9f3a"
             ],
             [
              0.8888888888888888,
              "#fdca26"
             ],
             [
              1,
              "#f0f921"
             ]
            ],
            "type": "surface"
           }
          ],
          "table": [
           {
            "cells": {
             "fill": {
              "color": "#EBF0F8"
             },
             "line": {
              "color": "white"
             }
            },
            "header": {
             "fill": {
              "color": "#C8D4E3"
             },
             "line": {
              "color": "white"
             }
            },
            "type": "table"
           }
          ]
         },
         "layout": {
          "annotationdefaults": {
           "arrowcolor": "#2a3f5f",
           "arrowhead": 0,
           "arrowwidth": 1
          },
          "coloraxis": {
           "colorbar": {
            "outlinewidth": 0,
            "ticks": ""
           }
          },
          "colorscale": {
           "diverging": [
            [
             0,
             "#8e0152"
            ],
            [
             0.1,
             "#c51b7d"
            ],
            [
             0.2,
             "#de77ae"
            ],
            [
             0.3,
             "#f1b6da"
            ],
            [
             0.4,
             "#fde0ef"
            ],
            [
             0.5,
             "#f7f7f7"
            ],
            [
             0.6,
             "#e6f5d0"
            ],
            [
             0.7,
             "#b8e186"
            ],
            [
             0.8,
             "#7fbc41"
            ],
            [
             0.9,
             "#4d9221"
            ],
            [
             1,
             "#276419"
            ]
           ],
           "sequential": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ],
           "sequentialminus": [
            [
             0,
             "#0d0887"
            ],
            [
             0.1111111111111111,
             "#46039f"
            ],
            [
             0.2222222222222222,
             "#7201a8"
            ],
            [
             0.3333333333333333,
             "#9c179e"
            ],
            [
             0.4444444444444444,
             "#bd3786"
            ],
            [
             0.5555555555555556,
             "#d8576b"
            ],
            [
             0.6666666666666666,
             "#ed7953"
            ],
            [
             0.7777777777777778,
             "#fb9f3a"
            ],
            [
             0.8888888888888888,
             "#fdca26"
            ],
            [
             1,
             "#f0f921"
            ]
           ]
          },
          "colorway": [
           "#636efa",
           "#EF553B",
           "#00cc96",
           "#ab63fa",
           "#FFA15A",
           "#19d3f3",
           "#FF6692",
           "#B6E880",
           "#FF97FF",
           "#FECB52"
          ],
          "font": {
           "color": "#2a3f5f"
          },
          "geo": {
           "bgcolor": "white",
           "lakecolor": "white",
           "landcolor": "#E5ECF6",
           "showlakes": true,
           "showland": true,
           "subunitcolor": "white"
          },
          "hoverlabel": {
           "align": "left"
          },
          "hovermode": "closest",
          "mapbox": {
           "style": "light"
          },
          "paper_bgcolor": "white",
          "plot_bgcolor": "#E5ECF6",
          "polar": {
           "angularaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "radialaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "scene": {
           "xaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "yaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           },
           "zaxis": {
            "backgroundcolor": "#E5ECF6",
            "gridcolor": "white",
            "gridwidth": 2,
            "linecolor": "white",
            "showbackground": true,
            "ticks": "",
            "zerolinecolor": "white"
           }
          },
          "shapedefaults": {
           "line": {
            "color": "#2a3f5f"
           }
          },
          "ternary": {
           "aaxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "baxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           },
           "bgcolor": "#E5ECF6",
           "caxis": {
            "gridcolor": "white",
            "linecolor": "white",
            "ticks": ""
           }
          },
          "title": {
           "x": 0.05
          },
          "xaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          },
          "yaxis": {
           "automargin": true,
           "gridcolor": "white",
           "linecolor": "white",
           "ticks": "",
           "title": {
            "standoff": 15
           },
           "zerolinecolor": "white",
           "zerolinewidth": 2
          }
         }
        },
        "title": {
         "font": {
          "family": "PT Sans Narrow",
          "size": 25
         },
         "text": "Steven's Squad Score Over Time",
         "x": 0.5,
         "y": 0.95
        },
        "xaxis": {
         "showgrid": false,
         "ticks": "inside",
         "tickvals": [
          1,
          2,
          3,
          4,
          5,
          6,
          7
         ],
         "title": {
          "font": {
           "family": "PT Sans Narrow",
           "size": 20
          },
          "text": "Week Number"
         },
         "zeroline": false
        },
        "yaxis": {
         "showgrid": false,
         "showticklabels": false,
         "title": {
          "font": {
           "family": "PT Sans Narrow",
           "size": 20
          },
          "text": "Squad Score"
         }
        }
       }
      }
     },
     "metadata": {}
    }
   ],
   "source": [
    "line_graph(fake_history, name)"
   ]
  },
  {
   "source": [
    "## Function to create histogram to show student's submission compared to their grade for current week\n",
    "- Input needed: List of squad_scores for the specific grade, List of student information [grade_number, student_name, student_score]"
   ],
   "cell_type": "markdown",
   "metadata": {}
  },
  {
   "cell_type": "code",
   "execution_count": 196,
   "metadata": {},
   "outputs": [],
   "source": [
    "def histogram(grade_list, student_info):\n",
    "    '''\n",
    "    Plotly histogram for the entirety of the user's grade's submission scores for that week\n",
    "    Plots a vertical line for the specific user's score so they can see how they compare to their grade\n",
    "\n",
    "        Input: df for the specific grade level with 'squad_score' column\n",
    "            Student information in a list in this order: [grade_number, student_name, student_score]\n",
    "        Output: Plotly JSON that can be passed to the web to display on the parent dashboard\n",
    "    '''\n",
    "    # Dynamic variables to use for labels on the plot\n",
    "    grade_number, student_name, student_score = student_info\n",
    "\n",
    "    # Plot\n",
    "    fig = px.histogram(x=grade_list, nbins= 20, color_discrete_sequence= ['#EB7E5B'])\n",
    "    fig.update_layout(\n",
    "        title= {\n",
    "        'text': f\"Distribution of This Week's Grade {grade_number} Stories\",\n",
    "        'y': .95,\n",
    "        'x': 0.5,\n",
    "        'font': {'size': 25, 'family': 'PT Sans Narrow'}},\n",
    "        shapes=[\n",
    "        dict(\n",
    "        type= 'line',\n",
    "        yref= 'paper', y0= 0, y1= 1,\n",
    "        xref= 'x', x0= student_score, x1= student_score\n",
    "        )],\n",
    "        annotations= [\n",
    "            dict(\n",
    "                x= student_score,\n",
    "                y= .5,\n",
    "                xref= 'x',\n",
    "                yref= 'paper',\n",
    "                text = f\"{student_name}'s submission\",\n",
    "                arrowhead= 5,\n",
    "                ax= 200,\n",
    "                ay= -100,\n",
    "                showarrow=True,\n",
    "                font=dict(\n",
    "                    family=\"PT Sans Narrow\",\n",
    "                    size=16,\n",
    "                    color=\"black\"\n",
    "                    ),\n",
    "                align=\"center\",\n",
    "                arrowsize=1,\n",
    "                arrowwidth=2,\n",
    "                arrowcolor=\"#636363\",\n",
    "                bordercolor=\"#c7c7c7\",\n",
    "                borderwidth=2,\n",
    "                borderpad=4,\n",
    "                bgcolor=\"#B5D33D\",\n",
    "                opacity=0.8\n",
    "            ),\n",
    "            # To include an encouraging statement at the bottom of the graph\n",
    "            # Idea was to make this dynamic based off of that weeks highlights\n",
    "\n",
    "            # dict(\n",
    "            #     xref= 'paper',\n",
    "            #     yref= 'paper',\n",
    "            #     x= .5,\n",
    "            #     y= -.25,\n",
    "            #     text= \"Wow! Great job this week! Keep it up!\",\n",
    "            #     showarrow= False,\n",
    "            #     font= dict(\n",
    "            #         size= 18,\n",
    "            #         family= 'PT Sans Narrow'\n",
    "            #     )\n",
    "            # )\n",
    "        ],\n",
    "        plot_bgcolor= '#6CEAE6'\n",
    "    )\n",
    "\n",
    "    fig.update_traces(hoverinfo= 'none', hovertemplate= None)\n",
    "\n",
    "    fig.update_xaxes(title_text= 'Squad Score', showticklabels= False, title_font= {\"size\": 20, 'family': 'PT Sans Narrow'})\n",
    "    fig.update_yaxes(title_text= '', showticklabels= False, showgrid= False)\n",
    "\n",
    "    # Return as json for web\n",
    "    return fig.to_json()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 197,
   "metadata": {},
   "outputs": [],
   "source": [
    "student_info = [3, 'Steven', 40]\n",
    "grade, name, score = student_info"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 198,
   "metadata": {},
   "outputs": [],
   "source": [
    "third_list = list(third_grade['squad_score'])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 199,
   "metadata": {},
   "outputs": [
    {
     "output_type": "execute_result",
     "data": {
      "text/plain": [
       "'{\"data\":[{\"alignmentgroup\":\"True\",\"bingroup\":\"x\",\"hoverinfo\":\"none\",\"legendgroup\":\"\",\"marker\":{\"color\":\"#EB7E5B\"},\"name\":\"\",\"nbinsx\":20,\"offsetgroup\":\"\",\"orientation\":\"v\",\"showlegend\":false,\"type\":\"histogram\",\"x\":[39.17700092612715,26.17307633853555,24.497112616029693,16.45433031296146,41.08335313202026,30.042005605145874,41.83518129178706,28.53905591206685,27.448316163259843,35.6008402595943,17.723058870784573,26.653130103998464,18.15721641133409,18.75860989865693,28.075895142282434,16.959180290008348,30.43505200769539,21.966109004203414,42.777064510828,21.545020358821322,26.8410013529424,39.43722081575133,28.33998702270357,56.983989683797496,27.285811010037012,48.258120235462606,28.75149617765336,23.747671121033093,25.049411592768827,43.07556826131413,36.197301765123036,23.41030641871483,35.39823576657107,33.47510266563718,1.668999067039851,40.27776779467226,26.499693653526467,33.20822518497061,36.92970591423542,34.98706231977038,29.14544344495703,37.8543375979615,20.121084559044,46.687818348388994,29.22911376981418,34.66642823324979,23.89142378875293,18.26115801384582,37.144042216282614,45.28072003298425,35.48922078604201,16.084787809647814,30.860517497824574,39.9266896648896,54.06763653198328,31.956377584375787,27.430409318880876,39.5625931402419,35.61047959637045,30.472087587105193,38.24751177773102,25.88160400842751,23.318051826647785,21.324094565329574,38.190728750050134,30.891652647807952,13.734769644422705,26.35836269265865,60.73325060010264,19.4840887102708,23.79124763964793,24.48231910557159,39.31522387768224,22.957391819072672,25.04791204602755,31.810332033561696,33.24464244814661,57.57102002393891],\"xaxis\":\"x\",\"yaxis\":\"y\"}],\"layout\":{\"annotations\":[{\"align\":\"center\",\"arrowcolor\":\"#636363\",\"arrowhead\":5,\"arrowsize\":1,\"arrowwidth\":2,\"ax\":200,\"ay\":-100,\"bgcolor\":\"#B5D33D\",\"bordercolor\":\"#c7c7c7\",\"borderpad\":4,\"borderwidth\":2,\"font\":{\"color\":\"black\",\"family\":\"PT Sans Narrow\",\"size\":16},\"opacity\":0.8,\"showarrow\":true,\"text\":\"Steven\\'s submission\",\"x\":40,\"xref\":\"x\",\"y\":0.5,\"yref\":\"paper\"}],\"barmode\":\"relative\",\"legend\":{\"tracegroupgap\":0},\"margin\":{\"t\":60},\"plot_bgcolor\":\"#6CEAE6\",\"shapes\":[{\"type\":\"line\",\"x0\":40,\"x1\":40,\"xref\":\"x\",\"y0\":0,\"y1\":1,\"yref\":\"paper\"}],\"template\":{\"data\":{\"bar\":[{\"error_x\":{\"color\":\"#2a3f5f\"},\"error_y\":{\"color\":\"#2a3f5f\"},\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5}},\"type\":\"bar\"}],\"barpolar\":[{\"marker\":{\"line\":{\"color\":\"#E5ECF6\",\"width\":0.5}},\"type\":\"barpolar\"}],\"carpet\":[{\"aaxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"baxis\":{\"endlinecolor\":\"#2a3f5f\",\"gridcolor\":\"white\",\"linecolor\":\"white\",\"minorgridcolor\":\"white\",\"startlinecolor\":\"#2a3f5f\"},\"type\":\"carpet\"}],\"choropleth\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"type\":\"choropleth\"}],\"contour\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"type\":\"contour\"}],\"contourcarpet\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"type\":\"contourcarpet\"}],\"heatmap\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"type\":\"heatmap\"}],\"heatmapgl\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"type\":\"heatmapgl\"}],\"histogram\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"histogram\"}],\"histogram2d\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"type\":\"histogram2d\"}],\"histogram2dcontour\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"type\":\"histogram2dcontour\"}],\"mesh3d\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"type\":\"mesh3d\"}],\"parcoords\":[{\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"parcoords\"}],\"pie\":[{\"automargin\":true,\"type\":\"pie\"}],\"scatter\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scatter\"}],\"scatter3d\":[{\"line\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scatter3d\"}],\"scattercarpet\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scattercarpet\"}],\"scattergeo\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scattergeo\"}],\"scattergl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scattergl\"}],\"scattermapbox\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scattermapbox\"}],\"scatterpolar\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scatterpolar\"}],\"scatterpolargl\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scatterpolargl\"}],\"scatterternary\":[{\"marker\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"type\":\"scatterternary\"}],\"surface\":[{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"},\"colorscale\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"type\":\"surface\"}],\"table\":[{\"cells\":{\"fill\":{\"color\":\"#EBF0F8\"},\"line\":{\"color\":\"white\"}},\"header\":{\"fill\":{\"color\":\"#C8D4E3\"},\"line\":{\"color\":\"white\"}},\"type\":\"table\"}]},\"layout\":{\"annotationdefaults\":{\"arrowcolor\":\"#2a3f5f\",\"arrowhead\":0,\"arrowwidth\":1},\"coloraxis\":{\"colorbar\":{\"outlinewidth\":0,\"ticks\":\"\"}},\"colorscale\":{\"diverging\":[[0,\"#8e0152\"],[0.1,\"#c51b7d\"],[0.2,\"#de77ae\"],[0.3,\"#f1b6da\"],[0.4,\"#fde0ef\"],[0.5,\"#f7f7f7\"],[0.6,\"#e6f5d0\"],[0.7,\"#b8e186\"],[0.8,\"#7fbc41\"],[0.9,\"#4d9221\"],[1,\"#276419\"]],\"sequential\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]],\"sequentialminus\":[[0.0,\"#0d0887\"],[0.1111111111111111,\"#46039f\"],[0.2222222222222222,\"#7201a8\"],[0.3333333333333333,\"#9c179e\"],[0.4444444444444444,\"#bd3786\"],[0.5555555555555556,\"#d8576b\"],[0.6666666666666666,\"#ed7953\"],[0.7777777777777778,\"#fb9f3a\"],[0.8888888888888888,\"#fdca26\"],[1.0,\"#f0f921\"]]},\"colorway\":[\"#636efa\",\"#EF553B\",\"#00cc96\",\"#ab63fa\",\"#FFA15A\",\"#19d3f3\",\"#FF6692\",\"#B6E880\",\"#FF97FF\",\"#FECB52\"],\"font\":{\"color\":\"#2a3f5f\"},\"geo\":{\"bgcolor\":\"white\",\"lakecolor\":\"white\",\"landcolor\":\"#E5ECF6\",\"showlakes\":true,\"showland\":true,\"subunitcolor\":\"white\"},\"hoverlabel\":{\"align\":\"left\"},\"hovermode\":\"closest\",\"mapbox\":{\"style\":\"light\"},\"paper_bgcolor\":\"white\",\"plot_bgcolor\":\"#E5ECF6\",\"polar\":{\"angularaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"bgcolor\":\"#E5ECF6\",\"radialaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"scene\":{\"xaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"gridwidth\":2,\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\"},\"yaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"gridwidth\":2,\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\"},\"zaxis\":{\"backgroundcolor\":\"#E5ECF6\",\"gridcolor\":\"white\",\"gridwidth\":2,\"linecolor\":\"white\",\"showbackground\":true,\"ticks\":\"\",\"zerolinecolor\":\"white\"}},\"shapedefaults\":{\"line\":{\"color\":\"#2a3f5f\"}},\"ternary\":{\"aaxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"baxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"},\"bgcolor\":\"#E5ECF6\",\"caxis\":{\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\"}},\"title\":{\"x\":0.05},\"xaxis\":{\"automargin\":true,\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"zerolinewidth\":2},\"yaxis\":{\"automargin\":true,\"gridcolor\":\"white\",\"linecolor\":\"white\",\"ticks\":\"\",\"title\":{\"standoff\":15},\"zerolinecolor\":\"white\",\"zerolinewidth\":2}}},\"title\":{\"font\":{\"family\":\"PT Sans Narrow\",\"size\":25},\"text\":\"Distribution of This Week\\'s Grade 3 Stories\",\"x\":0.5,\"y\":0.95},\"xaxis\":{\"anchor\":\"y\",\"domain\":[0.0,1.0],\"showticklabels\":false,\"title\":{\"font\":{\"family\":\"PT Sans Narrow\",\"size\":20},\"text\":\"Squad Score\"}},\"yaxis\":{\"anchor\":\"x\",\"domain\":[0.0,1.0],\"showgrid\":false,\"showticklabels\":false,\"title\":{\"text\":\"\"}}}}'"
      ]
     },
     "metadata": {},
     "execution_count": 199
    }
   ],
   "source": [
    "histogram(third_list, student_info)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ]
}