Created
October 18, 2020 01:10
-
-
Save jph00/ca690d55521ff2e7ce1a1940e533680b to your computer and use it in GitHub Desktop.
Claire's Number Line
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "cells": [ | |
| { | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "cell_type": "code", | |
| "source": "from IPython.display import *\nfrom fastcore.all import *\n\nimport dominate\nfrom dominate.tags import *\nfrom dominate.util import text\n\n@patch\ndef _repr_html_(self:html_tag): return str(self)", | |
| "execution_count": 1, | |
| "outputs": [] | |
| }, | |
| { | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "cell_type": "code", | |
| "source": "title = \"Claire's Number Line\"", | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "cell_type": "code", | |
| "source": "palette = \"\"\"\n--phlox: hsla(284, 84%, 59%, 1);\n--mauvelous: hsla(347, 87%, 78%, 1);\n--jasmine: hsla(46, 100%, 79%, 1);\n--middle-blue-green: hsla(166, 70%, 84%, 1);\n--medium-spring-green: hsla(154, 88%, 66%, 1);\n--dark-sea-green: hsla(43, 27%, 65%, 1);\n--yellow-green-crayola: hsla(79, 65%, 66%, 1);\n--sky-blue-crayola: hsla(190, 91%, 60%, 1);\n--turquoise: hsla(168, 82%, 71%, 1);\n--dark-sea-green-2: hsla(121, 76%, 71%, 1);\n\"\"\".strip()\n\npalette = re.sub(\"^--.*: \", \"\", palette, flags=re.MULTILINE)\npalette = re.sub(\";\",\"\",palette)\ncolors = L(palette.splitlines()).enumerate()", | |
| "execution_count": 116, | |
| "outputs": [] | |
| }, | |
| { | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "cell_type": "code", | |
| "source": "def background(a): return f\"background-color:{a}\"\ndef gradient(a,b): return f\"background-image: linear-gradient(to left, {a}, {b})\"", | |
| "execution_count": 118, | |
| "outputs": [] | |
| }, | |
| { | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "cell_type": "code", | |
| "source": "th_ = thead(tr([th(text(' ones<br/>tens', escape=False),\n style=\"text-align:left\")]+\n [th(i, style=background(a)) for i,a in colors]))\ntb_ = tbody()\nfor i,a in colors:\n tb_ += tr([th(i, style=background(a))]+ \n [td(i*10+j, style=gradient(b, a)) for j,b in colors])\ntbl = table(th_, tb_)", | |
| "execution_count": null, | |
| "outputs": [] | |
| }, | |
| { | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "cell_type": "code", | |
| "source": "body(h1(title),tbl)", | |
| "execution_count": 122, | |
| "outputs": [ | |
| { | |
| "output_type": "execute_result", | |
| "execution_count": 122, | |
| "data": { | |
| "text/plain": "<dominate.tags.body at 7fa9f64a0a30: 0 attributes, 2 children>", | |
| "text/html": "<body>\n <h1>Claire's Number Line</h1>\n <table>\n <thead>\n <tr>\n <th style=\"text-align:left\"> ones<br/>tens</th>\n <th style=\"background-color:hsla(284, 84%, 59%, 1)\">0</th>\n <th style=\"background-color:hsla(347, 87%, 78%, 1)\">1</th>\n <th style=\"background-color:hsla(46, 100%, 79%, 1)\">2</th>\n <th style=\"background-color:hsla(166, 70%, 84%, 1)\">3</th>\n <th style=\"background-color:hsla(154, 88%, 66%, 1)\">4</th>\n <th style=\"background-color:hsla(43, 27%, 65%, 1)\">5</th>\n <th style=\"background-color:hsla(79, 65%, 66%, 1)\">6</th>\n <th style=\"background-color:hsla(190, 91%, 60%, 1)\">7</th>\n <th style=\"background-color:hsla(168, 82%, 71%, 1)\">8</th>\n <th style=\"background-color:hsla(121, 76%, 71%, 1)\">9</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <th style=\"background-color:hsla(284, 84%, 59%, 1)\">0</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(284, 84%, 59%, 1))\">0</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(284, 84%, 59%, 1))\">1</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(284, 84%, 59%, 1))\">2</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(284, 84%, 59%, 1))\">3</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(284, 84%, 59%, 1))\">4</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(284, 84%, 59%, 1))\">5</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(284, 84%, 59%, 1))\">6</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(284, 84%, 59%, 1))\">7</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(284, 84%, 59%, 1))\">8</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(284, 84%, 59%, 1))\">9</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(347, 87%, 78%, 1)\">1</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(347, 87%, 78%, 1))\">10</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(347, 87%, 78%, 1))\">11</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(347, 87%, 78%, 1))\">12</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(347, 87%, 78%, 1))\">13</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(347, 87%, 78%, 1))\">14</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(347, 87%, 78%, 1))\">15</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(347, 87%, 78%, 1))\">16</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(347, 87%, 78%, 1))\">17</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(347, 87%, 78%, 1))\">18</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(347, 87%, 78%, 1))\">19</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(46, 100%, 79%, 1)\">2</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(46, 100%, 79%, 1))\">20</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(46, 100%, 79%, 1))\">21</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(46, 100%, 79%, 1))\">22</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(46, 100%, 79%, 1))\">23</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(46, 100%, 79%, 1))\">24</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(46, 100%, 79%, 1))\">25</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(46, 100%, 79%, 1))\">26</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(46, 100%, 79%, 1))\">27</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(46, 100%, 79%, 1))\">28</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(46, 100%, 79%, 1))\">29</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(166, 70%, 84%, 1)\">3</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(166, 70%, 84%, 1))\">30</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(166, 70%, 84%, 1))\">31</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(166, 70%, 84%, 1))\">32</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(166, 70%, 84%, 1))\">33</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(166, 70%, 84%, 1))\">34</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(166, 70%, 84%, 1))\">35</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(166, 70%, 84%, 1))\">36</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(166, 70%, 84%, 1))\">37</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(166, 70%, 84%, 1))\">38</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(166, 70%, 84%, 1))\">39</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(154, 88%, 66%, 1)\">4</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(154, 88%, 66%, 1))\">40</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(154, 88%, 66%, 1))\">41</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(154, 88%, 66%, 1))\">42</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(154, 88%, 66%, 1))\">43</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(154, 88%, 66%, 1))\">44</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(154, 88%, 66%, 1))\">45</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(154, 88%, 66%, 1))\">46</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(154, 88%, 66%, 1))\">47</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(154, 88%, 66%, 1))\">48</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(154, 88%, 66%, 1))\">49</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(43, 27%, 65%, 1)\">5</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(43, 27%, 65%, 1))\">50</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(43, 27%, 65%, 1))\">51</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(43, 27%, 65%, 1))\">52</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(43, 27%, 65%, 1))\">53</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(43, 27%, 65%, 1))\">54</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(43, 27%, 65%, 1))\">55</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(43, 27%, 65%, 1))\">56</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(43, 27%, 65%, 1))\">57</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(43, 27%, 65%, 1))\">58</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(43, 27%, 65%, 1))\">59</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(79, 65%, 66%, 1)\">6</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(79, 65%, 66%, 1))\">60</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(79, 65%, 66%, 1))\">61</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(79, 65%, 66%, 1))\">62</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(79, 65%, 66%, 1))\">63</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(79, 65%, 66%, 1))\">64</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(79, 65%, 66%, 1))\">65</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(79, 65%, 66%, 1))\">66</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(79, 65%, 66%, 1))\">67</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(79, 65%, 66%, 1))\">68</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(79, 65%, 66%, 1))\">69</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(190, 91%, 60%, 1)\">7</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(190, 91%, 60%, 1))\">70</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(190, 91%, 60%, 1))\">71</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(190, 91%, 60%, 1))\">72</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(190, 91%, 60%, 1))\">73</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(190, 91%, 60%, 1))\">74</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(190, 91%, 60%, 1))\">75</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(190, 91%, 60%, 1))\">76</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(190, 91%, 60%, 1))\">77</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(190, 91%, 60%, 1))\">78</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(190, 91%, 60%, 1))\">79</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(168, 82%, 71%, 1)\">8</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(168, 82%, 71%, 1))\">80</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(168, 82%, 71%, 1))\">81</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(168, 82%, 71%, 1))\">82</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(168, 82%, 71%, 1))\">83</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(168, 82%, 71%, 1))\">84</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(168, 82%, 71%, 1))\">85</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(168, 82%, 71%, 1))\">86</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(168, 82%, 71%, 1))\">87</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(168, 82%, 71%, 1))\">88</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(168, 82%, 71%, 1))\">89</td>\n </tr>\n <tr>\n <th style=\"background-color:hsla(121, 76%, 71%, 1)\">9</th>\n <td style=\"background-image: linear-gradient(to left, hsla(284, 84%, 59%, 1), hsla(121, 76%, 71%, 1))\">90</td>\n <td style=\"background-image: linear-gradient(to left, hsla(347, 87%, 78%, 1), hsla(121, 76%, 71%, 1))\">91</td>\n <td style=\"background-image: linear-gradient(to left, hsla(46, 100%, 79%, 1), hsla(121, 76%, 71%, 1))\">92</td>\n <td style=\"background-image: linear-gradient(to left, hsla(166, 70%, 84%, 1), hsla(121, 76%, 71%, 1))\">93</td>\n <td style=\"background-image: linear-gradient(to left, hsla(154, 88%, 66%, 1), hsla(121, 76%, 71%, 1))\">94</td>\n <td style=\"background-image: linear-gradient(to left, hsla(43, 27%, 65%, 1), hsla(121, 76%, 71%, 1))\">95</td>\n <td style=\"background-image: linear-gradient(to left, hsla(79, 65%, 66%, 1), hsla(121, 76%, 71%, 1))\">96</td>\n <td style=\"background-image: linear-gradient(to left, hsla(190, 91%, 60%, 1), hsla(121, 76%, 71%, 1))\">97</td>\n <td style=\"background-image: linear-gradient(to left, hsla(168, 82%, 71%, 1), hsla(121, 76%, 71%, 1))\">98</td>\n <td style=\"background-image: linear-gradient(to left, hsla(121, 76%, 71%, 1), hsla(121, 76%, 71%, 1))\">99</td>\n </tr>\n </tbody>\n </table>\n</body>" | |
| }, | |
| "metadata": {} | |
| } | |
| ] | |
| }, | |
| { | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "cell_type": "code", | |
| "source": "", | |
| "execution_count": null, | |
| "outputs": [] | |
| } | |
| ], | |
| "metadata": { | |
| "kernelspec": { | |
| "name": "python3", | |
| "display_name": "Python 3", | |
| "language": "python" | |
| }, | |
| "language_info": { | |
| "name": "python", | |
| "version": "3.8.3", | |
| "mimetype": "text/x-python", | |
| "codemirror_mode": { | |
| "name": "ipython", | |
| "version": 3 | |
| }, | |
| "pygments_lexer": "ipython3", | |
| "nbconvert_exporter": "python", | |
| "file_extension": ".py" | |
| }, | |
| "toc": { | |
| "nav_menu": {}, | |
| "number_sections": false, | |
| "sideBar": true, | |
| "skip_h1_title": false, | |
| "base_numbering": 1, | |
| "title_cell": "Table of Contents", | |
| "title_sidebar": "Contents", | |
| "toc_cell": false, | |
| "toc_position": {}, | |
| "toc_section_display": true, | |
| "toc_window_display": false | |
| }, | |
| "gist": { | |
| "id": "", | |
| "data": { | |
| "description": "Claire's Number Line", | |
| "public": true | |
| } | |
| } | |
| }, | |
| "nbformat": 4, | |
| "nbformat_minor": 4 | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment