02 for review

02.perception-and-color/hexrgb.svg

@@ -0,0 +1,241 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 210 297"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.2.2 (b0a84865, 2022-12-01)"
+   sodipodi:docname="hexrgb.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="0.78127806"
+     inkscape:cx="264.31051"
+     inkscape:cy="271.99023"
+     inkscape:window-width="1390"
+     inkscape:window-height="1027"
+     inkscape:window-x="2244"
+     inkscape:window-y="58"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2">
+    <rect
+       x="84.476966"
+       y="92.15669"
+       width="78.077196"
+       height="174.07375"
+       id="rect8128" />
+    <rect
+       x="138.23504"
+       y="104.95623"
+       width="213.75232"
+       height="131.83527"
+       id="rect236" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <text
+       xml:space="preserve"
+       transform="scale(0.26458333)"
+       id="text234"
+       style="fill:#005e5c;font-size:48px;text-align:center;-inkscape-font-specification:Silom;font-family:Silom;stroke-linejoin:round;stroke-linecap:round;line-height:normal;text-decoration-color:#000000;stroke-width:0.99999874;-inkscape-stroke:none;stop-color:#000000;white-space:pre;shape-inside:url(#rect236)" />
+    <text
+       xml:space="preserve"
+       style="font-size:12.7px;line-height:normal;font-family:Silom;-inkscape-font-specification:Silom;text-align:center;text-decoration-color:#000000;fill:#005e5c;stroke-width:0.264583;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;stop-color:#000000"
+       x="53.507412"
+       y="35.897377"
+       id="text242"><tspan
+         sodipodi:role="line"
+         style="stroke-width:0.264583"
+         x="53.507412"
+         y="35.897377"
+         id="tspan246">#<tspan
+   style="fill:#ff0000;fill-opacity:1"
+   id="tspan856">aa</tspan><tspan
+   style="fill:#00ff00;fill-opacity:1"
+   id="tspan994">33</tspan><tspan
+   style="fill:#0000ff;fill-opacity:1"
+   id="tspan1126">99</tspan></tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:5.60128px;line-height:normal;font-family:Silom;-inkscape-font-specification:Silom;text-align:center;text-decoration-color:#000000;fill:#0000ff;fill-opacity:1;stroke-width:0.116693;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;stop-color:#000000"
+       x="65.144798"
+       y="33.956829"
+       id="text1130"
+       transform="scale(0.96581023,1.0354001)"><tspan
+         sodipodi:role="line"
+         id="tspan1128"
+         style="stroke-width:0.116693"
+         x="65.144798"
+         y="33.956829" /><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="40.958431"
+         id="tspan1236">aa/ff</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="47.960033"
+         id="tspan1240">170/255</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="54.961636"
+         id="tspan5612">66%</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="61.963223"
+         id="tspan1968" /><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="68.964828"
+         id="tspan1972" /><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="75.966431"
+         id="tspan2700" /><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="82.968033"
+         id="tspan6340" /><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="89.969635"
+         id="tspan4156" /><tspan
+         sodipodi:role="line"
+         style="fill:#ea0000;fill-opacity:1;stroke-width:0.116693"
+         x="65.144798"
+         y="96.971237"
+         id="tspan4884" /></text>
+    <text
+       xml:space="preserve"
+       style="font-size:5.60128px;line-height:normal;font-family:Silom;-inkscape-font-specification:Silom;text-align:center;text-decoration-color:#000000;fill:#0000ff;fill-opacity:1;stroke-width:0.116693;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;stop-color:#000000"
+       x="93.374222"
+       y="40.958431"
+       id="text6454"
+       transform="scale(0.96581023,1.0354001)"><tspan
+         sodipodi:role="line"
+         id="tspan6452"
+         style="fill:#00ff00;fill-opacity:1;stroke-width:0.116693"
+         x="93.374222"
+         y="40.958431">33/ff</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#00ff00;fill-opacity:1;stroke-width:0.116693"
+         x="93.374222"
+         y="47.960033"
+         id="tspan6456">51/255</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#00ff00;fill-opacity:1;stroke-width:0.116693"
+         x="93.374222"
+         y="54.961636"
+         id="tspan6568">20%</tspan></text>
+    <text
+       xml:space="preserve"
+       style="font-size:5.60128px;line-height:normal;font-family:Silom;-inkscape-font-specification:Silom;text-align:center;text-decoration-color:#000000;fill:#0000ff;fill-opacity:1;stroke-width:0.116693;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;stop-color:#000000"
+       x="116.37598"
+       y="40.958431"
+       id="text6462"
+       transform="scale(0.96581023,1.0354001)"><tspan
+         sodipodi:role="line"
+         id="tspan6460"
+         style="stroke-width:0.116693"
+         x="116.37598"
+         y="40.958431">99/ff</tspan><tspan
+         sodipodi:role="line"
+         style="stroke-width:0.116693"
+         x="116.37598"
+         y="47.960033"
+         id="tspan6464">153/255</tspan><tspan
+         sodipodi:role="line"
+         style="stroke-width:0.116693"
+         x="116.37598"
+         y="54.961636"
+         id="tspan8022">39%</tspan></text>
+    <text
+       xml:space="preserve"
+       transform="scale(0.26458333)"
+       id="text8126"
+       style="fill:#ea0000;font-size:48px;text-align:center;-inkscape-font-specification:Silom;font-family:Silom;stroke-linejoin:round;stroke-linecap:round;line-height:normal;text-decoration-color:#000000;stroke-width:0.99999874;-inkscape-stroke:none;stop-color:#000000;fill-opacity:1;white-space:pre;shape-inside:url(#rect8128)" />
+    <text
+       xml:space="preserve"
+       style="font-size:5.60128px;line-height:normal;font-family:Silom;-inkscape-font-specification:Silom;text-align:center;text-decoration-color:#000000;fill:#0000ff;fill-opacity:1;stroke-width:0.116693;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;stop-color:#000000"
+       x="40.459595"
+       y="33.583755"
+       id="text1130-1"
+       transform="scale(0.96581023,1.0354001)"><tspan
+         sodipodi:role="line"
+         id="tspan1128-6"
+         style="stroke-width:0.116693"
+         x="40.459595"
+         y="33.583755" /><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="40.585354"
+         id="tspan5612-0">hex</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="47.586956"
+         id="tspan8263">dec</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="54.588558"
+         id="tspan8265">percent</tspan><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="61.590157"
+         id="tspan1968-4" /><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="68.591759"
+         id="tspan1972-4" /><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="75.593361"
+         id="tspan2700-5" /><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="82.594963"
+         id="tspan6340-9" /><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="89.596565"
+         id="tspan4156-7" /><tspan
+         sodipodi:role="line"
+         style="fill:#000000;fill-opacity:1;stroke-width:0.116693"
+         x="40.459595"
+         y="96.59816"
+         id="tspan4884-5" /></text>
+  </g>
+</svg>

02.perception-and-color/perception-examples.ipynb

@@ -2,7 +2,7 @@
  "cells": [
   {
    "cell_type": "code",
-   "execution_count": 1,
+   "execution_count": 2,
    "id": "adf7aa23-daf2-4cfe-9910-2b00576b2ff7",
    "metadata": {},
    "outputs": [],
@@ -21,21 +21,21 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 118,
+   "execution_count": 20,
-   "id": "05a4d76e-7ade-431a-a773-d438c6ac9c79",
+   "id": "bb05f630-eb13-4afe-8090-dd43c2f27a47",
    "metadata": {},
    "outputs": [],
    "source": [
     "random_df = pl.DataFrame({\n",
     "    \"a\": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],\n",
     "    \"b\": [\"a\", \"b\", \"q\", \"c\", \"a\", \"c\", \"n\", \"c\", \"p\", \"b\", \"c\", \"n\", \"q\", \"r\", \"a\", \"b\", \"c\", \"b\", \"b\", \"b\"],\n",
-    "    \"c\": [500, 2, 3, 4, 10, 20, 100, 490, 400, 140, 200, 180, 380, 350, 180, 135, 400, 210, 230, 300]\n",
+    "    \"c\": [320, 310, 300, 270, 110, 100, 130, 240, 250, 370, 330, 310, 100, 70, 210, 230, 220, 150, 160, 100]\n",
     "})"
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 122,
+   "execution_count": 21,
    "id": "902298fe-3a6c-446e-a060-f95071acedf1",
    "metadata": {},
    "outputs": [
@@ -44,23 +44,23 @@
       "text/html": [
        "\n",
        "<style>\n",
-       "  #altair-viz-8f69a7d2f3b34034b2453852296e01a2.vega-embed {\n",
+       "  #altair-viz-240453dc8e7b4a848b6034958cf10567.vega-embed {\n",
        "    width: 100%;\n",
        "    display: flex;\n",
        "  }\n",
        "\n",
-       "  #altair-viz-8f69a7d2f3b34034b2453852296e01a2.vega-embed details,\n",
+       "  #altair-viz-240453dc8e7b4a848b6034958cf10567.vega-embed details,\n",
-       "  #altair-viz-8f69a7d2f3b34034b2453852296e01a2.vega-embed details summary {\n",
+       "  #altair-viz-240453dc8e7b4a848b6034958cf10567.vega-embed details summary {\n",
        "    position: relative;\n",
        "  }\n",
        "</style>\n",
-       "<div id=\"altair-viz-8f69a7d2f3b34034b2453852296e01a2\"></div>\n",
+       "<div id=\"altair-viz-240453dc8e7b4a848b6034958cf10567\"></div>\n",
        "<script type=\"text/javascript\">\n",
        "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
        "  (function(spec, embedOpt){\n",
        "    let outputDiv = document.currentScript.previousElementSibling;\n",
-       "    if (outputDiv.id !== \"altair-viz-8f69a7d2f3b34034b2453852296e01a2\") {\n",
+       "    if (outputDiv.id !== \"altair-viz-240453dc8e7b4a848b6034958cf10567\") {\n",
-       "      outputDiv = document.getElementById(\"altair-viz-8f69a7d2f3b34034b2453852296e01a2\");\n",
+       "      outputDiv = document.getElementById(\"altair-viz-240453dc8e7b4a848b6034958cf10567\");\n",
        "    }\n",
        "    const paths = {\n",
        "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
@@ -106,14 +106,14 @@
        "        .catch(showError)\n",
        "        .then(() => displayChart(vegaEmbed));\n",
        "    }\n",
-       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-2b502a9efab69527ae91e7bc0e4a91b4\"}, \"mark\": {\"type\": \"point\"}, \"encoding\": {\"color\": {\"field\": \"b\", \"legend\": null, \"type\": \"nominal\"}, \"fill\": {\"field\": \"b\", \"legend\": null, \"type\": \"nominal\"}, \"opacity\": {\"field\": \"b\", \"legend\": null, \"type\": \"nominal\"}, \"shape\": {\"field\": \"a\", \"legend\": null, \"type\": \"nominal\"}, \"size\": {\"field\": \"c\", \"legend\": null, \"type\": \"quantitative\"}, \"x\": {\"field\": \"a\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"c\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\", \"datasets\": {\"data-2b502a9efab69527ae91e7bc0e4a91b4\": [{\"a\": 1, \"b\": \"a\", \"c\": 500}, {\"a\": 2, \"b\": \"b\", \"c\": 2}, {\"a\": 3, \"b\": \"q\", \"c\": 3}, {\"a\": 4, \"b\": \"c\", \"c\": 4}, {\"a\": 5, \"b\": \"a\", \"c\": 10}, {\"a\": 6, \"b\": \"c\", \"c\": 20}, {\"a\": 7, \"b\": \"n\", \"c\": 100}, {\"a\": 8, \"b\": \"c\", \"c\": 490}, {\"a\": 9, \"b\": \"p\", \"c\": 400}, {\"a\": 10, \"b\": \"b\", \"c\": 140}, {\"a\": 11, \"b\": \"c\", \"c\": 200}, {\"a\": 12, \"b\": \"n\", \"c\": 180}, {\"a\": 13, \"b\": \"q\", \"c\": 380}, {\"a\": 14, \"b\": \"r\", \"c\": 350}, {\"a\": 15, \"b\": \"a\", \"c\": 180}, {\"a\": 16, \"b\": \"b\", \"c\": 135}, {\"a\": 17, \"b\": \"c\", \"c\": 400}, {\"a\": 18, \"b\": \"b\", \"c\": 210}, {\"a\": 19, \"b\": \"b\", \"c\": 230}, {\"a\": 20, \"b\": \"b\", \"c\": 300}]}}, {\"mode\": \"vega-lite\"});\n",
+       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-11887e965dfb0864ae959048d77cb37f\"}, \"mark\": {\"type\": \"point\"}, \"encoding\": {\"color\": {\"field\": \"b\", \"legend\": null, \"type\": \"nominal\"}, \"fill\": {\"field\": \"b\", \"legend\": null, \"type\": \"nominal\"}, \"opacity\": {\"field\": \"b\", \"legend\": null, \"type\": \"nominal\"}, \"shape\": {\"field\": \"a\", \"legend\": null, \"type\": \"nominal\"}, \"size\": {\"field\": \"c\", \"legend\": null, \"type\": \"quantitative\"}, \"x\": {\"field\": \"a\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"c\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\", \"datasets\": {\"data-11887e965dfb0864ae959048d77cb37f\": [{\"a\": 1, \"b\": \"a\", \"c\": 320}, {\"a\": 2, \"b\": \"b\", \"c\": 310}, {\"a\": 3, \"b\": \"q\", \"c\": 300}, {\"a\": 4, \"b\": \"c\", \"c\": 270}, {\"a\": 5, \"b\": \"a\", \"c\": 110}, {\"a\": 6, \"b\": \"c\", \"c\": 100}, {\"a\": 7, \"b\": \"n\", \"c\": 130}, {\"a\": 8, \"b\": \"c\", \"c\": 240}, {\"a\": 9, \"b\": \"p\", \"c\": 250}, {\"a\": 10, \"b\": \"b\", \"c\": 370}, {\"a\": 11, \"b\": \"c\", \"c\": 330}, {\"a\": 12, \"b\": \"n\", \"c\": 310}, {\"a\": 13, \"b\": \"q\", \"c\": 100}, {\"a\": 14, \"b\": \"r\", \"c\": 70}, {\"a\": 15, \"b\": \"a\", \"c\": 210}, {\"a\": 16, \"b\": \"b\", \"c\": 230}, {\"a\": 17, \"b\": \"c\", \"c\": 220}, {\"a\": 18, \"b\": \"b\", \"c\": 150}, {\"a\": 19, \"b\": \"b\", \"c\": 160}, {\"a\": 20, \"b\": \"b\", \"c\": 100}]}}, {\"mode\": \"vega-lite\"});\n",
        "</script>"
       ],
       "text/plain": [
        "alt.Chart(...)"
       ]
      },
-     "execution_count": 122,
+     "execution_count": 21,
      "metadata": {},
      "output_type": "execute_result"
     }
@@ -132,94 +132,15 @@
   },
   {
    "cell_type": "code",
-   "execution_count": 120,
+   "execution_count": null,
    "id": "87228f27-baad-4acb-80af-1ca44c21e8fe",
    "metadata": {},
-   "outputs": [
+   "outputs": [],
-    {
-     "data": {
-      "text/html": [
-       "\n",
-       "<style>\n",
-       "  #altair-viz-d6e682915f1e45e09a87b6af90981f0d.vega-embed {\n",
-       "    width: 100%;\n",
-       "    display: flex;\n",
-       "  }\n",
-       "\n",
-       "  #altair-viz-d6e682915f1e45e09a87b6af90981f0d.vega-embed details,\n",
-       "  #altair-viz-d6e682915f1e45e09a87b6af90981f0d.vega-embed details summary {\n",
-       "    position: relative;\n",
-       "  }\n",
-       "</style>\n",
-       "<div id=\"altair-viz-d6e682915f1e45e09a87b6af90981f0d\"></div>\n",
-       "<script type=\"text/javascript\">\n",
-       "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
-       "  (function(spec, embedOpt){\n",
-       "    let outputDiv = document.currentScript.previousElementSibling;\n",
-       "    if (outputDiv.id !== \"altair-viz-d6e682915f1e45e09a87b6af90981f0d\") {\n",
-       "      outputDiv = document.getElementById(\"altair-viz-d6e682915f1e45e09a87b6af90981f0d\");\n",
-       "    }\n",
-       "    const paths = {\n",
-       "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
-       "      \"vega-lib\": \"https://cdn.jsdelivr.net/npm/vega-lib?noext\",\n",
-       "      \"vega-lite\": \"https://cdn.jsdelivr.net/npm/vega-lite@5.20.1?noext\",\n",
-       "      \"vega-embed\": \"https://cdn.jsdelivr.net/npm/vega-embed@6?noext\",\n",
-       "    };\n",
-       "\n",
-       "    function maybeLoadScript(lib, version) {\n",
-       "      var key = `${lib.replace(\"-\", \"\")}_version`;\n",
-       "      return (VEGA_DEBUG[key] == version) ?\n",
-       "        Promise.resolve(paths[lib]) :\n",
-       "        new Promise(function(resolve, reject) {\n",
-       "          var s = document.createElement('script');\n",
-       "          document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
-       "          s.async = true;\n",
-       "          s.onload = () => {\n",
-       "            VEGA_DEBUG[key] = version;\n",
-       "            return resolve(paths[lib]);\n",
-       "          };\n",
-       "          s.onerror = () => reject(`Error loading script: ${paths[lib]}`);\n",
-       "          s.src = paths[lib];\n",
-       "        });\n",
-       "    }\n",
-       "\n",
-       "    function showError(err) {\n",
-       "      outputDiv.innerHTML = `<div class=\"error\" style=\"color:red;\">${err}</div>`;\n",
-       "      throw err;\n",
-       "    }\n",
-       "\n",
-       "    function displayChart(vegaEmbed) {\n",
-       "      vegaEmbed(outputDiv, spec, embedOpt)\n",
-       "        .catch(err => showError(`Javascript Error: ${err.message}<br>This usually means there's a typo in your chart specification. See the javascript console for the full traceback.`));\n",
-       "    }\n",
-       "\n",
-       "    if(typeof define === \"function\" && define.amd) {\n",
-       "      requirejs.config({paths});\n",
-       "      require([\"vega-embed\"], displayChart, err => showError(`Error loading script: ${err.message}`));\n",
-       "    } else {\n",
-       "      maybeLoadScript(\"vega\", \"5\")\n",
-       "        .then(() => maybeLoadScript(\"vega-lite\", \"5.20.1\"))\n",
-       "        .then(() => maybeLoadScript(\"vega-embed\", \"6\"))\n",
-       "        .catch(showError)\n",
-       "        .then(() => displayChart(vegaEmbed));\n",
-       "    }\n",
-       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-2b502a9efab69527ae91e7bc0e4a91b4\"}, \"mark\": {\"type\": \"line\"}, \"encoding\": {\"x\": {\"field\": \"a\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"c\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\", \"datasets\": {\"data-2b502a9efab69527ae91e7bc0e4a91b4\": [{\"a\": 1, \"b\": \"a\", \"c\": 500}, {\"a\": 2, \"b\": \"b\", \"c\": 2}, {\"a\": 3, \"b\": \"q\", \"c\": 3}, {\"a\": 4, \"b\": \"c\", \"c\": 4}, {\"a\": 5, \"b\": \"a\", \"c\": 10}, {\"a\": 6, \"b\": \"c\", \"c\": 20}, {\"a\": 7, \"b\": \"n\", \"c\": 100}, {\"a\": 8, \"b\": \"c\", \"c\": 490}, {\"a\": 9, \"b\": \"p\", \"c\": 400}, {\"a\": 10, \"b\": \"b\", \"c\": 140}, {\"a\": 11, \"b\": \"c\", \"c\": 200}, {\"a\": 12, \"b\": \"n\", \"c\": 180}, {\"a\": 13, \"b\": \"q\", \"c\": 380}, {\"a\": 14, \"b\": \"r\", \"c\": 350}, {\"a\": 15, \"b\": \"a\", \"c\": 180}, {\"a\": 16, \"b\": \"b\", \"c\": 135}, {\"a\": 17, \"b\": \"c\", \"c\": 400}, {\"a\": 18, \"b\": \"b\", \"c\": 210}, {\"a\": 19, \"b\": \"b\", \"c\": 230}, {\"a\": 20, \"b\": \"b\", \"c\": 300}]}}, {\"mode\": \"vega-lite\"});\n",
-       "</script>"
-      ],
-      "text/plain": [
-       "alt.Chart(...)"
-      ]
-     },
-     "execution_count": 120,
-     "metadata": {},
-     "output_type": "execute_result"
-    }
-   ],
    "source": []
   },
   {
    "cell_type": "code",
-   "execution_count": 123,
+   "execution_count": 19,
    "id": "5515ea60-70c1-4fd7-bef9-b5451c2ea00c",
    "metadata": {},
    "outputs": [
@@ -228,23 +149,23 @@
       "text/html": [
        "\n",
        "<style>\n",
-       "  #altair-viz-83fcb2d8bc334945a9e1bbb53e0c57d7.vega-embed {\n",
+       "  #altair-viz-3cb4232660b6443eaf01ad5947f54289.vega-embed {\n",
        "    width: 100%;\n",
        "    display: flex;\n",
        "  }\n",
        "\n",
-       "  #altair-viz-83fcb2d8bc334945a9e1bbb53e0c57d7.vega-embed details,\n",
+       "  #altair-viz-3cb4232660b6443eaf01ad5947f54289.vega-embed details,\n",
-       "  #altair-viz-83fcb2d8bc334945a9e1bbb53e0c57d7.vega-embed details summary {\n",
+       "  #altair-viz-3cb4232660b6443eaf01ad5947f54289.vega-embed details summary {\n",
        "    position: relative;\n",
        "  }\n",
        "</style>\n",
-       "<div id=\"altair-viz-83fcb2d8bc334945a9e1bbb53e0c57d7\"></div>\n",
+       "<div id=\"altair-viz-3cb4232660b6443eaf01ad5947f54289\"></div>\n",
        "<script type=\"text/javascript\">\n",
        "  var VEGA_DEBUG = (typeof VEGA_DEBUG == \"undefined\") ? {} : VEGA_DEBUG;\n",
        "  (function(spec, embedOpt){\n",
        "    let outputDiv = document.currentScript.previousElementSibling;\n",
-       "    if (outputDiv.id !== \"altair-viz-83fcb2d8bc334945a9e1bbb53e0c57d7\") {\n",
+       "    if (outputDiv.id !== \"altair-viz-3cb4232660b6443eaf01ad5947f54289\") {\n",
-       "      outputDiv = document.getElementById(\"altair-viz-83fcb2d8bc334945a9e1bbb53e0c57d7\");\n",
+       "      outputDiv = document.getElementById(\"altair-viz-3cb4232660b6443eaf01ad5947f54289\");\n",
        "    }\n",
        "    const paths = {\n",
        "      \"vega\": \"https://cdn.jsdelivr.net/npm/vega@5?noext\",\n",
@@ -290,14 +211,14 @@
        "        .catch(showError)\n",
        "        .then(() => displayChart(vegaEmbed));\n",
        "    }\n",
-       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-2b502a9efab69527ae91e7bc0e4a91b4\"}, \"mark\": {\"type\": \"line\"}, \"encoding\": {\"x\": {\"field\": \"a\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"c\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\", \"datasets\": {\"data-2b502a9efab69527ae91e7bc0e4a91b4\": [{\"a\": 1, \"b\": \"a\", \"c\": 500}, {\"a\": 2, \"b\": \"b\", \"c\": 2}, {\"a\": 3, \"b\": \"q\", \"c\": 3}, {\"a\": 4, \"b\": \"c\", \"c\": 4}, {\"a\": 5, \"b\": \"a\", \"c\": 10}, {\"a\": 6, \"b\": \"c\", \"c\": 20}, {\"a\": 7, \"b\": \"n\", \"c\": 100}, {\"a\": 8, \"b\": \"c\", \"c\": 490}, {\"a\": 9, \"b\": \"p\", \"c\": 400}, {\"a\": 10, \"b\": \"b\", \"c\": 140}, {\"a\": 11, \"b\": \"c\", \"c\": 200}, {\"a\": 12, \"b\": \"n\", \"c\": 180}, {\"a\": 13, \"b\": \"q\", \"c\": 380}, {\"a\": 14, \"b\": \"r\", \"c\": 350}, {\"a\": 15, \"b\": \"a\", \"c\": 180}, {\"a\": 16, \"b\": \"b\", \"c\": 135}, {\"a\": 17, \"b\": \"c\", \"c\": 400}, {\"a\": 18, \"b\": \"b\", \"c\": 210}, {\"a\": 19, \"b\": \"b\", \"c\": 230}, {\"a\": 20, \"b\": \"b\", \"c\": 300}]}}, {\"mode\": \"vega-lite\"});\n",
+       "  })({\"config\": {\"view\": {\"continuousWidth\": 300, \"continuousHeight\": 300}}, \"data\": {\"name\": \"data-06c45c95ede5c7f29698daa415db1c71\"}, \"mark\": {\"type\": \"line\"}, \"encoding\": {\"x\": {\"field\": \"a\", \"type\": \"quantitative\"}, \"y\": {\"field\": \"c\", \"type\": \"quantitative\"}}, \"$schema\": \"https://vega.github.io/schema/vega-lite/v5.20.1.json\", \"datasets\": {\"data-06c45c95ede5c7f29698daa415db1c71\": [{\"a\": 1, \"b\": \"a\", \"c\": 500}, {\"a\": 2, \"b\": \"b\", \"c\": 430}, {\"a\": 3, \"b\": \"q\", \"c\": 300}, {\"a\": 4, \"b\": \"c\", \"c\": 270}, {\"a\": 5, \"b\": \"a\", \"c\": 110}, {\"a\": 6, \"b\": \"c\", \"c\": 100}, {\"a\": 7, \"b\": \"n\", \"c\": 130}, {\"a\": 8, \"b\": \"c\", \"c\": 240}, {\"a\": 9, \"b\": \"p\", \"c\": 250}, {\"a\": 10, \"b\": \"b\", \"c\": 370}, {\"a\": 11, \"b\": \"c\", \"c\": 330}, {\"a\": 12, \"b\": \"n\", \"c\": 310}, {\"a\": 13, \"b\": \"q\", \"c\": 100}, {\"a\": 14, \"b\": \"r\", \"c\": 70}, {\"a\": 15, \"b\": \"a\", \"c\": 210}, {\"a\": 16, \"b\": \"b\", \"c\": 230}, {\"a\": 17, \"b\": \"c\", \"c\": 220}, {\"a\": 18, \"b\": \"b\", \"c\": 150}, {\"a\": 19, \"b\": \"b\", \"c\": 160}, {\"a\": 20, \"b\": \"b\", \"c\": 100}]}}, {\"mode\": \"vega-lite\"});\n",
        "</script>"
       ],
       "text/plain": [
        "alt.Chart(...)"
       ]
      },
-     "execution_count": 123,
+     "execution_count": 19,
      "metadata": {},
      "output_type": "execute_result"
     }

02.perception-and-color/slides.md

@@ -55,7 +55,7 @@ theme: custom-theme
 <div class="container">
 <div class="col">
 
-![](example1a.png)
+![](viz-1.png)
 
 </div><div class="col">
 
@@ -80,7 +80,7 @@ alt.Chart(random_df).mark_point().encode(
 <div class="container">
 <div class="col">
 
-![](example1b.png)
+![](viz-2.png)
 
 ```
 alt.Chart(random_df).mark_line().encode(
@@ -162,14 +162,14 @@ Stevens measured values of a by exposing people to varied stimulus and asking th
 
 | Continuum | Exponent |
 |-|-|
-| Color Brightness| 0.33-0.5 |
+| Color **Brightness**| 0.33-0.5 |
 | Smell| 0.6 |
 | Loudness | 0.67 |
 | **Depth Perception** | 0.67 | 
 | Area | 0.7 |
 | 2D Planar Position | 1.0 |
 | Warmth | 1.3-1.6 |
-| Color Saturation | 1.7 |
+| Color **Saturation** | 1.7 |
 | Electric Shock | 3.5 |
 
 </div></div>
@@ -204,7 +204,7 @@ Stevens measured values of a by exposing people to varied stimulus and asking th
 Wavelengths of light are perceived as particular colors:
 ![](linear_visible_spectrum.svg.png)
 
-In practice: we almost never see monochromatic color, light sources emit a spectrum & we perceive peaks.
+What's missing?
 
 <!-- credit: https://en.wikipedia.org/wiki/File:Linear_visible_spectrum.svg -->
 
@@ -214,15 +214,16 @@ In practice: we almost never see monochromatic color, light sources emit a spect
 
 ### Rods
 
-- "brightness" 
 - spread throughout retina
 - more sensitive in low light conditions
+- brightness ("lightness")
 
 ### Cones
 
 - 3 types with peak sensitivity at different frequencies
 - concentrated in center of eye
 - less sensitive in low light conditions
+- hue & saturation
 
 ![bg right](cone-fundamentals.png)
 
@@ -277,6 +278,19 @@ Source: https://blog.xkcd.com/2010/05/03/color-survey-results/
 
 ---
 
+## Color Vision Deficiency
+
+More accurate name for what is commonly known as colorblindness.
+
+- Red-Green CVD - most common
+    - four types: Dueteranomaly and Protanomaly (mild) to Protanopia and Dueteranopia (complete)
+- Tritanomaly/Tritanopia: blue/green and yellow/red confusion.
+- rarest, complete lack of color vision, usually corresponds to other vision issues as well
+
+![bg right width:600px](colorblind.jpg)
+
+---
+
 ## Color on a Page
 
 ![bg right](cmyk.svg)
@@ -291,17 +305,40 @@ We call this CMYK color.
 
 Screens emit light, which means we use **additive blending** of red, green, and blue light. Every pixel of a screen can emit these three colors in different intensities.
 
-A common way to refer to colors is by their intensity in each of these three channels.
-
-<span style="color: rgb(0% 100% 0%)">this is 0% red, 100% green, 0% blue intensity</span>
-<span style="color: rgb(20% 60% 20%)">this is 20% red, 60% green, 20% blue intensity</span>
-<span style="color: #ff00ff">this is 100% red, 0% green, 100% blue intensity</span>
 
 
 ![bg right](additive.png)
 
 ---
 
+## Color Spaces
+
+Ways of describing a color mathematically, usually have 3 components to match our perception of color:
+
+- RGB (early photography)
+- CIE XYZ (1931)
+- HSB/HSV/HSL (1970s)
+
+![bg right width:700px](rgb-khan.jpg)
+
+<!-- https://commons.wikimedia.org/wiki/File:Rgb-compose-Alim_Khan.jpg -->
+
+---
+
+A common way to refer to colors is by their intensity in each of these three channels.
+
+<span style="color: rgb(0% 100% 0%)">this is 0% red, 100% green, 0% blue intensity (#00ff00)</span>
+<span style="color: rgb(20% 60% 20%)">this is 20% red, 60% green, 20% blue intensity: (#143c14)</span>
+<span style="color: #ff00ff">this is 100% red, 0% green, 100% blue intensity: #ff00ff</span>
+
+This is sometimes expressed in hexadecimal:
+
+![height:120px](hexrgb.png)
+
+![bg right](rgb-pixels.jpg)
+
+---
+
 ### RGB space as a cube
 
 ![cube](LinearRGBCube.png)
@@ -328,14 +365,12 @@ A slice through the middle of the cube gives colors of comparable brightness.  (
 
 An alternative color space that's very useful for visualization is HSL color space.
 
-Hue, Saturation, Luminosity
+Hue, Saturation, Lightness | <https://hslpicker.com/>
 
 ---
 
 ## Aside: What about "alpha"?
 
-![bg left](rgb-pixels.jpg)
-
 You will often see a fourth channel: RGB**A**, HSL**A**.
 
 This is known as alpha transparency (translucency).
@@ -349,9 +384,13 @@ This has to do with how the program in question *blends* the colors. The final p
 
 ---
 
-## CIE XYZ
+## CIE (RGB / XYZ / CIELAB)
 
-Derived in 1931(!) based on human perception.
+Based on human perception experiments where people would adjust dials to recreate colors out of red, green, and blue light.
+
+First from 1920s, revised in 1970s.
+
+*Commission internationale de l'éclairage*  (Illumination)
 
 ![bg right](cie-xyz.png)
 
@@ -369,12 +408,6 @@ Moral of the story: **Consider your medium!**
 
 ---
 
-## Other Variations
-
-TODO: colorblindness, etc.
-
----
-
 ## What does all this mean for visualization?
 
 Color choices should be made with respect to:
@@ -400,27 +433,45 @@ Color choices should be made with respect to:
 
 ## Color Channels & Data Types
 
-TODO: https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27
+### Lightness is perceived as ordered
-TODO: (also 33 and 34)
 
-### Types of Palettes
+Good for **Ordinal** variables
 
-- qualitative
+![height:50px](ordinal.png)
-- sequential
-- diverging
 
-### Hue Separation
+**Quantitative** (Continuous) variables harder to discern
 
-- distinct
+![height:50px](qual.png)
-- grouped
+
+### Hue typically unordered
+
+**Nominal** variables.
+
+![height:50px](nominal.png)
 
 ---
 
-## Legibility
+### Types of Palettes
 
-An important issue when using colored text and/or backgrounds is **legibility**.
+- Qualitative - Nominal data
+- Sequential - Quantitative data
+- Diverging - Data with a meaningful zero-point (increase/decrease, more/less)
 
-TODO: font legibility image
+![](palette-types.jpg)
+
+<!-- source: Peter Aldhous, NICAR 2016 -->
+
+---
+
+### Hue Separation
+
+Pick distinct hues for unrelated variables.
+
+Grouped schemes can be used where there are relationships among the categories.
+
+![bg left width:600px](vega-schemes.png)
+
+<https://vega.github.io/vega/docs/schemes/>
 
 ---
 
@@ -428,9 +479,27 @@ TODO: font legibility image
 
 A common mantra among visual designers.
 
+Ensure that your hues have different brightness levels.
+
 Ensure that you aren't using hue alone for your image.
 
-TODO: image
+![bg left width:600px](vega-schemes-bw.jpg)
+
+---
+
+## Text Legibility
+
+An important issue when using colored text and/or backgrounds is **legibility**.
+
+Web Content Accessibility Guidelines require a 4.5 color contrast (3:1 for large text).
+
+Minimize *saturation* in backgrounds, pick a font color with opposing *lightness*.
+
+<https://webaim.org/resources/contrastchecker/>
+
+![bg left width:600px](contrast.png)
+
+
 
 ---
 
@@ -441,6 +510,8 @@ TODO: image
 - Theme exploration for cartography: <https://colorbrewer2.org/>
 - Color-theory based theme creator: https://meodai.github.io/poline/
 - Theme creator w/ theme sharing: https://coolors.co
+- HSL/RGB picker: <https://hslpicker.com/>
+- Contast checker: <https://webaim.org/resources/contrastchecker/>
 
 ### Color-Blindness
 
@@ -458,3 +529,5 @@ Color space images are from <https://jamie-wong.com/post/color/>, which is an in
 - https://www.math.csi.cuny.edu/~mvj/GC-DataViz-S23/lectures/L6.html
 - https://en.wikipedia.org/wiki/Stevens%27s_power_law
 - https://colorusage.arc.nasa.gov
+- https://vega.github.io/vega/docs/schemes/
+