03 WIP
This commit is contained in:
parent
35c4c22c92
commit
9d000c548c
@ -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 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 & 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="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>
|
||||
<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="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>
|
||||
</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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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="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>
|
||||
<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="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="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="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>
|
||||
<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="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>
|
||||
<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="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">
|
||||
<p><img src="stevens.png" alt="" /></p>
|
||||
</div><div class="col">
|
||||
@ -186,17 +186,17 @@
|
||||
</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="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>
|
||||
<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="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>
|
||||
</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>
|
||||
</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>
|
||||
<ul>
|
||||
<li>Find other channels: hue & size are good candidates.</li>
|
||||
@ -204,13 +204,13 @@
|
||||
</ul>
|
||||
<p>TODO: example of 2D decomposition of a graph</p>
|
||||
</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>
|
||||
<p>Wavelengths of light are perceived as particular colors:<br />
|
||||
<img src="linear_visible_spectrum.svg.png" alt="" /></p>
|
||||
<p>In practice: we almost never see monochromatic color, light sources emit a spectrum & we perceive peaks.</p>
|
||||
</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("cone-fundamentals.png");"></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("cone-fundamentals.png");"></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 & the Eye</h2>
|
||||
<h3 id="rods">Rods</h3>
|
||||
<ul>
|
||||
@ -225,14 +225,14 @@
|
||||
<li>less sensitive in low light conditions</li>
|
||||
</ul>
|
||||
</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>
|
||||
<p>TODO: slides from Alex maybe? or drop?</p>
|
||||
</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>
|
||||
</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>
|
||||
<ul>
|
||||
<li>CIE</li>
|
||||
@ -240,12 +240,12 @@
|
||||
<li>HS(V|L|B)</li>
|
||||
</ul>
|
||||
</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 & 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 />
|
||||
TODO: (also 33 and 34)</p>
|
||||
</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>
|
||||
<h3 id="uses-of-color">Uses of Color</h3>
|
||||
<p>Identify, Group, Layer, Highlight</p>
|
||||
@ -261,19 +261,19 @@ TODO: (also 33 and 34)</p>
|
||||
<li>grouped</li>
|
||||
</ul>
|
||||
</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">"Get it right in black & white"</h2>
|
||||
</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>
|
||||
</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>
|
||||
</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>
|
||||
</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 "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>
|
||||
@ -286,10 +286,10 @@ TODO: (also 33 and 34)</p>
|
||||
</ul>
|
||||
<p>TODO: example</p>
|
||||
</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>
|
||||
</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 & References</h2>
|
||||
<p>Thanks to Alex Hale, Andrew McNutt, and Jessica Hullman for sharing their materials.</p>
|
||||
<ul>
|
||||
|
||||
77
03.charts/Untitled.ipynb
Normal file
77
03.charts/Untitled.ipynb
Normal 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
BIN
03.charts/age-junk.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 850 KiB |
BIN
03.charts/chartjunk-bullet.webp
Normal file
BIN
03.charts/chartjunk-bullet.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
03.charts/eec.gif
Normal file
BIN
03.charts/eec.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
177
03.charts/examples.ipynb
Normal file
177
03.charts/examples.ipynb
Normal file
File diff suppressed because one or more lines are too long
BIN
03.charts/francetrains.jpg
Normal file
BIN
03.charts/francetrains.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
03.charts/labeled.png
Normal file
BIN
03.charts/labeled.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
03.charts/liefactor.jpg
Normal file
BIN
03.charts/liefactor.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
03.charts/sizecycle.gif
Normal file
BIN
03.charts/sizecycle.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
130
03.charts/slides.html
Normal file
130
03.charts/slides.html
Normal file
File diff suppressed because one or more lines are too long
152
03.charts/slides.md
Normal file
152
03.charts/slides.md
Normal 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
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
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
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## Chart Junk
|
||||
|
||||
Anything that isn't relevant to understanding the data.
|
||||
|
||||
---
|
||||
|
||||
|
||||
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
BIN
03.charts/sparkline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 230 KiB |
BIN
03.charts/spinal.webp
Normal file
BIN
03.charts/spinal.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
03.charts/tufte.png
Normal file
BIN
03.charts/tufte.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
5
Justfile
5
Justfile
@ -1,4 +1,7 @@
|
||||
preview lecture:
|
||||
marp -pw --html --theme custom-theme.css {{lecture}}/slides.md
|
||||
|
||||
slides:
|
||||
for file in `ls */slides.md`; do \
|
||||
marp $file; \
|
||||
marp --theme custom-theme.css $file; \
|
||||
done
|
||||
|
||||
@ -10,4 +10,5 @@ dependencies = [
|
||||
"pandas>=2.2.3",
|
||||
"polars>=1.8.2",
|
||||
"ruff>=0.6.8",
|
||||
"vega-datasets>=0.9.0",
|
||||
]
|
||||
|
||||
14
uv.lock
generated
14
uv.lock
generated
@ -16,6 +16,7 @@ dependencies = [
|
||||
{ name = "pandas" },
|
||||
{ name = "polars" },
|
||||
{ name = "ruff" },
|
||||
{ name = "vega-datasets" },
|
||||
]
|
||||
|
||||
[package.metadata]
|
||||
@ -25,6 +26,7 @@ requires-dist = [
|
||||
{ name = "pandas", specifier = ">=2.2.3" },
|
||||
{ name = "polars", specifier = ">=1.8.2" },
|
||||
{ name = "ruff", specifier = ">=0.6.8" },
|
||||
{ name = "vega-datasets", specifier = ">=0.9.0" },
|
||||
]
|
||||
|
||||
[[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 },
|
||||
]
|
||||
|
||||
[[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]]
|
||||
name = "wcwidth"
|
||||
version = "0.2.13"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user