02 for review
This commit is contained in:
parent
480e011563
commit
7c639a7d73
BIN
02.perception-and-color/colorblind.jpg
Normal file
BIN
02.perception-and-color/colorblind.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
02.perception-and-color/contrast.png
Normal file
BIN
02.perception-and-color/contrast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
BIN
02.perception-and-color/hexrgb.png
Normal file
BIN
02.perception-and-color/hexrgb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
241
02.perception-and-color/hexrgb.svg
Normal file
241
02.perception-and-color/hexrgb.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 9.2 KiB |
BIN
02.perception-and-color/nominal.png
Normal file
BIN
02.perception-and-color/nominal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
02.perception-and-color/ordinal.png
Normal file
BIN
02.perception-and-color/ordinal.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
02.perception-and-color/palette-types.jpg
Normal file
BIN
02.perception-and-color/palette-types.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
@ -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,
|
||||
"id": "05a4d76e-7ade-431a-a773-d438c6ac9c79",
|
||||
"execution_count": 20,
|
||||
"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-8f69a7d2f3b34034b2453852296e01a2.vega-embed details summary {\n",
|
||||
" #altair-viz-240453dc8e7b4a848b6034958cf10567.vega-embed details,\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",
|
||||
" outputDiv = document.getElementById(\"altair-viz-8f69a7d2f3b34034b2453852296e01a2\");\n",
|
||||
" if (outputDiv.id !== \"altair-viz-240453dc8e7b4a848b6034958cf10567\") {\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": [
|
||||
{
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"outputs": [],
|
||||
"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-83fcb2d8bc334945a9e1bbb53e0c57d7.vega-embed details summary {\n",
|
||||
" #altair-viz-3cb4232660b6443eaf01ad5947f54289.vega-embed details,\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",
|
||||
" outputDiv = document.getElementById(\"altair-viz-83fcb2d8bc334945a9e1bbb53e0c57d7\");\n",
|
||||
" if (outputDiv.id !== \"altair-viz-3cb4232660b6443eaf01ad5947f54289\") {\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"
|
||||
}
|
||||
|
||||
BIN
02.perception-and-color/qual.png
Normal file
BIN
02.perception-and-color/qual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
02.perception-and-color/rgb-khan.jpg
Normal file
BIN
02.perception-and-color/rgb-khan.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 721 KiB |
File diff suppressed because one or more lines are too long
@ -55,7 +55,7 @@ theme: custom-theme
|
||||
<div class="container">
|
||||
<div class="col">
|
||||
|
||||
|
||||
|
||||
|
||||
</div><div class="col">
|
||||
|
||||
@ -80,7 +80,7 @@ alt.Chart(random_df).mark_point().encode(
|
||||
<div class="container">
|
||||
<div class="col">
|
||||
|
||||
|
||||
|
||||
|
||||
```
|
||||
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:
|
||||
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Color on a Page
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 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)
|
||||
|
||||
|
||||
|
||||
<!-- 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:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
### RGB space as a cube
|
||||
|
||||
|
||||
@ -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"?
|
||||
|
||||
|
||||
|
||||
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)
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
TODO: (also 33 and 34)
|
||||
### Lightness is perceived as ordered
|
||||
|
||||
### Types of Palettes
|
||||
Good for **Ordinal** variables
|
||||
|
||||
- qualitative
|
||||
- sequential
|
||||
- diverging
|
||||
|
||||
|
||||
### Hue Separation
|
||||
**Quantitative** (Continuous) variables harder to discern
|
||||
|
||||
- distinct
|
||||
- grouped
|
||||
|
||||
|
||||
### Hue typically unordered
|
||||
|
||||
**Nominal** variables.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 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
|
||||
|
||||
|
||||
<!-- 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.
|
||||
|
||||
|
||||
|
||||
<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
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 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/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
@ -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/
|
||||
|
||||
|
||||
BIN
02.perception-and-color/vega-schemes-bw.jpg
Normal file
BIN
02.perception-and-color/vega-schemes-bw.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
02.perception-and-color/vega-schemes.png
Normal file
BIN
02.perception-and-color/vega-schemes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
02.perception-and-color/viz-1.png
Normal file
BIN
02.perception-and-color/viz-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
02.perception-and-color/viz-2.png
Normal file
BIN
02.perception-and-color/viz-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Loading…
Reference in New Issue
Block a user