jpt-course-notes/30239-notes
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

03 WIP

Browse source
This commit is contained in:
James Turk 2024-09-27 23:10:24 -05:00
parent 35c4c22c92
commit 9d000c548c
18 changed files with 586 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
02.perception-and-color/slides.html
View file

@ -13,11 +13,11 @@
/* custom-theme.css */ /* custom-theme.css */
/* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1} /* @theme custom-theme */div#\:\$p>svg>foreignObject>section .container{display:flex}div#\:\$p>svg>foreignObject>section .col{flex:1}
/* @theme xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq */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="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> /* @theme 670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p */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="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h1 id="perception--color">Perception &amp; Color</h1> <h1 id="perception--color">Perception &amp; Color</h1>
<h2 id="capp-30239">CAPP 30239</h2> <h2 id="capp-30239">CAPP 30239</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="2" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="today">Today</h2> <h2 id="today">Today</h2>
<ul> <ul>
<li>What matters most when creating a visualization?</li> <li>What matters most when creating a visualization?</li>
@ -25,10 +25,10 @@
<li>Understanding <strong>color</strong>, and computational representations of it.</li> <li>Understanding <strong>color</strong>, and computational representations of it.</li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="3" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="what-is-the-most-important-question-when-creating-a-visualization">What is the most important question when creating a visualization?</h2> <h2 id="what-is-the-most-important-question-when-creating-a-visualization">What is the most important question when creating a visualization?</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="4" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="what-is-the-most-important-question-when-creating-a-visualization-1">What is the most important question when creating a visualization?</h2> <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> <ul>
<li><s>Where will the data come from?</s> <li><s>Where will the data come from?</s>
@ -36,7 +36,7 @@
<li>Who is the audience?</li> <li>Who is the audience?</li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="5" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="audience-first">Audience First</h2> <h2 id="audience-first">Audience First</h2>
<ul> <ul>
<li>Who are you presenting to?</li> <li>Who are you presenting to?</li>
@ -47,7 +47,7 @@
</ul> </ul>
<p><em>Only now can we start thinking about data and presentation.</em></p> <p><em>Only now can we start thinking about data and presentation.</em></p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="6" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="perception">Perception</h2> <h2 id="perception">Perception</h2>
<ul> <ul>
<li><strong>Selective</strong> - We can only pay attention to so much.</li> <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> <li><strong>Limited working memory</strong> - We hold a very limited set of information in our minds at once.</li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="7" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="what-do-you-see">What do you see?</h2> <h2 id="what-do-you-see">What do you see?</h2>
<div class="container"> <div class="container">
<div class="col"> <div class="col">
@ -74,7 +74,7 @@
</div> </div>
</div> </div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="8" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="what-do-you-see-1">What do you see?</h2> <h2 id="what-do-you-see-1">What do you see?</h2>
<div class="container"> <div class="container">
<div class="col"> <div class="col">
@ -87,11 +87,11 @@
</div> </div>
</div> </div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="9" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="effectiveness-revisited">Effectiveness Revisited</h2> <h2 id="effectiveness-revisited">Effectiveness Revisited</h2>
<p><img src="effectiveness.png" alt="" style="width:800px;" /></p> <p><img src="effectiveness.png" alt="" style="width:800px;" /></p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="10" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<div class="container"> <div class="container">
<div class="col"> <div class="col">
<p><strong>Altair Channels</strong></p> <p><strong>Altair Channels</strong></p>
@ -117,7 +117,7 @@
</div> </div>
</div> </div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="11" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<p><strong>Derived Properties</strong></p> <p><strong>Derived Properties</strong></p>
<ul> <ul>
<li>Length/Area - size of bars (<code>X</code>, <code>Y</code>)</li> <li>Length/Area - size of bars (<code>X</code>, <code>Y</code>)</li>
@ -127,14 +127,14 @@
</ul> </ul>
<p>What about <em>volume</em>?</p> <p>What about <em>volume</em>?</p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="12" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="stevens-power-law">Stevens' Power Law</h2> <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>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>perception = (magnitude of sensation)<sup>a</sup></p>
<p>Smaller <sup>a</sup> exponent: harder to perceive changes.</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> <p>Stevens measured values of a by exposing people to varied stimulus and asking them to compare magnitudes.</p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="13" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<div class="container"><div class="col"> <div class="container"><div class="col">
<p><img src="stevens.png" alt="" /></p> <p><img src="stevens.png" alt="" /></p>
</div><div class="col"> </div><div class="col">
@ -186,17 +186,17 @@
</table> </table>
</div></div> </div></div>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="14" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="3d-graphs">3D Graphs</h2> <h2 id="3d-graphs">3D Graphs</h2>
<p><img src="stunning-3d-chart.jpg" alt="" /></p> <p><img src="stunning-3d-chart.jpg" alt="" /></p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="15" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<p><img src="datavizproject.png" alt="" /></p> <p><img src="datavizproject.png" alt="" /></p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="16" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<p><img src="3d-scatter.png" alt="" /></p> <p><img src="3d-scatter.png" alt="" /></p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="17" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="instead-of-3d-graphs">Instead of 3D Graphs</h2> <h2 id="instead-of-3d-graphs">Instead of 3D Graphs</h2>
<ul> <ul>
<li>Find other channels: hue &amp; size are good candidates.</li> <li>Find other channels: hue &amp; size are good candidates.</li>
@ -204,13 +204,13 @@
</ul> </ul>
<p>TODO: example of 2D decomposition of a graph</p> <p>TODO: example of 2D decomposition of a graph</p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="18" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="what-is-color">What is Color?</h2> <h2 id="what-is-color">What is Color?</h2>
<p>Wavelengths of light are perceived as particular colors:<br /> <p>Wavelengths of light are perceived as particular colors:<br />
<img src="linear_visible_spectrum.svg.png" alt="" /></p> <img src="linear_visible_spectrum.svg.png" alt="" /></p>
<p>In practice: we almost never see monochromatic color, light sources emit a spectrum &amp; we perceive peaks.</p> <p>In practice: we almost never see monochromatic color, light sources emit a spectrum &amp; we perceive peaks.</p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;--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(&quot;cone-fundamentals.png&quot;);"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="19" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;--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="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;--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(&quot;cone-fundamentals.png&quot;);"></figure></div></section></foreignObject><foreignObject width="50%" height="720"><section id="19" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;--marpit-advanced-background-split:50%;" data-marpit-advanced-background="content" data-marpit-advanced-background-split="right">
<h2 id="color--the-eye">Color &amp; the Eye</h2> <h2 id="color--the-eye">Color &amp; the Eye</h2>
<h3 id="rods">Rods</h3> <h3 id="rods">Rods</h3>
<ul> <ul>
@ -225,14 +225,14 @@
<li>less sensitive in low light conditions</li> <li>less sensitive in low light conditions</li>
</ul> </ul>
</section> </section>
</foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" 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="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject><foreignObject width="1280" height="720" data-marpit-advanced-background="pseudo"><section data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" 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="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="metamers">Metamers ...</h2> <h2 id="metamers">Metamers ...</h2>
<p>TODO: slides from Alex maybe? or drop?</p> <p>TODO: slides from Alex maybe? or drop?</p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="21" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="color-naming">Color Naming</h2> <h2 id="color-naming">Color Naming</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="22" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="color-models">Color Models</h2> <h2 id="color-models">Color Models</h2>
<ul> <ul>
<li>CIE</li> <li>CIE</li>
@ -240,12 +240,12 @@
<li>HS(V|L|B)</li> <li>HS(V|L|B)</li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="23" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="color-channels--data-types">Color Channels &amp; Data Types</h2> <h2 id="color-channels--data-types">Color Channels &amp; Data Types</h2>
<p>TODO: <a href="https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27">https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27</a><br /> <p>TODO: <a href="https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27">https://docs.google.com/presentation/d/1avOsobdcsTG6qaDVCSesIOBFcfxjH12d/edit#slide=id.p27</a><br />
TODO: (also 33 and 34)</p> TODO: (also 33 and 34)</p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="24" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="back-to-visualization">Back to Visualization</h2> <h2 id="back-to-visualization">Back to Visualization</h2>
<h3 id="uses-of-color">Uses of Color</h3> <h3 id="uses-of-color">Uses of Color</h3>
<p>Identify, Group, Layer, Highlight</p> <p>Identify, Group, Layer, Highlight</p>
@ -261,19 +261,19 @@ TODO: (also 33 and 34)</p>
<li>grouped</li> <li>grouped</li>
</ul> </ul>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="25" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="get-it-right-in-black--white">&quot;Get it right in black &amp; white&quot;</h2> <h2 id="get-it-right-in-black--white">&quot;Get it right in black &amp; white&quot;</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="26" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="legibility">Legibility</h2> <h2 id="legibility">Legibility</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="27" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="cultural-considerations">Cultural Considerations</h2> <h2 id="cultural-considerations">Cultural Considerations</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="28" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="human-variation">Human Variation</h2> <h2 id="human-variation">Human Variation</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="29" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="what-about-alpha">What about &quot;alpha&quot;?</h2> <h2 id="what-about-alpha">What about &quot;alpha&quot;?</h2>
<p>You will often see a fourth channel: RGB<strong>A</strong>, HSL<strong>A</strong>.</p> <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> <p>This is known as alpha transparency (translucency).</p>
@ -286,10 +286,10 @@ TODO: (also 33 and 34)</p>
</ul> </ul>
<p>TODO: example</p> <p>TODO: example</p>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="30" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="tools">Tools</h2> <h2 id="tools">Tools</h2>
</section> </section>
</foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-theme="xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq" lang="en-US" style="--theme:xkoyq3ed5gr51lfqq53znqi6k5fifnpsg9oj2opofq;"> </foreignObject></svg><svg data-marpit-svg="" viewBox="0 0 1280 720"><foreignObject width="1280" height="720"><section id="31" data-theme="670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p" lang="en-US" style="--theme:670k962qcywdqlkxlx8i56h39klbro6ifqxw0a72h9p;">
<h2 id="acknowledgements--references">Acknowledgements &amp; References</h2> <h2 id="acknowledgements--references">Acknowledgements &amp; References</h2>
<p>Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.</p> <p>Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.</p>
<ul> <ul>

77
03.charts/Untitled.ipynb Normal file
View file

@ -0,0 +1,77 @@
{
"cells": [
{
"cell_type": "code",
"execution_count": 1,
"id": "52cc5dd5-93ce-4370-adc0-8842764a359e",
"metadata": {},
"outputs": [
{
"ename": "ModuleNotFoundError",
"evalue": "No module named 'vega_datasets'",
"output_type": "error",
"traceback": [
"\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
"\u001b[0;31mModuleNotFoundError\u001b[0m Traceback (most recent call last)",
"Cell \u001b[0;32mIn[1], line 2\u001b[0m\n\u001b[1;32m 1\u001b[0m \u001b[38;5;28;01mimport\u001b[39;00m \u001b[38;5;21;01maltair\u001b[39;00m \u001b[38;5;28;01mas\u001b[39;00m \u001b[38;5;21;01malt\u001b[39;00m\n\u001b[0;32m----> 2\u001b[0m \u001b[38;5;28;01mfrom\u001b[39;00m \u001b[38;5;21;01mvega_datasets\u001b[39;00m \u001b[38;5;28;01mimport\u001b[39;00m data\n\u001b[1;32m 4\u001b[0m source \u001b[38;5;241m=\u001b[39m data\u001b[38;5;241m.\u001b[39mstocks()\n\u001b[1;32m 6\u001b[0m lines \u001b[38;5;241m=\u001b[39m (\n\u001b[1;32m 7\u001b[0m alt\u001b[38;5;241m.\u001b[39mChart(source)\n\u001b[1;32m 8\u001b[0m \u001b[38;5;241m.\u001b[39mmark_line()\n\u001b[1;32m 9\u001b[0m \u001b[38;5;241m.\u001b[39mencode(x\u001b[38;5;241m=\u001b[39m\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mdate\u001b[39m\u001b[38;5;124m\"\u001b[39m, y\u001b[38;5;241m=\u001b[39m\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124mprice\u001b[39m\u001b[38;5;124m\"\u001b[39m, color\u001b[38;5;241m=\u001b[39m\u001b[38;5;124m\"\u001b[39m\u001b[38;5;124msymbol\u001b[39m\u001b[38;5;124m\"\u001b[39m)\n\u001b[1;32m 10\u001b[0m )\n",
"\u001b[0;31mModuleNotFoundError\u001b[0m: No module named 'vega_datasets'"
]
}
],
"source": [
"import altair as alt\n",
"from vega_datasets import data\n",
"\n",
"source = data.stocks()\n",
"\n",
"lines = (\n",
" alt.Chart(source)\n",
" .mark_line()\n",
" .encode(x=\"date\", y=\"price\", color=\"symbol\")\n",
")\n",
"\n",
"xrule = (\n",
" alt.Chart()\n",
" .mark_rule(color=\"cyan\", strokeWidth=2)\n",
" .encode(x=alt.datum(alt.DateTime(year=2006, month=\"November\")))\n",
")\n",
"\n",
"yrule = (\n",
" alt.Chart().mark_rule(strokeDash=[12, 6], size=2).encode(y=alt.datum(350))\n",
")\n",
"\n",
"\n",
"lines + yrule + xrule"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "1a208413-acd4-4ec5-a4ac-3e77558ec9bb",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.10.15"
}
},
"nbformat": 4,
"nbformat_minor": 5
}

BIN
03.charts/age-junk.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 850 KiB

BIN
03.charts/chartjunk-bullet.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
03.charts/eec.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

177
03.charts/examples.ipynb Normal file
View file

File diff suppressed because one or more lines are too long

BIN
03.charts/francetrains.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 94 KiB

BIN
03.charts/labeled.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
03.charts/liefactor.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
03.charts/sizecycle.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 31 KiB

130
03.charts/slides.html Normal file
View file

File diff suppressed because one or more lines are too long

152
03.charts/slides.md Normal file
View file

@ -0,0 +1,152 @@
---
theme: custom-theme
---
# Chart Design
## CAPP 30239
---
## Today
- What general **principles of visual design** are relevant to our work?
- What are the **common types of charts** and how do we use them?
- When and how do we break the rules?
---
## Edward Tufte
### The Visual Display of Quantitative Information
![](tufte.png)
---
## Key Ideas
- Graphical Integrity: Above all else, show the data.
- Maximize the data-ink ratio.
- Minimize chart-junk.
- Aim for high chart density, consider *small multiples*.
- Revision & Editing are essential.
---
## Tufte's Principles for **Graphical Integrity**
---
1. The representation of numbers, as physically measured on the surface of the graphic itself, should be directly **proportional** to the numerical quantities represented.
![](liefactor.jpg)
Mileage increase: 53%
Graph length increase: 783%
"Lie Factor": 14.8x
---
2. Clear, detailed and thorough **labeling** should be used to defeat graphical distortion and ambiguity.
![bg left](spinal.webp)
How many children get a spinal injury every year? (out of 74,000,000 children in US)
<!-- .0000003% -->
---
3. Write out explanation of the data on the graphic itself. **Label important events** in the data.
![](labeled.png)
---
4. Show **data variation, not design variation**.
Deflated & standardized units of money are almost almost superior to nominal units.
The number of information-carrying (variable) dimensions depicted should not exceed the number of dimensions in the data. (roughly 1:1 channel mapping)
Exception: It is OK/common to pair color & shape, or for print color & texture to address issues that color presents.
---
## Data-Ink Ratio
- **Data-ink**: Ink (pixels) used to show data.
- Data-ink ratio: data-ink / total-ink
![](francetrains.jpg)
---
![](eec.gif)
![bg right width:600px](sizecycle.gif)
---
## Optimizing Data Density
Number of entries in DataFrame / Area of Graphic.
Classic example of high data density is the sparkline, which can fit on a line of text.
![](sparkline.png)
---
![bg left height:700px](age-junk.png)
## Chart Junk
Anything that isn't relevant to understanding the data.
---
![](chartjunk-bullet.webp)
via junkcharts.typepad.com
---
## Common Chart Types
### Bar Charts & Histograms
### Line & Area Charts
### Sparklines
### Strip Plot & Heatmap
### Pie / Donut / Radial Charts
### Ranked Line Chart
### Scatterplots
### Small Multiples / Faceting
### Distributions
### Map Basics
### Altair Gallery Miscellania
---
## When & How to Break the Rules
### 2 Examples: Hex / Grid maps ... Word Clouds
### Narrative-supporting graphics
### When it's OK to use 3D
---
## Acknowledgements & References
Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.
- https://www2.cs.uh.edu/~ceick/NO/COSC3337-DV2.pdf

BIN
03.charts/sparkline.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 230 KiB

BIN
03.charts/spinal.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
03.charts/tufte.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 417 KiB

5
Justfile
View file

@ -1,4 +1,7 @@
preview lecture:
marp -pw --html --theme custom-theme.css {{lecture}}/slides.md
slides: slides:
for file in `ls */slides.md`; do \ for file in `ls */slides.md`; do \
marp $file; \ marp --theme custom-theme.css $file; \
done done

1
pyproject.toml
View file

@ -10,4 +10,5 @@ dependencies = [
"pandas>=2.2.3", "pandas>=2.2.3",
"polars>=1.8.2", "polars>=1.8.2",
"ruff>=0.6.8", "ruff>=0.6.8",
"vega-datasets>=0.9.0",
] ]

14
uv.lock
View file

@ -16,6 +16,7 @@ dependencies = [
{ name = "pandas" }, { name = "pandas" },
{ name = "polars" }, { name = "polars" },
{ name = "ruff" }, { name = "ruff" },
{ name = "vega-datasets" },
] ]
[package.metadata] [package.metadata]
@ -25,6 +26,7 @@ requires-dist = [
{ name = "pandas", specifier = ">=2.2.3" }, { name = "pandas", specifier = ">=2.2.3" },
{ name = "polars", specifier = ">=1.8.2" }, { name = "polars", specifier = ">=1.8.2" },
{ name = "ruff", specifier = ">=0.6.8" }, { name = "ruff", specifier = ">=0.6.8" },
{ name = "vega-datasets", specifier = ">=0.9.0" },
] ]
[[package]] [[package]]
@ -1696,6 +1698,18 @@ wheels = [
{ url = "https://files.pythonhosted.org/packages/ce/d9/5f4c13cecde62396b0d3fe530a50ccea91e7dfc1ccf0e09c228841bb5ba8/urllib3-2.2.3-py3-none-any.whl", hash = "sha256:ca899ca043dcb1bafa3e262d73aa25c465bfb49e0bd9dd5d59f1d0acba2f8fac", size = 126338 }, { url = "https://files.pythonhosted.org/packages/ce/d9/5f4c13cecde62396b0d3fe530a50ccea91e7dfc1ccf0e09c228841bb5ba8/urllib3-2.2.3-py3-none-any.whl", hash = "sha256:ca899ca043dcb1bafa3e262d73aa25c465bfb49e0bd9dd5d59f1d0acba2f8fac", size = 126338 },
] ]
[[package]]
name = "vega-datasets"
version = "0.9.0"
source = { registry = "https://pypi.org/simple" }
dependencies = [
{ name = "pandas" },
]
sdist = { url = "https://files.pythonhosted.org/packages/8f/a0/ce608d9a5b82fce2ebaa2311136b1e1d1dc2807f501bbdfa56bd174fff76/vega_datasets-0.9.0.tar.gz", hash = "sha256:9dbe9834208e8ec32ab44970df315de9102861e4cda13d8e143aab7a80d93fc0", size = 215013 }
wheels = [
{ url = "https://files.pythonhosted.org/packages/e6/9f/ca52771fe972e0dcc5167fedb609940e01516066938ff2ee28b273ae4f29/vega_datasets-0.9.0-py3-none-any.whl", hash = "sha256:3d7c63917be6ca9b154b565f4779a31fedce57b01b5b9d99d8a34a7608062a1d", size = 210822 },
]
[[package]] [[package]]
name = "wcwidth" name = "wcwidth"
version = "0.2.13" version = "0.2.13"