02/03 updates
This commit is contained in:
parent
c0b01741bd
commit
7441411be5
@ -13,11 +13,11 @@
|
||||
/* custom-theme.css */
|
||||
/* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1}
|
||||
|
||||
/* @theme yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
/* @theme yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26 */div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]:before,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:after,div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content]:before{display:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction=vertical]{flex-direction:column}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split]>div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split,50%)}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background][data-marpit-advanced-background-split=right]>div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=background]>div[data-marpit-advanced-background-container]>figure>figcaption{position:absolute;border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=content],div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo]{background:transparent!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background=pseudo],div#\:\$p>svg[data-marpit-svg]>foreignObject[data-marpit-advanced-background=pseudo]{pointer-events:none!important}div#\:\$p>svg>foreignObject>section[data-marpit-advanced-background-split]{width:100%;height:100%}</style></head><body><div class="bespoke-marp-osc"><button data-bespoke-marp-osc="prev" tabindex="-1" title="Previous slide">Previous slide</button><span data-bespoke-marp-osc="page"></span><button data-bespoke-marp-osc="next" tabindex="-1" title="Next slide">Next slide</button><button data-bespoke-marp-osc="fullscreen" tabindex="-1" title="Toggle fullscreen (f)">Toggle fullscreen</button><button data-bespoke-marp-osc="presenter" tabindex="-1" title="Open presenter view (p)">Open presenter view</button></div><div id=":$p"><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="1" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h1 id="perception--color">Perception & Color</h1>
|
||||
<h2 id="capp-30239">CAPP 30239</h2>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="today">Today</h2>
|
||||
<ul>
|
||||
<li>What matters most when creating a visualization?</li>
|
||||
@ -25,10 +25,10 @@
|
||||
<li>Understanding <strong>color</strong>, and computational representations of it.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="what-is-the-most-important-question-when-creating-a-visualization">What is the most important question when creating a visualization?</h2>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="what-is-the-most-important-question-when-creating-a-visualization-1">What is the most important question when creating a visualization?</h2>
|
||||
<ul>
|
||||
<li><s>Where will the data come from?</s>
|
||||
@ -36,7 +36,7 @@
|
||||
<li>Who is the audience?</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="audience-first">Audience First</h2>
|
||||
<ul>
|
||||
<li>Who are you presenting to?</li>
|
||||
@ -47,7 +47,7 @@
|
||||
</ul>
|
||||
<p><em>Only now can we start thinking about data and presentation.</em></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="perception">Perception</h2>
|
||||
<ul>
|
||||
<li><strong>Selective</strong> - We can only pay attention to so much.</li>
|
||||
@ -55,7 +55,7 @@
|
||||
<li><strong>Limited working memory</strong> - We hold a very limited set of information in our minds at once.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="what-do-you-see">What do you see?</h2>
|
||||
<div class="container">
|
||||
<div class="col">
|
||||
@ -74,7 +74,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="what-do-you-see-1">What do you see?</h2>
|
||||
<div class="container">
|
||||
<div class="col">
|
||||
@ -87,11 +87,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="effectiveness-revisited">Effectiveness Revisited</h2>
|
||||
<p><img src="effectiveness.png" alt="" style="width:800px;" /></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<div class="container">
|
||||
<div class="col">
|
||||
<p><strong>Altair Channels</strong></p>
|
||||
@ -117,7 +117,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<p><strong>Derived Properties</strong></p>
|
||||
<ul>
|
||||
<li>Length/Area - size of bars (<code>X</code>, <code>Y</code>)</li>
|
||||
@ -127,14 +127,14 @@
|
||||
</ul>
|
||||
<p>What about <em>volume</em>?</p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="stevens-power-law">Stevens' Power Law</h2>
|
||||
<p>Stevens (1975): Human response to sensory stimulus is characterized by a power law with different exponents with different stimuli.</p>
|
||||
<p>perception = (magnitude of sensation)<sup>a</sup></p>
|
||||
<p>Smaller <sup>a</sup> exponent: harder to perceive changes.</p>
|
||||
<p>Stevens measured values of a by exposing people to varied stimulus and asking them to compare magnitudes.</p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<div class="container"><div class="col">
|
||||
<p><img src="stevens.png" alt="" /></p>
|
||||
</div><div class="col">
|
||||
@ -186,30 +186,30 @@
|
||||
</table>
|
||||
</div></div>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="3d-graphs">3D Graphs</h2>
|
||||
<p><img src="stunning-3d-chart.jpg" alt="" /></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<p><img src="datavizproject.png" alt="" /></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<p><img src="3d-scatter.png" alt="" /></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("scatter-matrix.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="17" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("scatter-matrix.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="17" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
<h2 id="instead-of-3d-graphs">Instead of 3D Graphs</h2>
|
||||
<ul>
|
||||
<li>Find other channels: hue & size are good candidates. (bubble chart)</li>
|
||||
<li>Or make multiple 2D graphs with XY/YZ/XZ pairs.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="what-is-color">What is Color?</h2>
|
||||
<p>Wavelengths of light are perceived as particular colors:<br />
|
||||
<img src="linear_visible_spectrum.svg.png" alt="" /></p>
|
||||
<p>What's missing?</p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("cone-fundamentals.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="19" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("cone-fundamentals.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="19" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="color--the-eye">Color & the Eye</h2>
|
||||
<h3 id="rods">Rods</h3>
|
||||
<ul>
|
||||
@ -225,26 +225,26 @@
|
||||
<li>hue & saturation</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="20" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="spectrum-vs-what-we-see">Spectrum vs. What We See</h2>
|
||||
<p>What we actually see is always a blend of multiple peaks.</p>
|
||||
<p>This is impacted by ambient light conditions, as well as quirks of our visual processing.</p>
|
||||
<p><img src="the-dress.jpg" alt="" style="height:400px;" /></p>
|
||||
<p>In actuality, multiple combinations of light can give same color (<strong>metamers</strong>).</p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="chromatic-adaptation">Chromatic Adaptation</h2>
|
||||
<p><img src="demo-bw-illusion-andrew-steele.gif" alt="" /></p>
|
||||
<p>Source: Andrew Steele <a href="https://www.youtube.com/channel/UC-XYsDNh4-886rMNLnnwR_w">https://www.youtube.com/channel/UC-XYsDNh4-886rMNLnnwR_w</a></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("xkcd-color-map.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="22" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("xkcd-color-map.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="22" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="color-naming">Color Naming</h2>
|
||||
<p>Color naming is highly subjective, and research has shown that the ability to name a color correlates highly with the ability to distinguish it.</p>
|
||||
|
||||
<p>Be particularly careful with blue/green boundaries, as there are significant cultural differences.</p>
|
||||
<p>Source: <a href="https://blog.xkcd.com/2010/05/03/color-survey-results/">https://blog.xkcd.com/2010/05/03/color-survey-results/</a></p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("hok-uk.svg");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="23" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("hok-uk.svg");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="23" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="cultural-considerations">Cultural Considerations</h2>
|
||||
|
||||
<ul>
|
||||
@ -253,7 +253,7 @@
|
||||
<li>Most other colors have contradictory meanings depending on culture. For example, yellow might be chosen to denote success (parts of Africa) or be associated with death (Middle East).</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("colorblind.jpg");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="24" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("colorblind.jpg");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="24" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="color-vision-deficiency">Color Vision Deficiency</h2>
|
||||
<p>More accurate name for what is commonly known as colorblindness.</p>
|
||||
<ul>
|
||||
@ -266,17 +266,17 @@
|
||||
<li>rarest, complete lack of color vision, usually corresponds to other vision issues as well</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("cmyk.svg");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="25" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("cmyk.svg");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="25" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="color-on-a-page">Color on a Page</h2>
|
||||
|
||||
<p>Ink absorbs light, so we work with subtractive blending. Our base colors are cyan, magenta, and yellow. To save on ink costs, we throw in black/contrast as well.</p>
|
||||
<p>We call this CMYK color.</p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("additive.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="26" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("additive.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="26" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="color-on-a-screen">Color on a Screen</h2>
|
||||
<p>Screens emit light, which means we use <strong>additive blending</strong> of red, green, and blue light. Every pixel of a screen can emit these three colors in different intensities.</p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("rgb-khan.jpg");background-size:700px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="27" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("rgb-khan.jpg");background-size:700px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="27" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="color-spaces">Color Spaces</h2>
|
||||
<p>Ways of describing a color mathematically, usually have 3 components to match our perception of color:</p>
|
||||
<ul>
|
||||
@ -285,7 +285,7 @@
|
||||
<li>HSB/HSV/HSL (1970s)</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("rgb-pixels.jpg");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="28" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("rgb-pixels.jpg");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="28" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<p>A common way to refer to colors is by their intensity in each of these three channels.</p>
|
||||
<p><span style="color: rgb(0% 100% 0%)">this is 0% red, 100% green, 0% blue intensity (#00ff00)</span><br />
|
||||
<span style="color: rgb(20% 60% 20%)">this is 20% red, 60% green, 20% blue intensity: (#143c14)</span><br />
|
||||
@ -293,26 +293,26 @@
|
||||
<p>This is sometimes expressed in hexadecimal:</p>
|
||||
<p><img src="hexrgb.png" alt="" style="height:120px;" /></p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h3 id="rgb-space-as-a-cube">RGB space as a cube</h3>
|
||||
<p><img src="LinearRGBCube.png" alt="cube" /></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h3 id="rgb-as-pair-plots">RGB as pair plots</h3>
|
||||
<p><img src="RGBPairPlots.png" alt="pair plots" /></p>
|
||||
<p>Remember this trick for your own 3-dimensional data!</p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<p><img src="TriangleSliceRGB.png" alt="" style="height:500px;" /></p>
|
||||
<p>A slice through the middle of the cube gives colors of comparable brightness. (You may have seen such a triangle in color pickers.)</p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="32" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="hsl">HSL</h2>
|
||||
<p><img src="HSL.png" alt="" style="height:500px;" /></p>
|
||||
<p>An alternative color space that's very useful for visualization is HSL color space.</p>
|
||||
<p>Hue, Saturation, Lightness | <a href="https://hslpicker.com/">https://hslpicker.com/</a></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="33" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="aside-what-about-alpha">Aside: What about "alpha"?</h2>
|
||||
<p>You will often see a fourth channel: RGB<strong>A</strong>, HSL<strong>A</strong>.</p>
|
||||
<p>This is known as alpha transparency (translucency).</p>
|
||||
@ -322,20 +322,20 @@
|
||||
<li>Variations are very subtle, and background dependent.</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("cie-xyz.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="34" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("cie-xyz.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="34" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="cie-rgb--xyz--cielab">CIE (RGB / XYZ / CIELAB)</h2>
|
||||
<p>Based on human perception experiments where people would adjust dials to recreate colors out of red, green, and blue light.</p>
|
||||
<p>First from 1920s, revised in 1970s.</p>
|
||||
<p><em>Commission internationale de l'éclairage</em> (Illumination)</p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gamut2.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="35" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="right"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("gamut2.png");"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="35" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
|
||||
<h2 id="screen-gamut">Screen Gamut</h2>
|
||||
<p>Screens can't show the entire range of visible colors accurately, they define a "gamut". Since ~1996 most devices aim at a standard gamut to ensure similar representations of color, but even high end devices are not perfectly aligned.</p>
|
||||
|
||||
<p>Projectors (like the one you're likely viewing this on) usually have skewed gamut.</p>
|
||||
<p>Moral of the story: <strong>Consider your medium!</strong></p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="right"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="36" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="what-does-all-this-mean-for-visualization">What does all this mean for visualization?</h2>
|
||||
<p>Color choices should be made with respect to:</p>
|
||||
<ul>
|
||||
@ -344,7 +344,7 @@
|
||||
<li>differentiability</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="37" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="role-of-color">Role of Color</h2>
|
||||
<ul>
|
||||
<li><strong>Identify</strong> - Different color per category/actor.
|
||||
@ -369,7 +369,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="38" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="38" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="color-channels--data-types">Color Channels & Data Types</h2>
|
||||
<h3 id="lightness-is-perceived-as-ordered">Lightness is perceived as ordered</h3>
|
||||
<p>Good for <strong>Ordinal</strong> variables</p>
|
||||
@ -380,7 +380,7 @@
|
||||
<p><strong>Nominal</strong> variables.</p>
|
||||
<p><img src="nominal.png" alt="" style="height:50px;" /></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="39" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="39" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h3 id="types-of-palettes">Types of Palettes</h3>
|
||||
<ul>
|
||||
<li>Qualitative - Nominal data</li>
|
||||
@ -389,27 +389,37 @@
|
||||
</ul>
|
||||
<p><img src="palette-types.jpg" alt="" /></p>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("vega-schemes.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="40" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("vega-schemes.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="40" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
<h3 id="hue-separation">Hue Separation</h3>
|
||||
<p>Pick distinct hues for unrelated variables.</p>
|
||||
<p>Grouped schemes can be used where there are relationships among the categories.</p>
|
||||
|
||||
<p><a href="https://vega.github.io/vega/docs/schemes/">https://vega.github.io/vega/docs/schemes/</a></p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("vega-schemes-bw.jpg");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="41" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="41" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="color-tips">Color Tips</h2>
|
||||
<ul>
|
||||
<li>Aim for no more than ~6 colors that need to be distinguished.</li>
|
||||
<li>Colors should be distinct & differentiable by name.</li>
|
||||
<li>Be mindful of cultural considerations & symbolism.</li>
|
||||
<li>Ensure color schemes chosen appropriately for types of data.</li>
|
||||
<li>"Get it right in black & white"</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("vega-schemes-bw.jpg");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="42" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
<h2 id="get-it-right-in-black--white">"Get it right in black & white"</h2>
|
||||
<p>A common mantra among visual designers.</p>
|
||||
<p>Ensure that your hues have different brightness levels.</p>
|
||||
<p>Ensure that you aren't using hue alone for your image.</p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("contrast.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="42" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="background" data-marpit-advanced-background-split="left"><div data-marpit-advanced-background-container="true" data-marpit-advanced-background-direction="horizontal"><figure style="background-image:url("contrast.png");background-size:600px auto;"></figure></div></section></foreignObject><foreignObject width="50%" height="720" x="50%"><section id="43" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="left">
|
||||
<h2 id="text-legibility">Text Legibility</h2>
|
||||
<p>An important issue when using colored text and/or backgrounds is <strong>legibility</strong>.</p>
|
||||
<p>Web Content Accessibility Guidelines require a 4.5 color contrast (3:1 for large text).</p>
|
||||
<p>Minimize <em>saturation</em> in backgrounds, pick a font color with opposing <em>lightness</em>.</p>
|
||||
<p><a href="https://webaim.org/resources/contrastchecker/">https://webaim.org/resources/contrastchecker/</a></p>
|
||||
</section>
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="43" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="" data-marpit-advanced-background="pseudo" data-marpit-advanced-background-split="left"></section></foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="44" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="tools">Tools</h2>
|
||||
<ul>
|
||||
<li>Vega Schemes: <a href="https://vega.github.io/vega/docs/schemes/">https://vega.github.io/vega/docs/schemes/</a></li>
|
||||
@ -426,7 +436,7 @@
|
||||
<li>Browser extensions (search "colorblindness" in your browser of choice)</li>
|
||||
</ul>
|
||||
</section>
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="44" data-theme="yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat" lang="en-US" style="--theme:yfx7y6e7t8lvd0h7gw3kb73d4n3rf71zt98r1hyu3pat;">
|
||||
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="45" data-theme="yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26" lang="en-US" style="--theme:yef5m190wtxacd3wqjl5sjh82ihvf03ftp4k7ngl26;">
|
||||
<h2 id="acknowledgements--references">Acknowledgements & References</h2>
|
||||
<p>Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.</p>
|
||||
<p>Color space images are from <a href="https://jamie-wong.com/post/color/">https://jamie-wong.com/post/color/</a>, which is an incredible resource if you'd like to go deeper into both the biology and math of color.</p>
|
||||
|
||||
@ -473,6 +473,17 @@ Grouped schemes can be used where there are relationships among the categories.
|
||||
|
||||
<https://vega.github.io/vega/docs/schemes/>
|
||||
|
||||
---
|
||||
|
||||
## Color Tips
|
||||
|
||||
- Aim for no more than ~6 colors that need to be distinguished.
|
||||
- Colors should be distinct & differentiable by name.
|
||||
- Be mindful of cultural considerations & symbolism.
|
||||
- Ensure color schemes chosen appropriately for types of data.
|
||||
- "Get it right in black & white"
|
||||
|
||||
|
||||
---
|
||||
|
||||
## "Get it right in black & white"
|
||||
@ -500,7 +511,6 @@ Minimize *saturation* in backgrounds, pick a font color with opposing *lightness
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Tools
|
||||
@ -530,4 +540,3 @@ Color space images are from <https://jamie-wong.com/post/color/>, which is an in
|
||||
- https://en.wikipedia.org/wiki/Stevens%27s_power_law
|
||||
- https://colorusage.arc.nasa.gov
|
||||
- https://vega.github.io/vega/docs/schemes/
|
||||
|
||||
|
||||
BIN
03.charts/1080.png
Normal file
BIN
03.charts/1080.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
03.charts/5920.png
Normal file
BIN
03.charts/5920.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 3.7 MiB |
BIN
03.charts/fox-bar.jpg
Normal file
BIN
03.charts/fox-bar.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
BIN
03.charts/obama-treemap.png
Normal file
BIN
03.charts/obama-treemap.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 369 KiB |
File diff suppressed because one or more lines are too long
@ -53,13 +53,15 @@ Graph length increase: 783%
|
||||
|
||||
How many children get a spinal injury every year? (out of 74,000,000 children in US)
|
||||
|
||||
Note: there are only 22,000 total spinal cord injuries a year in America (and most are 16-30yo).
|
||||
|
||||
<!-- .0000003% -->
|
||||
|
||||
---
|
||||
|
||||
3. Write out explanation of the data on the graphic itself. **Label important events** in the data.
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
@ -73,13 +75,29 @@ Exception: It is OK/common to pair color & shape, or for print color & texture t
|
||||
|
||||
---
|
||||
|
||||
## Misleading Axes
|
||||
## Axes/Scale Mistakes
|
||||
|
||||
- not starting at 0
|
||||
- dual axes
|
||||
- pie charts that don't add up to 100
|
||||
- Carefully consider not starting at zero.
|
||||
- Beware dual axes.
|
||||
- Consider audience when using log scale.
|
||||
- Related: No pie charts that don't add up to 100%
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
TODO: add examples
|
||||
|
||||
---
|
||||
|
||||
@ -138,6 +156,7 @@ via junkcharts.typepad.com
|
||||
|
||||
- X/Y: Nominal (Binned Numerical - Histogram)
|
||||
- Y/X: Quantitative
|
||||
- Area must be relevant on bar charts: no log scales/cut axes!
|
||||
|
||||
|
||||
|
||||
@ -184,7 +203,7 @@ Sum of stacked axis variable **must have meaning**.
|
||||
|
||||
### Pie / Donut / Radial Charts
|
||||
|
||||
|
||||
|
||||
|
||||
Theta: Quantitative (ratio)
|
||||
Color: Nominal
|
||||
@ -193,6 +212,8 @@ Direct comparison of segments is very difficult at n > 2.
|
||||
|
||||
Only use when most important information is ratio between sizes, and relatively few categories.
|
||||
|
||||
**Must add up to 100%**
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -228,7 +249,7 @@ Bubble charts use size as a 3rd dimension.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- source: https://www.juiceanalytics.com/writing/better-know-visualization-small-multiples -->
|
||||
|
||||
@ -236,6 +257,12 @@ Useful when there is a nominal variable being compared across two other dimensio
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
<!-- source https://obamawhitehouse.archives.gov/interactive-budget -->
|
||||
|
||||
---
|
||||
|
||||
### Map Basics
|
||||
|
||||
Two most common:
|
||||
@ -256,13 +283,13 @@ Two most common:
|
||||
|
||||
## Two choropleths, same data.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- source: https://carto.maps.arcgis.com/apps/webappviewer/index.html?id=7475c5788efe4c75a9642f552f61d568 -->
|
||||
|
||||
Unit of measurement is incredibly important.
|
||||
Color scale & unit of measurement is incredibly important.
|
||||
|
||||
Consider alternatives if district/population sizes vary significantly.
|
||||
|
||||
@ -272,8 +299,11 @@ Consider alternatives if district/population sizes vary significantly.
|
||||
|
||||
**When in doubt...**
|
||||
|
||||
- 95% of visualizations should be some variation of the common types.
|
||||
- Focus on Tufte's rules for clarity.
|
||||
9 out of 10 visualizations should be some variation of the common types.
|
||||
|
||||
This does not need to hamper creativity, in the right context a little flourish can add a lot. But ensure that it does not obfuscate the data.
|
||||
|
||||
Focus on Tufte's principles & ask for feedback!
|
||||
|
||||
---
|
||||
|
||||
@ -323,14 +353,12 @@ by ulaniulani on flickr
|
||||
|
||||
### When it's OK to use 3D
|
||||
|
||||
You have data that truly makes more sense in 3D.
|
||||
You have data that relates to a spatial third dimension.
|
||||
|
||||
and/or
|
||||
|
||||
You work at CERN.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
(Image: Snowfall, NY Times)
|
||||
(Image: CERN Large Hadron Collider)
|
||||
|
||||
---
|
||||
|
||||
BIN
03.charts/snowfall.png
Normal file
BIN
03.charts/snowfall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
03.charts/tools_misleading_axes.png
Normal file
BIN
03.charts/tools_misleading_axes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 864 KiB |
Loading…
Reference in New Issue
Block a user