<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Visualization on Posit Open Source</title>
    <link>https://posit-open-source.netlify.app/categories/visualization/</link>
    <description>Recent content in Visualization on Posit Open Source</description>
    <generator>Hugo -- gohugo.io</generator>
    <language>en-us</language>
    <lastBuildDate>Thu, 12 Mar 2026 00:00:00 +0000</lastBuildDate>
    <atom:link href="https://posit-open-source.netlify.app/categories/visualization/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>Recreating Septa Transit Timetables in Python</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/septa-timetables/</link>
      <pubDate>Thu, 12 Mar 2026 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/septa-timetables/</guid>
      <dc:creator>Michael Chow</dc:creator>
      <dc:creator>Rich Iannone</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>Recently, Rich and I were poking around transit data, and we were struck by the amount of structuring that goes into transit timetables.</p>
<p>For example, consider this weekend rail schedule table from SEPTA, Philadelphia&rsquo;s transit agency.</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/septa-timetables/./example-timetable.png" style="max-width: 700px; display: block; margin-left: auto; margin-right: auto;" />
<p>Notice these big pieces:</p>
<ul>
<li>The vertical text on the left indicating trains are traveling &ldquo;TO CENTER CITY&rdquo;.</li>
<li>The blue header, and spanner columns (&ldquo;Services&rdquo; and &ldquo;Train Number&rdquo;) grouping related columns.</li>
<li>The striped background for easier reading. Also the black background indicating stations in Center City (the urban core).</li>
</ul>
<p>Tables like this often have to be created in tools like Illustrator, and updated by hand. At the same time, when agencies automate table creation, they often sacrifice a lot of the assistive features and helpful affordances of the table.</p>
<p>We set out to recreate this table in Great Tables (and by we I mean 99% Rich). In this post, I&rsquo;ll walk quickly through how we recreated it, and share some other examples of transit timetables in the wild. For the theory behind why tables like this are useful, see <a href="https://posit-open-source.netlify.app/blog/great-tables/design-philosophy/">The Design Philosophy of Great Tables</a>
.</p>
<h2 id="the-final-result">The final result
</h2>
<p>Here&rsquo;s a look at our quick version in Great Tables.
In this post we&rsquo;ll walk through quickly how we created it, but wanted to treat you to the final result up front! Note that the table is fully in HTML for accessibility.</p>
<details class="code-fold">
<summary>Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span><span class="lnt">50
</span><span class="lnt">51
</span><span class="lnt">52
</span><span class="lnt">53
</span><span class="lnt">54
</span><span class="lnt">55
</span><span class="lnt">56
</span><span class="lnt">57
</span><span class="lnt">58
</span><span class="lnt">59
</span><span class="lnt">60
</span><span class="lnt">61
</span><span class="lnt">62
</span><span class="lnt">63
</span><span class="lnt">64
</span><span class="lnt">65
</span><span class="lnt">66
</span><span class="lnt">67
</span><span class="lnt">68
</span><span class="lnt">69
</span><span class="lnt">70
</span><span class="lnt">71
</span><span class="lnt">72
</span><span class="lnt">73
</span><span class="lnt">74
</span><span class="lnt">75
</span><span class="lnt">76
</span><span class="lnt">77
</span><span class="lnt">78
</span><span class="lnt">79
</span><span class="lnt">80
</span><span class="lnt">81
</span><span class="lnt">82
</span><span class="lnt">83
</span><span class="lnt">84
</span><span class="lnt">85
</span><span class="lnt">86
</span><span class="lnt">87
</span><span class="lnt">88
</span><span class="lnt">89
</span><span class="lnt">90
</span><span class="lnt">91
</span><span class="lnt">92
</span><span class="lnt">93
</span><span class="lnt">94
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">html</span><span class="p">,</span> <span class="n">style</span><span class="p">,</span> <span class="n">loc</span><span class="p">,</span> <span class="n">google_font</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars.selectors</span> <span class="k">as</span> <span class="nn">cs</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">stops</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">&#34;chw-stops.csv&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">times</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">&#34;times.csv&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">stop_times</span> <span class="o">=</span> <span class="n">times</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">other</span><span class="o">=</span><span class="n">stops</span><span class="p">,</span> <span class="n">on</span><span class="o">=</span><span class="s2">&#34;stop_name&#34;</span><span class="p">,</span> <span class="n">maintain_order</span><span class="o">=</span><span class="s2">&#34;left&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">select</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">lit</span><span class="p">(</span><span class="s2">&#34;To Center City&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;direction&#34;</span><span class="p">),</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;*&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">h_m_p</span><span class="p">(</span><span class="n">s</span><span class="p">):</span>
</span></span><span class="line"><span class="cl">    <span class="n">h</span><span class="p">,</span> <span class="n">m</span><span class="p">,</span> <span class="n">_</span> <span class="o">=</span> <span class="p">[</span><span class="nb">int</span><span class="p">(</span><span class="n">part</span><span class="p">)</span> <span class="k">for</span> <span class="n">part</span> <span class="ow">in</span> <span class="n">s</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s2">&#34;:&#34;</span><span class="p">)]</span>
</span></span><span class="line"><span class="cl">    <span class="n">ap</span> <span class="o">=</span> <span class="s2">&#34;a&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="k">if</span> <span class="n">h</span> <span class="o">&gt;</span> <span class="mi">12</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">        <span class="n">h</span> <span class="o">-=</span> <span class="mi">12</span>
</span></span><span class="line"><span class="cl">        <span class="n">ap</span> <span class="o">=</span> <span class="s2">&#34;p&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="sa">f</span><span class="s2">&#34;</span><span class="si">{</span><span class="n">h</span><span class="si">}</span><span class="s2">:</span><span class="si">{</span><span class="n">m</span><span class="si">:</span><span class="s2">02d</span><span class="si">}{</span><span class="n">ap</span><span class="si">}</span><span class="s2">&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">tick</span><span class="p">(</span><span class="n">b</span><span class="p">):</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="s2">&#34;&amp;check;&#34;</span> <span class="k">if</span> <span class="n">b</span> <span class="k">else</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">transit_table</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">stop_times</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_stub</span><span class="p">(</span><span class="n">groupname_col</span><span class="o">=</span><span class="s2">&#34;direction&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="s2">&#34;Saturdays, Sundays, and Major Holidays&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_hide</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;stop_url&#34;</span><span class="p">,</span> <span class="s2">&#34;zone_id&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_desc&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_lat&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_lon&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_id&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">h_m_p</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">tick</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_label</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">stop_name</span><span class="o">=</span><span class="s2">&#34;Stations&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">service_access</span><span class="o">=</span><span class="s2">&#34;A&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">service_cash</span><span class="o">=</span><span class="s2">&#34;C&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">service_park</span><span class="o">=</span><span class="s2">&#34;P&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">fare_zone</span><span class="o">=</span><span class="n">html</span><span class="p">(</span><span class="s2">&#34;Fare&lt;br&gt;Zone&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;Services&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;Train Number&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_move_to_start</span><span class="p">(</span><span class="s2">&#34;fare_zone&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_move_to_start</span><span class="p">(</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_width</span><span class="p">(</span><span class="n">cases</span><span class="o">=</span><span class="p">{</span><span class="n">c</span><span class="p">:</span> <span class="s2">&#34;20px&#34;</span> <span class="k">for</span> <span class="n">c</span> <span class="ow">in</span> <span class="n">stop_times</span><span class="o">.</span><span class="n">columns</span> <span class="k">if</span> <span class="n">c</span><span class="o">.</span><span class="n">startswith</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">)})</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_width</span><span class="p">(</span><span class="n">cases</span><span class="o">=</span><span class="p">{</span><span class="n">c</span><span class="p">:</span> <span class="s2">&#34;60px&#34;</span> <span class="k">for</span> <span class="n">c</span> <span class="ow">in</span> <span class="n">stop_times</span><span class="o">.</span><span class="n">columns</span> <span class="k">if</span> <span class="n">c</span><span class="o">.</span><span class="n">startswith</span><span class="p">(</span><span class="s2">&#34;8&#34;</span><span class="p">)})</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_row_striping</span><span class="p">(</span><span class="n">row_striping</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;center&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;fare_zone&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="c1"># style header</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">header</span><span class="p">(),</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;background-color: rgb(66, 99, 128) !important; color: white !important; font-size: 24px !important; font-weight: bold !important; border-width: 0px !important;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="c1"># style vertical text on left</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">row_groups</span><span class="p">(),</span>
</span></span><span class="line"><span class="cl">        <span class="c1"># TODO: rotate text vertically</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;writing-mode: sideways-lr; padding-bottom: 25% !important; font-size: 24px !important; font-weight: bold !important; text-transform: uppercase !important;&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important;&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">rows</span><span class="o">=</span><span class="nb">list</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">))),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;&#34;&#34;
</span></span></span><span class="line"><span class="cl"><span class="s2">                border-top: none !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">                border-bottom: none !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">                border-right: solid white 2px !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">                color: white !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">            &#34;&#34;&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=~</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">),</span> <span class="n">rows</span><span class="o">=</span><span class="nb">list</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">))),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span><span class="s2">&#34;border-right: solid black 2px !important;&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=~</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">),</span> <span class="n">rows</span><span class="o">=</span><span class="nb">list</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">))</span> <span class="o">+</span> <span class="p">[</span><span class="mi">13</span><span class="p">]),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_options</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">row_striping_background_color</span><span class="o">=</span><span class="s2">&#34;#A9A9A9&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">row_group_as_column</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_table_outline</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_table_font</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="s2">&#34;IBM Plex Sans&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">transit_table</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="ratqybkrxx" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#ratqybkrxx table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#ratqybkrxx thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#ratqybkrxx p { margin: 0; padding: 0; }
#ratqybkrxx .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 3px; border-top-color: #D3D3D3; border-right-style: solid; border-right-width: 3px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: #D3D3D3; border-left-style: solid; border-left-width: 3px; border-left-color: #D3D3D3; }
#ratqybkrxx .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#ratqybkrxx .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#ratqybkrxx .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#ratqybkrxx .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#ratqybkrxx .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#ratqybkrxx .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#ratqybkrxx .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#ratqybkrxx .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#ratqybkrxx .gt_column_spanner_outer:first-child { padding-left: 0; }
#ratqybkrxx .gt_column_spanner_outer:last-child { padding-right: 0; }
#ratqybkrxx .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#ratqybkrxx .gt_spanner_row { border-bottom-style: hidden; }
#ratqybkrxx .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#ratqybkrxx .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#ratqybkrxx .gt_from_md&gt; :first-child { margin-top: 0; }
#ratqybkrxx .gt_from_md&gt; :last-child { margin-bottom: 0; }
#ratqybkrxx .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#ratqybkrxx .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#ratqybkrxx .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#ratqybkrxx .gt_row_group_first td { border-top-width: 2px; }
#ratqybkrxx .gt_row_group_first th { border-top-width: 2px; }
#ratqybkrxx .gt_striped { color: #333333; background-color: #A9A9A9; }
#ratqybkrxx .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#ratqybkrxx .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#ratqybkrxx .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#ratqybkrxx .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#ratqybkrxx .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#ratqybkrxx .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#ratqybkrxx .gt_left { text-align: left; }
#ratqybkrxx .gt_center { text-align: center; }
#ratqybkrxx .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#ratqybkrxx .gt_font_normal { font-weight: normal; }
#ratqybkrxx .gt_font_bold { font-weight: bold; }
#ratqybkrxx .gt_font_italic { font-style: italic; }
#ratqybkrxx .gt_super { font-size: 65%; }
#ratqybkrxx .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#ratqybkrxx .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" style="table-layout: fixed;" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="14" class="gt_heading gt_title gt_font_normal" style="background-color: rgb(66, 99, 128) !important; color: white !important; font-size: 24px !important; font-weight: bold !important; border-width: 0px !important">Saturdays, Sundays, and Major Holidays</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th colspan="3" id="Services" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Services</span></th>
<th rowspan="2" id="fare_zone" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">Fare<br />
Zone</th>
<th rowspan="2" id="stop_name" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Stations</th>
<th colspan="8" id="Train-Number" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Train Number</span></th>
</tr>
<tr class="gt_col_headings">
<th id="service_access" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">A</th>
<th id="service_cash" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">C</th>
<th id="service_park" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">P</th>
<th id="8210" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8210</th>
<th id="8716" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8716</th>
<th id="8318" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8318</th>
<th id="8322" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8322</th>
<th id="8338" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8338</th>
<th id="8242" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8242</th>
<th id="8750" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8750</th>
<th id="8756" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8756</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td rowspan="14" class="gt_row gt_left gt_stub_row_group" data-quarto-table-cell-role="th" style="writing-mode: sideways-lr; padding-bottom: 25% !important; font-size: 24px !important; font-weight: bold !important; text-transform: uppercase !important">To Center City</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">2</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Chestnut Hill West</td>
<td class="gt_row gt_right">6:51a</td>
<td class="gt_row gt_right">8:08a</td>
<td class="gt_row gt_right">8:49a</td>
<td class="gt_row gt_right">9:49a</td>
<td class="gt_row gt_right">1:52p</td>
<td class="gt_row gt_right">2:49p</td>
<td class="gt_row gt_right">4:48p</td>
<td class="gt_row gt_right">6:20p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">2</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Highland</td>
<td class="gt_row gt_right gt_striped">6:52a</td>
<td class="gt_row gt_right gt_striped">8:09a</td>
<td class="gt_row gt_right gt_striped">8:50a</td>
<td class="gt_row gt_right gt_striped">9:50a</td>
<td class="gt_row gt_right gt_striped">1:53p</td>
<td class="gt_row gt_right gt_striped">2:50p</td>
<td class="gt_row gt_right gt_striped">4:49p</td>
<td class="gt_row gt_right gt_striped">6:21p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">St. Martins</td>
<td class="gt_row gt_right">6:54a</td>
<td class="gt_row gt_right">8:11a</td>
<td class="gt_row gt_right">8:52a</td>
<td class="gt_row gt_right">9:52a</td>
<td class="gt_row gt_right">1:55p</td>
<td class="gt_row gt_right">2:52p</td>
<td class="gt_row gt_right">4:51p</td>
<td class="gt_row gt_right">6:23p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Richard Allen Lane</td>
<td class="gt_row gt_right gt_striped">6:56a</td>
<td class="gt_row gt_right gt_striped">8:13a</td>
<td class="gt_row gt_right gt_striped">8:54a</td>
<td class="gt_row gt_right gt_striped">9:54a</td>
<td class="gt_row gt_right gt_striped">1:57p</td>
<td class="gt_row gt_right gt_striped">2:54p</td>
<td class="gt_row gt_right gt_striped">4:53p</td>
<td class="gt_row gt_right gt_striped">6:25p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Carpenter</td>
<td class="gt_row gt_right">6:58a</td>
<td class="gt_row gt_right">8:15a</td>
<td class="gt_row gt_right">8:56a</td>
<td class="gt_row gt_right">9:56a</td>
<td class="gt_row gt_right">1:59p</td>
<td class="gt_row gt_right">2:56p</td>
<td class="gt_row gt_right">4:55p</td>
<td class="gt_row gt_right">6:27p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Upsal</td>
<td class="gt_row gt_right gt_striped">7:00a</td>
<td class="gt_row gt_right gt_striped">8:17a</td>
<td class="gt_row gt_right gt_striped">8:58a</td>
<td class="gt_row gt_right gt_striped">9:58a</td>
<td class="gt_row gt_right gt_striped">2:01p</td>
<td class="gt_row gt_right gt_striped">2:58p</td>
<td class="gt_row gt_right gt_striped">4:57p</td>
<td class="gt_row gt_right gt_striped">6:29p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Tulpehocken</td>
<td class="gt_row gt_right">7:02a</td>
<td class="gt_row gt_right">8:19a</td>
<td class="gt_row gt_right">9:00a</td>
<td class="gt_row gt_right">10:00a</td>
<td class="gt_row gt_right">2:03p</td>
<td class="gt_row gt_right">3:00p</td>
<td class="gt_row gt_right">4:59p</td>
<td class="gt_row gt_right">6:31p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Chelten Avenue</td>
<td class="gt_row gt_right gt_striped">7:04a</td>
<td class="gt_row gt_right gt_striped">8:21a</td>
<td class="gt_row gt_right gt_striped">9:02a</td>
<td class="gt_row gt_right gt_striped">10:02a</td>
<td class="gt_row gt_right gt_striped">2:05p</td>
<td class="gt_row gt_right gt_striped">3:02p</td>
<td class="gt_row gt_right gt_striped">5:01p</td>
<td class="gt_row gt_right gt_striped">6:33p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Queen Lane</td>
<td class="gt_row gt_right">7:06a</td>
<td class="gt_row gt_right">8:23a</td>
<td class="gt_row gt_right">9:04a</td>
<td class="gt_row gt_right">10:04a</td>
<td class="gt_row gt_right">2:07p</td>
<td class="gt_row gt_right">3:04p</td>
<td class="gt_row gt_right">5:03p</td>
<td class="gt_row gt_right">6:35p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">North Philadelphia</td>
<td class="gt_row gt_right gt_striped">7:12a</td>
<td class="gt_row gt_right gt_striped">8:29a</td>
<td class="gt_row gt_right gt_striped">9:12a</td>
<td class="gt_row gt_right gt_striped">10:12a</td>
<td class="gt_row gt_right gt_striped">2:15p</td>
<td class="gt_row gt_right gt_striped">3:12p</td>
<td class="gt_row gt_right gt_striped">5:09p</td>
<td class="gt_row gt_right gt_striped">6:41p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_center" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">2</td>
<td class="gt_row gt_left" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">Gray 30th Street</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:23a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">8:42a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">9:23a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">10:23a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">2:26p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">3:23p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">5:20p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">6:54p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_center gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">2</td>
<td class="gt_row gt_left gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">Suburban Station</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:28a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">8:47a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">9:28a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">10:28a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">2:31p</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">3:28p</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">5:25p</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">6:59p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_center" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">2</td>
<td class="gt_row gt_left" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">Jefferson Station</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:33a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">8:52a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">9:33a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">10:33a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">2:36p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">3:33p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">5:30p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:04p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">2</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Temple University</td>
<td class="gt_row gt_right gt_striped">7:37a</td>
<td class="gt_row gt_right gt_striped">8:57a</td>
<td class="gt_row gt_right gt_striped">9:37a</td>
<td class="gt_row gt_right gt_striped">10:37a</td>
<td class="gt_row gt_right gt_striped">2:40p</td>
<td class="gt_row gt_right gt_striped">3:37p</td>
<td class="gt_row gt_right gt_striped">5:35p</td>
<td class="gt_row gt_right gt_striped">7:08p</td>
</tr>
</tbody>
</table>
</div>
<h2 id="reading-in-stops-and-times">Reading in stops and times
</h2>
<p>For this example, I simplified SEPTA&rsquo;s transit data down to two pieces:</p>
<ul>
<li><code>chw-stops.csv</code> - detailed information about each stop location.</li>
<li><code>times.csv</code> - when a train arrives at a stop on the Chesnut Hill West line. Each row is a stop location, and each column is a trip (e.g. the 6:51am train).</li>
</ul>
<p>To make the final table we joined these two together, to get the trips and stop information together.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">stops</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">&#34;chw-stops.csv&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">times</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">read_csv</span><span class="p">(</span><span class="s2">&#34;times.csv&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Here&rsquo;s a quick preview of stops.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">stops</span><span class="o">.</span><span class="n">select</span><span class="p">(</span><span class="s2">&#34;stop_name&#34;</span><span class="p">,</span> <span class="s2">&#34;service_access&#34;</span><span class="p">,</span> <span class="s2">&#34;service_cash&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">head</span><span class="p">()</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div><style>
.dataframe > thead > tr,
.dataframe > tbody > tr {
  text-align: right;
  white-space: pre-wrap;
}
</style>
<small>shape: (5, 3)</small>
<table>
  <thead>
      <tr>
          <th>stop_name</th>
          <th>service_access</th>
          <th>service_cash</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>str</td>
          <td>i64</td>
          <td>i64</td>
      </tr>
      <tr>
          <td>&quot;Gray 30th Street&quot;</td>
          <td>1</td>
          <td>0</td>
      </tr>
      <tr>
          <td>&quot;Suburban Station&quot;</td>
          <td>0</td>
          <td>0</td>
      </tr>
      <tr>
          <td>&quot;Jefferson Station&quot;</td>
          <td>0</td>
          <td>0</td>
      </tr>
      <tr>
          <td>&quot;Temple University&quot;</td>
          <td>1</td>
          <td>0</td>
      </tr>
      <tr>
          <td>&quot;Chestnut Hill West&quot;</td>
          <td>0</td>
          <td>0</td>
      </tr>
  </tbody>
</table>
</div>
<p>Notice that the table above has the name of each stop, and a 1 or 0 in the <code>service_access</code> column to indicate whether the stop is wheelchair accessible. Note that a big challenge for this specific route is that sometimes boarding the train requires using steps, and sometimes the station requires using steps. For example, Chelton Ave (not shown) does not require steps to board the train, but the station itself is not wheelchair accessible because of steps to get to the platform.</p>
<p>Here&rsquo;s a quick preview of the times.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">times</span><span class="o">.</span><span class="n">head</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div><style>
.dataframe > thead > tr,
.dataframe > tbody > tr {
  text-align: right;
  white-space: pre-wrap;
}
</style>
<small>shape: (3, 9)</small>
<table>
  <thead>
      <tr>
          <th>stop_name</th>
          <th>8210</th>
          <th>8716</th>
          <th>8318</th>
          <th>8322</th>
          <th>8338</th>
          <th>8242</th>
          <th>8750</th>
          <th>8756</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
      </tr>
      <tr>
          <td>&quot;Chestnut Hill West&quot;</td>
          <td>&quot;06:51:00&quot;</td>
          <td>&quot;08:08:00&quot;</td>
          <td>&quot;08:49:00&quot;</td>
          <td>&quot;09:49:00&quot;</td>
          <td>&quot;13:52:00&quot;</td>
          <td>&quot;14:49:00&quot;</td>
          <td>&quot;16:48:00&quot;</td>
          <td>&quot;18:20:00&quot;</td>
      </tr>
      <tr>
          <td>&quot;Highland&quot;</td>
          <td>&quot;06:52:00&quot;</td>
          <td>&quot;08:09:00&quot;</td>
          <td>&quot;08:50:00&quot;</td>
          <td>&quot;09:50:00&quot;</td>
          <td>&quot;13:53:00&quot;</td>
          <td>&quot;14:50:00&quot;</td>
          <td>&quot;16:49:00&quot;</td>
          <td>&quot;18:21:00&quot;</td>
      </tr>
      <tr>
          <td>&quot;St. Martins&quot;</td>
          <td>&quot;06:54:00&quot;</td>
          <td>&quot;08:11:00&quot;</td>
          <td>&quot;08:52:00&quot;</td>
          <td>&quot;09:52:00&quot;</td>
          <td>&quot;13:55:00&quot;</td>
          <td>&quot;14:52:00&quot;</td>
          <td>&quot;16:51:00&quot;</td>
          <td>&quot;18:23:00&quot;</td>
      </tr>
  </tbody>
</table>
</div>
<p>Notice that each trip is a column (i.e. a train leaving from Chesnut Hill West at a specific time), and each row is a stop. For example, the 8210 train is the 6:51am train. (Note that schedules and train numbers can change, so this data may be out of date).</p>
<p>Joining these together gives us <code>stop_times</code>, with trips and stop information on the columns.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">stop_times</span> <span class="o">=</span> <span class="n">times</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="n">other</span><span class="o">=</span><span class="n">stops</span><span class="p">,</span> <span class="n">on</span><span class="o">=</span><span class="s2">&#34;stop_name&#34;</span><span class="p">,</span> <span class="n">maintain_order</span><span class="o">=</span><span class="s2">&#34;left&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">select</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">lit</span><span class="p">(</span><span class="s2">&#34;To Center City&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;direction&#34;</span><span class="p">),</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;*&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">stop_times</span><span class="o">.</span><span class="n">head</span><span class="p">(</span><span class="mi">3</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div><style>
.dataframe > thead > tr,
.dataframe > tbody > tr {
  text-align: right;
  white-space: pre-wrap;
}
</style>
<small>shape: (3, 20)</small>
<table>
  <thead>
      <tr>
          <th>direction</th>
          <th>stop_name</th>
          <th>8210</th>
          <th>8716</th>
          <th>8318</th>
          <th>8322</th>
          <th>8338</th>
          <th>8242</th>
          <th>8750</th>
          <th>8756</th>
          <th>service_access</th>
          <th>service_cash</th>
          <th>service_park</th>
          <th>fare_zone</th>
          <th>stop_id</th>
          <th>stop_desc</th>
          <th>stop_lat</th>
          <th>stop_lon</th>
          <th>zone_id</th>
          <th>stop_url</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>str</td>
          <td>i64</td>
          <td>i64</td>
          <td>i64</td>
          <td>str</td>
          <td>i64</td>
          <td>str</td>
          <td>f64</td>
          <td>f64</td>
          <td>str</td>
          <td>str</td>
      </tr>
      <tr>
          <td>&quot;To Center City&quot;</td>
          <td>&quot;Chestnut Hill West&quot;</td>
          <td>&quot;06:51:00&quot;</td>
          <td>&quot;08:08:00&quot;</td>
          <td>&quot;08:49:00&quot;</td>
          <td>&quot;09:49:00&quot;</td>
          <td>&quot;13:52:00&quot;</td>
          <td>&quot;14:49:00&quot;</td>
          <td>&quot;16:48:00&quot;</td>
          <td>&quot;18:20:00&quot;</td>
          <td>0</td>
          <td>0</td>
          <td>1</td>
          <td>&quot;2&quot;</td>
          <td>90801</td>
          <td>null</td>
          <td>40.076389</td>
          <td>-75.208333</td>
          <td>&quot;2S&quot;</td>
          <td>null</td>
      </tr>
      <tr>
          <td>&quot;To Center City&quot;</td>
          <td>&quot;Highland&quot;</td>
          <td>&quot;06:52:00&quot;</td>
          <td>&quot;08:09:00&quot;</td>
          <td>&quot;08:50:00&quot;</td>
          <td>&quot;09:50:00&quot;</td>
          <td>&quot;13:53:00&quot;</td>
          <td>&quot;14:50:00&quot;</td>
          <td>&quot;16:49:00&quot;</td>
          <td>&quot;18:21:00&quot;</td>
          <td>0</td>
          <td>0</td>
          <td>1</td>
          <td>&quot;2&quot;</td>
          <td>90802</td>
          <td>null</td>
          <td>40.070556</td>
          <td>-75.211111</td>
          <td>&quot;2S&quot;</td>
          <td>null</td>
      </tr>
      <tr>
          <td>&quot;To Center City&quot;</td>
          <td>&quot;St. Martins&quot;</td>
          <td>&quot;06:54:00&quot;</td>
          <td>&quot;08:11:00&quot;</td>
          <td>&quot;08:52:00&quot;</td>
          <td>&quot;09:52:00&quot;</td>
          <td>&quot;13:55:00&quot;</td>
          <td>&quot;14:52:00&quot;</td>
          <td>&quot;16:51:00&quot;</td>
          <td>&quot;18:23:00&quot;</td>
          <td>0</td>
          <td>0</td>
          <td>1</td>
          <td>&quot;1&quot;</td>
          <td>90803</td>
          <td>null</td>
          <td>40.065833</td>
          <td>-75.204444</td>
          <td>&quot;2S&quot;</td>
          <td>null</td>
      </tr>
  </tbody>
</table>
</div>
<p>Notice that in the table above, the first row tells us when each train leaves Chesnut Hill West, and information about the Chesnut Hill West stop.</p>
<h2 id="creating-the-table">Creating the table
</h2>
<p>Below is the code for the table, with 5 key activities marked with comments. For example, the first is creating high level structure, like the header and the left-hand &ldquo;To Center City&rdquo; stub. Others include formatting in checkmarks, customizing columns (e.g. their width), and styling (e.g. setting background colors and fonts).</p>
<p>It&rsquo;s a lot to take in, but worth it!:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">  1
</span><span class="lnt">  2
</span><span class="lnt">  3
</span><span class="lnt">  4
</span><span class="lnt">  5
</span><span class="lnt">  6
</span><span class="lnt">  7
</span><span class="lnt">  8
</span><span class="lnt">  9
</span><span class="lnt"> 10
</span><span class="lnt"> 11
</span><span class="lnt"> 12
</span><span class="lnt"> 13
</span><span class="lnt"> 14
</span><span class="lnt"> 15
</span><span class="lnt"> 16
</span><span class="lnt"> 17
</span><span class="lnt"> 18
</span><span class="lnt"> 19
</span><span class="lnt"> 20
</span><span class="lnt"> 21
</span><span class="lnt"> 22
</span><span class="lnt"> 23
</span><span class="lnt"> 24
</span><span class="lnt"> 25
</span><span class="lnt"> 26
</span><span class="lnt"> 27
</span><span class="lnt"> 28
</span><span class="lnt"> 29
</span><span class="lnt"> 30
</span><span class="lnt"> 31
</span><span class="lnt"> 32
</span><span class="lnt"> 33
</span><span class="lnt"> 34
</span><span class="lnt"> 35
</span><span class="lnt"> 36
</span><span class="lnt"> 37
</span><span class="lnt"> 38
</span><span class="lnt"> 39
</span><span class="lnt"> 40
</span><span class="lnt"> 41
</span><span class="lnt"> 42
</span><span class="lnt"> 43
</span><span class="lnt"> 44
</span><span class="lnt"> 45
</span><span class="lnt"> 46
</span><span class="lnt"> 47
</span><span class="lnt"> 48
</span><span class="lnt"> 49
</span><span class="lnt"> 50
</span><span class="lnt"> 51
</span><span class="lnt"> 52
</span><span class="lnt"> 53
</span><span class="lnt"> 54
</span><span class="lnt"> 55
</span><span class="lnt"> 56
</span><span class="lnt"> 57
</span><span class="lnt"> 58
</span><span class="lnt"> 59
</span><span class="lnt"> 60
</span><span class="lnt"> 61
</span><span class="lnt"> 62
</span><span class="lnt"> 63
</span><span class="lnt"> 64
</span><span class="lnt"> 65
</span><span class="lnt"> 66
</span><span class="lnt"> 67
</span><span class="lnt"> 68
</span><span class="lnt"> 69
</span><span class="lnt"> 70
</span><span class="lnt"> 71
</span><span class="lnt"> 72
</span><span class="lnt"> 73
</span><span class="lnt"> 74
</span><span class="lnt"> 75
</span><span class="lnt"> 76
</span><span class="lnt"> 77
</span><span class="lnt"> 78
</span><span class="lnt"> 79
</span><span class="lnt"> 80
</span><span class="lnt"> 81
</span><span class="lnt"> 82
</span><span class="lnt"> 83
</span><span class="lnt"> 84
</span><span class="lnt"> 85
</span><span class="lnt"> 86
</span><span class="lnt"> 87
</span><span class="lnt"> 88
</span><span class="lnt"> 89
</span><span class="lnt"> 90
</span><span class="lnt"> 91
</span><span class="lnt"> 92
</span><span class="lnt"> 93
</span><span class="lnt"> 94
</span><span class="lnt"> 95
</span><span class="lnt"> 96
</span><span class="lnt"> 97
</span><span class="lnt"> 98
</span><span class="lnt"> 99
</span><span class="lnt">100
</span><span class="lnt">101
</span><span class="lnt">102
</span><span class="lnt">103
</span><span class="lnt">104
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">html</span><span class="p">,</span> <span class="n">style</span><span class="p">,</span> <span class="n">loc</span><span class="p">,</span> <span class="n">google_font</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars.selectors</span> <span class="k">as</span> <span class="nn">cs</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">h_m_p</span><span class="p">(</span><span class="n">s</span><span class="p">):</span>
</span></span><span class="line"><span class="cl">    <span class="n">h</span><span class="p">,</span> <span class="n">m</span><span class="p">,</span> <span class="n">_</span> <span class="o">=</span> <span class="p">[</span><span class="nb">int</span><span class="p">(</span><span class="n">part</span><span class="p">)</span> <span class="k">for</span> <span class="n">part</span> <span class="ow">in</span> <span class="n">s</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s2">&#34;:&#34;</span><span class="p">)]</span>
</span></span><span class="line"><span class="cl">    <span class="n">ap</span> <span class="o">=</span> <span class="s2">&#34;a&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="k">if</span> <span class="n">h</span> <span class="o">&gt;</span> <span class="mi">12</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">        <span class="n">h</span> <span class="o">-=</span> <span class="mi">12</span>
</span></span><span class="line"><span class="cl">        <span class="n">ap</span> <span class="o">=</span> <span class="s2">&#34;p&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="sa">f</span><span class="s2">&#34;</span><span class="si">{</span><span class="n">h</span><span class="si">}</span><span class="s2">:</span><span class="si">{</span><span class="n">m</span><span class="si">:</span><span class="s2">02d</span><span class="si">}{</span><span class="n">ap</span><span class="si">}</span><span class="s2">&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">tick</span><span class="p">(</span><span class="n">b</span><span class="p">):</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="s2">&#34;&amp;check;&#34;</span> <span class="k">if</span> <span class="n">b</span> <span class="k">else</span> <span class="s2">&#34;&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">transit_table</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">stop_times</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># Create left-hand stub, top header, and hide extra cols --------</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_stub</span><span class="p">(</span><span class="n">groupname_col</span><span class="o">=</span><span class="s2">&#34;direction&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="s2">&#34;Saturdays, Sundays, and Major Holidays&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_hide</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;stop_url&#34;</span><span class="p">,</span> <span class="s2">&#34;zone_id&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_desc&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_lat&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_lon&#34;</span><span class="p">,</span> <span class="s2">&#34;stop_id&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># custom functions for checkmarks and time formatting -----------</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">h_m_p</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">tick</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># relabel columns and add spanners (labels over columns) --------</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_label</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">stop_name</span><span class="o">=</span><span class="s2">&#34;Stations&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">service_access</span><span class="o">=</span><span class="s2">&#34;A&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">service_cash</span><span class="o">=</span><span class="s2">&#34;C&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">service_park</span><span class="o">=</span><span class="s2">&#34;P&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">fare_zone</span><span class="o">=</span><span class="n">html</span><span class="p">(</span><span class="s2">&#34;Fare&lt;br&gt;Zone&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;Services&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;Train Number&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># move columns around and setting their width and alignment -----</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_move_to_start</span><span class="p">(</span><span class="s2">&#34;fare_zone&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_move_to_start</span><span class="p">(</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_width</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">cases</span><span class="o">=</span><span class="p">{</span><span class="n">c</span><span class="p">:</span> <span class="s2">&#34;18px&#34;</span> <span class="k">for</span> <span class="n">c</span> <span class="ow">in</span> <span class="n">stop_times</span><span class="o">.</span><span class="n">columns</span> <span class="k">if</span> <span class="n">c</span><span class="o">.</span><span class="n">startswith</span><span class="p">(</span><span class="s2">&#34;service_&#34;</span><span class="p">)}</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_width</span><span class="p">(</span><span class="n">cases</span><span class="o">=</span><span class="p">{</span><span class="n">c</span><span class="p">:</span> <span class="s2">&#34;60px&#34;</span> <span class="k">for</span> <span class="n">c</span> <span class="ow">in</span> <span class="n">stop_times</span><span class="o">.</span><span class="n">columns</span> <span class="k">if</span> <span class="n">c</span><span class="o">.</span><span class="n">startswith</span><span class="p">(</span><span class="s2">&#34;8&#34;</span><span class="p">)})</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;center&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;fare_zone&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="c1"># styles: striping, vertical text, background colors, fonts -----</span>
</span></span><span class="line"><span class="cl">    <span class="c1"># style header</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">header</span><span class="p">(),</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;background-color: rgb(66, 99, 128) !important; color: white !important; font-size: 24px !important; font-weight: bold !important; border-width: 0px !important;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="c1"># style vertical text on left</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">row_groups</span><span class="p">(),</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;writing-mode: sideways-lr; padding-bottom: 25% !important; font-size: 24px !important; font-weight: bold !important; text-transform: uppercase !important;&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important;&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="kc">None</span><span class="p">,</span> <span class="n">rows</span><span class="o">=</span><span class="nb">list</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">))),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;&#34;&#34;
</span></span></span><span class="line"><span class="cl"><span class="s2">                border-top: none !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">                border-bottom: none !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">                border-right: solid white 2px !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">                color: white !important;
</span></span></span><span class="line"><span class="cl"><span class="s2">            &#34;&#34;&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="n">columns</span><span class="o">=~</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">),</span> <span class="n">rows</span><span class="o">=</span><span class="nb">list</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="o">-</span><span class="mi">4</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span><span class="s2">&#34;border-right: solid black 2px !important;&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="n">columns</span><span class="o">=~</span><span class="n">cs</span><span class="o">.</span><span class="n">matches</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;^[0-9]</span><span class="si">{4}</span><span class="s2">$&#34;</span><span class="p">),</span> <span class="n">rows</span><span class="o">=</span><span class="nb">list</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">10</span><span class="p">))</span> <span class="o">+</span> <span class="p">[</span><span class="mi">13</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_options</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">row_striping_background_color</span><span class="o">=</span><span class="s2">&#34;#A9A9A9&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">row_group_as_column</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_row_striping</span><span class="p">(</span><span class="n">row_striping</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_table_outline</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_table_font</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="s2">&#34;IBM Plex Sans&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">transit_table</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="dvrkhovtdj" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#dvrkhovtdj table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#dvrkhovtdj thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#dvrkhovtdj p { margin: 0; padding: 0; }
#dvrkhovtdj .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 3px; border-top-color: #D3D3D3; border-right-style: solid; border-right-width: 3px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: #D3D3D3; border-left-style: solid; border-left-width: 3px; border-left-color: #D3D3D3; }
#dvrkhovtdj .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#dvrkhovtdj .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#dvrkhovtdj .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#dvrkhovtdj .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#dvrkhovtdj .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#dvrkhovtdj .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#dvrkhovtdj .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#dvrkhovtdj .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#dvrkhovtdj .gt_column_spanner_outer:first-child { padding-left: 0; }
#dvrkhovtdj .gt_column_spanner_outer:last-child { padding-right: 0; }
#dvrkhovtdj .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#dvrkhovtdj .gt_spanner_row { border-bottom-style: hidden; }
#dvrkhovtdj .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#dvrkhovtdj .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#dvrkhovtdj .gt_from_md&gt; :first-child { margin-top: 0; }
#dvrkhovtdj .gt_from_md&gt; :last-child { margin-bottom: 0; }
#dvrkhovtdj .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#dvrkhovtdj .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#dvrkhovtdj .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#dvrkhovtdj .gt_row_group_first td { border-top-width: 2px; }
#dvrkhovtdj .gt_row_group_first th { border-top-width: 2px; }
#dvrkhovtdj .gt_striped { color: #333333; background-color: #A9A9A9; }
#dvrkhovtdj .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#dvrkhovtdj .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#dvrkhovtdj .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#dvrkhovtdj .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#dvrkhovtdj .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#dvrkhovtdj .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#dvrkhovtdj .gt_left { text-align: left; }
#dvrkhovtdj .gt_center { text-align: center; }
#dvrkhovtdj .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#dvrkhovtdj .gt_font_normal { font-weight: normal; }
#dvrkhovtdj .gt_font_bold { font-weight: bold; }
#dvrkhovtdj .gt_font_italic { font-style: italic; }
#dvrkhovtdj .gt_super { font-size: 65%; }
#dvrkhovtdj .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#dvrkhovtdj .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" style="table-layout: fixed;" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="14" class="gt_heading gt_title gt_font_normal" style="background-color: rgb(66, 99, 128) !important; color: white !important; font-size: 24px !important; font-weight: bold !important; border-width: 0px !important">Saturdays, Sundays, and Major Holidays</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th colspan="3" id="Services" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Services</span></th>
<th rowspan="2" id="fare_zone" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">Fare<br />
Zone</th>
<th rowspan="2" id="stop_name" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Stations</th>
<th colspan="8" id="Train-Number" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Train Number</span></th>
</tr>
<tr class="gt_col_headings">
<th id="service_access" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">A</th>
<th id="service_cash" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">C</th>
<th id="service_park" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">P</th>
<th id="8210" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8210</th>
<th id="8716" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8716</th>
<th id="8318" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8318</th>
<th id="8322" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8322</th>
<th id="8338" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8338</th>
<th id="8242" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8242</th>
<th id="8750" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8750</th>
<th id="8756" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">8756</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td rowspan="14" class="gt_row gt_left gt_stub_row_group" data-quarto-table-cell-role="th" style="writing-mode: sideways-lr; padding-bottom: 25% !important; font-size: 24px !important; font-weight: bold !important; text-transform: uppercase !important">To Center City</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">2</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Chestnut Hill West</td>
<td class="gt_row gt_right">6:51a</td>
<td class="gt_row gt_right">8:08a</td>
<td class="gt_row gt_right">8:49a</td>
<td class="gt_row gt_right">9:49a</td>
<td class="gt_row gt_right">1:52p</td>
<td class="gt_row gt_right">2:49p</td>
<td class="gt_row gt_right">4:48p</td>
<td class="gt_row gt_right">6:20p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">2</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Highland</td>
<td class="gt_row gt_right gt_striped">6:52a</td>
<td class="gt_row gt_right gt_striped">8:09a</td>
<td class="gt_row gt_right gt_striped">8:50a</td>
<td class="gt_row gt_right gt_striped">9:50a</td>
<td class="gt_row gt_right gt_striped">1:53p</td>
<td class="gt_row gt_right gt_striped">2:50p</td>
<td class="gt_row gt_right gt_striped">4:49p</td>
<td class="gt_row gt_right gt_striped">6:21p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">St. Martins</td>
<td class="gt_row gt_right">6:54a</td>
<td class="gt_row gt_right">8:11a</td>
<td class="gt_row gt_right">8:52a</td>
<td class="gt_row gt_right">9:52a</td>
<td class="gt_row gt_right">1:55p</td>
<td class="gt_row gt_right">2:52p</td>
<td class="gt_row gt_right">4:51p</td>
<td class="gt_row gt_right">6:23p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Richard Allen Lane</td>
<td class="gt_row gt_right gt_striped">6:56a</td>
<td class="gt_row gt_right gt_striped">8:13a</td>
<td class="gt_row gt_right gt_striped">8:54a</td>
<td class="gt_row gt_right gt_striped">9:54a</td>
<td class="gt_row gt_right gt_striped">1:57p</td>
<td class="gt_row gt_right gt_striped">2:54p</td>
<td class="gt_row gt_right gt_striped">4:53p</td>
<td class="gt_row gt_right gt_striped">6:25p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Carpenter</td>
<td class="gt_row gt_right">6:58a</td>
<td class="gt_row gt_right">8:15a</td>
<td class="gt_row gt_right">8:56a</td>
<td class="gt_row gt_right">9:56a</td>
<td class="gt_row gt_right">1:59p</td>
<td class="gt_row gt_right">2:56p</td>
<td class="gt_row gt_right">4:55p</td>
<td class="gt_row gt_right">6:27p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">1</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Upsal</td>
<td class="gt_row gt_right gt_striped">7:00a</td>
<td class="gt_row gt_right gt_striped">8:17a</td>
<td class="gt_row gt_right gt_striped">8:58a</td>
<td class="gt_row gt_right gt_striped">9:58a</td>
<td class="gt_row gt_right gt_striped">2:01p</td>
<td class="gt_row gt_right gt_striped">2:58p</td>
<td class="gt_row gt_right gt_striped">4:57p</td>
<td class="gt_row gt_right gt_striped">6:29p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Tulpehocken</td>
<td class="gt_row gt_right">7:02a</td>
<td class="gt_row gt_right">8:19a</td>
<td class="gt_row gt_right">9:00a</td>
<td class="gt_row gt_right">10:00a</td>
<td class="gt_row gt_right">2:03p</td>
<td class="gt_row gt_right">3:00p</td>
<td class="gt_row gt_right">4:59p</td>
<td class="gt_row gt_right">6:31p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Chelten Avenue</td>
<td class="gt_row gt_right gt_striped">7:04a</td>
<td class="gt_row gt_right gt_striped">8:21a</td>
<td class="gt_row gt_right gt_striped">9:02a</td>
<td class="gt_row gt_right gt_striped">10:02a</td>
<td class="gt_row gt_right gt_striped">2:05p</td>
<td class="gt_row gt_right gt_striped">3:02p</td>
<td class="gt_row gt_right gt_striped">5:01p</td>
<td class="gt_row gt_right gt_striped">6:33p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left" style="border-right: solid black 2px !important">Queen Lane</td>
<td class="gt_row gt_right">7:06a</td>
<td class="gt_row gt_right">8:23a</td>
<td class="gt_row gt_right">9:04a</td>
<td class="gt_row gt_right">10:04a</td>
<td class="gt_row gt_right">2:07p</td>
<td class="gt_row gt_right">3:04p</td>
<td class="gt_row gt_right">5:03p</td>
<td class="gt_row gt_right">6:35p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">C</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">North Philadelphia</td>
<td class="gt_row gt_right gt_striped">7:12a</td>
<td class="gt_row gt_right gt_striped">8:29a</td>
<td class="gt_row gt_right gt_striped">9:12a</td>
<td class="gt_row gt_right gt_striped">10:12a</td>
<td class="gt_row gt_right gt_striped">2:15p</td>
<td class="gt_row gt_right gt_striped">3:12p</td>
<td class="gt_row gt_right gt_striped">5:09p</td>
<td class="gt_row gt_right gt_striped">6:41p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_center" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">2</td>
<td class="gt_row gt_left" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">Gray 30th Street</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:23a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">8:42a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">9:23a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">10:23a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">2:26p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">3:23p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">5:20p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">6:54p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_center gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">2</td>
<td class="gt_row gt_left gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">Suburban Station</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:28a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">8:47a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">9:28a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">10:28a</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">2:31p</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">3:28p</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">5:25p</td>
<td class="gt_row gt_right gt_striped" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">6:59p</td>
</tr>
<tr>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important"></td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">✓</td>
<td class="gt_row gt_center" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">2</td>
<td class="gt_row gt_left" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important; border-top: none !important; border-bottom: none !important; border-right: solid white 2px !important; color: white !important">Jefferson Station</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:33a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">8:52a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">9:33a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">10:33a</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">2:36p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">3:33p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">5:30p</td>
<td class="gt_row gt_right" style="background-color: black !important; color: white !important; border-top: none !important; border-bottom: none !important">7:04p</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important"></td>
<td class="gt_row gt_right gt_striped" style="border-right: solid black 2px !important">✓</td>
<td class="gt_row gt_center gt_striped" style="border-right: solid black 2px !important">2</td>
<td class="gt_row gt_left gt_striped" style="border-right: solid black 2px !important">Temple University</td>
<td class="gt_row gt_right gt_striped">7:37a</td>
<td class="gt_row gt_right gt_striped">8:57a</td>
<td class="gt_row gt_right gt_striped">9:37a</td>
<td class="gt_row gt_right gt_striped">10:37a</td>
<td class="gt_row gt_right gt_striped">2:40p</td>
<td class="gt_row gt_right gt_striped">3:37p</td>
<td class="gt_row gt_right gt_striped">5:35p</td>
<td class="gt_row gt_right gt_striped">7:08p</td>
</tr>
</tbody>
</table>
</div>
<h2 id="other-schedules-in-the-wild">Other schedules in the wild
</h2>
<p>MetroTransit in Minneapolis uses a transposed format, with stops as columns and trips as rows. Here&rsquo;s an example from their <a href="https://www.metrotransit.org/route/2" target="_blank" rel="noopener">Route 2 bus timetable</a>
:</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/septa-timetables/./metrotransit-route2.png" style="max-width: 600px; display: block; margin-left: auto; margin-right: auto;" />
<p>This is useful when there a lot of trips, because with trips on the rows readers can scroll down (versus needing to scroll sideways).</p>
<p>The MTA in New York City is similar. Here&rsquo;s an example of their <a href="https://www.mta.info/schedules/bus/bx1" target="_blank" rel="noopener">bx1 bus route timetable</a>
:</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/septa-timetables/./mta-route-bx1.png" style="max-width: 600px; display: block; margin-left: auto; margin-right: auto;" />
<p>What I like about all these tables is they highlight the structure behind bus and train routes. Sometimes they skip certain stops. But realistically, what makes them a route is that trips tend to make the same stops over and over.</p>
<p>A common alternative to using these tables is to do routing from a set start to end point. For example, below is a form for selecting a start and end point on SEPTA&rsquo;s website, with a resulting table of departure and arrival times.</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/septa-timetables/./septa-routing.png" style="max-width: 600px; display: block; margin-left: auto; margin-right: auto;" />
<p>Notice that the table has removed a lot of information about intermediate stops people might not care about.</p>
<h2 id="in-conclusion">In conclusion
</h2>
<p>Transit tables are richly structured displays of information.
They take advantage often of the fact that a train route like Chesnut Hill West is a fixed set of stops&ndash;so that stops can be on the rows, and arrival times for trips throughout the day can be on the columns.</p>
<p>This is intuitive to people reading transit timetables, but can get tricky to display on the web. Timetables are a core part of navigating transit networks, so it was a fun experiment to try replicating one of Septa&rsquo;s timetables in Great Tables!</p>
]]></description>
    </item>
    <item>
      <title>ggplot2 styling</title>
      <link>https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/</link>
      <pubDate>Wed, 01 Oct 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/</guid>
      <dc:creator>Teun Van den Brand</dc:creator><description><![CDATA[<!--
TODO:
* [ ] Look over / edit the post's title in the yaml
* [ ] Edit (or delete) the description; note this appears in the Twitter card
* [ ] Pick category and tags (see existing with [`hugodown::tidy_show_meta()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html))
* [ ] Find photo & update yaml metadata
* [ ] Create `thumbnail-sq.jpg`; height and width should be equal
* [ ] Create `thumbnail-wd.jpg`; width should be >5x height
* [ ] [`hugodown::use_tidy_thumbnails()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html)
* [ ] Add intro sentence, e.g. the standard tagline for the package
* [ ] [`usethis::use_tidy_thanks()`](https://usethis.r-lib.org/reference/use_tidy_thanks.html)
-->
<h2 id="so-you-want-to-style-your-plot">So you want to style your plot?
</h2>
<p>Diligently, you have read, cleaned and modelled your data. You have carefully crafted a plot that lets your data speak its story. Now it is time to polish. Now it is time to let your visualisation shine.</p>
<p>We will set out to illuminate how to set the stylistic finishing touches on your visualisations made with the ggplot2 package. The ggplot2 package has had a <a href="https://www.tidyverse.org/blog/2025/09/ggplot2-4-0-0/" target="_blank" rel="noopener">recent release</a>
 that included some relevant changes to styling plots. In ggplot2, the theme system is responsible for many non-data aspects of how your plot looks. It covers anything from panels, to axes, titles and legends. Here, we&rsquo;ll get started with digesting important parts of the theme system. We&rsquo;ll start with complete themes, get into theme elements followed by how these elements are used in various parts of the plot and finish off with some tips, including how to write your own theme functions. Before we begin discussing themes, let&rsquo;s make an example plot that can showcase many aspects.</p>
<div class="highlight">
</div>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='kr'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='o'>(</span><span class='nv'><a href='https://ggplot2.tidyverse.org'>ggplot2</a></span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>displ</span>, <span class='nv'>hwy</span>, colour <span class='o'>=</span> <span class='nv'>cty</span>, shape <span class='o'>=</span> <span class='nv'>drv</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_grid.html'>facet_grid</a></span><span class='o'>(</span><span class='o'>~</span> <span class='nv'>year</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span></span>
<span>    title <span class='o'>=</span> <span class='s'>"Fuel efficiency"</span>,</span>
<span>    subtitle <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/paste.html'>paste0</a></span><span class='o'>(</span><span class='s'>"Described for "</span>, <span class='nf'><a href='https://rdrr.io/r/base/nrow.html'>nrow</a></span><span class='o'>(</span><span class='nv'>mpg</span><span class='o'>)</span>, <span class='s'>" cars from 1999 and 2008"</span><span class='o'>)</span>,</span>
<span>    caption <span class='o'>=</span> <span class='s'>"Source: U.S. Environmental Protection Agency"</span>,</span>
<span>    x <span class='o'>=</span> <span class='s'>"Engine Displacement"</span>,</span>
<span>    y <span class='o'>=</span> <span class='s'>"Highway miles per gallon"</span>,</span>
<span>    colour <span class='o'>=</span> <span class='s'>"City miles\nper gallon"</span>,</span>
<span>    shape <span class='o'>=</span> <span class='s'>"Drive train"</span></span>
<span>  <span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p</span></span></code></pre>
</div>
<div class="highlight">
<div class="girafe html-widget html-fill-item" id="htmlwidget-d98064058d21aab41c73" style="width:700px;height:415.296px;"></div>
<script type="application/json" data-for="htmlwidget-d98064058d21aab41c73">{"x":{"html":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' class='ggiraph-svg' role='graphics-document' id='svg_55735f3a_43be_433d_b895_216b1a6034dd' viewBox='0 0 504 311.47'>\n <style><![CDATA[.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"plot.caption\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"plot.title\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"legend.text\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"legend.ticks\"] { stroke:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"legend.frame<br>palette.colour.continuous\"] { stroke:red;fill:#FF888888; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"legend.box.background\"] { stroke:red;fill:#FFEEEE; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.title.y.left\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.ticks.y.left\"] { stroke:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.text.y.left\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"legend.key\"] { stroke:red;fill:#FFCCCC; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.title.x.bottom\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"panel.grid.major.x\"] { stroke:red; }.hover_data_svg_55735f3a_43be_433d_b895_216b1a6034dd[data-id = \"geom\"] { stroke:red;fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"plot.background\"] { stroke:red;fill:#FFEEEE; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.ticks.x.bottom\"] { stroke:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"plot.subtitle\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.line.x.bottom\"] { stroke:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"panel.background<br>panel.border\"] { stroke:red;fill:#FFCCCC; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"panel.grid.minor.y\"] { stroke:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"panel.grid.minor.x\"] { stroke:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"legend.background\"] { stroke:red;fill:#FFEEEE; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"strip.background.x\"] { stroke:red;fill:#FF8888; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.text.x.bottom\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"panel.grid.major.y\"] { stroke:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"strip.text.x.top\"] { fill:red; }.hover_key_svg_55735f3a_43be_433d_b895_216b1a6034dd[key-id = \"shape\"] { stroke:red;fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"legend.title\"] { fill:red; }.hover_theme_svg_55735f3a_43be_433d_b895_216b1a6034dd[theme-id = \"axis.line.y.left\"] { stroke:red; }]]><\/style>\n <defs id='svg_55735f3a_43be_433d_b895_216b1a6034dd_defs'>\n  <clipPath id='svg_55735f3a_43be_433d_b895_216b1a6034dd_c1'>\n   <rect x='0' y='0' width='504' height='311.47'/>\n  <\/clipPath>\n  <clipPath id='svg_55735f3a_43be_433d_b895_216b1a6034dd_c2'>\n   <rect x='33.14' y='55.77' width='193.93' height='210.58'/>\n  <\/clipPath>\n  <clipPath id='svg_55735f3a_43be_433d_b895_216b1a6034dd_c3'>\n   <rect x='232.54' y='55.77' width='193.93' height='210.58'/>\n  <\/clipPath>\n  <clipPath id='svg_55735f3a_43be_433d_b895_216b1a6034dd_c4'>\n   <rect x='33.14' y='38.85' width='193.93' height='16.92'/>\n  <\/clipPath>\n  <clipPath id='svg_55735f3a_43be_433d_b895_216b1a6034dd_c5'>\n   <rect x='232.54' y='38.85' width='193.93' height='16.92'/>\n  <\/clipPath>\n <\/defs>\n <g id='svg_55735f3a_43be_433d_b895_216b1a6034dd_rootg' class='ggiraph-svg-rootg'>\n  <g clip-path='url(#svg_55735f3a_43be_433d_b895_216b1a6034dd_c1)'>\n   <rect x='0' y='0' width='504' height='311.47' fill='#FFFFFF' fill-opacity='1' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.75' stroke-linejoin='round' stroke-linecap='round' class='ggiraph-svg-bg'/>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e1' x='0' y='0' width='504' height='311.47' fill='#FFFFFF' fill-opacity='1' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='round' title='&amp;lt;code&amp;gt;plot.background&amp;lt;/code&amp;gt;' theme-id='plot.background'/>\n  <\/g>\n  <g clip-path='url(#svg_55735f3a_43be_433d_b895_216b1a6034dd_c2)'>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e2' x='33.14' y='55.77' width='193.93' height='210.58' fill='#EBEBEB' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;panel.background&amp;lt;br&amp;gt;panel.border&amp;lt;/code&amp;gt;' theme-id='panel.background&lt;br&gt;panel.border'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e3' points='33.14,238.83 227.06,238.83' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e4' points='33.14,179.00 227.06,179.00' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e5' points='33.14,119.18 227.06,119.18' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e6' points='33.14,59.36 227.06,59.36' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e7' points='38.69,266.35 38.69,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e8' points='71.34,266.35 71.34,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e9' points='103.98,266.35 103.98,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e10' points='136.63,266.35 136.63,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e11' points='169.28,266.35 169.28,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e12' points='201.93,266.35 201.93,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e13' points='33.14,208.92 227.06,208.92' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e14' points='33.14,149.09 227.06,149.09' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e15' points='33.14,89.27 227.06,89.27' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e16' points='55.01,266.35 55.01,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e17' points='87.66,266.35 87.66,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e18' points='120.31,266.35 120.31,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e19' points='152.95,266.35 152.95,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e20' points='185.60,266.35 185.60,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e21' points='218.25,266.35 218.25,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e22' points='48.48,152.04 51.11,156.60 45.85,156.60' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e23' points='48.48,152.04 51.11,156.60 45.85,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e24' points='81.13,169.98 83.76,174.54 78.50,174.54' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e25' points='81.13,169.98 83.76,174.54 78.50,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e26' cx='48.48' cy='173.02' r='1.47pt' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e27' cx='48.48' cy='179' r='1.47pt' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e28' cx='81.13' cy='179' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e29' cx='81.13' cy='179' r='1.47pt' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e30' cx='81.13' cy='184.99' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e31' points='173.85,228.82 177.76,228.82 177.76,224.91 173.85,224.91' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e32' points='173.85,174.98 177.76,174.98 177.76,171.07 173.85,171.07' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e33' points='173.85,192.92 177.76,192.92 177.76,189.01 173.85,189.01' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e34' cx='175.81' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e35' cx='201.93' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e36' points='68.07,164.00 70.70,168.56 65.44,168.56' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e37' points='90.92,169.98 93.56,174.54 88.29,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e38' points='68.07,181.95 70.70,186.51 65.44,186.51' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e39' points='87.66,181.95 90.29,186.51 85.03,186.51' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e40' points='97.45,193.91 100.09,198.47 94.82,198.47' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e41' points='97.45,193.91 100.09,198.47 94.82,198.47' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e42' points='113.78,193.91 116.41,198.47 111.14,198.47' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e43' points='113.78,199.89 116.41,204.45 111.14,204.45' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e44' cx='117.04' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e45' cx='117.04' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e46' cx='159.48' cy='226.86' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e47' cx='159.48' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e48' cx='117.04' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e49' cx='159.48' cy='232.85' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e50' cx='182.34' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e51' cx='159.48' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e52' cx='159.48' cy='232.85' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e53' cx='182.34' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e54' points='137.94,228.82 141.85,228.82 141.85,224.91 137.94,224.91' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e55' points='164.06,228.82 167.97,228.82 167.97,224.91 164.06,224.91' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e56' cx='120.31' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e57' cx='120.31' cy='214.9' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e58' cx='120.31' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e59' cx='152.95' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e60' cx='126.84' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e61' cx='126.84' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e62' cx='139.9' cy='232.85' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e63' cx='139.9' cy='232.85' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e64' cx='166.01' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e65' points='111.82,174.98 115.73,174.98 115.73,171.07 111.82,171.07' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e66' points='111.82,180.96 115.73,180.96 115.73,177.05 111.82,177.05' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e67' points='137.94,204.89 141.85,204.89 141.85,200.98 137.94,200.98' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e68' points='137.94,198.91 141.85,198.91 141.85,195.00 137.94,195.00' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e69' points='41.95,128.11 44.59,132.67 39.32,132.67' fill='#438AC3' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e70' points='41.95,134.09 44.59,138.65 39.32,138.65' fill='#3875A6' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e71' points='41.95,134.09 44.59,138.65 39.32,138.65' fill='#3B7AAD' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e72' points='41.95,152.04 44.59,156.60 39.32,156.60' fill='#356F9F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e73' points='41.95,134.09 44.59,138.65 39.32,138.65' fill='#3875A6' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e74' points='68.07,169.98 70.70,174.54 65.44,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e75' points='68.07,164.00 70.70,168.56 65.44,168.56' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e76' points='71.34,169.98 73.97,174.54 68.70,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e77' points='71.34,169.98 73.97,174.54 68.70,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e78' points='55.01,169.98 57.64,174.54 52.38,174.54' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e79' points='55.01,152.04 57.64,156.60 52.38,156.60' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e80' cx='120.31' cy='208.92' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e81' cx='143.16' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e82' cx='120.31' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e83' cx='139.9' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e84' points='164.06,228.82 167.97,228.82 167.97,224.91 164.06,224.91' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e85' points='164.06,234.80 167.97,234.80 167.97,230.89 164.06,230.89' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e86' cx='120.31' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e87' cx='152.95' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e88' points='68.07,152.04 70.70,156.60 65.44,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e89' points='68.07,164.00 70.70,168.56 65.44,168.56' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e90' points='87.66,169.98 90.29,174.54 85.03,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e91' points='87.66,175.96 90.29,180.52 85.03,180.52' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e92' cx='97.45' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e93' cx='97.45' cy='226.86' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e94' points='90.92,169.98 93.56,174.54 88.29,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e95' points='113.78,169.98 116.41,174.54 111.14,174.54' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e96' points='113.78,164.00 116.41,168.56 111.14,168.56' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e97' cx='71.34' cy='179' r='1.47pt' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e98' cx='71.34' cy='184.99' r='1.47pt' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e99' cx='61.54' cy='173.02' r='1.47pt' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e100' cx='61.54' cy='173.02' r='1.47pt' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e101' cx='71.34' cy='173.02' r='1.47pt' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e102' cx='71.34' cy='173.02' r='1.47pt' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e103' cx='77.86' cy='208.92' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e104' cx='77.86' cy='208.92' r='1.47pt' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e105' cx='100.72' cy='214.9' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e106' cx='100.72' cy='226.86' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e107' points='61.54,152.04 64.17,156.60 58.91,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e108' points='61.54,164.00 64.17,168.56 58.91,168.56' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e109' points='87.66,169.98 90.29,174.54 85.03,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e110' points='87.66,169.98 90.29,174.54 85.03,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e111' points='61.54,164.00 64.17,168.56 58.91,168.56' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e112' points='61.54,152.04 64.17,156.60 58.91,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e113' points='87.66,169.98 90.29,174.54 85.03,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e114' points='87.66,169.98 90.29,174.54 85.03,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e115' points='48.48,146.05 51.11,150.61 45.85,150.61' fill='#3875A6' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e116' points='48.48,128.11 51.11,132.67 45.85,132.67' fill='#3875A6' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e117' points='48.48,116.14 51.11,120.70 45.85,120.70' fill='#3D7FB4' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e118' cx='143.16' cy='238.83' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e119' cx='77.86' cy='208.92' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e120' cx='77.86' cy='208.92' r='1.47pt' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e121' cx='100.72' cy='226.86' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e122' cx='100.72' cy='214.9' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e123' points='55.01,152.04 57.64,156.60 52.38,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e124' points='55.01,169.98 57.64,174.54 52.38,174.54' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e125' points='81.13,181.95 83.76,186.51 78.50,186.51' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e126' points='51.75,62.30 54.38,66.86 49.11,66.86' fill='#50A6E8' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e127' points='55.01,152.04 57.64,156.60 52.38,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e128' points='55.01,169.98 57.64,174.54 52.38,174.54' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e129' points='81.13,187.93 83.76,192.49 78.50,192.49' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e130' points='81.13,181.95 83.76,186.51 78.50,186.51' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e131' points='51.75,62.30 54.38,66.86 49.11,66.86' fill='#56B1F7' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e132' points='51.75,80.25 54.38,84.81 49.11,84.81' fill='#458FCA' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e133' points='55.01,152.04 57.64,156.60 52.38,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e134' points='55.01,169.98 57.64,174.54 52.38,174.54' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e135' points='48.48,152.04 51.11,156.60 45.85,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e136' points='48.48,152.04 51.11,156.60 45.85,156.60' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e137' points='81.13,169.98 83.76,174.54 78.50,174.54' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e138' points='81.13,169.98 83.76,174.54 78.50,174.54' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n  <\/g>\n  <g clip-path='url(#svg_55735f3a_43be_433d_b895_216b1a6034dd_c3)'>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e139' x='232.54' y='55.77' width='193.93' height='210.58' fill='#EBEBEB' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;panel.background&amp;lt;br&amp;gt;panel.border&amp;lt;/code&amp;gt;' theme-id='panel.background&lt;br&gt;panel.border'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e140' points='232.54,238.83 426.47,238.83' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e141' points='232.54,179.00 426.47,179.00' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e142' points='232.54,119.18 426.47,119.18' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e143' points='232.54,59.36 426.47,59.36' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e144' points='238.09,266.35 238.09,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e145' points='270.74,266.35 270.74,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e146' points='303.39,266.35 303.39,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e147' points='336.04,266.35 336.04,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e148' points='368.68,266.35 368.68,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e149' points='401.33,266.35 401.33,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.53' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.minor.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.minor.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e150' points='232.54,208.92 426.47,208.92' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e151' points='232.54,149.09 426.47,149.09' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e152' points='232.54,89.27 426.47,89.27' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.y&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.y'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e153' points='254.42,266.35 254.42,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e154' points='287.06,266.35 287.06,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e155' points='319.71,266.35 319.71,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e156' points='352.36,266.35 352.36,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e157' points='385.01,266.35 385.01,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e158' points='417.65,266.35 417.65,55.77' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;panel.grid.major.x&amp;lt;/code&amp;gt;' theme-id='panel.grid.major.x'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e159' points='254.42,140.07 257.05,144.63 251.78,144.63' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e160' points='254.42,146.05 257.05,150.61 251.78,150.61' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e161' points='290.33,164.00 292.96,168.56 287.70,168.56' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e162' cx='254.42' cy='161.06' r='1.47pt' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e163' cx='254.42' cy='167.04' r='1.47pt' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e164' cx='290.33' cy='179' r='1.47pt' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e165' cx='290.33' cy='179' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e166' cx='290.33' cy='179' r='1.47pt' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e167' cx='326.24' cy='190.97' r='1.47pt' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e168' points='360.20,210.87 364.11,210.87 364.11,206.96 360.20,206.96' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e169' points='360.20,240.78 364.11,240.78 364.11,236.87 360.20,236.87' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e170' points='360.20,210.87 364.11,210.87 364.11,206.96 360.20,206.96' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e171' points='383.05,228.82 386.96,228.82 386.96,224.91 383.05,224.91' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e172' points='389.58,174.98 393.49,174.98 393.49,171.07 389.58,171.07' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e173' points='389.58,180.96 393.49,180.96 393.49,177.05 389.58,177.05' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e174' points='415.70,186.94 419.61,186.94 419.61,183.03 415.70,183.03' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e175' cx='362.15' cy='214.9' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e176' cx='362.15' cy='244.81' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e177' points='267.48,146.05 270.11,150.61 264.84,150.61' fill='#336A98' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e178' points='303.39,152.04 306.02,156.60 300.76,156.60' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e179' points='306.65,169.98 309.29,174.54 304.02,174.54' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e180' points='296.86,181.95 299.49,186.51 294.23,186.51' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e181' points='296.86,181.95 299.49,186.51 294.23,186.51' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e182' points='296.86,223.82 299.49,228.38 294.23,228.38' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e183' points='313.18,187.93 315.82,192.49 310.55,192.49' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e184' points='319.71,187.93 322.34,192.49 317.08,192.49' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e185' cx='309.92' cy='214.9' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e186' cx='309.92' cy='220.88' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e187' cx='342.57' cy='214.9' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e188' cx='342.57' cy='214.9' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e189' cx='342.57' cy='256.77' r='1.47pt' fill='#132B43' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e190' cx='342.57' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e191' cx='342.57' cy='256.77' r='1.47pt' fill='#132B43' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e192' cx='342.57' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e193' cx='375.21' cy='220.88' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e194' cx='342.57' cy='232.85' r='1.47pt' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e195' cx='342.57' cy='256.77' r='1.47pt' fill='#132B43' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e196' cx='342.57' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e197' cx='342.57' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e198' cx='342.57' cy='232.85' r='1.47pt' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e199' cx='342.57' cy='256.77' r='1.47pt' fill='#132B43' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e200' cx='375.21' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e201' points='363.46,222.84 367.37,222.84 367.37,218.93 363.46,218.93' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e202' cx='319.71' cy='214.9' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e203' cx='339.3' cy='214.9' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e204' cx='339.3' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e205' cx='365.42' cy='226.86' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e206' points='317.76,174.98 321.67,174.98 321.67,171.07 317.76,171.07' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e207' points='317.76,186.94 321.67,186.94 321.67,183.03 317.76,183.03' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e208' points='337.35,192.92 341.26,192.92 341.26,189.01 337.35,189.01' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e209' points='337.35,198.91 341.26,198.91 341.26,195.00 337.35,195.00' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e210' points='363.46,210.87 367.37,210.87 367.37,206.96 363.46,206.96' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e211' points='247.89,122.12 250.52,126.68 245.25,126.68' fill='#3D7FB4' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e212' points='247.89,110.16 250.52,114.72 245.25,114.72' fill='#3B7AAD' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e213' points='247.89,110.16 250.52,114.72 245.25,114.72' fill='#3875A6' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e214' points='254.42,152.04 257.05,156.60 251.78,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e215' points='267.48,146.05 270.11,150.61 264.84,150.61' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e216' points='267.48,140.07 270.11,144.63 264.84,144.63' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e217' points='296.86,158.02 299.49,162.58 294.23,162.58' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e218' points='254.42,158.02 257.05,162.58 251.78,162.58' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e219' points='254.42,164.00 257.05,168.56 251.78,168.56' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e220' points='277.27,181.95 279.90,186.51 274.64,186.51' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e221' points='277.27,181.95 279.90,186.51 274.64,186.51' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e222' points='277.27,181.95 279.90,186.51 274.64,186.51' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e223' cx='287.06' cy='196.95' r='1.47pt' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e224' cx='309.92' cy='214.9' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e225' cx='342.57' cy='256.77' r='1.47pt' fill='#132B43' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e226' cx='342.57' cy='214.9' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e227' cx='375.21' cy='220.88' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e228' cx='388.27' cy='244.81' r='1.47pt' fill='#18344F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e229' cx='326.24' cy='220.88' r='1.47pt' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e230' cx='332.77' cy='220.88' r='1.47pt' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e231' points='363.46,222.84 367.37,222.84 367.37,218.93 363.46,218.93' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e232' cx='319.71' cy='214.9' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e233' cx='339.3' cy='214.9' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e234' points='270.74,140.07 273.37,144.63 268.11,144.63' fill='#356F9F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e235' points='270.74,134.09 273.37,138.65 268.11,138.65' fill='#356F9F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e236' points='303.39,164.00 306.02,168.56 300.76,168.56' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e237' points='303.39,169.98 306.02,174.54 300.76,174.54' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e238' points='303.39,175.96 306.02,180.52 300.76,180.52' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e239' cx='319.71' cy='208.92' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e240' cx='371.95' cy='220.88' r='1.47pt' fill='#1A3955' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e241' points='313.18,158.02 315.82,162.58 310.55,162.58' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e242' points='362.15,175.96 364.79,180.52 359.52,180.52' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e243' cx='270.74' cy='167.04' r='1.47pt' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e244' cx='270.74' cy='179' r='1.47pt' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e245' cx='270.74' cy='173.02' r='1.47pt' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e246' cx='270.74' cy='190.97' r='1.47pt' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e247' cx='270.74' cy='179' r='1.47pt' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e248' cx='270.74' cy='167.04' r='1.47pt' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e249' cx='270.74' cy='179' r='1.47pt' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e250' cx='270.74' cy='167.04' r='1.47pt' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e251' cx='319.71' cy='208.92' r='1.47pt' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e252' cx='342.57' cy='226.86' r='1.47pt' fill='#1F4262' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e253' points='267.48,140.07 270.11,144.63 264.84,144.63' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e254' points='267.48,140.07 270.11,144.63 264.84,144.63' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e255' points='303.39,158.02 306.02,162.58 300.76,162.58' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e256' points='267.48,140.07 270.11,144.63 264.84,144.63' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e257' points='267.48,140.07 270.11,144.63 264.84,144.63' fill='#336A98' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e258' points='296.86,164.00 299.49,168.56 294.23,168.56' fill='#29567D' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e259' points='247.89,104.18 250.52,108.74 245.25,108.74' fill='#438AC3' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e260' points='247.89,116.14 250.52,120.70 245.25,120.70' fill='#3D7FB4' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e261' cx='375.21' cy='220.88' r='1.47pt' fill='#1C3D5C' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e262' cx='277.27' cy='196.95' r='1.47pt' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e263' cx='319.71' cy='220.88' r='1.47pt' fill='#214769' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e264' cx='319.71' cy='208.92' r='1.47pt' fill='#244C6F' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e265' points='254.42,152.04 257.05,156.60 251.78,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e266' points='254.42,152.04 257.05,156.60 251.78,156.60' fill='#336A98' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e267' points='254.42,152.04 257.05,156.60 251.78,156.60' fill='#336A98' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e268' points='254.42,152.04 257.05,156.60 251.78,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e269' points='270.74,152.04 273.37,156.60 268.11,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e270' points='270.74,152.04 273.37,156.60 268.11,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e271' points='270.74,158.02 273.37,162.58 268.11,162.58' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e272' points='270.74,152.04 273.37,156.60 268.11,156.60' fill='#2E608A' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e273' points='254.42,158.02 257.05,162.58 251.78,162.58' fill='#2B5B83' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e274' points='254.42,152.04 257.05,156.60 251.78,156.60' fill='#306591' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e275' points='306.65,169.98 309.29,174.54 304.02,174.54' fill='#265176' fill-opacity='1' stroke='none' data-id='geom' title='&amp;lt;code&amp;gt;geom&amp;lt;/code&amp;gt;'/>\n  <\/g>\n  <g clip-path='url(#svg_55735f3a_43be_433d_b895_216b1a6034dd_c4)'>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e276' x='33.14' y='38.85' width='193.93' height='16.92' fill='#D9D9D9' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;strip.background.x&amp;lt;/code&amp;gt;' theme-id='strip.background.x'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e277' x='120.31' y='50.46' font-size='6.6pt' font-family='Arial' fill='#1A1A1A' fill-opacity='1' title='&amp;lt;code&amp;gt;strip.text.x.top&amp;lt;/code&amp;gt;' theme-id='strip.text.x.top'>1999<\/text>\n  <\/g>\n  <g clip-path='url(#svg_55735f3a_43be_433d_b895_216b1a6034dd_c5)'>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e278' x='232.54' y='38.85' width='193.93' height='16.92' fill='#D9D9D9' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;strip.background.x&amp;lt;/code&amp;gt;' theme-id='strip.background.x'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e279' x='319.71' y='50.46' font-size='6.6pt' font-family='Arial' fill='#1A1A1A' fill-opacity='1' title='&amp;lt;code&amp;gt;strip.text.x.top&amp;lt;/code&amp;gt;' theme-id='strip.text.x.top'>2008<\/text>\n  <\/g>\n  <g clip-path='url(#svg_55735f3a_43be_433d_b895_216b1a6034dd_c1)'>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e280' points='33.14,266.35 227.06,266.35' fill='none' stroke='none' title='&amp;lt;code&amp;gt;axis.line.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.line.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e281' points='55.01,269.09 55.01,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e282' points='87.66,269.09 87.66,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e283' points='120.31,269.09 120.31,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e284' points='152.95,269.09 152.95,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e285' points='185.60,269.09 185.60,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e286' points='218.25,269.09 218.25,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e287' x='52.56' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>2<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e288' x='85.21' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>3<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e289' x='117.86' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>4<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e290' x='150.51' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>5<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e291' x='183.15' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>6<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e292' x='215.8' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>7<\/text>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e293' points='232.54,266.35 426.47,266.35' fill='none' stroke='none' title='&amp;lt;code&amp;gt;axis.line.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.line.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e294' points='254.42,269.09 254.42,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e295' points='287.06,269.09 287.06,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e296' points='319.71,269.09 319.71,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e297' points='352.36,269.09 352.36,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e298' points='385.01,269.09 385.01,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e299' points='417.65,269.09 417.65,266.35' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.ticks.x.bottom'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e300' x='251.97' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>2<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e301' x='284.62' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>3<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e302' x='317.26' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>4<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e303' x='349.91' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>5<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e304' x='382.56' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>6<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e305' x='415.21' y='277.58' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.text.x.bottom'>7<\/text>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e306' points='33.14,266.35 33.14,55.77' fill='none' stroke='none' title='&amp;lt;code&amp;gt;axis.line.y.left&amp;lt;/code&amp;gt;' theme-id='axis.line.y.left'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e307' x='18.41' y='212.07' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.y.left&amp;lt;/code&amp;gt;' theme-id='axis.text.y.left'>20<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e308' x='18.41' y='152.24' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.y.left&amp;lt;/code&amp;gt;' theme-id='axis.text.y.left'>30<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e309' x='18.41' y='92.42' font-size='6.6pt' font-family='Arial' fill='#4D4D4D' fill-opacity='1' title='&amp;lt;code&amp;gt;axis.text.y.left&amp;lt;/code&amp;gt;' theme-id='axis.text.y.left'>40<\/text>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e310' points='30.40,208.92 33.14,208.92' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.y.left&amp;lt;/code&amp;gt;' theme-id='axis.ticks.y.left'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e311' points='30.40,149.09 33.14,149.09' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.y.left&amp;lt;/code&amp;gt;' theme-id='axis.ticks.y.left'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e312' points='30.40,89.27 33.14,89.27' fill='none' stroke='#333333' stroke-opacity='1' stroke-width='1.07' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;axis.ticks.y.left&amp;lt;/code&amp;gt;' theme-id='axis.ticks.y.left'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e313' x='177.82' y='290.04' font-size='8.25pt' font-family='Arial' title='&amp;lt;code&amp;gt;axis.title.x.bottom&amp;lt;/code&amp;gt;' theme-id='axis.title.x.bottom'>Engine Displacement<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e314' transform='translate(13.36,222.21) rotate(-90.00)' font-size='8.25pt' font-family='Arial' title='&amp;lt;code&amp;gt;axis.title.y.left&amp;lt;/code&amp;gt;' theme-id='axis.title.y.left'>Highway miles per gallon<\/text>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e315' x='437.43' y='53.88' width='61.09' height='214.35' fill='#FFFFFF' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;legend.box.background&amp;lt;/code&amp;gt;' theme-id='legend.box.background'/>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e316' x='437.43' y='53.88' width='59.29' height='124.91' fill='#FFFFFF' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;legend.background&amp;lt;/code&amp;gt;' theme-id='legend.background'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e317' x='442.91' y='68.4' font-size='8.25pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.title&amp;lt;/code&amp;gt;' theme-id='legend.title'>City miles<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e318' x='442.91' y='80.28' font-size='8.25pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.title&amp;lt;/code&amp;gt;' theme-id='legend.title'>per gallon<\/text>\n   <image x='442.91' y='86.92' width='17.28' height='86.4' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAEsCAYAAAACUNnVAAAAmElEQVQ4ja2UQRLDMAgDd3hk/tnX5agcknFaCoa0vnkMCEnGsL12GQhDYDpPwoDrpBFlRDWi/9Wu6AHC9FkLYLrzlhD3oJ3mDvRHRYy7IC8A7bCK8gpWKYDzeQVArDcDyD2YAnSofZvzaOA6Q7Oahp/dmRuVTQ0xU5TGP2o8Waool1obVuv1q8qP9xPvg633XlGLDtfIhNUBcBeA5ss0BXMAAAAASUVORK5CYII=' xmlns:xlink='http://www.w3.org/1999/xlink'/>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e319' x='442.91' y='86.92' width='17.28' height='86.4' fill='none' stroke='none' title='&amp;lt;code&amp;gt;legend.frame&amp;lt;br&amp;gt;palette.colour.continuous&amp;lt;/code&amp;gt;' theme-id='legend.frame&lt;br&gt;palette.colour.continuous'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e320' points='456.73,169.86 460.19,169.86' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e321' points='456.73,153.30 460.19,153.30' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e322' points='456.73,136.74 460.19,136.74' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e323' points='456.73,120.18 460.19,120.18' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e324' points='456.73,103.62 460.19,103.62' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e325' points='456.73,87.06 460.19,87.06' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e326' points='446.36,169.86 442.91,169.86' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e327' points='446.36,153.30 442.91,153.30' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e328' points='446.36,136.74 442.91,136.74' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e329' points='446.36,120.18 442.91,120.18' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e330' points='446.36,103.62 442.91,103.62' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <polyline id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e331' points='446.36,87.06 442.91,87.06' fill='none' stroke='#FFFFFF' stroke-opacity='1' stroke-width='0.37' stroke-linejoin='round' stroke-linecap='butt' title='&amp;lt;code&amp;gt;legend.ticks&amp;lt;/code&amp;gt;' theme-id='legend.ticks'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e332' x='465.67' y='173.01' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>10<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e333' x='465.67' y='156.45' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>15<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e334' x='465.67' y='139.89' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>20<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e335' x='465.67' y='123.33' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>25<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e336' x='465.67' y='106.77' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>30<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e337' x='465.67' y='90.21' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>35<\/text>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e338' x='437.43' y='189.76' width='61.09' height='78.47' fill='#FFFFFF' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;legend.background&amp;lt;/code&amp;gt;' theme-id='legend.background'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e339' x='442.91' y='204.27' font-size='8.25pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.title&amp;lt;/code&amp;gt;' theme-id='legend.title'>Drive train<\/text>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e340' x='442.91' y='210.91' width='17.28' height='17.28' fill='#EBEBEB' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;legend.key&amp;lt;/code&amp;gt;' theme-id='legend.key'/>\n   <circle id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e341' cx='451.55' cy='219.55' r='1.47pt' fill='#000000' fill-opacity='1' stroke='none' key-id='shape' title='&amp;lt;code&amp;gt;geom&amp;lt;br&amp;gt;palette.shape.discrete&amp;lt;/code&amp;gt;'/>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e342' x='442.91' y='228.19' width='17.28' height='17.28' fill='#EBEBEB' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;legend.key&amp;lt;/code&amp;gt;' theme-id='legend.key'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e343' points='451.55,233.79 454.18,238.35 448.91,238.35' fill='#000000' fill-opacity='1' stroke='none' key-id='shape' title='&amp;lt;code&amp;gt;geom&amp;lt;br&amp;gt;palette.shape.discrete&amp;lt;/code&amp;gt;'/>\n   <rect id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e344' x='442.91' y='245.47' width='17.28' height='17.28' fill='#EBEBEB' fill-opacity='1' stroke='none' title='&amp;lt;code&amp;gt;legend.key&amp;lt;/code&amp;gt;' theme-id='legend.key'/>\n   <polygon id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e345' points='449.59,256.07 453.50,256.07 453.50,252.16 449.59,252.16' fill='#000000' fill-opacity='1' stroke='none' key-id='shape' title='&amp;lt;code&amp;gt;geom&amp;lt;br&amp;gt;palette.shape.discrete&amp;lt;/code&amp;gt;'/>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e346' x='465.67' y='222.7' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>4<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e347' x='465.67' y='239.98' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>f<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e348' x='465.67' y='257.26' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;legend.text&amp;lt;/code&amp;gt;' theme-id='legend.text'>r<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e349' x='33.14' y='31.05' font-size='8.25pt' font-family='Arial' title='&amp;lt;code&amp;gt;plot.subtitle&amp;lt;/code&amp;gt;' theme-id='plot.subtitle'>Described for 234 cars from 1999 and 2008<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e350' x='33.14' y='14.93' font-size='9.9pt' font-family='Arial' title='&amp;lt;code&amp;gt;plot.title&amp;lt;/code&amp;gt;' theme-id='plot.title'>Fuel efficiency<\/text>\n   <text id='svg_55735f3a_43be_433d_b895_216b1a6034dd_e351' x='244.47' y='304.14' font-size='6.6pt' font-family='Arial' title='&amp;lt;code&amp;gt;plot.caption&amp;lt;/code&amp;gt;' theme-id='plot.caption'>Source: U.S. Environmental Protection Agency<\/text>\n  <\/g>\n <\/g>\n<\/svg>","js":null,"uid":"svg_55735f3a_43be_433d_b895_216b1a6034dd","ratio":1.618122977346278,"settings":{"tooltip":{"css":".tooltip_SVGID_ { color:black;background-color:#F9F9F9;padding:0.3em;border-radius:0.3em;border:solid grey;border-width:1px; ; position:absolute;pointer-events:none;z-index:999;}","placement":"doc","opacity":0.9,"offx":10,"offy":0,"use_cursor_pos":true,"use_fill":false,"use_stroke":false,"delay_over":200,"delay_out":500},"hover":{"css":".hover_data_SVGID_ { fill:orange;stroke:black;cursor:pointer; }\ntext.hover_data_SVGID_ { stroke:none;fill:orange; }\ncircle.hover_data_SVGID_ { fill:orange;stroke:black; }\nline.hover_data_SVGID_, polyline.hover_data_SVGID_ { fill:none;stroke:orange; }\nrect.hover_data_SVGID_, polygon.hover_data_SVGID_, path.hover_data_SVGID_ { fill:orange;stroke:none; }\nimage.hover_data_SVGID_ { stroke:orange; }","reactive":true,"nearest_distance":null},"hover_inv":{"css":""},"hover_key":{"css":".hover_key_SVGID_ { fill:orange;stroke:black;cursor:pointer; }\ntext.hover_key_SVGID_ { stroke:none;fill:orange; }\ncircle.hover_key_SVGID_ { fill:orange;stroke:black; }\nline.hover_key_SVGID_, polyline.hover_key_SVGID_ { fill:none;stroke:orange; }\nrect.hover_key_SVGID_, polygon.hover_key_SVGID_, path.hover_key_SVGID_ { fill:orange;stroke:none; }\nimage.hover_key_SVGID_ { stroke:orange; }","reactive":true},"hover_theme":{"css":".hover_theme_SVGID_ { fill:orange;stroke:black;cursor:pointer; }\ntext.hover_theme_SVGID_ { stroke:none;fill:orange; }\ncircle.hover_theme_SVGID_ { fill:orange;stroke:black; }\nline.hover_theme_SVGID_, polyline.hover_theme_SVGID_ { fill:none;stroke:orange; }\nrect.hover_theme_SVGID_, polygon.hover_theme_SVGID_, path.hover_theme_SVGID_ { fill:orange;stroke:none; }\nimage.hover_theme_SVGID_ { stroke:orange; }","reactive":true},"select":{"css":".select_data_SVGID_ { fill:red;stroke:black;cursor:pointer; }\ntext.select_data_SVGID_ { stroke:none;fill:red; }\ncircle.select_data_SVGID_ { fill:red;stroke:black; }\nline.select_data_SVGID_, polyline.select_data_SVGID_ { fill:none;stroke:red; }\nrect.select_data_SVGID_, polygon.select_data_SVGID_, path.select_data_SVGID_ { fill:red;stroke:none; }\nimage.select_data_SVGID_ { stroke:red; }","type":"multiple","only_shiny":true,"selected":[]},"select_inv":{"css":""},"select_key":{"css":".select_key_SVGID_ { fill:red;stroke:black;cursor:pointer; }\ntext.select_key_SVGID_ { stroke:none;fill:red; }\ncircle.select_key_SVGID_ { fill:red;stroke:black; }\nline.select_key_SVGID_, polyline.select_key_SVGID_ { fill:none;stroke:red; }\nrect.select_key_SVGID_, polygon.select_key_SVGID_, path.select_key_SVGID_ { fill:red;stroke:none; }\nimage.select_key_SVGID_ { stroke:red; }","type":"single","only_shiny":true,"selected":[]},"select_theme":{"css":".select_theme_SVGID_ { fill:red;stroke:black;cursor:pointer; }\ntext.select_theme_SVGID_ { stroke:none;fill:red; }\ncircle.select_theme_SVGID_ { fill:red;stroke:black; }\nline.select_theme_SVGID_, polyline.select_theme_SVGID_ { fill:none;stroke:red; }\nrect.select_theme_SVGID_, polygon.select_theme_SVGID_, path.select_theme_SVGID_ { fill:red;stroke:none; }\nimage.select_theme_SVGID_ { stroke:red; }","type":"single","only_shiny":true,"selected":[]},"zoom":{"min":1,"max":1,"duration":300},"toolbar":{"position":"topright","pngname":"diagram","tooltips":null,"fixed":false,"hidden":"saveaspng","delay_over":200,"delay_out":500},"sizing":{"rescale":true,"width":1}}},"evals":[],"jsHooks":[]}</script>
</div>
<p>If you haven&rsquo;t already accidentally triggered it, feel free to hover your mouse over the plot above. Hovering will tell you what theme element you are pointing at.</p>
<h2 id="what-is-a-theme">What is a theme?
</h2>
<p>In ggplot, a theme is a list of descriptions for various parts of the plot. It is where you can set the size of your titles, the colours of your panels, the thickness of your grid lines and placement of your legends.</p>
<p>Themes are declared using the <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 function, which populates these descriptions called &rsquo;theme elements&rsquo;. Some of these elements have a predefined set of properties and can be set using the element functions, like <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_text()</code></a>
. Other theme elements can take simpler values like strings, numbers or units.</p>
<p>Some pre-arranged collections of elements can be found in complete themes, like the iconic <a href="https://ggplot2.tidyverse.org/reference/ggtheme.html" target="_blank" rel="noopener"><code>theme_gray()</code></a>
. These are convenient ways to quickly swap out the complete look of a plot.</p>
<h2 id="complete-themes">Complete themes
</h2>
<p>Let&rsquo;s start big and work our way through the more nitty-gritty aspects of theming plots. The most thorough way to change the styling of a single plot is to swap out the complete theme. You can do this simply by adding one of the <code>theme_*()</code> functions, like <a href="https://ggplot2.tidyverse.org/reference/ggtheme.html" target="_blank" rel="noopener"><code>theme_minimal()</code></a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_minimal</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/example_complete-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="built-in-themes">Built-in themes
</h3>
<p>The base ggplot2 package already comes with a series of 9 built-in complete themes. For the sake of completeness about complete themes, they are displayed in the fold-out sections below. You can peruse them at your leisure to help you pick one you might like.</p>
<p>
<details>
<summary>
<code>theme_grey()</code> (default)
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_grey</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_grey-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_bw()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_bw</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_bw-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_linedraw()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_linedraw</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_linedraw-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_light()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_light</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_light-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_dark()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_dark</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_dark-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_minimal()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_minimal</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_minimal-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_classic()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_classic</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_classic-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_void()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_void</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_void-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>
<details>
<summary>
<code>theme_test()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_test</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_test-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<h3 id="additional-themes">Additional themes
</h3>
<p>Some packages come with their own themes that you can add to your plots. For example the cowplot package has a theme that galvanises you to not use <a href="https://clauswilke.com/dataviz/small-axis-labels.html" target="_blank" rel="noopener">labels that are too small</a>
, and otherwise has a clean look.</p>
<p>
<details>
<summary>
<code>cowplot::theme_cowplot()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'>cowplot</span><span class='nf'>::</span><span class='nf'><a href='https://wilkelab.org/cowplot/reference/theme_cowplot.html'>theme_cowplot</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_cowplot-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>The ggthemes package hosts themes that reflect other popular venues of data visualisation, such as the economist or FiveThirtyEight.</p>
<p>
<details>
<summary>
<code>ggthemes::theme_fivethirtyeight()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'>ggthemes</span><span class='nf'>::</span><span class='nf'><a href='http://jrnold.github.io/ggthemes/reference/theme_fivethirtyeight.html'>theme_fivethirtyeight</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_ggthemes-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>If the moods strikes you for a more playful plot, you can use the tvthemes package to style your plot according to TV shows!</p>
<p>
<details>
<summary>
<code>tvthemes::theme_simpsons()</code>
</summary>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'>tvthemes</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/pkg/tvthemes/man/theme_simpsons.html'>theme_simpsons</a></span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_tvthemes-1.png" width="700px" style="display: block; margin: auto;" />
</div>
</details>
</p>
<p>Aside from these packages that live on CRAN, there are also non-CRAN packages that come with complete themes. You can visit the <a href="https://exts.ggplot2.tidyverse.org/gallery/" target="_blank" rel="noopener">extension gallery</a>
 and filter on the &rsquo;themes&rsquo; tag to find more packages.</p>
<h3 id="tweaking-complete-themes">Tweaking complete themes
</h3>
<p>The complete themes have arguments that affect multiple components across the plot. Perhaps the most well known is the <code>base_size</code> argument that globally controls the size of theme elements, ranging from the text sizes, to line widths, and &mdash;since recently&mdash; even point sizes.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_bw</a></span><span class='o'>(</span>base_size <span class='o'>=</span> <span class='m'>8</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_base_size-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>A technique used to distinguish visual hierarchy is &lsquo;font pairing&rsquo;, meaning that you combine more than one font to convey visual hierarchy. In web design, it means displaying your headers different from your body text. In data visualisation, it can mean displaying your titles distinctly from labels. The most common pairing, and the default one baked into ggplot2, is to display titles larger than labels in the same typeface. Another popular choice is to use different weights, like &lsquo;bold&rsquo; and &lsquo;plain&rsquo;. It is now also easier to use different typefaces by pairing the <code>header_family</code> and the <code>base_family</code> fonts together. In the example below, we pair a serif font for headers and a sans-serif font for the rest.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_bw</a></span><span class='o'>(</span>base_family <span class='o'>=</span> <span class='s'>"Roboto"</span>, header_family <span class='o'>=</span> <span class='s'>"Roboto Slab"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_font_family-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>A recent addition to styling with complete themes are colour choices. The <code>ink</code> argument roughly amounts to the colour for all foreground elements, like text, lines and points. This is complemented by the <code>paper</code> argument, which affect background elements like the panels and plot background. Lastly, there is an <code>accent</code> argument which controls the display of a few specific layers, like <a href="https://ggplot2.tidyverse.org/reference/geom_smooth.html" target="_blank" rel="noopener"><code>geom_smooth()</code></a>
 or <a href="https://ggplot2.tidyverse.org/reference/geom_contour.html" target="_blank" rel="noopener"><code>geom_contour()</code></a>
. For some aspects of the plot, the <code>ink</code> and <code>paper</code> arguments are mixed to produce intermediate colours. As an example, when we use <a href="https://ggplot2.tidyverse.org/reference/ggtheme.html" target="_blank" rel="noopener"><code>theme_bw()</code></a>
, the strip fill colour is a mix between the foreground and background to slightly lift this part from the background. The <code>ink</code> and <code>paper</code> arguments can also be used to quickly recolour a plot, or to convert a plot to &lsquo;dark mode&rsquo; by using a light <code>ink</code> and dark <code>paper</code>.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='c'># Turning off these aesthetics to prevent grouping</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>shape <span class='o'>=</span> <span class='kc'>NULL</span>, colour <span class='o'>=</span> <span class='kc'>NULL</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_smooth.html'>geom_smooth</a></span><span class='o'>(</span>method <span class='o'>=</span> <span class='s'>"lm"</span>, formula <span class='o'>=</span> <span class='nv'>y</span> <span class='o'>~</span> <span class='nv'>x</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_bw</a></span><span class='o'>(</span></span>
<span>    ink <span class='o'>=</span> <span class='s'>"#BBBBBB"</span>, </span>
<span>    paper <span class='o'>=</span> <span class='s'>"#333333"</span>, </span>
<span>    accent <span class='o'>=</span> <span class='s'>"red"</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/complete_ink_paper-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="theme-elements">Theme elements
</h2>
<p>Rather than swapping out complete themes in one fell swoop, themes can also be tweaked to various degrees. In ggplot2, themes are a collection of theme elements, where an element describes a property, or set of properties, for a part of the theme.</p>
<h3 id="element-functions">Element functions
</h3>
<p>The documentation in <code>?theme()</code> will tell you what type of input each theme element will expect. Some theme elements just expect scalar values and not collections of properties. You can simply set these in the theme directly. For example, we all know that the golden ratio is the best ratio, so we can use it in our plot as follows:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>phi</span> <span class='o'>&lt;-</span> <span class='o'>(</span><span class='m'>1</span> <span class='o'>+</span> <span class='nf'><a href='https://rdrr.io/r/base/MathFun.html'>sqrt</a></span><span class='o'>(</span><span class='m'>5</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>/</span> <span class='m'>2</span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>aspect.ratio <span class='o'>=</span> <span class='nv'>phi</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/aspect_ratio-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>In the cases where a cohesive set of properties serves as a theme element, ggplot2 has <code>element_*()</code> functions. One of the simpler elements is <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_line()</code></a>
 and we can declare a new set of line properties as follows:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>red_line</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span>, linewidth <span class='o'>=</span> <span class='m'>2</span><span class='o'>)</span></span>
<span><span class='nv'>red_line</span></span>
<span><span class='c'>#&gt; &lt;ggplot2::element_line&gt;</span></span>
<span><span class='c'>#&gt;  @ colour       : chr "red"</span></span>
<span><span class='c'>#&gt;  @ linewidth    : num 2</span></span>
<span><span class='c'>#&gt;  @ linetype     : NULL</span></span>
<span><span class='c'>#&gt;  @ lineend      : NULL</span></span>
<span><span class='c'>#&gt;  @ linejoin     : NULL</span></span>
<span><span class='c'>#&gt;  @ arrow        : logi FALSE</span></span>
<span><span class='c'>#&gt;  @ arrow.fill   : chr "red"</span></span>
<span><span class='c'>#&gt;  @ inherit.blank: logi FALSE</span></span>
<span></span></code></pre>
</div>
<p>These elements can then be given to the <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 function to assign these properties to a specific part of the theme, like the <code>axis.line</code> in this example.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>axis.line <span class='o'>=</span> <span class='nv'>red_line</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/red_axis-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Below is an overview of elements and some common places where they are used:</p>
<div class="highlight">
<table>
  <thead>
      <tr>
          <th style="text-align: left">Element</th>
          <th style="text-align: left">Description</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td style="text-align: left"><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_blank()</code></a>
</td>
          <td style="text-align: left">Indicator to skip drawing an element.</td>
      </tr>
      <tr>
          <td style="text-align: left"><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_line()</code></a>
</td>
          <td style="text-align: left">Used for axis lines, grid lines and tick marks.</td>
      </tr>
      <tr>
          <td style="text-align: left"><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_rect()</code></a>
</td>
          <td style="text-align: left">Used for (panel) backgrounds, borders and strips.</td>
      </tr>
      <tr>
          <td style="text-align: left"><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_text()</code></a>
</td>
          <td style="text-align: left">Used for (sub)titles, labels, captions.</td>
      </tr>
      <tr>
          <td style="text-align: left"><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_geom()</code></a>
</td>
          <td style="text-align: left">Used to set default properties of layers.</td>
      </tr>
      <tr>
          <td style="text-align: left"><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_polygon()</code></a>
</td>
          <td style="text-align: left">Not used, but provided for reasons of extension.</td>
      </tr>
      <tr>
          <td style="text-align: left"><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_point()</code></a>
</td>
          <td style="text-align: left">Not used, but provided for reasons of extension.</td>
      </tr>
  </tbody>
</table>
</div>
<p>In addition to these elements in ggplot2, extension packages can also define custom elements. Generally speaking, these elements are variants of the elements listed above and often have slightly different properties and are rendered differently. For example <a href="https://marquee.r-lib.org/reference/element_marquee.html" target="_blank" rel="noopener"><code>marquee::element_marquee()</code></a>
 is a subclass of <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_text()</code></a>
, but interprets the provided text as markdown. It applies some formatting like <code>**</code> for bold, or allows for custom spans like <code>{.red ...}</code>. Another example is <a href="https://teunbrand.github.io/ggh4x/reference/element_part_rect.html" target="_blank" rel="noopener"><code>ggh4x::element_part_rect()</code></a>
 that can draw a subset of rectangle borders.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='s'>"**Fuel** &#123;.red efficiency&#125;"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    plot.title <span class='o'>=</span> <span class='nf'>marquee</span><span class='nf'>::</span><span class='nf'><a href='https://marquee.r-lib.org/reference/element_marquee.html'>element_marquee</a></span><span class='o'>(</span><span class='o'>)</span>,</span>
<span>    strip.background <span class='o'>=</span> <span class='nf'>ggh4x</span><span class='nf'>::</span><span class='nf'><a href='https://teunbrand.github.io/ggh4x/reference/element_part_rect.html'>element_part_rect</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"black"</span>, side <span class='o'>=</span> <span class='s'>"b"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/element_marquee-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="hierarchy-and-inheritance">Hierarchy and inheritance
</h3>
<p>Most theme elements are hierarchical. At the root, they are broadly applicable and change large parts of the plot. At leaves, they are very specific and allow fine grained control. Travelling from roots to leaves, properties of theme elements are inherited from parent to child. Some inheritance is very direct, where leaves directly inherit from roots (for example <code>legend.text</code>). Other times, inheritance is more arduous, like for <code>axis.minor.ticks.y.left</code>: it inherits from <code>axis.ticks.y.left</code>, which inherits from <code>axis.ticks.y</code>, which inherits from <code>axis.ticks</code>, which finally inherits from <code>line</code>. Most often, elements only have a single parent, but there are subtle exceptions.</p>
<p>In the example below we set the root <code>text</code> element to red text. This is applied (almost) universally to all text in the plot. We also set the font of the leaf <code>legend.text</code> element. We see that not only has the legend text font changed, but it is red as well because of the root <code>text</code> element.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>  <span class='c'># A root element</span></span>
<span>  text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span>,</span>
<span>  <span class='c'># A leaf element</span></span>
<span>  legend.text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>family <span class='o'>=</span> <span class='s'>"impact"</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/root_leaves-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>However, the keen eye spots that the strip text and axis text are <em>not</em> red. This is because in the line of succession, an ancestor declared a different colour property for the text, which overrules the colour property descending from the root <code>text</code> element. In these specific cases, the deviating ancestors are <code>axis.text</code> and <code>strip.text</code>.</p>
<p>When we inspect the contents of a theme element, we may find that the elements are <code>NULL</code>. This is simply an indicator that this element will inherit from its ancestor <em>in toto</em>. Another possibility is that some properties of an element are <code>NULL</code>. A <code>NULL</code> property means that the property will be inherited from the parent. When we truly want to know what properties are taken to display a theme element, we can use the <a href="https://ggplot2.tidyverse.org/reference/calc_element.html" target="_blank" rel="noopener"><code>calc_element()</code></a>
 function to resolve the inheritance and populate all the fields.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Will inherit entirely from parent</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>$</span><span class='nv'>axis.ticks.x.bottom</span></span>
<span><span class='c'>#&gt; NULL</span></span>
<span></span><span></span>
<span><span class='c'># The element is incomplete</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>$</span><span class='nv'>axis.ticks</span></span>
<span><span class='c'>#&gt; &lt;ggplot2::element_line&gt;</span></span>
<span><span class='c'>#&gt;  @ colour       : chr "#333333FF"</span></span>
<span><span class='c'>#&gt;  @ linewidth    : NULL</span></span>
<span><span class='c'>#&gt;  @ linetype     : NULL</span></span>
<span><span class='c'>#&gt;  @ lineend      : NULL</span></span>
<span><span class='c'>#&gt;  @ linejoin     : NULL</span></span>
<span><span class='c'>#&gt;  @ arrow        : logi FALSE</span></span>
<span><span class='c'>#&gt;  @ arrow.fill   : chr "#333333FF"</span></span>
<span><span class='c'>#&gt;  @ inherit.blank: logi TRUE</span></span>
<span></span><span></span>
<span><span class='c'># Proper way to access the properties of an element</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/calc_element.html'>calc_element</a></span><span class='o'>(</span><span class='s'>"axis.ticks.x.bottom"</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; &lt;ggplot2::element_line&gt;</span></span>
<span><span class='c'>#&gt;  @ colour       : chr "#333333FF"</span></span>
<span><span class='c'>#&gt;  @ linewidth    : num 0.5</span></span>
<span><span class='c'>#&gt;  @ linetype     : num 1</span></span>
<span><span class='c'>#&gt;  @ lineend      : chr "butt"</span></span>
<span><span class='c'>#&gt;  @ linejoin     : chr "round"</span></span>
<span><span class='c'>#&gt;  @ arrow        : logi FALSE</span></span>
<span><span class='c'>#&gt;  @ arrow.fill   : chr "#333333FF"</span></span>
<span><span class='c'>#&gt;  @ inherit.blank: logi TRUE</span></span>
<span></span></code></pre>
</div>
<p>The <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>?theme</code></a>
 documentation often tells you how the elements inherit and <a href="https://ggplot2.tidyverse.org/reference/calc_element.html" target="_blank" rel="noopener"><code>calc_element()</code></a>
 will resolve it for you. If, for some reason, you need programmatic access to the inheritance tree, you can use <a href="https://ggplot2.tidyverse.org/reference/register_theme_elements.html" target="_blank" rel="noopener"><code>get_element_tree()</code></a>
. Let&rsquo;s say you want to find out exactly which elements have multiple parents. The resulting object is the internal structure ggplot2 uses to resolve inheritance and has an <code>inherit</code> field for every element that discerns its direct parent.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>tree</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/register_theme_elements.html'>get_element_tree</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span><span class='nv'>tree</span><span class='o'>$</span><span class='nv'>axis.line.x.bottom</span><span class='o'>$</span><span class='nv'>inherit</span></span>
<span><span class='c'>#&gt; [1] "axis.line.x"</span></span>
<span></span></code></pre>
</div>
<h2 id="anatomy-of-a-theme">Anatomy of a theme
</h2>
<div class="highlight">
</div>
<p>The <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 function has a lot of arguments and can be a bit overwhelming to parse in one take. At the time of writing, it has 147 arguments and <code>...</code> is obfuscating additional options. Because we like structure rather than chaos, let us try to digest the <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 function one bite at a time. Much of the theme has been divided over parts in the <code>theme_sub_*()</code> family of functions. This family are just simple shortcuts. For example the <code>theme_sub_axis(title)</code> argument, populates the <code>axis.title</code> element.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; &lt;theme&gt; List of 1</span></span>
<span><span class='c'>#&gt;  $ axis.title: &lt;ggplot2::element_blank&gt;</span></span>
<span><span class='c'>#&gt;  @ complete: logi FALSE</span></span>
<span><span class='c'>#&gt;  @ validate: logi TRUE</span></span>
<span></span></code></pre>
</div>
<p>If you&rsquo;re redefining a series of related settings, it can be beneficial to use the <code>theme_sub_*()</code>. One benefit is brevity. For example, if you want to tweak the left y-axis a lot, it can be terser to use <code>theme_sub_axis_left(title, text, ticks)</code> rather than <code>theme(axis.title.y.left, axis.text.y.left, axis.ticks.y.left)</code>. The second benefit is that it helps organising your theme, preserving a shred of sanity while hatching your plots.</p>
<h3 id="whole-plot">Whole plot
</h3>
<p>There are a series of mostly textual theme elements that mostly display outside the plot itself. Using the <a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_plot()</code></a>
 function, we can omit the <code>plot</code> prefix in the settings. We can us it to control the background, as well as the titles, caption and tag text and their placement. In the plot below, we&rsquo;re tweaking these settings to show the scope. Note that the text (except for the tag) is now aligned across the plot as a whole, rather than aligned with the panels.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>tag <span class='o'>=</span> <span class='s'>"A"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_plot</a></span><span class='o'>(</span></span>
<span>    <span class='c'># Adjust the background colour</span></span>
<span>    background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"cornsilk"</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    <span class='c'># Align title and subtitle to plot instead of panels</span></span>
<span>    title <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>hjust <span class='o'>=</span> <span class='m'>0</span><span class='o'>)</span>, <span class='c'># default,</span></span>
<span>    subtitle <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"dodgerblue"</span><span class='o'>)</span>,</span>
<span>    title.position <span class='o'>=</span> <span class='s'>"plot"</span>, </span>
<span>    </span>
<span>    <span class='c'># Align caption to plot instead of panels</span></span>
<span>    caption <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>hjust <span class='o'>=</span> <span class='m'>1</span><span class='o'>)</span>, <span class='c'># default</span></span>
<span>    caption.position <span class='o'>=</span> <span class='s'>"plot"</span>,</span>
<span>    </span>
<span>    <span class='c'># Place the tag in the top right of the panels instead of top left of plot</span></span>
<span>    tag.position <span class='o'>=</span> <span class='s'>"topright"</span>,</span>
<span>    tag.location <span class='o'>=</span> <span class='s'>"panel"</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_plot-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="panels">Panels
</h3>
<p>An important aspect of the panels are the grid lines. The grid lines follow the major and minor breaks of the scale, which is also the major distinction in how they are displayed. The next distinction is whether the lines are horizontal and mark breaks vertically (<code>y</code>) or the lines are vertical and mark breaks horizontally (<code>x</code>).</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_panel</a></span><span class='o'>(</span></span>
<span>    <span class='c'># Extra space between panels</span></span>
<span>    spacing.x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>1</span>, <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    <span class='c'># Tweaking all the grid elements</span></span>
<span>    grid <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"grey80"</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    <span class='c'># Turning off the minor grid elements</span></span>
<span>    grid.minor <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    <span class='c'># Tweak the major x/y lines separately</span></span>
<span>    grid.major.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>linetype <span class='o'>=</span> <span class='s'>"dotted"</span><span class='o'>)</span>,</span>
<span>    grid.major.y <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"white"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_panel-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Besides grid lines, also the border and the background are important for the panel styling. They can be confusing because they are similar, but not identical. Notably, the panel background is underneath the data (unless <code>ontop = TRUE</code>), while the panel border is on top of the panel. You can see this in the plot below, because the white grid lines are visible over the blue background, but not over the red border.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_panel</a></span><span class='o'>(</span></span>
<span>    background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"cornsilk"</span>, colour <span class='o'>=</span> <span class='s'>"blue"</span>, linewidth <span class='o'>=</span> <span class='m'>6</span><span class='o'>)</span>,</span>
<span>    border     <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span>, linewidth <span class='o'>=</span> <span class='m'>3</span>, fill <span class='o'>=</span> <span class='s'>"black"</span><span class='o'>)</span>,</span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_panel_border_background-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Both the background and the border are clipped by the coordinate systems clipping setting, e.g. <code>coord_cartesian(clip)</code>. It should also be noted that any <code>fill</code> property set on the border is ignored. Moreover, the legend key background takes on the appearance of the panel background by default, which is why the &lsquo;Drive train&rsquo; legend is affected too.</p>
<p>A recent improvement is also that we can set the panel size via the theme. The <code>panel.widths</code> and <code>panel.heights</code> arguments take a unit (vector) and set the panels to this size. If you are trying to coordinate panel sizes with <a href="https://ggplot2.tidyverse.org/reference/ggsave.html" target="_blank" rel="noopener"><code>ggsave()</code></a>
, please mind that other plot components, like axes, titles and legends also take up additional space. If you have more than one panel in the vertical or horizontal direction, you can use a vector of units as demonstrated below for <code>widths</code>.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_panel</a></span><span class='o'>(</span></span>
<span>    widths <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>3</span>, <span class='m'>5</span><span class='o'>)</span>, <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>    heights <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>4</span>, <span class='s'>"cm"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_panel_size-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>It is also possible to set the total size of panels. In the example above we can use <code>widths = unit(c(3, 3), &quot;cm&quot;)</code> to have each panel be 3 centimetres wide, separated by a gap determined by the <code>panel.spacing.x</code> setting. If we instead had used <code>widths = unit(6, &quot;cm&quot;)</code> each panel would be smaller than 3 centimetres because the <code>panel.spacing.x</code> is included.</p>
<h3 id="strips">Strips
</h3>
<p>The display text in strips is formatted by the <code>labeller</code> argument in the facets. Styling this piece of text can be done with the <a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_strip()</code></a>
 function, which replaces the <code>strip</code> prefix in <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
. Similar to axes, strips also have positional variants with <code>background.x</code> and <code>background.y</code> specifying the backgrounds for horizontal and vertical strips specifically.</p>
<p>The text even has specific <code>text.x.bottom</code>, <code>text.x.top</code>, <code>text.y.left</code> and <code>text.y.right</code> variants. This allows text on the left to be rotated 90°, while text on the right is rotated -90°, which gives the sense that the text faces the panels. Out of principle, you could force the <code>text.x.bottom</code> to be rotated 180° to achieve the same sense for horizontal text, but you may find out why readability trumps consistency.</p>
<p>Another important distinction is the <code>placement</code> option, which affects how strips are displayed when they clash with axes. This author personally thinks that <code>placement = &quot;outside&quot;</code> is the wiser choice 99% of the time. When strips are displayed outside of axes, the <code>switch.pad.grid</code>/<code>switch.pad.wrap</code> elements control the spacing.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># We're including a labeller to showcase formatting</span></span>
<span><span class='nv'>my_labeller</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/as_labeller.html'>as_labeller</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span>`1999` <span class='o'>=</span> <span class='s'>"The Nineties"</span>, `2008` <span class='o'>=</span> <span class='s'>"The Noughties"</span>, </span>
<span>                             V <span class='o'>=</span> <span class='s'>"Vertical Strip"</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='c'># Using a dummy strip for the vertical direction</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_grid.html'>facet_grid</a></span><span class='o'>(</span><span class='s'>"V"</span> <span class='o'>~</span> <span class='nv'>year</span>, labeller <span class='o'>=</span> <span class='nv'>my_labeller</span>, switch <span class='o'>=</span> <span class='s'>"x"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_strip</a></span><span class='o'>(</span></span>
<span>    <span class='c'># All strip backgrounds</span></span>
<span>    background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"cornsilk"</span><span class='o'>)</span>,</span>
<span>    <span class='c'># Specifically the horizontal strips</span></span>
<span>    background.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"black"</span>, linewidth <span class='o'>=</span> <span class='m'>1</span><span class='o'>)</span>,</span>
<span>    <span class='c'># Tweak text, specifically for the bottom strip</span></span>
<span>    text.x.bottom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>size <span class='o'>=</span> <span class='m'>16</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    placement <span class='o'>=</span> <span class='s'>"outside"</span>,</span>
<span>    <span class='c'># Spacing in between axes and strips. Note that it doesn't affect the </span></span>
<span>    <span class='c'># vertical strip that doesn't have an axis.</span></span>
<span>    switch.pad.grid <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>1</span>, <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>    clip <span class='o'>=</span> <span class='s'>"off"</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_strip-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>The <code>clip = &quot;on&quot;</code> setting is the default and causes the strip border to be flush with the panel borders. By turning the clipping off, the strip border bleeds out, but it also allows text to exceed the boundaries.</p>
<h3 id="axes">Axes
</h3>
<p>Perhaps the most involved theme elements are the axis elements. They have the longest chain of inheritance of all elements and have variants for every side of the plot.</p>
<p>Let&rsquo;s start from the top and work our way down. The <a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis()</code></a>
 function lets you tweak all the axes at once. Note that the axis line now appears in the left and bottom axes.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Turn on all lines</span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis</a></span><span class='o'>(</span>line <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_axis-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>To control the directions separately, you can use the <a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_x()</code></a>
 and <a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_y()</code></a>
 functions.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='c'># Turn on horizontal line</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_x</a></span><span class='o'>(</span>line <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Turn off ticks for vertical</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_y</a></span><span class='o'>(</span>ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_axis_xy-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>If you are dealing with secondary axes, or you have placed your primary axes in unorthodox positions, you might find use in the even more granular <code>theme_sub_axis_*()</code> functions for the top, left, bottom and right positions.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='c'># Extra axes</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>x.sec <span class='o'>=</span> <span class='s'>"axis"</span>, y.sec <span class='o'>=</span> <span class='s'>"axis"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Turning off ticks</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_bottom</a></span><span class='o'>(</span>ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Extra long, coloured ticks</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_top</a></span><span class='o'>(</span></span>
<span>    ticks.length <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>    ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Extra spacing</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_left</a></span><span class='o'>(</span>text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_auto</a></span><span class='o'>(</span><span class='m'>10</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Turning on the axis line</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_right</a></span><span class='o'>(</span>line <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_axis_positions-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>In addition to being globally controlled by the theme, axes are guides that can also be locally controlled by their <code>guide_axis(theme)</code> argument. The same theme elements apply, but they are accessed from the local theme that masks the global theme. Note that besides from the colour changing, there is now also an axis line because the local <a href="https://ggplot2.tidyverse.org/reference/ggtheme.html" target="_blank" rel="noopener"><code>theme_classic()</code></a>
 draws axis lines.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>red_axis</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guide_axis.html'>guide_axis</a></span><span class='o'>(</span>theme <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_classic</a></span><span class='o'>(</span>ink <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>x <span class='o'>=</span> <span class='nv'>red_axis</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/axis_local_theme-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="legend">Legend
</h3>
<p>While the legend inheritance is typically straightforward, it can be a challenge to get these right. To chop this problem in smaller pieces, we can separate the so called &lsquo;guide box&rsquo; from the legend guides themselves.</p>
<h4 id="guide-box">Guide box
</h4>
<p>The guide box is a container for guides and is responsible for the placement and arrangement of its contents.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>    <span class='c'># Showing the box</span></span>
<span>    box.background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"cornsilk"</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    <span class='c'># Put legends on the left</span></span>
<span>    position <span class='o'>=</span> <span class='s'>"left"</span>,</span>
<span>    </span>
<span>    <span class='c'># Arrange legends horizontally</span></span>
<span>    box <span class='o'>=</span> <span class='s'>"horizontal"</span>,</span>
<span>    </span>
<span>    <span class='c'># Align to legend box to top</span></span>
<span>    justification <span class='o'>=</span> <span class='s'>"top"</span>,</span>
<span>    <span class='c'># location = "plot",</span></span>
<span>    <span class='c'># But align legends within the box at the bottom</span></span>
<span>    box.just <span class='o'>=</span> <span class='s'>"bottom"</span>,</span>
<span>    </span>
<span>    <span class='c'># Spacings and margins</span></span>
<span>    box.margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_auto</a></span><span class='o'>(</span><span class='m'>5</span><span class='o'>)</span>,</span>
<span>    box.spacing <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>1</span>, <span class='s'>"cm"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_legend_guidebox-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Legend boxes can be split up by manually specifying the <code>position</code> argument in guides. You cannot tweak every box setting for every position independently. However, the boxes can be justified individually.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>shape <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guide_legend.html'>guide_legend</a></span><span class='o'>(</span>position <span class='o'>=</span> <span class='s'>"left"</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>    <span class='c'># Showing the boxes</span></span>
<span>    box.background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"cornsilk"</span><span class='o'>)</span>,</span>
<span>    box.margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_auto</a></span><span class='o'>(</span><span class='m'>5</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    <span class='c'># Tweaking the justification per position</span></span>
<span>    justification.left <span class='o'>=</span> <span class='s'>"top"</span>,</span>
<span>    justification.right <span class='o'>=</span> <span class='s'>"bottom"</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_legend_guidebox_position-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h4 id="general-legend-guides">General legend guides
</h4>
<p>Moving on from guide boxes to the guides themselves; There are some theme settings that (almost) universally affect any guides, regardless of <a href="https://ggplot2.tidyverse.org/reference/guide_legend.html" target="_blank" rel="noopener"><code>guide_legend()</code></a>
, <a href="https://ggplot2.tidyverse.org/reference/guide_colourbar.html" target="_blank" rel="noopener"><code>guide_colourbar()</code></a>
, or <a href="https://ggplot2.tidyverse.org/reference/guide_bins.html" target="_blank" rel="noopener"><code>guide_bins()</code></a>
. These settings pertain to the legend background, margins, labels and titles and their placement and key sizes.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>    <span class='c'># Give guides a wider background</span></span>
<span>    background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"cornsilk"</span><span class='o'>)</span>,</span>
<span>    margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_auto</a></span><span class='o'>(</span><span class='m'>5</span>, unit <span class='o'>=</span> <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>    </span>
<span>    <span class='c'># Display legend titles to the right of the guide</span></span>
<span>    title <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>angle <span class='o'>=</span> <span class='m'>270</span><span class='o'>)</span>,</span>
<span>    title.position <span class='o'>=</span> <span class='s'>"right"</span>,</span>
<span>    </span>
<span>    <span class='c'># Display red labels to the left of the keys</span></span>
<span>    text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span>,</span>
<span>    text.position <span class='o'>=</span> <span class='s'>"left"</span>,</span>
<span>    </span>
<span>    <span class='c'># Set smaller keys</span></span>
<span>    key.width <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>    key.height <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_legend_general-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h4 id="legend-guide">Legend guide
</h4>
<p>There are also settings that affect <a href="https://ggplot2.tidyverse.org/reference/guide_legend.html" target="_blank" rel="noopener"><code>guide_legend()</code></a>
 but not <a href="https://ggplot2.tidyverse.org/reference/guide_colourbar.html" target="_blank" rel="noopener"><code>guide_colourbar()</code></a>
. Most of these have to do with the arrangement of keys, like their spacing, justification or fill order (by row or column). The <code>legend.key.justification</code> setting only matters when the text size exceeds the key size. If we remove that setting from the plot below, the keys will fill up to fit the space.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='c'># Set two columns and long label text</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_shape.html'>scale_shape_discrete</a></span><span class='o'>(</span></span>
<span>    labels <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"4\nwheel\ndrive"</span>, <span class='s'>"front\nwheel\ndrive"</span>, <span class='s'>"rear\nwheel\ndrive"</span><span class='o'>)</span>,</span>
<span>    guide <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guide_legend.html'>guide_legend</a></span><span class='o'>(</span>ncol <span class='o'>=</span> <span class='m'>2</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>    <span class='c'># Fill items in grid in a row-wise fashion</span></span>
<span>    byrow <span class='o'>=</span> <span class='kc'>TRUE</span>,</span>
<span>    <span class='c'># Increase spacing between keys</span></span>
<span>    key.spacing.y <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>    key.spacing.x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>    <span class='c'># Top-align keys with text</span></span>
<span>    key.justification <span class='o'>=</span> <span class='s'>"top"</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_legend_legend-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h4 id="colourbar-guide">Colourbar guide
</h4>
<p>Likewise, there are also settings specific to <a href="https://ggplot2.tidyverse.org/reference/guide_colourbar.html" target="_blank" rel="noopener"><code>guide_colourbar()</code></a>
. Generally, you can see it as a legend guide with a single elongated key. This elongation has special behaviour in that the default is 5 times the original key size. If you need to set the size directly without special behaviour, you can use the <code>guide_colourbar(theme)</code> argument. Aside from the special size behaviour, we can also set the colourbar frame and ticks.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='c'># Using a local guide theme to directly set the size</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guide_colourbar.html'>guide_colourbar</a></span><span class='o'>(</span>theme <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>legend.key.height <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"cm"</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>    frame <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span>,</span>
<span>    <span class='c'># Long blue ticks</span></span>
<span>    ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"blue"</span><span class='o'>)</span>,</span>
<span>    ticks.length <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='o'>-</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>    <span class='c'># Adapt margins to accommodate longer ticks</span></span>
<span>    text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin</a></span><span class='o'>(</span>l <span class='o'>=</span> <span class='m'>6</span>, unit <span class='o'>=</span> <span class='s'>"mm"</span><span class='o'>)</span><span class='o'>)</span>,</span>
<span>    margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin</a></span><span class='o'>(</span>l <span class='o'>=</span> <span class='m'>6</span>, unit <span class='o'>=</span> <span class='s'>"mm"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_legend_colourbar-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>A trick you can pull to have legends eat up all the available real estate, is to give them <code>&quot;null&quot;</code>-unit size. Below, that trick stretches the colourbar across the full width of the plot.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guide_colourbar.html'>guide_colourbar</a></span><span class='o'>(</span></span>
<span>    theme <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>      key.width <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>1</span>, <span class='s'>"null"</span><span class='o'>)</span>,</span>
<span>      title.position <span class='o'>=</span> <span class='s'>"top"</span>,</span>
<span>      margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_auto</a></span><span class='o'>(</span><span class='kc'>NA</span>, <span class='m'>0</span><span class='o'>)</span> <span class='c'># remove left/right margins</span></span>
<span>    <span class='o'>)</span>,</span>
<span>    position <span class='o'>=</span> <span class='s'>"bottom"</span></span>
<span>  <span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/stretchy_colourbar-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h4 id="binned-legend">Binned legend
</h4>
<p>A binned legend acts as a hybrid between a typical legend guide and a colourbar. It depicts a discretised continuous (binned) legend, by properly displaying separate glyphs, but also displaying an axis with ticks at bin breaks.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"bins"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>    axis.line <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span><span class='s'>"red"</span><span class='o'>)</span>,</span>
<span>    ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span><span class='s'>"blue"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/sub_legend_binned-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="layers">Layers
</h3>
<p>Since recently we can also set default choices for layer aesthetics via the theme. We briefly saw this foreshadowed in the &rsquo;tweaking complete themes&rsquo; section. But you can have more granular control over layers as well, without affecting the entirety of the theme.</p>
<h4 id="introducing-the-geom-element">Introducing the &lsquo;geom&rsquo; element
</h4>
<p>The new theme element powering all this is the <code>geom</code> argument. It takes the return value of the <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_geom()</code></a>
 function to control the default graphical properties of layers.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='c'># Turn off grouping</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='kc'>NULL</span>, shape <span class='o'>=</span> <span class='kc'>NULL</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_smooth.html'>geom_smooth</a></span><span class='o'>(</span>formula <span class='o'>=</span> <span class='nv'>y</span> <span class='o'>~</span> <span class='nv'>x</span>, method <span class='o'>=</span> <span class='s'>"lm"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    geom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span></span>
<span>      ink <span class='o'>=</span> <span class='s'>"tomato"</span>,</span>
<span>      paper <span class='o'>=</span> <span class='s'>"dodgerblue"</span>,</span>
<span>      accent <span class='o'>=</span> <span class='s'>"forestgreen"</span></span>
<span>    <span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/layer_ink_paper-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>The <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_geom()</code></a>
 function has a number of properties that we&rsquo;re about to describe. Just like other <code>element_*()</code> function, it returns an object with properties, most of which are <code>NULL</code> by default. These <code>NULL</code> properties will get filled in when the plot is built.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; &lt;ggplot2::element_geom&gt;</span></span>
<span><span class='c'>#&gt;  @ ink        : NULL</span></span>
<span><span class='c'>#&gt;  @ paper      : NULL</span></span>
<span><span class='c'>#&gt;  @ accent     : NULL</span></span>
<span><span class='c'>#&gt;  @ linewidth  : NULL</span></span>
<span><span class='c'>#&gt;  @ borderwidth: NULL</span></span>
<span><span class='c'>#&gt;  @ linetype   : NULL</span></span>
<span><span class='c'>#&gt;  @ bordertype : NULL</span></span>
<span><span class='c'>#&gt;  @ family     : NULL</span></span>
<span><span class='c'>#&gt;  @ fontsize   : NULL</span></span>
<span><span class='c'>#&gt;  @ pointsize  : NULL</span></span>
<span><span class='c'>#&gt;  @ pointshape : NULL</span></span>
<span><span class='c'>#&gt;  @ colour     : NULL</span></span>
<span><span class='c'>#&gt;  @ fill       : NULL</span></span>
<span></span></code></pre>
</div>
<h5 id="colours">Colours
</h5>
<p>There are 5 colour related settings. In the plot above, we&rsquo;ve already met three of them.</p>
<ul>
<li><code>ink</code> is the foreground colour.</li>
<li><code>paper</code> is the background colour. It is often used in a mixture with <code>ink</code> to dull the foreground and coordinate with the rest of the theme. You can see for example that the ribbon part of <a href="https://ggplot2.tidyverse.org/reference/geom_smooth.html" target="_blank" rel="noopener"><code>geom_smooth()</code></a>
 is a bit purple-ish due to the mixture of reddish <code>ink</code> and bluish <code>paper</code>.</li>
<li><code>accent</code> is a speciality colour pick that only a few geoms use as default. These are <a href="https://ggplot2.tidyverse.org/reference/geom_contour.html" target="_blank" rel="noopener"><code>geom_contour()</code></a>
, <a href="https://ggplot2.tidyverse.org/reference/geom_quantile.html" target="_blank" rel="noopener"><code>geom_quantile()</code></a>
 and <a href="https://ggplot2.tidyverse.org/reference/geom_smooth.html" target="_blank" rel="noopener"><code>geom_smooth()</code></a>
.</li>
</ul>
<p>The remaining two are well known to anyone who has worked with ggplot2 before: <code>colour</code> and <code>fill</code>. These two overrule any <code>ink</code>/<code>paper</code>/<code>accent</code> setting to directly set colour and fill without any mixing. For example, notice that the ribbon is a (semitransparent) purple, rather than a mixture with green paper.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/get_last_plot.html'>last_plot</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>geom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span></span>
<span>    fill <span class='o'>=</span> <span class='s'>"purple"</span>,</span>
<span>    colour <span class='o'>=</span> <span class='s'>"orange"</span>,</span>
<span>    paper <span class='o'>=</span> <span class='s'>"green"</span> <span class='c'># Ignored</span></span>
<span>  <span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/layer_colour_fill-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h5 id="lines">Lines
</h5>
<p>There are also 4 different line settings. You may already be familiar with <code>linewidth</code> and <code>linetype</code> setting how wide lines are, and how they are drawn respectively. Additionally, we&rsquo;re now also using <code>borderwidth</code> and <code>bordertype</code> to denote these settings for closed shapes that can be filled, like the rectangles below.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>faithful</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>eruptions</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_histogram.html'>geom_histogram</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>y <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes_eval.html'>after_stat</a></span><span class='o'>(</span><span class='nv'>density</span><span class='o'>)</span><span class='o'>)</span>, bins <span class='o'>=</span> <span class='m'>30</span>, colour <span class='o'>=</span> <span class='s'>"black"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_path.html'>geom_line</a></span><span class='o'>(</span>stat <span class='o'>=</span> <span class='s'>"density"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    geom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span></span>
<span>      <span class='c'># Applies to the bars</span></span>
<span>      borderwidth <span class='o'>=</span> <span class='m'>0.5</span>,</span>
<span>      bordertype <span class='o'>=</span> <span class='s'>"dashed"</span>,</span>
<span>      <span class='c'># Applies to the line</span></span>
<span>      linewidth <span class='o'>=</span> <span class='m'>4</span>,</span>
<span>      linetype <span class='o'>=</span> <span class='s'>"solid"</span></span>
<span>    <span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/layer_borderline-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h5 id="points-and-text">Points and text
</h5>
<p>The four remaining settings pertains to text and points. Respectively <code>fontsize</code> and <code>pointsize</code> control the size. <code>pointshape</code> and <code>family</code> control the shape and font family.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mtcars</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nv'>disp</span>, label <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/colnames.html'>rownames</a></span><span class='o'>(</span><span class='nv'>mtcars</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_text.html'>geom_label</a></span><span class='o'>(</span>nudge_x <span class='o'>=</span> <span class='m'>0.25</span>, hjust <span class='o'>=</span> <span class='m'>0</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    geom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span></span>
<span>      <span class='c'># Point settings</span></span>
<span>      pointsize <span class='o'>=</span> <span class='m'>8</span>,</span>
<span>      pointshape <span class='o'>=</span> <span class='s'>"←"</span>,</span>
<span>      </span>
<span>      <span class='c'># Text settings</span></span>
<span>      fontsize <span class='o'>=</span> <span class='m'>8</span>,</span>
<span>      family <span class='o'>=</span> <span class='s'>"Ink Free"</span></span>
<span>    <span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/layer_pointtext-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h5 id="micro-managing-layers">Micro-managing layers
</h5>
<p>Aside from globally affecting every layer via <code>theme(geom)</code>, you can also fine-tune the appearance of individual geometry types. Whereas we envision <code>element_geom(ink, paper)</code> as the global &lsquo;aura&rsquo; of a plot, the <code>element_geom(colour, fill)</code> is intended for tailoring specific geom types. We can add theme elements for specific geoms by replacing the snake_case layer function name by dot.case argument name. This works for layers that have an equivalent Geom ggproto class, which is the case for all geoms in ggplot2.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>class</span>, <span class='nv'>displ</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span>outliers <span class='o'>=</span> <span class='kc'>FALSE</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_jitter.html'>geom_jitter</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    geom.point   <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"dodgerblue"</span><span class='o'>)</span>,</span>
<span>    geom.boxplot <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"orchid"</span>, colour <span class='o'>=</span> <span class='s'>"turquoise"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/layer_granular-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h5 id="macro-managing-layers">Macro-managing layers
</h5>
<p>There are now various options for how to change non-data parts of layers, and it can be a bit tricky to determine when you should use what option. Essentially, this is a 2-by-2 table covering the option of which layers to set (single, all) and when it is used (local, global).</p>
<ul>
<li>
<p>If you want to change the look of a single layer in a single plot, you can just use the static (unmapped) aesthetics in a layer. For example: <code>geom_point(colour = &quot;blue&quot;)</code>.</p>
</li>
<li>
<p>If you want to change the look of a single layer in all plots, you can use <a href="https://ggplot2.tidyverse.org/reference/get_theme.html" target="_blank" rel="noopener"><code>update_theme()</code></a>
 to globally set a new (micro-managed) option. For example: <code>update_theme(geom.point = element_geom(colour = &quot;blue&quot;))</code>. You can also use the <code>element_geom(ink, paper)</code> settings but for single layers it may be more direct to use <code>element_geom(colour, fill)</code> instead. We no longer recommend, and even discourage (!) using <a href="https://ggplot2.tidyverse.org/reference/update_defaults.html" target="_blank" rel="noopener"><code>update_geom_defaults()</code></a>
 for this purpose.</p>
</li>
<li>
<p>If you want to change the look of all layers in a single plot, you can use the <code>theme(geom)</code> argument and add it to a plot. For example: <code>theme(geom = element_geom(ink = &quot;blue&quot;))</code>.</p>
</li>
<li>
<p>If you want to change the look of all layers in all plots, you can also use <a href="https://ggplot2.tidyverse.org/reference/get_theme.html" target="_blank" rel="noopener"><code>update_theme()</code></a>
 to globally set the <code>geom</code> option. For example: <code>update_theme(geom = element_geom(ink = &quot;blue&quot;))</code>. Alternatively, you can also coordinate the entire theme by using for example <code>set_theme(theme_gray(ink = &quot;blue&quot;))</code>.</p>
</li>
</ul>
<h5 id="access-from-layers">Access from layers
</h5>
<p>Up to now, we&rsquo;ve mostly described how to use the theme to instruct layers, but we can also instruct layers to lookup things from the theme too. Using the <a href="https://ggplot2.tidyverse.org/reference/aes_eval.html" target="_blank" rel="noopener"><code>from_theme()</code></a>
 function in aesthetics allows you to use expressions with the variables present in <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_geom()</code></a>
. For example, if you want to use a darker variant of the <code>accent</code> colour instead of <code>ink</code>, you might want to write your mapping as follows:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes_eval.html'>from_theme</a></span><span class='o'>(</span><span class='nf'>scales</span><span class='nf'>::</span><span class='nf'><a href='https://scales.r-lib.org/reference/colour_manip.html'>col_darker</a></span><span class='o'>(</span><span class='nv'>accent</span>, <span class='m'>20</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/layer_aesthetic-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h4 id="palettes">Palettes
</h4>
<p>In addition to controlling the default aesthetics from the theme, you can also control the default palettes from the theme. The palette theme settings all follow the following pattern, separated by dots: <code>palette</code>, aesthetic, type. The <code>type</code> can be either <code>continuous</code> or <code>discrete</code>. If you&rsquo;re using the default binned scale, it takes the continuous palette. For example, if we want to change the default <code>shape</code> and <code>colour</code> palettes, we can declare that as follows:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>  palette.shape.discrete <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"plus"</span>, <span class='s'>"triangle"</span>, <span class='s'>"diamond"</span><span class='o'>)</span>,</span>
<span>  palette.colour.continuous <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"maroon"</span>, <span class='s'>"hotpink"</span>, <span class='s'>"white"</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/palettes-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>The values of these palette theme elements are passed down to <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>scales::as_discrete_pal()</code></a>
 and <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>scales::as_continuous_pal()</code></a>
 for discrete and continuous scales respectively.</p>
<h3 id="theme-elements-in-extensions">Theme elements in extensions
</h3>
<p>Aside from extensions providing whole, complete themes, extensions may also define new theme elements. You can sometimes see these in facets, coords or guide extensions. With these wide use-cases, we cannot really describe these as much as just acknowledge they exist. For example, the ggforce package has a zoom element that controls the appearance of zooming indicators.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'>ggforce</span><span class='nf'>::</span><span class='nf'><a href='https://ggforce.data-imaginist.com/reference/facet_zoom.html'>facet_zoom</a></span><span class='o'>(</span>ylim <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>20</span>, <span class='m'>30</span><span class='o'>)</span>, xlim <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>3</span>, <span class='m'>4</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>zoom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span>, linewidth <span class='o'>=</span> <span class='m'>0.2</span>, fill <span class='o'>=</span> <span class='kc'>NA</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/extension_elements-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>If you are writing your own extension and need to compute a bespoke element from the theme, you can use <a href="https://ggplot2.tidyverse.org/reference/register_theme_elements.html" target="_blank" rel="noopener"><code>register_theme_elements()</code></a>
 to ensure ggplot2 knows about your element and can use it in <a href="https://ggplot2.tidyverse.org/reference/calc_element.html" target="_blank" rel="noopener"><code>calc_element()</code></a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># A custom element comes up empty</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/calc_element.html'>calc_element</a></span><span class='o'>(</span><span class='s'>"my_element"</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/complete_theme.html'>complete_theme</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; NULL</span></span>
<span></span><span></span>
<span><span class='c'># Register element</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/register_theme_elements.html'>register_theme_elements</a></span><span class='o'>(</span></span>
<span>  my_element <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span><span class='o'>)</span>,</span>
<span>  element_tree <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='o'>(</span></span>
<span>    my_element <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/register_theme_elements.html'>el_def</a></span><span class='o'>(</span></span>
<span>      class <span class='o'>=</span> <span class='s'>"element_rect"</span>, <span class='c'># Must be a rect element</span></span>
<span>      inherit <span class='o'>=</span> <span class='s'>"rect"</span> <span class='c'># Get settings from theme(rect)</span></span>
<span>    <span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='o'>)</span></span>
<span></span>
<span><span class='c'># Now custom element can be computed</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/calc_element.html'>calc_element</a></span><span class='o'>(</span><span class='s'>"my_element"</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/complete_theme.html'>complete_theme</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; &lt;ggplot2::element_rect&gt;</span></span>
<span><span class='c'>#&gt;  @ fill         : chr "white"</span></span>
<span><span class='c'>#&gt;  @ colour       : chr "black"</span></span>
<span><span class='c'>#&gt;  @ linewidth    : num 0.5</span></span>
<span><span class='c'>#&gt;  @ linetype     : num 1</span></span>
<span><span class='c'>#&gt;  @ linejoin     : chr "round"</span></span>
<span><span class='c'>#&gt;  @ inherit.blank: logi TRUE</span></span>
<span></span></code></pre>
</div>
<h2 id="writing-your-own-theme">Writing your own theme
</h2>
<p>When you are writing your own theme there are a few things to keep in mind. A guiding principle is to write your themes such that it is robust to upstream changes. Not only can ggplot2 add, deprecate or reroute elements, also theme elements used by extensions should be accommodated.</p>
<h4 id="1-use-a-function">1. Use a function
</h4>
<p>First, this principle means that you should write your theme as a function. Writing your theme as a function ensures it can be rebuild. This is opposed to assigning a theme object to a variable in your package&rsquo;s namespace &mdash;or heaven forbid&mdash; save it as a file, If you assign your theme object to a variable in your namespace, the object will get compiled into your code and can cause build time warnings or errors if an element function or argument get updated.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_theme</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span> <span class='o'>&#123;</span><span class='o'>&#125;</span></span></code></pre>
</div>
<h4 id="2-use-a-base-theme">2. Use a base theme
</h4>
<p>Secondly, it is good practise to start your own theme as a function that calls a complete theme function as its base. It ensures that when ggplot2 adds new elements that belong in complete themes, your theme also remains complete.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_theme</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span></code></pre>
</div>
<h3 id="3-use-theme-to-add-elements">3. Use <code>theme()</code> to add elements
</h3>
<p>Third, you should use <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 to add new elements to the base. While it is technically possible to assign additional elements by sub-assignment (<code>$&lt;-</code>), we strong advice against this. Using <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 ensures that any deprecated arguments are redirected to an appropriate place.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Do *not* do the following!</span></span>
<span><span class='nv'>my_fragile_theme</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nv'>t</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span></span>
<span>  <span class='nv'>t</span><span class='o'>$</span><span class='nv'>legend.text</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span><span class='o'>)</span> <span class='c'># BAD</span></span>
<span>  <span class='nv'>t</span></span>
<span><span class='o'>&#125;</span></span></code></pre>
</div>
<p>You can use <code>+ theme()</code> or <code>%+replace% theme()</code>, where <code>+</code> merges elements and <code>%+replace%</code> replaces elements by completely removing old settings. If you use <code>%+replace%</code> for a root element, like <code>text</code> or <code>line</code>, you should take care that every property has non-null values.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_theme</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span> <span class='o'><a href='https://ggplot2.tidyverse.org/reference/get_theme.html'>%+replace%</a></span></span>
<span>    <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>      <span class='c'># Because we're replacing, we should fully define root elements</span></span>
<span>      text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span></span>
<span>        family <span class='o'>=</span> <span class='s'>""</span>, face <span class='o'>=</span> <span class='s'>"plain"</span>, colour <span class='o'>=</span> <span class='s'>"red"</span>, size <span class='o'>=</span> <span class='m'>11</span>, </span>
<span>        hjust <span class='o'>=</span> <span class='m'>0.5</span>, vjust <span class='o'>=</span> <span class='m'>0.5</span>, angle <span class='o'>=</span> <span class='m'>0</span>, lineheight <span class='o'>=</span> <span class='m'>1</span>, margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span>      <span class='o'>)</span>,</span>
<span>      <span class='c'># Non-root elements can be partially defined</span></span>
<span>      legend.text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"blue"</span><span class='o'>)</span></span>
<span>    <span class='o'>)</span> <span class='o'>+</span></span>
<span>    <span class='c'># Here we're updating the root line element with `+`, instead of replacing it</span></span>
<span>    <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>line <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>linetype <span class='o'>=</span> <span class='s'>"dotted"</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'>my_theme</span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/theme_adding_parts-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h4 id="4-caching-themes">4. Caching themes
</h4>
<p>We mentioned in 1. that you shouldn&rsquo;t assign a theme object to a variable in your namespace. However, you may want to reuse a theme without having to reconstruct it every time because you may never need to change arguments in your package. The solution we recommend for this use case, is to cache your theme when your package is loaded. It ensures that we observe all the formalities of building a theme, with all the protections this offers, but we need to do this only once per session.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Create a variable for your future theme</span></span>
<span><span class='nv'>cached_theme</span> <span class='o'>&lt;-</span> <span class='kc'>NULL</span></span>
<span></span>
<span><span class='c'># In your .onLoad function, construct the theme</span></span>
<span><span class='nv'>.onLoad</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>libname</span>, <span class='nv'>pkgname</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nv'>cached_theme</span> <span class='o'>&lt;&lt;-</span> <span class='nf'>my_theme</span><span class='o'>(</span><span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='c'># In your package's functions, you can now use the cached theme</span></span>
<span><span class='nv'>my_plotting_function</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>displ</span>, <span class='nv'>hwy</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>    <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>    <span class='nv'>cached_theme</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='c'># Simulate loading</span></span>
<span><span class='nf'>.onLoad</span><span class='o'>(</span><span class='o'>)</span></span>
<span></span>
<span><span class='c'># Works!</span></span>
<span><span class='nf'>my_plotting_function</span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/theme_caching-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="tips-and-tricks">Tips and tricks
</h2>
<h3 id="global-theme">Global theme
</h3>
<p>Are you also used to writing entire booklets of theme settings at every plot? Do your fingers tire of typing <code>panel.background = element_blank()</code> dozens of times in a script? Worry no more! Set your theme settings to permanent today by using the one-time offer of <a href="https://ggplot2.tidyverse.org/reference/get_theme.html" target="_blank" rel="noopener"><code>set_theme()</code></a>
!</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_theme</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>...</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>    <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>      panel.background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span>,</span>
<span>      panel.grid <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"grey95"</span><span class='o'>)</span>,</span>
<span>      palette.colour.continuous <span class='o'>=</span> <span class='s'>"viridis"</span></span>
<span>    <span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/get_theme.html'>set_theme</a></span><span class='o'>(</span><span class='nf'>my_theme</span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='c'># Global goodness galore!</span></span>
<span><span class='nv'>p</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/theme_set-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>To undo any globally set theme, you can use <a href="https://ggplot2.tidyverse.org/reference/register_theme_elements.html" target="_blank" rel="noopener"><code>reset_theme_settings()</code></a>
.</p>
<h3 id="fonts">Fonts
</h3>
<p>Setting the typography of your plots is important and discussed more thoroughly in <a href="https://www.tidyverse.org/blog/2025/05/fonts-in-r/" target="_blank" rel="noopener">this blog post</a>
. Here we&rsquo;re simply giving the suggestion to use the <a href="https://systemfonts.r-lib.org/reference/require_font.html" target="_blank" rel="noopener"><code>systemfonts::require_font()</code></a>
 when you are writing theme functions that include special fonts. It will not cover font behaviour for every graphics device, but it will for devices that use <a href="https://systemfonts.r-lib.org/" target="_blank" rel="noopener">systemfonts</a>
 for finding fonts, like <a href="https://ragg.r-lib.org/" target="_blank" rel="noopener">ragg</a>
 and <a href="https://svglite.r-lib.org/" target="_blank" rel="noopener">svglite</a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_theme</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>header_family</span> <span class='o'>=</span> <span class='s'>"Impact"</span>, <span class='nv'>...</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'>systemfonts</span><span class='nf'>::</span><span class='nf'><a href='https://systemfonts.r-lib.org/reference/require_font.html'>require_font</a></span><span class='o'>(</span><span class='nv'>header_family</span><span class='o'>)</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span>header_family <span class='o'>=</span> <span class='nv'>header_family</span>, <span class='nv'>...</span><span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'>my_theme</span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/fonts-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="bundling-theme-settings">Bundling theme settings
</h3>
<p>Not every theme needs to be a complete theme. You can write partial themes that bundle together related settings to achieve an effect you want. For example, here are some settings that left-aligns the title and legend at the top of a plot.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>upper_legend</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    plot.title.position <span class='o'>=</span> <span class='s'>"plot"</span>,</span>
<span>    legend.location <span class='o'>=</span> <span class='s'>"plot"</span>,</span>
<span>    legend.position <span class='o'>=</span> <span class='s'>"top"</span>,</span>
<span>    legend.justification.top <span class='o'>=</span> <span class='s'>"left"</span>,</span>
<span>    legend.title.position <span class='o'>=</span> <span class='s'>"top"</span>,</span>
<span>    legend.margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_part</a></span><span class='o'>(</span>l <span class='o'>=</span> <span class='m'>0</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='kc'>NULL</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'>upper_legend</span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/part_theme_upper_legend-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Another example for bottom placement of colour bars:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>bottom_colourbar</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_legend</a></span><span class='o'>(</span></span>
<span>    position <span class='o'>=</span> <span class='s'>"bottom"</span>,</span>
<span>    title.position <span class='o'>=</span> <span class='s'>"top"</span>,</span>
<span>    justification.bottom <span class='o'>=</span> <span class='s'>"left"</span>,</span>
<span>    <span class='c'># Stretch bar across width of panels</span></span>
<span>    key.width <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>1</span>, <span class='s'>"null"</span><span class='o'>)</span>, </span>
<span>    margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_part</a></span><span class='o'>(</span>l <span class='o'>=</span> <span class='m'>0</span>, r <span class='o'>=</span> <span class='m'>0</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>shape <span class='o'>=</span> <span class='kc'>NULL</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'>bottom_colourbar</span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/part_theme_bottom_colourbar-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>If you don&rsquo;t mind venturing outside the grammar for a brisk stroll, you can also bundle theme settings together with other components. For example, in a bar chart you may wish to suppress vertical grid lines and not expand the y-axis at the bottom.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>barchart_settings</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='o'>(</span></span>
<span>    <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>panel.grid.major.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span>,</span>
<span>    <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/coord_cartesian.html'>coord_cartesian</a></span><span class='o'>(</span>expand <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span>bottom <span class='o'>=</span> <span class='kc'>FALSE</span><span class='o'>)</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>class</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_bar.html'>geom_bar</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'>barchart_settings</span><span class='o'>(</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/part_theme_barchart-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>The point here is not to make an exhaustive list of all useful bundles, it is to highlight that it possible to create reusable chunks of theme.</p>
<h3 id="pattern-rectangles">Pattern rectangles
</h3>
<p>Did you know that <code>element_rect(fill)</code> can be a grid pattern? You can use it to place images in the panel background, which can be neat for branding.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>pattern</span> <span class='o'>&lt;-</span> <span class='s'>"https://raw.githubusercontent.com/tidyverse/ggplot2/refs/heads/main/man/figures/logo.png"</span> <span class='o'>|&gt;</span> </span>
<span>  <span class='nf'>magick</span><span class='nf'>::</span><span class='nf'><a href='https://docs.ropensci.org/magick/reference/editing.html'>image_read</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'>grid</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/r/grid/grid.raster.html'>rasterGrob</a></span><span class='o'>(</span></span>
<span>    x <span class='o'>=</span> <span class='m'>0.8</span>, y <span class='o'>=</span> <span class='m'>0.8</span>,</span>
<span>    width <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>0.2</span>, <span class='s'>"snpc"</span><span class='o'>)</span>, </span>
<span>    height <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>0.23</span>, <span class='s'>"snpc"</span><span class='o'>)</span>, </span>
<span>  <span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'>grid</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/r/grid/patterns.html'>pattern</a></span><span class='o'>(</span>extend <span class='o'>=</span> <span class='s'>"none"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    panel.background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='nv'>pattern</span><span class='o'>)</span>,</span>
<span>    <span class='c'># legend.key inherits from panel background, so we tweak it</span></span>
<span>    legend.key <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span>,</span>
<span>    <span class='c'># make grid semitransparent to lay over pattern</span></span>
<span>    panel.grid <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='nf'><a href='https://scales.r-lib.org/reference/alpha.html'>alpha</a></span><span class='o'>(</span><span class='s'>"black"</span>, <span class='m'>0.05</span><span class='o'>)</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/figs/pattern_fill-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="finally">Finally
</h2>
<p>This article has been light on advice on how you should or should not use themes. Mostly, this is to encourage experimentation. Don&rsquo;t be afraid to put in a personal twist. Make mistakes. Discover why a theme does or doesn&rsquo;t work for a plot. If you cannot be bothered, there are <a href="https://exts.ggplot2.tidyverse.org/gallery/" target="_blank" rel="noopener">extension packages</a>
 that offer plenty of options. The <a href="https://github.com/rfordatascience/tidytuesday" target="_blank" rel="noopener">tidytuesday</a>
 project has spawned a rich source of varied plotting code, including themes people use. If you like a tidytuesday plot, find the source code and see how the sausage is made. Find whatever theme works for you and your plots.</p>
]]></description>
      <enclosure url="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-styling/thumbnail-wd.jpg" length="73858" type="image/jpeg" />
    </item>
    <item>
      <title>ggplot2 4.0.0</title>
      <link>https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/</link>
      <pubDate>Thu, 11 Sep 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/</guid>
      <dc:creator>Teun Van den Brand</dc:creator><description><![CDATA[<!--
TODO:
* [x] Look over / edit the post's title in the yaml
* [x] Edit (or delete) the description; note this appears in the Twitter card
* [x] Pick category and tags (see existing with [`hugodown::tidy_show_meta()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html))
* [x] Find photo & update yaml metadata
* [x] Create `thumbnail-sq.jpg`; height and width should be equal
* [x] Create `thumbnail-wd.jpg`; width should be >5x height
* [x] [`hugodown::use_tidy_thumbnails()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html)
* [x] Add intro sentence, e.g. the standard tagline for the package
* [x] [`usethis::use_tidy_thanks()`](https://usethis.r-lib.org/reference/use_tidy_thanks.html)
-->
<p>We&rsquo;re tickled pink to announce the release of <a href="https://ggplot2.tidyverse.org" target="_blank" rel="noopener">ggplot2</a>
 4.0.0. ggplot2 is a system for declaratively creating graphics, based on The Grammar of Graphics. You provide the data, tell ggplot2 how to map variables to aesthetics, what graphical primitives to use, and it takes care of the details.</p>
<p>The new version can be installed from CRAN using:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://rdrr.io/r/utils/install.packages.html'>install.packages</a></span><span class='o'>(</span><span class='s'>"ggplot2"</span><span class='o'>)</span></span></code></pre>
</div>
<p>This is a substantial release meriting a new major version, and contains a series of changes from a rewrite of the object oriented system from S3 to S7, large new features to smaller quality of life improvements and bugfixes. It is also the 18th anniversary of ggplot2 which is cause for celebration! In this blog post, we will highlight the most salient new features that come with this release. You can see a full list of changes in the <a href="https://ggplot2.tidyverse.org/news/index.html" target="_blank" rel="noopener">release notes</a>
</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='kr'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='o'>(</span><span class='nv'><a href='https://ggplot2.tidyverse.org'>ggplot2</a></span><span class='o'>)</span></span>
<span><span class='kr'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='o'>(</span><span class='nv'><a href='https://patchwork.data-imaginist.com'>patchwork</a></span><span class='o'>)</span></span></code></pre>
</div>
<h2 id="adopting-s7">Adopting S7
</h2>
<p>In ggplot2, we use major version increments to indicate that something at the core of the package has changed. In this release, we have replaced many of ggplot2&rsquo;s S3 objects with S7 objects. Like S3 and S4, S7 is also an object oriented system that uses classes, generics and methods. S7 is a newer system that aims to strike a good balance between the flexibility of S3 and formality of S4.</p>
<p>Mostly, this change shouldn&rsquo;t be very noticeable when you&rsquo;re just using ggplot2 for building regular plots. At best, you may notice that we&rsquo;re more strictly enforcing types for certain arguments. For example, most ludicrous input is now rejected right away. This is due to how properties in S7 work, which get validated when a new object is instantiated.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>hjust <span class='o'>=</span> <span class='s'>"foo"</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; Error: &lt;ggplot2::element_text&gt; object properties are invalid:</span></span>
<span><span class='c'>#&gt; - @hjust must be &lt;NULL&gt;, &lt;integer&gt;, or &lt;double&gt;, not &lt;character&gt;</span></span>
<span></span></code></pre>
</div>
<p>However, it may require some adaptation on your end if you use ggplot2&rsquo;s innards in unusual ways. For extension builders, a major benefit of using S7 is that one can now use double dispatch. This is most important for the <a href="https://ggplot2.tidyverse.org/reference/update_ggplot.html" target="_blank" rel="noopener"><code>update_ggplot()</code></a>
 function (the successor of <a href="https://ggplot2.tidyverse.org/reference/update_ggplot.html" target="_blank" rel="noopener"><code>ggplot_add()</code></a>
), which determines what happens when you <code>+</code> an object to a plot. Now with S7, you can control what happens not only for right-hand side objects (which is how it used to work in S3), but also for the left-hand side objects.</p>
<p>We have put various pieces of backwards compatibility in to not break many packages that assumed the S3 structures of ggplot2. For example, we still return the data property with <code>ggplot()$data</code>, whereas the S7 way of accessing this should be <code>ggplot()@data</code>. Expect these to be phased out over time in favour of S7. We are preparing another blog post to help migrating from S3 to S7 for ggplot2 related packages.</p>
<h2 id="theme-improvements">Theme improvements
</h2>
<p>Themes in ggplot2 have long served the role of capturing any non-data aspects of styling plots. We have come to realise that the default look of layers, from what the default shape of points is to what the default colour palette is, are also not truly data-driven choices. The idea to put these defaults into themes has been around for a while and Dana Page Seidel did pioneering work implementing this as early as 2018. Now, years of waiting have come to fruition and we&rsquo;re proud to announce this new functionality.</p>
<h3 id="ink-and-paper">Ink and paper
</h3>
<p>The way layer defaults are now implemented differs slightly from typical aesthetics you know and love. Whereas layers aesthetics distinguish <code>colour</code> and <code>fill</code>, the theme defaults distinguish <code>ink</code> (foreground) and <code>paper</code> (background). A boxplot is unreadable without <code>colour</code>, but is perfectly interpretable without <code>fill</code>. In the boxplot case, the <code>ink</code> is thus clearly the <code>colour</code> whereas <code>paper</code> is the <code>fill</code>. In bar charts or histograms, the <a href="https://clauswilke.com/dataviz/proportional-ink.html" target="_blank" rel="noopener">proportional ink</a>
 principle prescribes that the <code>fill</code> aesthetic is considered foreground, and thus count as <code>ink</code>. To accommodate special cases, like lines in <a href="https://ggplot2.tidyverse.org/reference/geom_smooth.html" target="_blank" rel="noopener"><code>geom_smooth()</code></a>
 or <a href="https://ggplot2.tidyverse.org/reference/geom_contour.html" target="_blank" rel="noopener"><code>geom_contour()</code></a>
, we also added a third <code>accent</code> option. In short, the theme defaults have role-oriented settings that differ from the property-oriented settings in layers.</p>
<p>We&rsquo;ve added these three options to all built-in complete themes. Not only propagate these automatically to the layer defaults, they are also used to style additional theme components. You may notice that the panel background colour is a blend between <code>paper</code> and <code>ink</code>, which is now how many elements are parametrised in complete themes.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>displ</span>, <span class='nv'>hwy</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_smooth.html'>geom_smooth</a></span><span class='o'>(</span>method <span class='o'>=</span> <span class='s'>"lm"</span>, formula <span class='o'>=</span> <span class='nv'>y</span> <span class='o'>~</span> <span class='nv'>x</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggtheme.html'>theme_gray</a></span><span class='o'>(</span>paper <span class='o'>=</span> <span class='s'>"cornsilk"</span>, ink <span class='o'>=</span> <span class='s'>"navy"</span>, accent <span class='o'>=</span> <span class='s'>"tomato"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-3-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>If you&rsquo;re customising a theme, you can use the <code>theme(geom)</code> argument to set a collection of defaults. The new function <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_geom()</code></a>
 can be used to set these properties. Additionally, if you want a layer to read the property from this theme element, you can use the <a href="https://ggplot2.tidyverse.org/reference/aes_eval.html" target="_blank" rel="noopener"><code>from_theme()</code></a>
 function in the mapping to access these variables<sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup>.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>class</span>, <span class='nv'>displ</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes_eval.html'>from_theme</a></span><span class='o'>(</span><span class='nv'>accent</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    geom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span>accent <span class='o'>=</span> <span class='s'>"tomato"</span>, paper <span class='o'>=</span> <span class='s'>"cornsilk"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-4-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>A second conceptual difference in <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>element_geom()</code></a>
 pertains the the use of lines. In one role, like in a line graph, the line represents the data directly. In a second role, a line serves as separation between two units. For example, you can display countries as polygons and the line connecting the vertices separate out places that are inside a country versus places that are outside that country. These two roles are captured in a <code>linewidth</code> and <code>linetype</code> pair and a <code>borderwidth</code> and <code>bordertype</code> pair.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>faithful</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>waiting</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_histogram.html'>geom_histogram</a></span><span class='o'>(</span>bins <span class='o'>=</span> <span class='m'>30</span>, colour <span class='o'>=</span> <span class='s'>"black"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_histogram.html'>geom_freqpoly</a></span><span class='o'>(</span>bins <span class='o'>=</span> <span class='m'>30</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>geom <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_geom</a></span><span class='o'>(</span></span>
<span>    bordertype <span class='o'>=</span> <span class='s'>"dashed"</span>,</span>
<span>    borderwidth <span class='o'>=</span> <span class='m'>0.2</span>,</span>
<span>    linewidth <span class='o'>=</span> <span class='m'>2</span>,</span>
<span>    linetype <span class='o'>=</span> <span class='s'>"solid"</span></span>
<span>  <span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-5-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="scales-and-palettes">Scales and palettes
</h3>
<p>In addition to the defaults for layers, default palettes are now also encapsulated in the theme. The relevant theme settings have the pattern <code>palette.{aesthetic}.{type}</code>, where <code>type</code> can be either discrete or continuous. This allows you to coordinate your colour palettes with the rest of the theme.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>displ</span>, <span class='nv'>hwy</span>, shape <span class='o'>=</span> <span class='nv'>drv</span>, colour <span class='o'>=</span> <span class='nv'>cty</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>    palette.colour.continuous <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"chartreuse"</span>, <span class='s'>"forestgreen"</span><span class='o'>)</span>,</span>
<span>    palette.shape.discrete <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"triangle"</span>, <span class='s'>"triangle open"</span>, <span class='s'>"triangle down open"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-6-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>The way this works is that all defaults scales now have <code>palette = NULL</code> as their default. During plot building, any <code>NULL</code> palettes are replaced by those declared in the theme.</p>
<h3 id="shortcuts">Shortcuts
</h3>
<p>We like to introduce a new family of short cuts. Looking at code in the wild, we&rsquo;ve come to realise that theme declarations are very often chaotic. The <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 functions has lots of arguments, long argument names (hello there, <code>axis.minor.ticks.length.x.bottom</code>!) and very little structure. To make themes a little bit more digestible, we&rsquo;ve created the following helper functions:</p>
<ul>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis()</code></a>

<ul>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_x()</code></a>

<ul>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_bottom()</code></a>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_top()</code></a>
</li>
</ul>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_y()</code></a>

<ul>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_left()</code></a>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_axis_right()</code></a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_legend()</code></a>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_panel()</code></a>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_plot()</code></a>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/subtheme.html" target="_blank" rel="noopener"><code>theme_sub_strip()</code></a>
</li>
</ul>
<p>These helper functions pass on their arguments to <a href="https://ggplot2.tidyverse.org/reference/theme.html" target="_blank" rel="noopener"><code>theme()</code></a>
 after they&rsquo;ve prepended a relevant prefix. For example, using <code>theme_sub_legend(justification)</code> will translate to <code>theme(legend.justification)</code>. When you have &gt;1 theme element to change in a cluster of settings, it quickly becomes less typing to enlist the relevant shortcut. As a bonus, your theme code will tend to self-organise and become somewhat more readable.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Tired, verbose, chaotic</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>  panel.widths <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>  axis.ticks.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span>,</span>
<span>  axis.ticks.length.x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>  panel.background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='kc'>NA</span><span class='o'>)</span>,</span>
<span>  panel.spacing.x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span>
<span></span>
<span><span class='c'># Wired, terse, orderly</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_x</a></span><span class='o'>(</span></span>
<span>  ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span>,</span>
<span>  ticks.length <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span></span>
<span><span class='o'>)</span> <span class='o'>+</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_panel</a></span><span class='o'>(</span></span>
<span>  widths <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>  spacing.x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>,</span>
<span>  background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='kc'>NA</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span></code></pre>
</div>
<p>In addition to shortcuts for clusters of theme elements, we&rsquo;ve also added a few variants to declare margins.</p>
<ul>
<li><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>margin_auto()</code></a>
 sets the margins in a CSS-like fashion similar to the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin" target="_blank" rel="noopener"><code>margin</code></a>
 and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding" target="_blank" rel="noopener"><code>padding</code></a>
 property.
<ul>
<li><code>margin_auto(1)</code> sets all four sides at once. It expands to <code>margin(t = 1, r = 1, b = 1, l = 1)</code>.</li>
<li><code>margin_auto(1, 2)</code> sets horizontal and vertical sides. It expands to <code>margin(t = 1, r = 2, b = 1, l = 2)</code>.</li>
<li><code>margin_auto(1, 2, 3)</code> expands to <code>margin(t = 1, r = 2, b = 3, l = 2)</code>.</li>
</ul>
</li>
<li><a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>margin_part()</code></a>
 has <code>NA</code> units as default, which will get replaced when the theme gets resolved. It roughly equates to &lsquo;set some of the sides, keep others as they are&rsquo;.</li>
</ul>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/merge_element.html'>merge_element</a></span><span class='o'>(</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_part</a></span><span class='o'>(</span>r <span class='o'>=</span> <span class='m'>20</span><span class='o'>)</span>, <span class='c'># child</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_auto</a></span><span class='o'>(</span><span class='m'>10</span><span class='o'>)</span> <span class='c'># parent</span></span>
<span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] 10points 20points 10points 10points</span></span>
<span></span></code></pre>
</div>
<h3 id="new-settings">New settings
</h3>
<p>To coordinate (non-text) margins and spacings in a theme, we&rsquo;ve introduced <code>spacing</code> and <code>margins</code> as new root elements in the theme. Other spacings and margins at the leaf elements inherit from (scale with) these root elements. To facilitate the different spacings in ggplot2, unit elements can now use <a href="https://ggplot2.tidyverse.org/reference/element.html" target="_blank" rel="noopener"><code>rel()</code></a>
 to modify the inherited value. For example the default <code>axis.ticks.length</code> is now <code>rel(0.5)</code>, making the y-axis ticks 0.5 cm in the plot below. If we set the <code>axis.ticks.length.x</code> to <code>rel(2)</code>, it will double the value coming from <code>axis.ticks.length</code>, not double the value of <code>spacing</code>.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>penguins</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_dep</span>, <span class='nv'>bill_len</span>, colour <span class='o'>=</span> <span class='nv'>species</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>  spacing <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>1</span>, <span class='s'>"cm"</span><span class='o'>)</span>, </span>
<span>  margins <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin_auto</a></span><span class='o'>(</span><span class='m'>1</span>, unit <span class='o'>=</span> <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>  axis.ticks.length.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>rel</a></span><span class='o'>(</span><span class='m'>2</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-9-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>We also made it easier to set plot sizes. Using the <code>panel.widths</code> and <code>panel.heights</code> arguments, you can control the sizes of the panels. This mechanism is distinct from using <code>ggsave(width, height)</code>, where the whole plot, including annotations such as axes and titles is included. There are two ways to use these arguments:</p>
<ul>
<li>Give a vector of units: each one will be applied to a panel separately and the vector will be recycled to fit the number of panels.</li>
<li>Give a single unit: which sets the total panel area (including panel spacings and inner axes) to that size.</li>
</ul>
<p>Naturally, if you only have a single panel, these approaches are identical. If you have multiple panels and you want to set individual panels all to the same size (as opposed to the total size), you can take advantage of the recycling and use a length 2 unit vector.</p>
<p>In the plots below, you can notice that the panels span a different width despite the units adding up to the same amount (9 cm). This is because the &lsquo;single unit&rsquo; approach also includes the panel spacings, but not the &lsquo;separate units&rsquo; approach.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>&lt;-</span> <span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_grid.html'>facet_grid</a></span><span class='o'>(</span><span class='o'>~</span> <span class='nv'>island</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='s'>"Separate units (per panel)"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Using the new shortcut for panels</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_panel</a></span><span class='o'>(</span></span>
<span>    widths <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>2</span>, <span class='m'>3</span>, <span class='m'>4</span><span class='o'>)</span>, <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>    heights <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>3</span>, <span class='s'>"cm"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p2</span> <span class='o'>&lt;-</span> <span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_grid.html'>facet_grid</a></span><span class='o'>(</span><span class='o'>~</span> <span class='nv'>island</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='s'>"Single unit (all panels)"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_panel</a></span><span class='o'>(</span></span>
<span>    widths <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>9</span>, <span class='s'>"cm"</span><span class='o'>)</span>,</span>
<span>    heights <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>3</span>, <span class='s'>"cm"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p1</span> <span class='o'>/</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-10-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="labels">Labels
</h2>
<p>We have added new ways that a plot retrieves labels for your variables. It is an informal convention in several packages including gt, Hmisc, labelled and others to use the &rsquo;label&rsquo; attribute to store human readable labels for vectors. Now ggplot2 joins this convention and uses the &rsquo;label&rsquo; attribute as the default label for a variable if present.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># The penguins dataset was incorporated into base R 4.5</span></span>
<span><span class='nv'>df</span> <span class='o'>&lt;-</span> <span class='nv'>penguins</span></span>
<span></span>
<span><span class='c'># Manually set label attributes.</span></span>
<span><span class='c'># Other packages may offer better tooling than this.</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/attr.html'>attr</a></span><span class='o'>(</span><span class='nv'>df</span><span class='o'>$</span><span class='nv'>species</span>, <span class='s'>"label"</span><span class='o'>)</span> <span class='o'>&lt;-</span> <span class='s'>"Penguin Species"</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/attr.html'>attr</a></span><span class='o'>(</span><span class='nv'>df</span><span class='o'>$</span><span class='nv'>bill_dep</span>, <span class='s'>"label"</span><span class='o'>)</span> <span class='o'>&lt;-</span> <span class='s'>"Bill depth (mm)"</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/attr.html'>attr</a></span><span class='o'>(</span><span class='nv'>df</span><span class='o'>$</span><span class='nv'>bill_len</span>, <span class='s'>"label"</span><span class='o'>)</span> <span class='o'>&lt;-</span> <span class='s'>"Bill length (mm)"</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/attr.html'>attr</a></span><span class='o'>(</span><span class='nv'>df</span><span class='o'>$</span><span class='nv'>body_mass</span>, <span class='s'>"label"</span><span class='o'>)</span> <span class='o'>&lt;-</span> <span class='s'>"Body mass (g)"</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>df</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_dep</span>, <span class='nv'>bill_len</span>, colour <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/MathFun.html'>sqrt</a></span><span class='o'>(</span><span class='nv'>body_mass</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-11-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>It has also been entrenched in some workflows to use a &lsquo;data dictionary&rsquo; or codebook. For labelling purposes these dictionaries often contain column metadata that include labels or descriptions for variables (columns) in the dataset. To make it easier to work with column labels, we added the <code>labs(dictionary)</code> argument. It takes a named vector of labels, that can easily be generated from a data dictionary by <a href="https://rdrr.io/r/stats/setNames.html" target="_blank" rel="noopener"><code>setNames()</code></a>
 or <a href="https://dplyr.tidyverse.org/reference/pull.html" target="_blank" rel="noopener"><code>dplyr::pull()</code></a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>dict</span> <span class='o'>&lt;-</span> <span class='nf'>tibble</span><span class='nf'>::</span><span class='nf'><a href='https://tibble.tidyverse.org/reference/tribble.html'>tribble</a></span><span class='o'>(</span></span>
<span>  <span class='o'>~</span><span class='nv'>var</span>,    <span class='o'>~</span><span class='nv'>label</span>,</span>
<span>  <span class='s'>"species"</span>,  <span class='s'>"Penguin Species"</span>,</span>
<span>  <span class='s'>"bill_dep"</span>, <span class='s'>"Bill depth (mm)"</span>,</span>
<span>  <span class='s'>"bill_len"</span>, <span class='s'>"Bill length (mm)"</span>,</span>
<span>  <span class='s'>"body_mass"</span>, <span class='s'>"Body mass (g)"</span></span>
<span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>penguins</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_dep</span>, <span class='nv'>bill_len</span>, colour <span class='o'>=</span> <span class='nv'>body_mass</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Or:</span></span>
<span>  <span class='c'># labs(dictionary = dplyr::pull(dict, label, name = var))</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>dictionary <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/stats/setNames.html'>setNames</a></span><span class='o'>(</span><span class='nv'>dict</span><span class='o'>$</span><span class='nv'>label</span>, <span class='nv'>dict</span><span class='o'>$</span><span class='nv'>var</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-12-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>One benefit to the label attributes or data dictionary approaches is that it is linked to your variables, not aesthetics. This means you can easily rearrange your aesthetics for a different plot, without having to painstakingly reorient the labels towards the correct aesthetics.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/get_last_plot.html'>last_plot</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>body_mass</span>, <span class='nv'>bill_len</span>, colour <span class='o'>=</span> <span class='nv'>species</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-13-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>There are a few caveats to these label attributes and data dictionary approaches though:</p>
<ul>
<li>If the aesthetic is not a pure variable name the label is not used. You can see this in the <code>sqrt(body_mass)</code> in the first example, which does not use the &lsquo;Body mass (g)&rsquo; label. We assume when a variable is adjusted in this way, this would need to be reflected in the label itself. It would therefore be inappropriate to use the label of the unadjusted variable. Use of the <a href="https://ggplot2.tidyverse.org/articles/ggplot2-in-packages.html#using-aes-and-vars-in-a-package-function" target="_blank" rel="noopener"><code>.data</code>-pronoun</a>
 counts as a pure variable name for labelling purposes.</li>
<li>Some attributes are more stable than others, and it is not ggplot2&rsquo;s responsibility to babysit attributes. For example using <code>head(&lt;data.frame&gt;)</code> will typically drop attributes from atomic columns, whereas <code>head(&lt;tibble&gt;)</code> will not.</li>
</ul>
<p>In addition, we&rsquo;re also allowing to use functions in all the places you can declare labels. The <a href="https://ggplot2.tidyverse.org/reference/labs.html" target="_blank" rel="noopener"><code>labs()</code></a>
 function, scale names and guide titles now accept functions that take in the labels generated by the lower hierarchies and return amended labels. It should be spelled out that the hierarchy from lowest priority to highest priority is the following:</p>
<ol>
<li>The expression given in <a href="https://ggplot2.tidyverse.org/reference/aes.html" target="_blank" rel="noopener"><code>aes()</code></a>
.</li>
<li>The entry in <code>labs(dictionary)</code>.</li>
<li>The label attribute of the column.</li>
<li>The entry in <code>labs(&lt;aesthetic&gt; = &lt;label&gt;)</code>.</li>
<li>The <code>scale_*(name)</code> argument.</li>
<li>The <code>guide_*(title)</code> argument.</li>
</ol>
<p>We can see this hierarchy in action in the plot below: the function in the axis guide transforms the input from the <a href="https://ggplot2.tidyverse.org/reference/labs.html" target="_blank" rel="noopener"><code>labs()</code></a>
 function.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>penguins</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_dep</span>, <span class='nv'>bill_len</span>, colour <span class='o'>=</span> <span class='nv'>species</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_colour_discrete.html'>scale_colour_discrete</a></span><span class='o'>(</span>name <span class='o'>=</span> <span class='nv'>toupper</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guide_axis.html'>guide_axis</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='nf'>tools</span><span class='nf'>::</span><span class='nv'><a href='https://rdrr.io/r/tools/toTitleCase.html'>toTitleCase</a></span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span></span>
<span>    y <span class='o'>=</span> \<span class='o'>(</span><span class='nv'>x</span><span class='o'>)</span> <span class='nf'><a href='https://rdrr.io/r/base/paste.html'>paste0</a></span><span class='o'>(</span><span class='nv'>x</span>, <span class='s'>" variable"</span><span class='o'>)</span>,</span>
<span>    x <span class='o'>=</span> <span class='s'>"the label for the x variable"</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-14-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>In addition to the <a href="https://ggplot2.tidyverse.org/reference/labs.html" target="_blank" rel="noopener"><code>labs()</code></a>
-labels, we also made labelling the levels of discrete scales easier. When the scale&rsquo;s <code>breaks</code> are named, the scale&rsquo;s labels will adopt the break&rsquo;s names by default. This already was the case in continuous scales but now discrete scales have parity. A nice benefit of specifying labels this way is that they are directly linked to the breaks, which prevents the common mistake of specifying the <code>labels</code> argument without also setting the <code>breaks</code> argument, which may accidentally mismatch labels.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>penguins</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_dep</span>, <span class='nv'>bill_len</span>, colour <span class='o'>=</span> <span class='nv'>species</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_colour_discrete.html'>scale_colour_discrete</a></span><span class='o'>(</span></span>
<span>    breaks <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span></span>
<span>      <span class='s'>"Pygoscelis adeliae"</span>     <span class='o'>=</span> <span class='s'>"Adelie"</span>,</span>
<span>      <span class='s'>"Pygoscelis papua"</span>       <span class='o'>=</span> <span class='s'>"Gentoo"</span>,</span>
<span>      <span class='s'>"Pygoscelis antarcticus"</span> <span class='o'>=</span> <span class='s'>"Chinstrap"</span></span>
<span>    <span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-15-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="discrete-scales">Discrete scales
</h2>
<p>In this release we have tried to improve the &lsquo;freedom&rsquo; afforded by discrete position scales. Previously, discrete values were always mapped to an integer sequence starting at 1 going up to the number of levels. Instead, we wanted to allow for different mappings that deviated from that pattern. While it is a bit foreign for position scales, ggplot2 already had a mechanism to assign alternate values to the levels of a scale: palettes! You can now use the <code>palette</code> argument like you would for non-position scales. It makes it easier to indicate any grouping structure along the axis, like separating the orange juice (OJ) groups from the vitamin C (VC) groups in the plot below.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>ToothGrowth</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/interaction.html'>interaction</a></span><span class='o'>(</span><span class='nv'>dose</span>, <span class='nv'>supp</span>, sep <span class='o'>=</span> <span class='s'>"\n"</span><span class='o'>)</span>, <span class='nv'>len</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_discrete.html'>scale_x_discrete</a></span><span class='o'>(</span></span>
<span>    palette <span class='o'>=</span> <span class='nf'>scales</span><span class='nf'>::</span><span class='nf'><a href='https://scales.r-lib.org/reference/pal_manual.html'>pal_manual</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>1</span><span class='o'>:</span><span class='m'>3</span>, <span class='m'>5</span><span class='o'>:</span><span class='m'>7</span><span class='o'>)</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-16-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>A second improvement we made to the placement of discrete levels is that we give greater control over the continuous limits. The continuous limits of a discrete scale used to be an implementation detail that kept track of any &lsquo;additional space&rsquo; layers were taking up, for example because they use a <code>width</code> parameter. Now, these can be declared directly, making it easier to synchronise limits across plots or even facets. In the plot below, we&rsquo;re using the <code>continuous.limits</code> argument to ensure that all the bars have the same width; regardless of how many levels the x scale has to accommodate.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>class</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_bar.html'>geom_bar</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_wrap.html'>facet_wrap</a></span><span class='o'>(</span><span class='o'>~</span> <span class='nv'>drv</span>, ncol <span class='o'>=</span> <span class='m'>1</span>, scales <span class='o'>=</span> <span class='s'>"free_x"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p2</span> <span class='o'>&lt;-</span> <span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_discrete.html'>scale_x_discrete</a></span><span class='o'>(</span>continuous.limits <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>1</span>, <span class='m'>5</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='o'>(</span><span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='s'>"Free limits"</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>|</span> </span>
<span><span class='o'>(</span><span class='nv'>p2</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='s'>"Fixed limits"</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-17-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Also absent from discrete scales was the ability to set minor breaks. Admittedly, they are less useful than minor breaks in continuous scales. In contrast to discrete (major) <code>breaks</code>, <code>minor_breaks</code> uses numeric input instead, allowing you to fine-tune placement without being bound by the scale&rsquo;s levels. With a few tweaks of the theme, you can conceivably use minor breaks to visually separate levels as an alternative to the centre-lines for major breaks.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>drv</span>, <span class='nv'>hwy</span>, colour <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/factor.html'>factor</a></span><span class='o'>(</span><span class='nv'>year</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>position <span class='o'>=</span> <span class='s'>"jitterdodge"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"none"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_discrete.html'>scale_x_discrete</a></span><span class='o'>(</span></span>
<span>    minor_breaks <span class='o'>=</span> <span class='nf'>scales</span><span class='nf'>::</span><span class='nf'><a href='https://scales.r-lib.org/reference/breaks_width.html'>breaks_width</a></span><span class='o'>(</span><span class='m'>1</span>, offset <span class='o'>=</span> <span class='m'>0.5</span><span class='o'>)</span>,</span>
<span>    <span class='c'># To show that the minor axis ticks take on these values</span></span>
<span>    guide <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guide_axis.html'>guide_axis</a></span><span class='o'>(</span>minor.ticks <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p2</span> <span class='o'>&lt;-</span> <span class='nv'>p1</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>panel.grid.major.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/subtheme.html'>theme_sub_axis_bottom</a></span><span class='o'>(</span>ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span>, minor.ticks <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_line</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p1</span> <span class='o'>|</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-18-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Discrete position scales now also have access to secondary axes. In contrast to continuous scales, discrete scales don&rsquo;t support transformations. So instead of <a href="https://ggplot2.tidyverse.org/reference/sec_axis.html" target="_blank" rel="noopener"><code>sec_axis()</code></a>
, it is recommended to use <a href="https://ggplot2.tidyverse.org/reference/sec_axis.html" target="_blank" rel="noopener"><code>dup_axis()</code></a>
. To allow for arbitrary positions for <code>dup_axis(breaks)</code>, these can take numeric values or one of the discrete levels. They are not truly useful to for showing two aligned datasets of different scales, but they can serve as annotations. For example, they can display some summary statistics about the groups.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>class</span>, <span class='nv'>cty</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_discrete.html'>scale_x_discrete</a></span><span class='o'>(</span></span>
<span>    sec.axis <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/sec_axis.html'>dup_axis</a></span><span class='o'>(</span></span>
<span>      name <span class='o'>=</span> <span class='s'>"Counts"</span>,</span>
<span>      <span class='c'># You can use numeric input for breaks</span></span>
<span>      breaks <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/seq.html'>seq_len</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/length.html'>length</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/unique.html'>unique</a></span><span class='o'>(</span><span class='nv'>mpg</span><span class='o'>$</span><span class='nv'>class</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span>,</span>
<span>      <span class='c'># Watch out for the order of `table()` and your levels!</span></span>
<span>      labels <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/paste.html'>paste0</a></span><span class='o'>(</span><span class='s'>"n = "</span>, <span class='nf'><a href='https://rdrr.io/r/base/table.html'>table</a></span><span class='o'>(</span><span class='nv'>mpg</span><span class='o'>$</span><span class='nv'>class</span><span class='o'>)</span><span class='o'>)</span></span>
<span>    <span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-19-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="position-aesthetics">Position aesthetics
</h2>
<p>Layers consist of three components: stats, geoms and positions. While stats and geoms have their own aesthetics, like <code>weight</code> or <code>linewidth</code>, the position adjustments did not. In this release, positions can also declare their own aesthetics. You can map data to these aesthetics like you would for geom or stat aesthetics.</p>
<p>In <a href="https://ggplot2.tidyverse.org/reference/position_nudge.html" target="_blank" rel="noopener"><code>position_nudge()</code></a>
 for example, we now have the <code>nudge_x</code> and <code>nudge_y</code> parameters as aesthetics. <sup id="fnref:2"><a href="#fn:2" class="footnote-ref" role="doc-noteref">2</a></sup> Two benefits are that we can now use expressions in <a href="https://ggplot2.tidyverse.org/reference/aes.html" target="_blank" rel="noopener"><code>aes()</code></a>
 to declare these and they are vectorised. We use that advantage in the plot below where we use <a href="https://rdrr.io/r/base/sign.html" target="_blank" rel="noopener"><code>sign()</code></a>
 in a divergent bar chart to determine the left-right direction of the nudge.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Taken from:</span></span>
<span><span class='c'># https://ourworldindata.org/grapher/share-electricity-coal?tab=table&amp;tableFilter=continents</span></span>
<span><span class='nv'>coal</span> <span class='o'>&lt;-</span> <span class='nf'>tibble</span><span class='nf'>::</span><span class='nf'><a href='https://tibble.tidyverse.org/reference/tribble.html'>tribble</a></span><span class='o'>(</span></span>
<span>  <span class='o'>~</span><span class='nv'>continent</span>,  <span class='o'>~</span><span class='nv'>pct_1985</span>, <span class='o'>~</span><span class='nv'>pct_2024</span>,</span>
<span>  <span class='s'>"Africa"</span>,        <span class='m'>53.87</span>, <span class='m'>24.68</span>,</span>
<span>  <span class='s'>"Asia"</span>,          <span class='m'>32.60</span>, <span class='m'>51.19</span>,</span>
<span>  <span class='s'>"Europe"</span>,        <span class='m'>32.84</span>, <span class='m'>12.91</span>,</span>
<span>  <span class='s'>"North America"</span>, <span class='m'>48.93</span>, <span class='m'>13.79</span>,</span>
<span>  <span class='s'>"South America"</span>,  <span class='m'>2.91</span>,  <span class='m'>3.31</span>,</span>
<span>  <span class='s'>"Oceania"</span>,       <span class='m'>58.75</span>, <span class='m'>39.26</span></span>
<span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'>dplyr</span><span class='nf'>::</span><span class='nf'><a href='https://dplyr.tidyverse.org/reference/mutate.html'>mutate</a></span><span class='o'>(</span>pp_difference <span class='o'>=</span> <span class='nv'>pct_2024</span> <span class='o'>-</span> <span class='nv'>pct_1985</span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>coal</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>pp_difference</span>, <span class='nv'>continent</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_bar.html'>geom_col</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_text.html'>geom_text</a></span><span class='o'>(</span></span>
<span>    <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>nudge_x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/sign.html'>sign</a></span><span class='o'>(</span><span class='nv'>pp_difference</span><span class='o'>)</span> <span class='o'>*</span> <span class='m'>3</span>, </span>
<span>        label <span class='o'>=</span> <span class='nv'>pp_difference</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>x <span class='o'>=</span> <span class='s'>"Change in electricity generated by coal (pp)"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-20-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>A second position adjustment that has gotten its own aesthetic is <a href="https://ggplot2.tidyverse.org/reference/position_dodge.html" target="_blank" rel="noopener"><code>position_dodge()</code></a>
. In the plot below, we see for sports where we do not have records for both &lsquo;sex = &ldquo;f&rdquo;&rsquo; and &lsquo;sex = &ldquo;m&rdquo;&rsquo; only one box is drawn just beneath the centre line. This is true for &lsquo;water polo&rsquo; where we have no records for &lsquo;f&rsquo;, but also netball and gymnastics where there are no records for &rsquo;m&rsquo;. For sports where there are records for both sexes, the &ldquo;f&rdquo; is depicted beneath the centre line and &ldquo;m&rdquo; is depicted above the centre line. Depending on your aesthetic sensibilities, this inconsistency can be a major pain.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>sports</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"water polo"</span>, <span class='s'>"swimming"</span>, <span class='s'>"gymnastics"</span>, <span class='s'>"field"</span>, <span class='s'>"netball"</span><span class='o'>)</span></span>
<span><span class='nv'>p</span> <span class='o'>&lt;-</span> <span class='nf'>ggridges</span><span class='nf'>::</span><span class='nv'><a href='https://wilkelab.org/ggridges/reference/Aus_athletes.html'>Aus_athletes</a></span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'>dplyr</span><span class='nf'>::</span><span class='nf'><a href='https://dplyr.tidyverse.org/reference/filter.html'>filter</a></span><span class='o'>(</span><span class='nv'>sport</span> <span class='o'><a href='https://rdrr.io/r/base/match.html'>%in%</a></span> <span class='nv'>sports</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>height</span>, <span class='nv'>sport</span>, fill <span class='o'>=</span> <span class='nv'>sex</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span>position <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/position_dodge.html'>position_dodge</a></span><span class='o'>(</span>preserve <span class='o'>=</span> <span class='s'>"single"</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-21-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>The origin of this inconsistency is that ggplot2 doesn&rsquo;t have an understanding of groups other than that <em>they exist</em>. It doesn&rsquo;t know that groups are formed by <code>fill</code> and what levels populate this aesthetic. To break ggplot2&rsquo;s ignorance, we now have the <code>order</code> aesthetic for <a href="https://ggplot2.tidyverse.org/reference/position_dodge.html" target="_blank" rel="noopener"><code>position_dodge()</code></a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>order <span class='o'>=</span> <span class='nv'>sex</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-22-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Using that aesthetic to the position adjustment soothes the soul by putting all the right groups in the right places.</p>
<h2 id="facets">Facets
</h2>
<h3 id="wrapping-directions">Wrapping directions
</h3>
<p>The <a href="https://ggplot2.tidyverse.org/reference/facet_wrap.html" target="_blank" rel="noopener"><code>facet_wrap()</code></a>
 function has had two arguments controlling the layout: <code>dir</code> which can be <code>&quot;h&quot;</code> or <code>&quot;v&quot;</code>, and <code>as.table</code> with can be <code>TRUE</code> or <code>FALSE</code>. Together, these gave a total of 4 layout options. Arguably there are 8 sensible options in total though, so we were missing out on the layout. To simplify having to juggle two arguments for 4 options, we&rsquo;re now just using one argument (<code>dir</code>) for 8 options. The new options are all two letter codes using combinations of <code>t</code> (top), <code>r</code> (right), <code>b</code> (bottom) and <code>l</code> (left). The combination will tell you where the first facet level will be. Both <code>br</code> and <code>rb</code> will start in the bottom-right with the first facet. Then the order will tell you about the filling direction, where starting with <code>b</code> will fill bottom-to-top and starting with <code>r</code> will fill right-to-left.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>displ</span>, <span class='nv'>hwy</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p1</span> <span class='o'>&lt;-</span> <span class='nv'>p</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_wrap.html'>facet_wrap</a></span><span class='o'>(</span><span class='o'>~</span> <span class='nf'>vctrs</span><span class='nf'>::</span><span class='nf'><a href='https://vctrs.r-lib.org/reference/vec_group.html'>vec_group_id</a></span><span class='o'>(</span><span class='nv'>class</span><span class='o'>)</span>, dir <span class='o'>=</span> <span class='s'>"br"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='s'>"dir = 'br'"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p2</span> <span class='o'>&lt;-</span> <span class='nv'>p</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_wrap.html'>facet_wrap</a></span><span class='o'>(</span><span class='o'>~</span> <span class='nf'>vctrs</span><span class='nf'>::</span><span class='nf'><a href='https://vctrs.r-lib.org/reference/vec_group.html'>vec_group_id</a></span><span class='o'>(</span><span class='nv'>class</span><span class='o'>)</span>, dir <span class='o'>=</span> <span class='s'>"rb"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>title <span class='o'>=</span> <span class='s'>"dir = 'rb'"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p1</span> <span class='o'>|</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-23-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>To cover all 8 options, we list them here:</p>
<ul>
<li><code>&quot;lt&quot;</code>: start in the top-left, start filling left-to-right.</li>
<li><code>&quot;tl&quot;</code>: start in the top-left, start filling top-to-bottom.</li>
<li><code>&quot;lb&quot;</code>: start in the bottom-left, start filling left-to-right.</li>
<li><code>&quot;bl&quot;</code>: start in the bottom-left, start filling bottom-to-top.</li>
<li><code>&quot;rt&quot;</code>: start in the top-right, start filling right-to-left.</li>
<li><code>&quot;tr&quot;</code>: start in the top-right, start filling top-to-bottom.</li>
<li><code>&quot;rb&quot;</code>: start in the bottom-right, start filling right-to-left.</li>
<li><code>&quot;br&quot;</code> start in the bottom-right, start filling bottom-to-top.</li>
</ul>
<h3 id="free-space-in-wrapping">Free space in wrapping
</h3>
<p>The <code>facet_grid(space)</code> argument can ensure that panels are allocated space in proportion to their data range. This works because all data within a row share a y-axis, and data within a column share an x-axis. Historically, this argument did not have an equivalent in <a href="https://ggplot2.tidyverse.org/reference/facet_wrap.html" target="_blank" rel="noopener"><code>facet_wrap()</code></a>
 because axes aren&rsquo;t shared. We realised that there is a narrow circumstance in which each column has a consistent axis, and this is when there is only one row. The inverse also holds true for rows when there is only one column. In this release, we&rsquo;ve added <code>facet_wrap(space)</code> that sets the panel sizes in these circumstances.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>penguins</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_dep</span>, <span class='nv'>bill_len</span>, colour <span class='o'>=</span> <span class='nv'>species</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_wrap.html'>facet_wrap</a></span><span class='o'>(</span><span class='o'>~</span> <span class='nv'>island</span>, scales <span class='o'>=</span> <span class='s'>"free_x"</span>, space <span class='o'>=</span> <span class='s'>"free_x"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-24-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>We can note that the Dream and Torgersen islands have narrower panels because they don&rsquo;t have the Gentoo penguin with low bill depths.</p>
<h3 id="layer-layout">Layer layout
</h3>
<p>We&rsquo;ve added the argument <code>layer(layout)</code>, which instructs facets on how to handle the data. Generally speaking, facets or custom layouts are free to interpret instructions as they see fit, so it is not set in stone. Nonetheless, we&rsquo;ve come up with the following interpretations for <a href="https://ggplot2.tidyverse.org/reference/facet_wrap.html" target="_blank" rel="noopener"><code>facet_wrap()</code></a>
 and <a href="https://ggplot2.tidyverse.org/reference/facet_grid.html" target="_blank" rel="noopener"><code>facet_grid()</code></a>
.</p>
<ul>
<li><code>layout = NULL</code> (the default) uses the faceting variables to assign data to a panel.</li>
<li><code>layout = &quot;fixed&quot;</code> repeats the data for every panel and ignores faceting variables.</li>
<li><code>layout = &lt;integer&gt;</code> assigns to data to a specific panel.</li>
</ul>
<p>In addition, specifically for <a href="https://ggplot2.tidyverse.org/reference/facet_grid.html" target="_blank" rel="noopener"><code>facet_grid()</code></a>
 the following options also apply:</p>
<ul>
<li><code>layout = &quot;fixed_cols&quot;</code> pools data for every column and repeats it within the column&rsquo;s panels.</li>
<li><code>layout = &quot;fixed_rows&quot;</code> pools data for every row and repeats it within the row&rsquo;s panels.</li>
</ul>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>penguins</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_dep</span>, <span class='nv'>bill_len</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Repeat within every row</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span>, colour <span class='o'>=</span> <span class='s'>"grey"</span>, layout <span class='o'>=</span> <span class='s'>"fixed_rows"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Use facetting variables (default)</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span>, layout <span class='o'>=</span> <span class='kc'>NULL</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># Pick particular panel</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/annotate.html'>annotate</a></span><span class='o'>(</span></span>
<span>    <span class='s'>"text"</span>, x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/AsIs.html'>I</a></span><span class='o'>(</span><span class='m'>0.5</span><span class='o'>)</span>, y <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/AsIs.html'>I</a></span><span class='o'>(</span><span class='m'>0.5</span><span class='o'>)</span>,</span>
<span>    label <span class='o'>=</span> <span class='s'>"Panel 6"</span>, layout <span class='o'>=</span> <span class='m'>6</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/facet_grid.html'>facet_grid</a></span><span class='o'>(</span><span class='nv'>island</span> <span class='o'>~</span> <span class='nv'>species</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-25-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>In previous incarnations of ggplot2, people went through some acrobatics to get data to repeat across panels. With these new options, this should be a walk in the park.</p>
<h2 id="styling-updates">Styling updates
</h2>
<h3 id="boxplots">Boxplots
</h3>
<p>In <a href="https://ggplot2.tidyverse.org/reference/geom_boxplot.html" target="_blank" rel="noopener"><code>geom_boxplot()</code></a>
, you may have become accustomed to all the different options for styling outliers like <code>outlier.colour</code> or <code>outlier.shape</code>. Now, we&rsquo;re also enabling styling the different parts of the boxplot: the median line, the box, the whiskers and the staples. You can assign different colours, line type or line width to these parts of the boxplot.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>class</span>, <span class='nv'>hwy</span>, colour <span class='o'>=</span> <span class='nv'>class</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span></span>
<span>    whisker.linetype <span class='o'>=</span> <span class='s'>"dashed"</span>,</span>
<span>    box.colour <span class='o'>=</span> <span class='s'>"black"</span>,</span>
<span>    median.linewidth <span class='o'>=</span> <span class='m'>2</span>,</span>
<span>    staplewidth <span class='o'>=</span> <span class='m'>0.5</span>, <span class='c'># show staple</span></span>
<span>    staple.colour <span class='o'>=</span> <span class='s'>"grey50"</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"none"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-26-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>For consistency, <a href="https://ggplot2.tidyverse.org/reference/geom_linerange.html" target="_blank" rel="noopener"><code>geom_crossbar()</code></a>
 has been given the same treatment, but uses the <code>middle.*</code> prefix where <a href="https://ggplot2.tidyverse.org/reference/geom_boxplot.html" target="_blank" rel="noopener"><code>geom_boxplot()</code></a>
 uses the <code>median.*</code> prefix. Because <code>middle.linewidth</code> and <code>median.linewidth</code> have taken over the role of <code>fatten</code> and are aligned with other graphical properties, the <code>fatten</code> argument is now deprecated.</p>
<h3 id="violin--quantiles">Violin &amp; quantiles
</h3>
<p>It has been an inconvenience for some time that the quantile computation in violin layers was computed on the density data rather than the input data. To make the quantile computation more faithful to the real data, we had to properly delegate the responsibilities to the correct parts of the layer. The stat part of the layer is now in charge of calculating quantiles of the input data via the <code>stat_ydensity(quantiles)</code> arguments. By default, the quantiles are the 25th, 50th and 75th percentiles and are always computed. Whether these quantiles are also displayed, is under the purview of the geom part of the layer. We&rsquo;ve taken a similar approach as boxplots shown above, in that we now have <code>quantile.colour</code>, <code>quantile.linetype</code> and <code>quantile.linewidth</code> arguments to style the quantile lines. Previously, quantiles were not displayed by default. To mirror that behaviour, we&rsquo;ve set <code>quantile.linetype = 0</code> (blank, no line) by default. This means that to turn on the display of quantiles, you have to set a non-blank line type.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>class</span>, <span class='nv'>hwy</span>, fill <span class='o'>=</span> <span class='nv'>class</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_violin.html'>geom_violin</a></span><span class='o'>(</span></span>
<span>    quantiles <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.1</span>, <span class='m'>0.9</span><span class='o'>)</span>,</span>
<span>    quantile.linetype <span class='o'>=</span> <span class='m'>1</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/guides.html'>guides</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='s'>"none"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-27-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="labels-1">Labels
</h3>
<p><a href="https://ggplot2.tidyverse.org/reference/geom_text.html" target="_blank" rel="noopener"><code>geom_label()</code></a>
 also has new styling options. It now has a <code>linetype</code> and <code>linewidth</code> aesthetic, which can be mapped from the data. The <code>linewidth</code> aesthetic replaces the <code>label.size</code> argument, which used to determine the line width of the label border. In addition to the new aesthetics, <a href="https://ggplot2.tidyverse.org/reference/geom_text.html" target="_blank" rel="noopener"><code>geom_label()</code></a>
 has two new arguments: <code>border.colour</code> and <code>text.colour</code> which set the colour for the border and text respectively. When these are set, it overrules the <code>colour</code> aesthetic for a part of the label. In the plot below, we fix the <code>text.colour</code> to black, so the <code>colour</code> aesthetic applies to the border, not the text.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mtcars</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span></span>
<span>    <span class='nv'>wt</span>, <span class='nv'>mpg</span>,</span>
<span>    label <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/colnames.html'>rownames</a></span><span class='o'>(</span><span class='nv'>mtcars</span><span class='o'>)</span>,</span>
<span>    colour <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/factor.html'>factor</a></span><span class='o'>(</span><span class='nv'>cyl</span><span class='o'>)</span>,</span>
<span>    linetype <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/factor.html'>factor</a></span><span class='o'>(</span><span class='nv'>vs</span><span class='o'>)</span>,</span>
<span>    linewidth <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/factor.html'>factor</a></span><span class='o'>(</span><span class='nv'>am</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_text.html'>geom_label</a></span><span class='o'>(</span>text.colour <span class='o'>=</span> <span class='s'>"black"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_manual.html'>scale_linewidth_manual</a></span><span class='o'>(</span>values <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.3</span>, <span class='m'>0.6</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-28-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="area-and-ribbons">Area and ribbons
</h3>
<p>Both <a href="https://ggplot2.tidyverse.org/reference/geom_ribbon.html" target="_blank" rel="noopener"><code>geom_area()</code></a>
 and <a href="https://ggplot2.tidyverse.org/reference/geom_ribbon.html" target="_blank" rel="noopener"><code>geom_ribbon()</code></a>
 now allow a varying <code>fill</code> aesthetic within a group. Such a fill is displayed as a gradient, and therefore requires R 4.1.0+ and a compatible graphics device.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>economics</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>date</span>, <span class='nv'>unemploy</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_ribbon.html'>geom_area</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='nv'>uempmed</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-29-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="new-stats">New stats
</h2>
<h3 id="manual">Manual
</h3>
<p>Many ggplot extensions are based on stats, which allows you to perform arbitrary computations on data before handing it off the drawing functions. The new <a href="https://ggplot2.tidyverse.org/reference/stat_manual.html" target="_blank" rel="noopener"><code>stat_manual()</code></a>
 aims to give you the same extension powers, but without doing the formal ritual of defining a class and constructor. You can provide it any function that both ingests and returns a data frame. It can create new aesthetics or modify pre-existing aesthetics as long as eventually the geom part of the layer has their required aesthetics. In the example below, we use <a href="https://ggplot2.tidyverse.org/reference/stat_manual.html" target="_blank" rel="noopener"><code>stat_manual()</code></a>
 with a geom and a function, but also show you how to use a geom with <code>stat = &quot;manual&quot;</code>.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>make_centroids</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>df</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nf'><a href='https://rdrr.io/r/base/transform.html'>transform</a></span><span class='o'>(</span></span>
<span>    <span class='nv'>df</span>,</span>
<span>    xend <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='o'>(</span><span class='nv'>x</span>, na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span>,</span>
<span>    yend <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/mean.html'>mean</a></span><span class='o'>(</span><span class='nv'>y</span>, na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nv'>make_hull</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>df</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nv'>df</span> <span class='o'>&lt;-</span> <span class='nv'>df</span><span class='o'>[</span><span class='nf'><a href='https://rdrr.io/r/stats/complete.cases.html'>complete.cases</a></span><span class='o'>(</span><span class='nv'>df</span><span class='o'>)</span>, , drop <span class='o'>=</span> <span class='kc'>FALSE</span><span class='o'>]</span></span>
<span>  <span class='nv'>hull</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/grDevices/chull.html'>chull</a></span><span class='o'>(</span><span class='nv'>df</span><span class='o'>$</span><span class='nv'>x</span>, <span class='nv'>df</span><span class='o'>$</span><span class='nv'>y</span><span class='o'>)</span></span>
<span>  <span class='nv'>df</span><span class='o'>[</span><span class='nv'>hull</span>, , drop <span class='o'>=</span> <span class='kc'>FALSE</span><span class='o'>]</span></span>
<span><span class='o'>&#125;</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>penguins</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>bill_len</span>, <span class='nv'>bill_dep</span>, colour <span class='o'>=</span> <span class='nv'>species</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span> </span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span>na.rm <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span> <span class='o'>+</span> </span>
<span>  <span class='c'># As a stat, provide a geom</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/stat_manual.html'>stat_manual</a></span><span class='o'>(</span></span>
<span>    geom <span class='o'>=</span> <span class='s'>"segment"</span>, <span class='c'># function creates new xend/yend for segment</span></span>
<span>    fun <span class='o'>=</span> <span class='nv'>make_centroids</span>,</span>
<span>    linewidth <span class='o'>=</span> <span class='m'>0.2</span>,</span>
<span>    na.rm <span class='o'>=</span> <span class='kc'>TRUE</span></span>
<span>  <span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='c'># As a geom, provide the stat</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_polygon.html'>geom_polygon</a></span><span class='o'>(</span></span>
<span>    stat <span class='o'>=</span> <span class='s'>"manual"</span>,</span>
<span>    fun <span class='o'>=</span> <span class='nv'>make_hull</span>,</span>
<span>    fill <span class='o'>=</span> <span class='kc'>NA</span>,</span>
<span>    linetype <span class='o'>=</span> <span class='s'>"dotted"</span></span>
<span>  <span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-30-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="connection">Connection
</h3>
<p>It has come to our attention that generalisations of <a href="https://ggplot2.tidyverse.org/reference/geom_path.html" target="_blank" rel="noopener"><code>geom_step()</code></a>
 have become commonplace in several extensions. Stairstep ribbons are used in Kaplan-Meier curves to indicate uncertainty. Stairstep area plots make for some great histograms. To this end, we&rsquo;re introducing <a href="https://ggplot2.tidyverse.org/reference/stat_connect.html" target="_blank" rel="noopener"><code>stat_connect()</code></a>
, which can connect observations in a stairstep fashion without constraining a geom choice. In the plot, you can see it work on the <code>y</code>, <code>ymin</code> and <code>ymax</code> aesthetics indiscriminately with distinct geoms.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>eco</span> <span class='o'>&lt;-</span> <span class='nv'>economics</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'>dplyr</span><span class='nf'>::</span><span class='nf'><a href='https://dplyr.tidyverse.org/reference/mutate.html'>mutate</a></span><span class='o'>(</span>year <span class='o'>=</span> <span class='nf'>lubridate</span><span class='nf'>::</span><span class='nf'><a href='https://lubridate.tidyverse.org/reference/year.html'>year</a></span><span class='o'>(</span><span class='nv'>date</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'>dplyr</span><span class='nf'>::</span><span class='nf'><a href='https://dplyr.tidyverse.org/reference/summarise.html'>summarise</a></span><span class='o'>(</span></span>
<span>    min <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/Extremes.html'>min</a></span><span class='o'>(</span><span class='nv'>unemploy</span><span class='o'>)</span>,</span>
<span>    max <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/Extremes.html'>max</a></span><span class='o'>(</span><span class='nv'>unemploy</span><span class='o'>)</span>,</span>
<span>    mid <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/stats/median.html'>median</a></span><span class='o'>(</span><span class='nv'>unemploy</span><span class='o'>)</span>,</span>
<span>    .by <span class='o'>=</span> <span class='nv'>year</span></span>
<span>  <span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>eco</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>year</span>, y <span class='o'>=</span> <span class='nv'>mid</span>, ymin <span class='o'>=</span> <span class='nv'>min</span>, ymax <span class='o'>=</span> <span class='nv'>max</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_path.html'>geom_line</a></span><span class='o'>(</span>stat <span class='o'>=</span> <span class='s'>"connect"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_ribbon.html'>geom_ribbon</a></span><span class='o'>(</span>stat <span class='o'>=</span> <span class='s'>"connect"</span>, alpha <span class='o'>=</span> <span class='m'>0.4</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-31-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>However, we aren&rsquo;t necessarily limited to stairstep connections. We can use a 2-column numeric matrix to sketch out other types of connections. For example if we use <a href="https://rdrr.io/r/stats/Logistic.html" target="_blank" rel="noopener"><code>plogis()</code></a>
 to create a logistic transition, we can make &lsquo;bump chart&rsquo;-like connections. Or you can use a zigzag pattern if silliness is your cup of tea.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>x</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/seq.html'>seq</a></span><span class='o'>(</span><span class='m'>0</span>, <span class='m'>1</span>, length.out <span class='o'>=</span> <span class='m'>20</span><span class='o'>)</span><span class='o'>[</span><span class='o'>-</span><span class='m'>1</span><span class='o'>]</span></span>
<span><span class='nv'>smooth</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/cbind.html'>cbind</a></span><span class='o'>(</span><span class='nv'>x</span>, <span class='nf'>scales</span><span class='nf'>::</span><span class='nf'><a href='https://scales.r-lib.org/reference/rescale.html'>rescale</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/stats/Logistic.html'>plogis</a></span><span class='o'>(</span><span class='nv'>x</span>, location <span class='o'>=</span> <span class='m'>0.5</span>, scale <span class='o'>=</span> <span class='m'>0.1</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='nv'>zigzag</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/cbind.html'>cbind</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.4</span>, <span class='m'>0.6</span>, <span class='m'>1</span><span class='o'>)</span>, <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.75</span>, <span class='m'>0.25</span>, <span class='m'>1</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/utils/head.html'>head</a></span><span class='o'>(</span><span class='nv'>eco</span>, <span class='m'>10</span><span class='o'>)</span>, <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>year</span>, y <span class='o'>=</span> <span class='nv'>mid</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/stat_connect.html'>stat_connect</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"smooth"</span><span class='o'>)</span>, connection <span class='o'>=</span> <span class='nv'>smooth</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/stat_connect.html'>stat_connect</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"zigzag"</span><span class='o'>)</span>, connection <span class='o'>=</span> <span class='nv'>zigzag</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-32-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="coord-reversal">Coord reversal
</h2>
<p>It has been possible to use reverse transformations for scales to flip a plot direction. You could even use <a href="https://scales.r-lib.org/reference/transform_compose.html" target="_blank" rel="noopener"><code>scales::transform_compose()</code></a>
 to do, for example, a reversed log<sub>10</sub> transformation to highlight the smallest p-values. However, the transformation approach has a few limitations, notably that discrete scales do not support transformations and not all coords obeyed transformed scales. You can&rsquo;t really combine <code>coord_sf() + scale_x_log10()</code> for example. To remedy this limitation, coords now have a <code>reverse</code> argument that can typically be <code>&quot;none&quot;</code>, <code>&quot;x&quot;</code>, <code>&quot;y&quot;</code> or <code>&quot;xy&quot;</code> that reverse some directions. If you are from the lands down under, you can now plot a map in your native orientation.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>world</span> <span class='o'>&lt;-</span> <span class='nf'>sf</span><span class='nf'>::</span><span class='nf'><a href='https://r-spatial.github.io/sf/reference/st_as_sf.html'>st_as_sf</a></span><span class='o'>(</span><span class='nf'>maps</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/pkg/maps/man/map.html'>map</a></span><span class='o'>(</span><span class='s'>'world'</span>, plot <span class='o'>=</span> <span class='kc'>FALSE</span>, fill <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>world</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggsf.html'>geom_sf</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggsf.html'>coord_sf</a></span><span class='o'>(</span>reverse <span class='o'>=</span> <span class='s'>"y"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-33-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>In <a href="https://ggplot2.tidyverse.org/reference/coord_radial.html" target="_blank" rel="noopener"><code>coord_radial()</code></a>
, the <code>reverse</code> argument replaces the <code>direction</code> argument that only worked for the theta-direction. Contrary to many coords, <code>coord_radial(reverse)</code> takes <code>&quot;none&quot;</code>, <code>&quot;theta&quot;</code>, <code>&quot;r&quot;</code> and <code>&quot;thetar&quot;</code> instead of the x/y directions.</p>
<h2 id="goodies-for-extensions">Goodies for extensions
</h2>
<h3 id="layers">Layers
</h3>
<p>If you&rsquo;ve ever written a <code>Geom</code> class, chances are that you&rsquo;ve danced with <a href="https://rdrr.io/r/grid/gpar.html" target="_blank" rel="noopener"><code>grid::gpar()</code></a>
 and frowned at the use of <code>.pt</code> and <code>.stroke</code> and whatnot. We&rsquo;ve made a wrapper for <a href="https://rdrr.io/r/grid/gpar.html" target="_blank" rel="noopener"><code>grid::gpar()</code></a>
 that applies the ggplot2 interpretation of settings and translates them to grid settings. For example, <code>linewidth</code> (or the <code>lwd</code> grid setting) is interpreted in millimetres in ggplot2, whereas grid expects them in points. The <a href="https://ggplot2.tidyverse.org/reference/gg_par.html" target="_blank" rel="noopener"><code>gg_par()</code></a>
 function helps these translations, protects against <code>NA</code>s in line types and strokes, removes 0-length vectors, and has additional logic for point strokes.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/gg_par.html'>gg_par</a></span><span class='o'>(</span>lwd <span class='o'>=</span> <span class='m'>5</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; $lwd</span></span>
<span><span class='c'>#&gt; [1] 14.22638</span></span>
<span></span><span><span class='nf'>grid</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/r/grid/grid.convert.html'>convertUnit</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/grid/unit.html'>unit</a></span><span class='o'>(</span><span class='m'>5</span>, <span class='s'>"mm"</span><span class='o'>)</span>, <span class='s'>"pt"</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] 14.2263779527559points</span></span>
<span></span></code></pre>
</div>
<p>For geom and stat extensions, the magic usually happens in the <code>Geom*</code> or <code>Stat*</code> classes and the constructor is simply boilerplate code used to populate a layer. To reduce the amount of boilerplate code, you can now use <a href="https://ggplot2.tidyverse.org/reference/make_constructor.html" target="_blank" rel="noopener"><code>make_constructor()</code></a>
 on <code>Geom*</code> and <code>Stat*</code> classes. It produces a typical constructor function that adheres to several conventions, like exposing arguments to compute/drawing methods. To illustrate, notice how the following constructor for <code>GeomPath</code> includes arguments for <code>lineend</code> and <code>linejoin</code> automatically because they are arguments to the <code>GeomPath$draw_panel()</code> method.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>geom_foo</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/make_constructor.html'>make_constructor</a></span><span class='o'>(</span><span class='nv'>GeomPath</span>, position <span class='o'>=</span> <span class='s'>"stack"</span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/print.html'>print</a></span><span class='o'>(</span><span class='nv'>geom_foo</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; function (mapping = NULL, data = NULL, stat = "identity", position = "stack", </span></span>
<span><span class='c'>#&gt;     ..., arrow = NULL, arrow.fill = NULL, lineend = "butt", linejoin = "round", </span></span>
<span><span class='c'>#&gt;     linemitre = 10, na.rm = FALSE, show.legend = NA, inherit.aes = TRUE) </span></span>
<span><span class='c'>#&gt; &#123;</span></span>
<span><span class='c'>#&gt;     layer(mapping = mapping, data = data, geom = "path", stat = stat, </span></span>
<span><span class='c'>#&gt;         position = position, show.legend = show.legend, inherit.aes = inherit.aes, </span></span>
<span><span class='c'>#&gt;         params = list2(na.rm = na.rm, arrow = arrow, arrow.fill = arrow.fill, </span></span>
<span><span class='c'>#&gt;             lineend = lineend, linejoin = linejoin, linemitre = linemitre, </span></span>
<span><span class='c'>#&gt;             ...))</span></span>
<span><span class='c'>#&gt; &#125;</span></span>
<span><span class='c'>#&gt; &lt;environment: 0x00000223e1277e08&gt;</span></span>
<span></span></code></pre>
</div>
<p>In addition, you can now also use the <code>#' @aesthetics &lt;Geom/Stat/Position&gt;</code> roxygen tag to automatically populate an &lsquo;Aesthetics&rsquo; section of your documentation. The code below;</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>GeomDummy</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggproto.html'>ggproto</a></span><span class='o'>(</span><span class='s'>"GeomDummy"</span>, <span class='nv'>Geom</span>, default_aes <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>foo <span class='o'>=</span> <span class='s'>"bar"</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='c'>#' &lt;rest of roxygen comments&gt;</span></span>
<span><span class='c'>#' @aesthetics GeomDummy</span></span>
<span><span class='nv'>geom_foo</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/make_constructor.html'>make_constructor</a></span><span class='o'>(</span><span class='nv'>GeomDummy</span><span class='o'>)</span></span></code></pre>
</div>
<p>will generate the following .Rd code:</p>
<pre><code>\section{Aesthetics}{

\code{geom_dummy()} understands the following aesthetics. Required aesthetics are displayed in bold and defaults are displayed for optional aesthetics:
\tabular{rll}{
 • \tab \code{foo} \tab → \code{&quot;bar&quot;} \cr
 • \tab \code{\link[ggplot2:aes_group_order]{group}} \tab → inferred \cr
}

Learn more about setting these aesthetics in \code{vignette(&quot;ggplot2-specs&quot;)}.
}
</code></pre>
<h3 id="themes">Themes
</h3>
<p>To replicate how themes are handled internally, you can now use <a href="https://ggplot2.tidyverse.org/reference/complete_theme.html" target="_blank" rel="noopener"><code>complete_theme()</code></a>
. It fills in all missing elements and performs typical checks.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_theme</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>plot.background <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='kc'>NA</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/length.html'>length</a></span><span class='o'>(</span><span class='nv'>my_theme</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] 1</span></span>
<span></span><span></span>
<span><span class='nv'>completed</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/complete_theme.html'>complete_theme</a></span><span class='o'>(</span><span class='nv'>my_theme</span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/length.html'>length</a></span><span class='o'>(</span><span class='nv'>completed</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] 144</span></span>
<span></span><span></span>
<span><span class='c'># You should give rect elements to text settings</span></span>
<span><span class='nv'>completed</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>legend.text <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_rect</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/complete_theme.html'>complete_theme</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; <span style='color: #BBBB00; font-weight: bold;'>Error</span><span style='font-weight: bold;'> in `plot_theme()`:</span></span></span>
<span><span class='c'>#&gt; <span style='color: #BBBB00;'>!</span> Can't merge the `legend.text` theme element.</span></span>
<span><span class='c'>#&gt; <span style='font-weight: bold;'>Caused by error in `method(merge_element, list(ggplot2::element, class_any))`:</span></span></span>
<span><span class='c'>#&gt; <span style='color: #BBBB00;'>!</span> Only elements of the same class can be merged.</span></span>
<span></span><span></span>
<span><span class='c'># Unknown elements</span></span>
<span><span class='nv'>completed</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>foobar <span class='o'>=</span> <span class='m'>12</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/complete_theme.html'>complete_theme</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; Warning in plot_theme(list(theme = theme), default = default): The `foobar` theme element is not defined in the element hierarchy.</span></span>
<span></span></code></pre>
</div>
<p>We&rsquo;re also introducing point and polygon theme elements. These aren&rsquo;t used in any of the base ggplot2 theme settings, but you can use them in extensions. The example below demonstrates registering new theme settings and that points and polygons follow inheritance and can be rendered.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Let's say your package 'my_pkg' registers custom point/polygon elements</span></span>
<span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/register_theme_elements.html'>register_theme_elements</a></span><span class='o'>(</span></span>
<span>  my_pkg_point <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_point</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"red"</span><span class='o'>)</span>,</span>
<span>  my_pkg_polygon <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_polygon</a></span><span class='o'>(</span>fill <span class='o'>=</span> <span class='kc'>NA</span><span class='o'>)</span>,</span>
<span>  element_tree <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/list.html'>list</a></span><span class='o'>(</span></span>
<span>    my_pkg_point <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/register_theme_elements.html'>el_def</a></span><span class='o'>(</span><span class='nv'>element_point</span>, inherit <span class='o'>=</span> <span class='s'>"point"</span><span class='o'>)</span>,</span>
<span>    my_pkg_polygon <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/register_theme_elements.html'>el_def</a></span><span class='o'>(</span><span class='nv'>element_polygon</span>, inherit <span class='o'>=</span> <span class='s'>"polygon"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='o'>)</span></span>
<span></span>
<span><span class='c'># Which should inherit from the root point/polygon theme elements</span></span>
<span><span class='nv'>my_theme</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span></span>
<span>  point <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_point</a></span><span class='o'>(</span>shape <span class='o'>=</span> <span class='m'>17</span><span class='o'>)</span>,</span>
<span>  polygon <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_polygon</a></span><span class='o'>(</span>linetype <span class='o'>=</span> <span class='s'>"dotted"</span><span class='o'>)</span></span>
<span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/complete_theme.html'>complete_theme</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span></span>
<span><span class='c'># Rendering your elements</span></span>
<span><span class='nv'>pts</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/calc_element.html'>calc_element</a></span><span class='o'>(</span><span class='s'>"my_pkg_point"</span>, <span class='nv'>my_theme</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element_grob.html'>element_grob</a></span><span class='o'>(</span></span>
<span>    x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.2</span>, <span class='m'>0.5</span>, <span class='m'>0.8</span><span class='o'>)</span>,</span>
<span>    y <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.8</span>, <span class='m'>0.2</span>, <span class='m'>0.5</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='nv'>poly</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/calc_element.html'>calc_element</a></span><span class='o'>(</span><span class='s'>"my_pkg_polygon"</span>, <span class='nv'>my_theme</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element_grob.html'>element_grob</a></span><span class='o'>(</span></span>
<span>    x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.1</span>, <span class='m'>0.5</span>, <span class='m'>0.9</span><span class='o'>)</span>,</span>
<span>    y <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.9</span>, <span class='m'>0.1</span>, <span class='m'>0.5</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span></span>
<span><span class='c'># Drawing the elements</span></span>
<span><span class='nf'>grid</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/r/grid/grid.newpage.html'>grid.newpage</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span><span class='nf'>grid</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/r/grid/grid.draw.html'>grid.draw</a></span><span class='o'>(</span><span class='nv'>pts</span><span class='o'>)</span></span>
<span><span class='nf'>grid</span><span class='nf'>::</span><span class='nf'><a href='https://rdrr.io/r/grid/grid.draw.html'>grid.draw</a></span><span class='o'>(</span><span class='nv'>poly</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/figs/unnamed-chunk-38-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="acknowledgements">Acknowledgements
</h2>
<p>Thank you to all the people who contributed their issues, code and comments to this release: <a href="https://github.com/83221n4ndr34" target="_blank" rel="noopener">@83221n4ndr34</a>
, <a href="https://github.com/Abiologist" target="_blank" rel="noopener">@Abiologist</a>
, <a href="https://github.com/acebulsk" target="_blank" rel="noopener">@acebulsk</a>
, <a href="https://github.com/adisarid" target="_blank" rel="noopener">@adisarid</a>
, <a href="https://github.com/agila5" target="_blank" rel="noopener">@agila5</a>
, <a href="https://github.com/agmurray" target="_blank" rel="noopener">@agmurray</a>
, <a href="https://github.com/agneeshbarua" target="_blank" rel="noopener">@agneeshbarua</a>
, <a href="https://github.com/aijordan" target="_blank" rel="noopener">@aijordan</a>
, <a href="https://github.com/amarjitsinghchandhial" target="_blank" rel="noopener">@amarjitsinghchandhial</a>
, <a href="https://github.com/amkilpatrick" target="_blank" rel="noopener">@amkilpatrick</a>
, <a href="https://github.com/amongoodtx" target="_blank" rel="noopener">@amongoodtx</a>
, <a href="https://github.com/Andtise" target="_blank" rel="noopener">@Andtise</a>
, <a href="https://github.com/andybeet" target="_blank" rel="noopener">@andybeet</a>
, <a href="https://github.com/antoine4ucsd" target="_blank" rel="noopener">@antoine4ucsd</a>
, <a href="https://github.com/aphalo" target="_blank" rel="noopener">@aphalo</a>
, <a href="https://github.com/aravind-j" target="_blank" rel="noopener">@aravind-j</a>
, <a href="https://github.com/arcresu" target="_blank" rel="noopener">@arcresu</a>
, <a href="https://github.com/arnaudgallou" target="_blank" rel="noopener">@arnaudgallou</a>
, <a href="https://github.com/assaron" target="_blank" rel="noopener">@assaron</a>
, <a href="https://github.com/baderstine" target="_blank" rel="noopener">@baderstine</a>
, <a href="https://github.com/BajczA475" target="_blank" rel="noopener">@BajczA475</a>
, <a href="https://github.com/bakaburg1" target="_blank" rel="noopener">@bakaburg1</a>
, <a href="https://github.com/BegoniaCampos" target="_blank" rel="noopener">@BegoniaCampos</a>
, <a href="https://github.com/benjaminhlina" target="_blank" rel="noopener">@benjaminhlina</a>
, <a href="https://github.com/billdenney" target="_blank" rel="noopener">@billdenney</a>
, <a href="https://github.com/binkleym" target="_blank" rel="noopener">@binkleym</a>
, <a href="https://github.com/bkohrn" target="_blank" rel="noopener">@bkohrn</a>
, <a href="https://github.com/bnprks" target="_blank" rel="noopener">@bnprks</a>
, <a href="https://github.com/botanize" target="_blank" rel="noopener">@botanize</a>
, <a href="https://github.com/Breeze-Hu" target="_blank" rel="noopener">@Breeze-Hu</a>
, <a href="https://github.com/brianmsm" target="_blank" rel="noopener">@brianmsm</a>
, <a href="https://github.com/brunomioto" target="_blank" rel="noopener">@brunomioto</a>
, <a href="https://github.com/btupper" target="_blank" rel="noopener">@btupper</a>
, <a href="https://github.com/bwu62" target="_blank" rel="noopener">@bwu62</a>
, <a href="https://github.com/carljpearson" target="_blank" rel="noopener">@carljpearson</a>
, <a href="https://github.com/catalamarti" target="_blank" rel="noopener">@catalamarti</a>
, <a href="https://github.com/cbrnr" target="_blank" rel="noopener">@cbrnr</a>
, <a href="https://github.com/ccani007" target="_blank" rel="noopener">@ccani007</a>
, <a href="https://github.com/ccsarapas" target="_blank" rel="noopener">@ccsarapas</a>
, <a href="https://github.com/cgoo4" target="_blank" rel="noopener">@cgoo4</a>
, <a href="https://github.com/clauswilke" target="_blank" rel="noopener">@clauswilke</a>
, <a href="https://github.com/Close-your-eyes" target="_blank" rel="noopener">@Close-your-eyes</a>
, <a href="https://github.com/collinberke" target="_blank" rel="noopener">@collinberke</a>
, <a href="https://github.com/const-ae" target="_blank" rel="noopener">@const-ae</a>
, <a href="https://github.com/dafxy" target="_blank" rel="noopener">@dafxy</a>
, <a href="https://github.com/DanChaltiel" target="_blank" rel="noopener">@DanChaltiel</a>
, <a href="https://github.com/danli349" target="_blank" rel="noopener">@danli349</a>
, <a href="https://github.com/dansmith01" target="_blank" rel="noopener">@dansmith01</a>
, <a href="https://github.com/daorui" target="_blank" rel="noopener">@daorui</a>
, <a href="https://github.com/david-romano" target="_blank" rel="noopener">@david-romano</a>
, <a href="https://github.com/davidhodge931" target="_blank" rel="noopener">@davidhodge931</a>
, <a href="https://github.com/dinosquash" target="_blank" rel="noopener">@dinosquash</a>
, <a href="https://github.com/dominicroye" target="_blank" rel="noopener">@dominicroye</a>
, <a href="https://github.com/dsconnell" target="_blank" rel="noopener">@dsconnell</a>
, <a href="https://github.com/EA-Ammar" target="_blank" rel="noopener">@EA-Ammar</a>
, <a href="https://github.com/EBukin" target="_blank" rel="noopener">@EBukin</a>
, <a href="https://github.com/elgabbas" target="_blank" rel="noopener">@elgabbas</a>
, <a href="https://github.com/eliocamp" target="_blank" rel="noopener">@eliocamp</a>
, <a href="https://github.com/elipousson" target="_blank" rel="noopener">@elipousson</a>
, <a href="https://github.com/erinnacland" target="_blank" rel="noopener">@erinnacland</a>
, <a href="https://github.com/etiennebacher" target="_blank" rel="noopener">@etiennebacher</a>
, <a href="https://github.com/EvaMaeRey" target="_blank" rel="noopener">@EvaMaeRey</a>
, <a href="https://github.com/evanmascitti" target="_blank" rel="noopener">@evanmascitti</a>
, <a href="https://github.com/eyayaw" target="_blank" rel="noopener">@eyayaw</a>
, <a href="https://github.com/fabian-s" target="_blank" rel="noopener">@fabian-s</a>
, <a href="https://github.com/fkohrt" target="_blank" rel="noopener">@fkohrt</a>
, <a href="https://github.com/FloLecorvaisier" target="_blank" rel="noopener">@FloLecorvaisier</a>
, <a href="https://github.com/fmarotta" target="_blank" rel="noopener">@fmarotta</a>
, <a href="https://github.com/Fugwaaaa" target="_blank" rel="noopener">@Fugwaaaa</a>
, <a href="https://github.com/fwunschel" target="_blank" rel="noopener">@fwunschel</a>
, <a href="https://github.com/g-pacheco" target="_blank" rel="noopener">@g-pacheco</a>
, <a href="https://github.com/gaborcsardi" target="_blank" rel="noopener">@gaborcsardi</a>
, <a href="https://github.com/gregorp" target="_blank" rel="noopener">@gregorp</a>
, <a href="https://github.com/guqicun" target="_blank" rel="noopener">@guqicun</a>
, <a href="https://github.com/hadley" target="_blank" rel="noopener">@hadley</a>
, <a href="https://github.com/heinonmatti" target="_blank" rel="noopener">@heinonmatti</a>
, <a href="https://github.com/heor-robyoung" target="_blank" rel="noopener">@heor-robyoung</a>
, <a href="https://github.com/herry23xet" target="_blank" rel="noopener">@herry23xet</a>
, <a href="https://github.com/HMU-WH" target="_blank" rel="noopener">@HMU-WH</a>
, <a href="https://github.com/HRodenhizer" target="_blank" rel="noopener">@HRodenhizer</a>
, <a href="https://github.com/hsiaoyi0504" target="_blank" rel="noopener">@hsiaoyi0504</a>
, <a href="https://github.com/Hy4m" target="_blank" rel="noopener">@Hy4m</a>
, <a href="https://github.com/IndrajeetPatil" target="_blank" rel="noopener">@IndrajeetPatil</a>
, <a href="https://github.com/jack-davison" target="_blank" rel="noopener">@jack-davison</a>
, <a href="https://github.com/JacobBumgarner" target="_blank" rel="noopener">@JacobBumgarner</a>
, <a href="https://github.com/JakubKomarek" target="_blank" rel="noopener">@JakubKomarek</a>
, <a href="https://github.com/jansim" target="_blank" rel="noopener">@jansim</a>
, <a href="https://github.com/japhir" target="_blank" rel="noopener">@japhir</a>
, <a href="https://github.com/jbengler" target="_blank" rel="noopener">@jbengler</a>
, <a href="https://github.com/jdonland" target="_blank" rel="noopener">@jdonland</a>
, <a href="https://github.com/jeraldnoble" target="_blank" rel="noopener">@jeraldnoble</a>
, <a href="https://github.com/Jigyasu4indp" target="_blank" rel="noopener">@Jigyasu4indp</a>
, <a href="https://github.com/jiw181" target="_blank" rel="noopener">@jiw181</a>
, <a href="https://github.com/jmbuhr" target="_blank" rel="noopener">@jmbuhr</a>
, <a href="https://github.com/JMeyer31" target="_blank" rel="noopener">@JMeyer31</a>
, <a href="https://github.com/jmgirard" target="_blank" rel="noopener">@jmgirard</a>
, <a href="https://github.com/jnolis" target="_blank" rel="noopener">@jnolis</a>
, <a href="https://github.com/joaopedrosusselbertogna" target="_blank" rel="noopener">@joaopedrosusselbertogna</a>
, <a href="https://github.com/johow" target="_blank" rel="noopener">@johow</a>
, <a href="https://github.com/jonocarroll" target="_blank" rel="noopener">@jonocarroll</a>
, <a href="https://github.com/jpquast" target="_blank" rel="noopener">@jpquast</a>
, <a href="https://github.com/JStorey42" target="_blank" rel="noopener">@JStorey42</a>
, <a href="https://github.com/JThomasWatson" target="_blank" rel="noopener">@JThomasWatson</a>
, <a href="https://github.com/julianbarg" target="_blank" rel="noopener">@julianbarg</a>
, <a href="https://github.com/julou" target="_blank" rel="noopener">@julou</a>
, <a href="https://github.com/junjunlab" target="_blank" rel="noopener">@junjunlab</a>
, <a href="https://github.com/JWiley" target="_blank" rel="noopener">@JWiley</a>
, <a href="https://github.com/kauedesousa" target="_blank" rel="noopener">@kauedesousa</a>
, <a href="https://github.com/kdarras" target="_blank" rel="noopener">@kdarras</a>
, <a href="https://github.com/kevinushey" target="_blank" rel="noopener">@kevinushey</a>
, <a href="https://github.com/kevinwolz" target="_blank" rel="noopener">@kevinwolz</a>
, <a href="https://github.com/kieran-mace" target="_blank" rel="noopener">@kieran-mace</a>
, <a href="https://github.com/kkellysci" target="_blank" rel="noopener">@kkellysci</a>
, <a href="https://github.com/kobetst" target="_blank" rel="noopener">@kobetst</a>
, <a href="https://github.com/koheiw" target="_blank" rel="noopener">@koheiw</a>
, <a href="https://github.com/krlmlr" target="_blank" rel="noopener">@krlmlr</a>
, <a href="https://github.com/KryeKuzhinieri" target="_blank" rel="noopener">@KryeKuzhinieri</a>
, <a href="https://github.com/kylebutts" target="_blank" rel="noopener">@kylebutts</a>
, <a href="https://github.com/laurabrianna" target="_blank" rel="noopener">@laurabrianna</a>
, <a href="https://github.com/lbenz730" target="_blank" rel="noopener">@lbenz730</a>
, <a href="https://github.com/lcpmgh" target="_blank" rel="noopener">@lcpmgh</a>
, <a href="https://github.com/lgaborini" target="_blank" rel="noopener">@lgaborini</a>
, <a href="https://github.com/lgibson7" target="_blank" rel="noopener">@lgibson7</a>
, <a href="https://github.com/LGraz" target="_blank" rel="noopener">@LGraz</a>
, <a href="https://github.com/llrs" target="_blank" rel="noopener">@llrs</a>
, <a href="https://github.com/louis-heraut" target="_blank" rel="noopener">@louis-heraut</a>
, <a href="https://github.com/ltierney" target="_blank" rel="noopener">@ltierney</a>
, <a href="https://github.com/Lucielclr" target="_blank" rel="noopener">@Lucielclr</a>
, <a href="https://github.com/luhann" target="_blank" rel="noopener">@luhann</a>
, <a href="https://github.com/m-muecke" target="_blank" rel="noopener">@m-muecke</a>
, <a href="https://github.com/marcelglueck" target="_blank" rel="noopener">@marcelglueck</a>
, <a href="https://github.com/margaret-colville" target="_blank" rel="noopener">@margaret-colville</a>
, <a href="https://github.com/markus-schaffer" target="_blank" rel="noopener">@markus-schaffer</a>
, <a href="https://github.com/Maschette" target="_blank" rel="noopener">@Maschette</a>
, <a href="https://github.com/MathiasAmbuehl" target="_blank" rel="noopener">@MathiasAmbuehl</a>
, <a href="https://github.com/MathieuYeche" target="_blank" rel="noopener">@MathieuYeche</a>
, <a href="https://github.com/mattansb" target="_blank" rel="noopener">@mattansb</a>
, <a href="https://github.com/MauricioCely" target="_blank" rel="noopener">@MauricioCely</a>
, <a href="https://github.com/MaxAtoms" target="_blank" rel="noopener">@MaxAtoms</a>
, <a href="https://github.com/mcol" target="_blank" rel="noopener">@mcol</a>
, <a href="https://github.com/mfoos" target="_blank" rel="noopener">@mfoos</a>
, <a href="https://github.com/MichaelChirico" target="_blank" rel="noopener">@MichaelChirico</a>
, <a href="https://github.com/MichelineCampbell" target="_blank" rel="noopener">@MichelineCampbell</a>
, <a href="https://github.com/mikmart" target="_blank" rel="noopener">@mikmart</a>
, <a href="https://github.com/misea" target="_blank" rel="noopener">@misea</a>
, <a href="https://github.com/mjskay" target="_blank" rel="noopener">@mjskay</a>
, <a href="https://github.com/mkoohafkan" target="_blank" rel="noopener">@mkoohafkan</a>
, <a href="https://github.com/mlaparie" target="_blank" rel="noopener">@mlaparie</a>
, <a href="https://github.com/MLopez-Ibanez" target="_blank" rel="noopener">@MLopez-Ibanez</a>
, <a href="https://github.com/mluerig" target="_blank" rel="noopener">@mluerig</a>
, <a href="https://github.com/mohammad-numan" target="_blank" rel="noopener">@mohammad-numan</a>
, <a href="https://github.com/MoREpro" target="_blank" rel="noopener">@MoREpro</a>
, <a href="https://github.com/mtrsl" target="_blank" rel="noopener">@mtrsl</a>
, <a href="https://github.com/muschellij2" target="_blank" rel="noopener">@muschellij2</a>
, <a href="https://github.com/mzavattaro" target="_blank" rel="noopener">@mzavattaro</a>
, <a href="https://github.com/nicholasdavies" target="_blank" rel="noopener">@nicholasdavies</a>
, <a href="https://github.com/njspix" target="_blank" rel="noopener">@njspix</a>
, <a href="https://github.com/nmercadeb" target="_blank" rel="noopener">@nmercadeb</a>
, <a href="https://github.com/noejn2" target="_blank" rel="noopener">@noejn2</a>
, <a href="https://github.com/npearlmu" target="_blank" rel="noopener">@npearlmu</a>
, <a href="https://github.com/Olivia-Box-Power" target="_blank" rel="noopener">@Olivia-Box-Power</a>
, <a href="https://github.com/olivroy" target="_blank" rel="noopener">@olivroy</a>
, <a href="https://github.com/oracle5th" target="_blank" rel="noopener">@oracle5th</a>
, <a href="https://github.com/oskard95" target="_blank" rel="noopener">@oskard95</a>
, <a href="https://github.com/palderman" target="_blank" rel="noopener">@palderman</a>
, <a href="https://github.com/PanfengZhang" target="_blank" rel="noopener">@PanfengZhang</a>
, <a href="https://github.com/paulfajour" target="_blank" rel="noopener">@paulfajour</a>
, <a href="https://github.com/PCEBrunaLab" target="_blank" rel="noopener">@PCEBrunaLab</a>
, <a href="https://github.com/petrbouchal" target="_blank" rel="noopener">@petrbouchal</a>
, <a href="https://github.com/pgmj" target="_blank" rel="noopener">@pgmj</a>
, <a href="https://github.com/phispu" target="_blank" rel="noopener">@phispu</a>
, <a href="https://github.com/PietrH" target="_blank" rel="noopener">@PietrH</a>
, <a href="https://github.com/pn317" target="_blank" rel="noopener">@pn317</a>
, <a href="https://github.com/ppoyk" target="_blank" rel="noopener">@ppoyk</a>
, <a href="https://github.com/pradosj" target="_blank" rel="noopener">@pradosj</a>
, <a href="https://github.com/psoldath" target="_blank" rel="noopener">@psoldath</a>
, <a href="https://github.com/py9mrg" target="_blank" rel="noopener">@py9mrg</a>
, <a href="https://github.com/qli84" target="_blank" rel="noopener">@qli84</a>
, <a href="https://github.com/randyzwitch" target="_blank" rel="noopener">@randyzwitch</a>
, <a href="https://github.com/raphaludwig" target="_blank" rel="noopener">@raphaludwig</a>
, <a href="https://github.com/RaynorJim" target="_blank" rel="noopener">@RaynorJim</a>
, <a href="https://github.com/rdboyes" target="_blank" rel="noopener">@rdboyes</a>
, <a href="https://github.com/reechawong" target="_blank" rel="noopener">@reechawong</a>
, <a href="https://github.com/rempsyc" target="_blank" rel="noopener">@rempsyc</a>
, <a href="https://github.com/rfgoldberg" target="_blank" rel="noopener">@rfgoldberg</a>
, <a href="https://github.com/rikivillalba" target="_blank" rel="noopener">@rikivillalba</a>
, <a href="https://github.com/rishabh-mp3" target="_blank" rel="noopener">@rishabh-mp3</a>
, <a href="https://github.com/RodDalBen" target="_blank" rel="noopener">@RodDalBen</a>
, <a href="https://github.com/rogerssam" target="_blank" rel="noopener">@rogerssam</a>
, <a href="https://github.com/rsh52" target="_blank" rel="noopener">@rsh52</a>
, <a href="https://github.com/rwilson8" target="_blank" rel="noopener">@rwilson8</a>
, <a href="https://github.com/salim-b" target="_blank" rel="noopener">@salim-b</a>
, <a href="https://github.com/sambtalcott" target="_blank" rel="noopener">@sambtalcott</a>
, <a href="https://github.com/samuel-marsh" target="_blank" rel="noopener">@samuel-marsh</a>
, <a href="https://github.com/schloerke" target="_blank" rel="noopener">@schloerke</a>
, <a href="https://github.com/schmittrjp" target="_blank" rel="noopener">@schmittrjp</a>
, <a href="https://github.com/sierrajohnson" target="_blank" rel="noopener">@sierrajohnson</a>
, <a href="https://github.com/smouksassi" target="_blank" rel="noopener">@smouksassi</a>
, <a href="https://github.com/stitam" target="_blank" rel="noopener">@stitam</a>
, <a href="https://github.com/stragu" target="_blank" rel="noopener">@stragu</a>
, <a href="https://github.com/strengejacke" target="_blank" rel="noopener">@strengejacke</a>
, <a href="https://github.com/sunta3iouxos" target="_blank" rel="noopener">@sunta3iouxos</a>
, <a href="https://github.com/szkabel" target="_blank" rel="noopener">@szkabel</a>
, <a href="https://github.com/taozhou2020" target="_blank" rel="noopener">@taozhou2020</a>
, <a href="https://github.com/tdhock" target="_blank" rel="noopener">@tdhock</a>
, <a href="https://github.com/telenskyt" target="_blank" rel="noopener">@telenskyt</a>
, <a href="https://github.com/teunbrand" target="_blank" rel="noopener">@teunbrand</a>
, <a href="https://github.com/the-Hull" target="_blank" rel="noopener">@the-Hull</a>
, <a href="https://github.com/thgsponer" target="_blank" rel="noopener">@thgsponer</a>
, <a href="https://github.com/thomasp85" target="_blank" rel="noopener">@thomasp85</a>
, <a href="https://github.com/ThomasSoeiro" target="_blank" rel="noopener">@ThomasSoeiro</a>
, <a href="https://github.com/Tiggax" target="_blank" rel="noopener">@Tiggax</a>
, <a href="https://github.com/tikkss" target="_blank" rel="noopener">@tikkss</a>
, <a href="https://github.com/TimTaylor" target="_blank" rel="noopener">@TimTaylor</a>
, <a href="https://github.com/tombishop1" target="_blank" rel="noopener">@tombishop1</a>
, <a href="https://github.com/tommmmi" target="_blank" rel="noopener">@tommmmi</a>
, <a href="https://github.com/totajuliusd" target="_blank" rel="noopener">@totajuliusd</a>
, <a href="https://github.com/trafficfan" target="_blank" rel="noopener">@trafficfan</a>
, <a href="https://github.com/tungttnguyen" target="_blank" rel="noopener">@tungttnguyen</a>
, <a href="https://github.com/tvatter" target="_blank" rel="noopener">@tvatter</a>
, <a href="https://github.com/twest820" target="_blank" rel="noopener">@twest820</a>
, <a href="https://github.com/ujtwr" target="_blank" rel="noopener">@ujtwr</a>
, <a href="https://github.com/venpopov" target="_blank" rel="noopener">@venpopov</a>
, <a href="https://github.com/vgregoire1" target="_blank" rel="noopener">@vgregoire1</a>
, <a href="https://github.com/victorcat4" target="_blank" rel="noopener">@victorcat4</a>
, <a href="https://github.com/victorfeagins" target="_blank" rel="noopener">@victorfeagins</a>
, <a href="https://github.com/vivekJax" target="_blank" rel="noopener">@vivekJax</a>
, <a href="https://github.com/wbvguo" target="_blank" rel="noopener">@wbvguo</a>
, <a href="https://github.com/willgearty" target="_blank" rel="noopener">@willgearty</a>
, <a href="https://github.com/williamlai2" target="_blank" rel="noopener">@williamlai2</a>
, <a href="https://github.com/withr" target="_blank" rel="noopener">@withr</a>
, <a href="https://github.com/wvictor14" target="_blank" rel="noopener">@wvictor14</a>
, <a href="https://github.com/XdahaX" target="_blank" rel="noopener">@XdahaX</a>
, <a href="https://github.com/yjunechoe" target="_blank" rel="noopener">@yjunechoe</a>
, <a href="https://github.com/yoshidk6" target="_blank" rel="noopener">@yoshidk6</a>
, <a href="https://github.com/YUCHENG-ZHAO" target="_blank" rel="noopener">@YUCHENG-ZHAO</a>
, <a href="https://github.com/Yunuuuu" target="_blank" rel="noopener">@Yunuuuu</a>
, <a href="https://github.com/yutannihilation" target="_blank" rel="noopener">@yutannihilation</a>
, <a href="https://github.com/yzz32" target="_blank" rel="noopener">@yzz32</a>
, <a href="https://github.com/zhengxiaoUVic" target="_blank" rel="noopener">@zhengxiaoUVic</a>
, and <a href="https://github.com/zjwinn" target="_blank" rel="noopener">@zjwinn</a>
.</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>Normally, <a href="https://ggplot2.tidyverse.org/reference/aes.html" target="_blank" rel="noopener"><code>aes()</code></a>
 is strictly used to map data instead of setting a fixed property. We diverge from this API for pragmatic reasons, not theoretical ones.&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
<li id="fn:2">
<p>Aesthetics of the position adjustment are not be confused with position aesthetics. Position aesthetics like <code>x</code> and <code>y</code> are transformed by a scale, whereas aesthetics of the position adjustment like <code>nudge_x</code> and <code>nudge_y</code> are not (akin to <code>width</code> and <code>height</code>).&#160;<a href="#fnref:2" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
]]></description>
      <enclosure url="https://posit-open-source.netlify.app/blog/tidyverse/2025/ggplot2-4-0-0/thumbnail-wd.jpg" length="307135" type="image/jpeg" />
    </item>
    <item>
      <title>Great Tables `v0.18.0`: Easy Column Spanners and More!</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.18.0/</link>
      <pubDate>Fri, 18 Jul 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.18.0/</guid>
      <dc:creator>Rich Iannone</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>The development of Great Tables continues! We&rsquo;re excited to announce the release of <code>v0.18.0</code>, which brings several powerful new features. These features make it even easier to create beautiful, informative tables. The key additions in this release include new methods (and a tweak to an existing one):</p>
<ul>
<li><code>~~.GT.tab_spanner_delim()</code>: quick spanner creation</li>
<li><code>~~.GT.fmt_tf()</code>: easy boolean value formatting</li>
<li><code>~~.GT.cols_label_rotate()</code>: enables column label rotation</li>
<li><code>~~.GT.fmt_datetime()</code>: added <code>format_str=</code> parameter for extra customization</li>
</ul>
<p>Let&rsquo;s explore each of these interesting new features!</p>
<h3 id="quick-spanner-creation-with-tab_spanner_delim">Quick spanner creation with <code>tab_spanner_delim()</code>
</h3>
<p>Working with data that has hierarchical column names can be tedious when manually creating spanners. The new <code>~~.GT.tab_spanner_delim()</code> method automates this process by intelligently splitting column names based on a delimiter and creating the appropriate spanner structure.</p>
<p>Here&rsquo;s a practical example using the <code>towny</code> dataset, which contains population data for a collection of municipalities across multiple census years. Let&rsquo;s start by looking at the most populated cities and examining their column structure:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">towny</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars.selectors</span> <span class="k">as</span> <span class="nn">cs</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Create a smaller version of the `towny` dataset</span>
</span></span><span class="line"><span class="cl"><span class="n">towny_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">towny</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;csd_type&#34;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;city&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">sort</span><span class="p">(</span><span class="s2">&#34;population_2021&#34;</span><span class="p">,</span> <span class="n">descending</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;name&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;population_&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;density_&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">head</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Let&#39;s look at the column names</span>
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="n">towny_mini</span><span class="o">.</span><span class="n">columns</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><pre><code>['name', 'population_1996', 'population_2001', 'population_2006', 'population_2011', 'population_2016', 'population_2021', 'density_1996', 'density_2001', 'density_2006', 'density_2011', 'density_2016', 'density_2021']
</code></pre>
<p>Notice how the column names have a clear hierarchical structure with underscores as delimiters. Let&rsquo;s now create a table that takes advantage of this structure:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">towny_mini</span><span class="p">,</span> <span class="n">rowname_col</span><span class="o">=</span><span class="s2">&#34;name&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner_delim</span><span class="p">(</span><span class="n">delim</span><span class="o">=</span><span class="s2">&#34;_&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_integer</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">contains</span><span class="p">(</span><span class="s2">&#34;population&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_number</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">contains</span><span class="p">(</span><span class="s2">&#34;density&#34;</span><span class="p">),</span> <span class="n">decimals</span><span class="o">=</span><span class="mi">1</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">&#34;Population and Density Trends from Census Data&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_align_table_header</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;left&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="diagtcmpiq" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#diagtcmpiq table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#diagtcmpiq thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#diagtcmpiq p { margin: 0; padding: 0; }
#diagtcmpiq .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#diagtcmpiq .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#diagtcmpiq .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#diagtcmpiq .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#diagtcmpiq .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#diagtcmpiq .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#diagtcmpiq .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#diagtcmpiq .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#diagtcmpiq .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#diagtcmpiq .gt_column_spanner_outer:first-child { padding-left: 0; }
#diagtcmpiq .gt_column_spanner_outer:last-child { padding-right: 0; }
#diagtcmpiq .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#diagtcmpiq .gt_spanner_row { border-bottom-style: hidden; }
#diagtcmpiq .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#diagtcmpiq .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#diagtcmpiq .gt_from_md&gt; :first-child { margin-top: 0; }
#diagtcmpiq .gt_from_md&gt; :last-child { margin-bottom: 0; }
#diagtcmpiq .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#diagtcmpiq .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#diagtcmpiq .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#diagtcmpiq .gt_row_group_first td { border-top-width: 2px; }
#diagtcmpiq .gt_row_group_first th { border-top-width: 2px; }
#diagtcmpiq .gt_striped { color: #333333; background-color: #F4F4F4; }
#diagtcmpiq .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#diagtcmpiq .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#diagtcmpiq .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#diagtcmpiq .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#diagtcmpiq .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#diagtcmpiq .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#diagtcmpiq .gt_left { text-align: left; }
#diagtcmpiq .gt_center { text-align: center; }
#diagtcmpiq .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#diagtcmpiq .gt_font_normal { font-weight: normal; }
#diagtcmpiq .gt_font_bold { font-weight: bold; }
#diagtcmpiq .gt_font_italic { font-style: italic; }
#diagtcmpiq .gt_super { font-size: 65%; }
#diagtcmpiq .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#diagtcmpiq .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="13" class="gt_heading gt_title gt_font_normal">Population and Density Trends from Census Data</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th colspan="6" id="population" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">population</span></th>
<th colspan="6" id="density" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">density</span></th>
</tr>
<tr class="gt_col_headings">
<th id="population_1996" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">1996</th>
<th id="population_2001" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2001</th>
<th id="population_2006" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2006</th>
<th id="population_2011" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2011</th>
<th id="population_2016" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2016</th>
<th id="population_2021" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2021</th>
<th id="density_1996" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">1996</th>
<th id="density_2001" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2001</th>
<th id="density_2006" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2006</th>
<th id="density_2011" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2011</th>
<th id="density_2016" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2016</th>
<th id="density_2021" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2021</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Toronto</td>
<td class="gt_row gt_right">2,385,421</td>
<td class="gt_row gt_right">2,481,494</td>
<td class="gt_row gt_right">2,503,281</td>
<td class="gt_row gt_right">2,615,060</td>
<td class="gt_row gt_right">2,731,571</td>
<td class="gt_row gt_right">2,794,356</td>
<td class="gt_row gt_right">3,779.8</td>
<td class="gt_row gt_right">3,932.0</td>
<td class="gt_row gt_right">3,966.5</td>
<td class="gt_row gt_right">4,143.6</td>
<td class="gt_row gt_right">4,328.3</td>
<td class="gt_row gt_right">4,427.8</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Ottawa</td>
<td class="gt_row gt_right">721,136</td>
<td class="gt_row gt_right">774,072</td>
<td class="gt_row gt_right">812,129</td>
<td class="gt_row gt_right">883,391</td>
<td class="gt_row gt_right">934,243</td>
<td class="gt_row gt_right">1,017,449</td>
<td class="gt_row gt_right">258.6</td>
<td class="gt_row gt_right">277.6</td>
<td class="gt_row gt_right">291.3</td>
<td class="gt_row gt_right">316.8</td>
<td class="gt_row gt_right">335.1</td>
<td class="gt_row gt_right">364.9</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Mississauga</td>
<td class="gt_row gt_right">544,382</td>
<td class="gt_row gt_right">612,925</td>
<td class="gt_row gt_right">668,599</td>
<td class="gt_row gt_right">713,443</td>
<td class="gt_row gt_right">721,599</td>
<td class="gt_row gt_right">717,961</td>
<td class="gt_row gt_right">1,859.6</td>
<td class="gt_row gt_right">2,093.8</td>
<td class="gt_row gt_right">2,283.9</td>
<td class="gt_row gt_right">2,437.1</td>
<td class="gt_row gt_right">2,465.0</td>
<td class="gt_row gt_right">2,452.6</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Brampton</td>
<td class="gt_row gt_right">268,251</td>
<td class="gt_row gt_right">325,428</td>
<td class="gt_row gt_right">433,806</td>
<td class="gt_row gt_right">523,906</td>
<td class="gt_row gt_right">593,638</td>
<td class="gt_row gt_right">656,480</td>
<td class="gt_row gt_right">1,008.9</td>
<td class="gt_row gt_right">1,223.9</td>
<td class="gt_row gt_right">1,631.5</td>
<td class="gt_row gt_right">1,970.4</td>
<td class="gt_row gt_right">2,232.7</td>
<td class="gt_row gt_right">2,469.0</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Hamilton</td>
<td class="gt_row gt_right">467,799</td>
<td class="gt_row gt_right">490,268</td>
<td class="gt_row gt_right">504,559</td>
<td class="gt_row gt_right">519,949</td>
<td class="gt_row gt_right">536,917</td>
<td class="gt_row gt_right">569,353</td>
<td class="gt_row gt_right">418.3</td>
<td class="gt_row gt_right">438.4</td>
<td class="gt_row gt_right">451.2</td>
<td class="gt_row gt_right">464.9</td>
<td class="gt_row gt_right">480.1</td>
<td class="gt_row gt_right">509.1</td>
</tr>
</tbody>
</table>
</div>
<p>The <code>~~.GT.tab_spanner_delim()</code> method recognizes the underscore delimiter and creates a hierarchical structure: <code>&quot;population&quot;</code> and <code>&quot;density&quot;</code> become top-level spanners, with the years (<code>1996</code>, <code>2001</code>, <code>2021</code>) as the final column labels. This creates a clean, organized appearance that clearly groups related metrics together. And, this one method can be used instead of a combination of <code>~~.GT.cols_label()</code> and <code>~~.GT.tab_spanner()</code> (which requires a separate invocation per spanner added).</p>
<h3 id="beautiful-boolean-formatting-with-fmt_tf">Beautiful boolean formatting with <code>fmt_tf()</code>
</h3>
<p>Boolean data is common in analytical tables, but raw <code>True</code>/<code>False</code> values can look unprofessional. The new <code>~~.GT.fmt_tf()</code> method provides elegant ways to display boolean data using symbols, words, or custom formatting.</p>
<p>Here&rsquo;s a simple example showing different <code>tf_style=</code> options:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Create a simple DF with boolean data</span>
</span></span><span class="line"><span class="cl"><span class="n">bool_df</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;feature&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;Premium Sound&#34;</span><span class="p">,</span> <span class="s2">&#34;Leather Seats&#34;</span><span class="p">,</span> <span class="s2">&#34;Sunroof&#34;</span><span class="p">,</span> <span class="s2">&#34;Navigation&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;model_a&#34;</span><span class="p">:</span> <span class="p">[</span><span class="kc">True</span><span class="p">,</span> <span class="kc">False</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="kc">True</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;model_b&#34;</span><span class="p">:</span> <span class="p">[</span><span class="kc">True</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="kc">False</span><span class="p">,</span> <span class="kc">True</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;model_c&#34;</span><span class="p">:</span> <span class="p">[</span><span class="kc">False</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="kc">True</span><span class="p">,</span> <span class="kc">False</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">bool_df</span><span class="p">,</span> <span class="n">rowname_col</span><span class="o">=</span><span class="s2">&#34;feature&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_tf</span><span class="p">(</span><span class="n">tf_style</span><span class="o">=</span><span class="s2">&#34;check-mark&#34;</span><span class="p">,</span> <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;green&#34;</span><span class="p">,</span> <span class="s2">&#34;red&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">&#34;Car Features Comparison&#34;</span><span class="p">,</span> <span class="n">subtitle</span><span class="o">=</span><span class="s2">&#34;Using check-mark style&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="xeyyyfbenb" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#xeyyyfbenb table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#xeyyyfbenb thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#xeyyyfbenb p { margin: 0; padding: 0; }
#xeyyyfbenb .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#xeyyyfbenb .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#xeyyyfbenb .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#xeyyyfbenb .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#xeyyyfbenb .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#xeyyyfbenb .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#xeyyyfbenb .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#xeyyyfbenb .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#xeyyyfbenb .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#xeyyyfbenb .gt_column_spanner_outer:first-child { padding-left: 0; }
#xeyyyfbenb .gt_column_spanner_outer:last-child { padding-right: 0; }
#xeyyyfbenb .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#xeyyyfbenb .gt_spanner_row { border-bottom-style: hidden; }
#xeyyyfbenb .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#xeyyyfbenb .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#xeyyyfbenb .gt_from_md&gt; :first-child { margin-top: 0; }
#xeyyyfbenb .gt_from_md&gt; :last-child { margin-bottom: 0; }
#xeyyyfbenb .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#xeyyyfbenb .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#xeyyyfbenb .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#xeyyyfbenb .gt_row_group_first td { border-top-width: 2px; }
#xeyyyfbenb .gt_row_group_first th { border-top-width: 2px; }
#xeyyyfbenb .gt_striped { color: #333333; background-color: #F4F4F4; }
#xeyyyfbenb .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#xeyyyfbenb .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#xeyyyfbenb .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#xeyyyfbenb .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#xeyyyfbenb .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#xeyyyfbenb .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#xeyyyfbenb .gt_left { text-align: left; }
#xeyyyfbenb .gt_center { text-align: center; }
#xeyyyfbenb .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#xeyyyfbenb .gt_font_normal { font-weight: normal; }
#xeyyyfbenb .gt_font_bold { font-weight: bold; }
#xeyyyfbenb .gt_font_italic { font-style: italic; }
#xeyyyfbenb .gt_super { font-size: 65%; }
#xeyyyfbenb .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#xeyyyfbenb .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">Car Features Comparison</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Using check-mark style</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="model_a" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">model_a</th>
<th id="model_b" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">model_b</th>
<th id="model_c" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">model_c</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Premium Sound</td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
<td class="gt_row gt_center"><span style="color:red">✘</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Leather Seats</td>
<td class="gt_row gt_center"><span style="color:red">✘</span></td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Sunroof</td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
<td class="gt_row gt_center"><span style="color:red">✘</span></td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Navigation</td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
<td class="gt_row gt_center"><span style="color:green">✔</span></td>
<td class="gt_row gt_center"><span style="color:red">✘</span></td>
</tr>
</tbody>
</table>
</div>
<p>You can also use different symbols and colors for a more distinctive look:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">bool_df</span><span class="p">,</span> <span class="n">rowname_col</span><span class="o">=</span><span class="s2">&#34;feature&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_tf</span><span class="p">(</span><span class="n">tf_style</span><span class="o">=</span><span class="s2">&#34;circles&#34;</span><span class="p">,</span> <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;#4CAF50&#34;</span><span class="p">,</span> <span class="s2">&#34;#F44336&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">&#34;Car Features Comparison&#34;</span><span class="p">,</span> <span class="n">subtitle</span><span class="o">=</span><span class="s2">&#34;Using circles style&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="imxvwavyav" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#imxvwavyav table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#imxvwavyav thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#imxvwavyav p { margin: 0; padding: 0; }
#imxvwavyav .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#imxvwavyav .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#imxvwavyav .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#imxvwavyav .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#imxvwavyav .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#imxvwavyav .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#imxvwavyav .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#imxvwavyav .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#imxvwavyav .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#imxvwavyav .gt_column_spanner_outer:first-child { padding-left: 0; }
#imxvwavyav .gt_column_spanner_outer:last-child { padding-right: 0; }
#imxvwavyav .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#imxvwavyav .gt_spanner_row { border-bottom-style: hidden; }
#imxvwavyav .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#imxvwavyav .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#imxvwavyav .gt_from_md&gt; :first-child { margin-top: 0; }
#imxvwavyav .gt_from_md&gt; :last-child { margin-bottom: 0; }
#imxvwavyav .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#imxvwavyav .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#imxvwavyav .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#imxvwavyav .gt_row_group_first td { border-top-width: 2px; }
#imxvwavyav .gt_row_group_first th { border-top-width: 2px; }
#imxvwavyav .gt_striped { color: #333333; background-color: #F4F4F4; }
#imxvwavyav .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#imxvwavyav .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#imxvwavyav .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#imxvwavyav .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#imxvwavyav .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#imxvwavyav .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#imxvwavyav .gt_left { text-align: left; }
#imxvwavyav .gt_center { text-align: center; }
#imxvwavyav .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#imxvwavyav .gt_font_normal { font-weight: normal; }
#imxvwavyav .gt_font_bold { font-weight: bold; }
#imxvwavyav .gt_font_italic { font-style: italic; }
#imxvwavyav .gt_super { font-size: 65%; }
#imxvwavyav .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#imxvwavyav .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">Car Features Comparison</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Using circles style</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="model_a" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">model_a</th>
<th id="model_b" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">model_b</th>
<th id="model_c" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">model_c</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Premium Sound</td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
<td class="gt_row gt_center"><span style="color:#F44336">⭘</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Leather Seats</td>
<td class="gt_row gt_center"><span style="color:#F44336">⭘</span></td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Sunroof</td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
<td class="gt_row gt_center"><span style="color:#F44336">⭘</span></td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">Navigation</td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
<td class="gt_row gt_center"><span style="color:#4CAF50">●</span></td>
<td class="gt_row gt_center"><span style="color:#F44336">⭘</span></td>
</tr>
</tbody>
</table>
</div>
<p>The <code>~~.GT.fmt_tf()</code> method transforms boolean values into visually appealing symbols that make it easy to quickly scan and compare data across rows and columns.</p>
<h3 id="rotating-column-labels-with-cols_label_rotate">Rotating column labels with <code>cols_label_rotate()</code>
</h3>
<p>When dealing with many columns or long column names, horizontal space becomes precious. The <code>~~.GT.cols_label_rotate()</code> method solves this by rotating column labels vertically, allowing for more compact table layouts.</p>
<p>Here&rsquo;s an example where we use the <code>gtcars</code> dataset to create a table which communicates a feature matrix:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">style</span><span class="p">,</span> <span class="n">loc</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">gtcars</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars.selectors</span> <span class="k">as</span> <span class="nn">cs</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Manipulate dataset to create a feature comparison table</span>
</span></span><span class="line"><span class="cl"><span class="n">gtcars_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">gtcars</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;year&#34;</span><span class="p">)</span> <span class="o">==</span> <span class="mi">2017</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;ctry_origin&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">is_in</span><span class="p">([</span><span class="s2">&#34;Germany&#34;</span><span class="p">,</span> <span class="s2">&#34;Italy&#34;</span><span class="p">,</span> <span class="s2">&#34;United Kingdom&#34;</span><span class="p">]))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">([</span>
</span></span><span class="line"><span class="cl">        <span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;hp&#34;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">500</span><span class="p">)</span><span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;High Power&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;mpg_h&#34;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">25</span><span class="p">)</span><span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;Fuel Efficient&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;drivetrain&#34;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;awd&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;All Wheel Drive&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;msrp&#34;</span><span class="p">)</span> <span class="o">&gt;</span> <span class="mi">100000</span><span class="p">)</span><span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;Premium Price&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;trsmn&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">str</span><span class="o">.</span><span class="n">contains</span><span class="p">(</span><span class="s2">&#34;manual&#34;</span><span class="p">))</span><span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;Manual Transmission&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;mfr&#34;</span><span class="p">,</span> <span class="s2">&#34;model&#34;</span><span class="p">,</span> <span class="s2">&#34;trim&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;High Power&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Fuel Efficient&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;All Wheel Drive&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Premium Price&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Manual Transmission&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">head</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">gtcars_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_tf</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">by_dtype</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">Boolean</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">tf_style</span><span class="o">=</span><span class="s2">&#34;check-mark&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">colors</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;#2E8B57&#34;</span><span class="p">,</span> <span class="s2">&#34;#DC143C&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_label_rotate</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">by_dtype</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">Boolean</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="nb">dir</span><span class="o">=</span><span class="s2">&#34;sideways-lr&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span><span class="o">=</span><span class="s2">&#34;European Luxury Cars Feature Matrix&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">subtitle</span><span class="o">=</span><span class="s2">&#34;2017 Models with Performance &amp; Luxury Features&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span><span class="n">style</span><span class="o">=</span><span class="mi">1</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="s2">&#34;11px&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="wxhgwvpraw" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#wxhgwvpraw table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#wxhgwvpraw thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#wxhgwvpraw p { margin: 0; padding: 0; }
#wxhgwvpraw .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #004D80; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #004D80; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#wxhgwvpraw .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#wxhgwvpraw .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#wxhgwvpraw .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#wxhgwvpraw .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#wxhgwvpraw .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; }
#wxhgwvpraw .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#wxhgwvpraw .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#wxhgwvpraw .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#wxhgwvpraw .gt_column_spanner_outer:first-child { padding-left: 0; }
#wxhgwvpraw .gt_column_spanner_outer:last-child { padding-right: 0; }
#wxhgwvpraw .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#wxhgwvpraw .gt_spanner_row { border-bottom-style: hidden; }
#wxhgwvpraw .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#wxhgwvpraw .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; vertical-align: middle; }
#wxhgwvpraw .gt_from_md&gt; :first-child { margin-top: 0; }
#wxhgwvpraw .gt_from_md&gt; :last-child { margin-bottom: 0; }
#wxhgwvpraw .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: none; border-top-width: 1px; border-top-color: #89D3FE; border-left-style: none; border-left-width: 1px; border-left-color: #89D3FE; border-right-style: none; border-right-width: 1px; border-right-color: #89D3FE; vertical-align: middle; overflow-x: hidden; }
#wxhgwvpraw .gt_stub { color: #FFFFFF; background-color: #0076BA; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #0076BA; padding-left: 5px; padding-right: 5px; }
#wxhgwvpraw .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#wxhgwvpraw .gt_row_group_first td { border-top-width: 2px; }
#wxhgwvpraw .gt_row_group_first th { border-top-width: 2px; }
#wxhgwvpraw .gt_striped { color: #333333; background-color: #F4F4F4; }
#wxhgwvpraw .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; }
#wxhgwvpraw .gt_grand_summary_row { color: #333333; background-color: #89D3FE; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#wxhgwvpraw .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#wxhgwvpraw .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#wxhgwvpraw .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#wxhgwvpraw .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#wxhgwvpraw .gt_left { text-align: left; }
#wxhgwvpraw .gt_center { text-align: center; }
#wxhgwvpraw .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#wxhgwvpraw .gt_font_normal { font-weight: normal; }
#wxhgwvpraw .gt_font_bold { font-weight: bold; }
#wxhgwvpraw .gt_font_italic { font-style: italic; }
#wxhgwvpraw .gt_super { font-size: 65%; }
#wxhgwvpraw .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#wxhgwvpraw .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="8" class="gt_heading gt_title gt_font_normal">European Luxury Cars Feature Matrix</th>
</tr>
<tr class="gt_heading">
<th colspan="8" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">2017 Models with Performance &amp; Luxury Features</th>
</tr>
<tr class="gt_col_headings">
<th id="mfr" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">mfr</th>
<th id="model" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">model</th>
<th id="trim" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">trim</th>
<th id="High-Power" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="text-align: left; writing-mode: sideways-lr; vertical-align: middle; padding: 8px 0px;" scope="col">High Power</th>
<th id="Fuel-Efficient" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="text-align: left; writing-mode: sideways-lr; vertical-align: middle; padding: 8px 0px;" scope="col">Fuel Efficient</th>
<th id="All-Wheel-Drive" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="text-align: left; writing-mode: sideways-lr; vertical-align: middle; padding: 8px 0px;" scope="col">All Wheel Drive</th>
<th id="Premium-Price" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="text-align: left; writing-mode: sideways-lr; vertical-align: middle; padding: 8px 0px;" scope="col">Premium Price</th>
<th id="Manual-Transmission" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="text-align: left; writing-mode: sideways-lr; vertical-align: middle; padding: 8px 0px;" scope="col">Manual Transmission</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left" style="font-size: 11px">Ferrari</td>
<td class="gt_row gt_left" style="font-size: 11px">GTC4Lusso</td>
<td class="gt_row gt_left" style="font-size: 11px">Base Coupe</td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#2E8B57">✔</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#2E8B57">✔</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#2E8B57">✔</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped" style="font-size: 11px">Aston Martin</td>
<td class="gt_row gt_left gt_striped" style="font-size: 11px">DB11</td>
<td class="gt_row gt_left gt_striped" style="font-size: 11px">Base Coupe</td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#2E8B57">✔</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#2E8B57">✔</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
</tr>
<tr>
<td class="gt_row gt_left" style="font-size: 11px">Lotus</td>
<td class="gt_row gt_left" style="font-size: 11px">Evora</td>
<td class="gt_row gt_left" style="font-size: 11px">2+2 Coupe</td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped" style="font-size: 11px">Porsche</td>
<td class="gt_row gt_left gt_striped" style="font-size: 11px">718 Boxster</td>
<td class="gt_row gt_left gt_striped" style="font-size: 11px">Base Convertible</td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#2E8B57">✔</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center gt_striped" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
</tr>
<tr>
<td class="gt_row gt_left" style="font-size: 11px">Porsche</td>
<td class="gt_row gt_left" style="font-size: 11px">718 Cayman</td>
<td class="gt_row gt_left" style="font-size: 11px">Base Coupe</td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#2E8B57">✔</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
<td class="gt_row gt_center" style="font-size: 11px"><span style="color:#DC143C">✘</span></td>
</tr>
</tbody>
</table>
</div>
<p>This example demonstrates how both the <code>~~.GT.fmt_tf()</code> and <code>~~.GT.cols_label_rotate()</code> methods can work well together. The boolean columns use checkmarks (✓/✗) with custom <code>colors=</code>, while the rotated labels save horizontal space in this dense feature matrix. The combination allows you to put more information into a compact and still readable format.</p>
<h3 id="enhanced-datetime-formatting-with-fmt_datetime">Enhanced datetime formatting with <code>fmt_datetime()</code>
</h3>
<p>The <code>~~.GT.fmt_datetime()</code> method now supports custom format strings through the new <code>format_str=</code> parameter, giving you complete control over how datetime values appear in your tables.</p>
<p>Here&rsquo;s an example using the included <code>gibraltar</code> weather dataset:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">gibraltar</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Prepare the meteorological data</span>
</span></span><span class="line"><span class="cl"><span class="n">gibraltar_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">gibraltar</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="n">pl</span><span class="o">.</span><span class="n">concat_str</span><span class="p">([</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;date&#34;</span><span class="p">),</span> <span class="n">pl</span><span class="o">.</span><span class="n">lit</span><span class="p">(</span><span class="s2">&#34; &#34;</span><span class="p">),</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;time&#34;</span><span class="p">)])</span>
</span></span><span class="line"><span class="cl">            <span class="o">.</span><span class="n">str</span><span class="o">.</span><span class="n">strptime</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">Datetime</span><span class="p">,</span> <span class="nb">format</span><span class="o">=</span><span class="s2">&#34;%Y-%m-</span><span class="si">%d</span><span class="s2"> %H:%M&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">            <span class="o">.</span><span class="n">alias</span><span class="p">(</span><span class="s2">&#34;datetime&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">        <span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;datetime&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">dt</span><span class="o">.</span><span class="n">hour</span><span class="p">()</span><span class="o">.</span><span class="n">is_in</span><span class="p">([</span><span class="mi">6</span><span class="p">,</span> <span class="mi">12</span><span class="p">,</span> <span class="mi">18</span><span class="p">]))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span><span class="s2">&#34;datetime&#34;</span><span class="p">,</span> <span class="s2">&#34;temp&#34;</span><span class="p">,</span> <span class="s2">&#34;humidity&#34;</span><span class="p">,</span> <span class="s2">&#34;condition&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">sort</span><span class="p">(</span><span class="s2">&#34;datetime&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">head</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">gibraltar_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_datetime</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;datetime&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">format_str</span><span class="o">=</span><span class="s2">&#34;%b </span><span class="si">%d</span><span class="s2"> %Y (</span><span class="si">%a</span><span class="s2">) - %I:%M %p&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_number</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;temp&#34;</span><span class="p">,</span> <span class="n">decimals</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">pattern</span><span class="o">=</span><span class="s2">&#34;</span><span class="si">{x}</span><span class="s2">°C&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_percent</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;humidity&#34;</span><span class="p">,</span> <span class="n">scale_values</span><span class="o">=</span><span class="kc">False</span><span class="p">,</span> <span class="n">decimals</span><span class="o">=</span><span class="mi">0</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_label</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">datetime</span><span class="o">=</span><span class="s2">&#34;Time&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">temp</span><span class="o">=</span><span class="s2">&#34;Temperature&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">humidity</span><span class="o">=</span><span class="s2">&#34;Humidity&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">condition</span><span class="o">=</span><span class="s2">&#34;Conditions&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span><span class="o">=</span><span class="s2">&#34;Gibraltar Temperature and Humidity Conditions&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">subtitle</span><span class="o">=</span><span class="s2">&#34;Morning, Noon, and Evening Readings&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span><span class="n">style</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s2">&#34;cyan&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="tndrcevexg" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#tndrcevexg table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#tndrcevexg thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#tndrcevexg p { margin: 0; padding: 0; }
#tndrcevexg .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #016763; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #016763; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#tndrcevexg .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#tndrcevexg .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#tndrcevexg .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#tndrcevexg .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#tndrcevexg .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; }
#tndrcevexg .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#tndrcevexg .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#tndrcevexg .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#tndrcevexg .gt_column_spanner_outer:first-child { padding-left: 0; }
#tndrcevexg .gt_column_spanner_outer:last-child { padding-right: 0; }
#tndrcevexg .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#tndrcevexg .gt_spanner_row { border-bottom-style: hidden; }
#tndrcevexg .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#tndrcevexg .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; vertical-align: middle; }
#tndrcevexg .gt_from_md&gt; :first-child { margin-top: 0; }
#tndrcevexg .gt_from_md&gt; :last-child { margin-bottom: 0; }
#tndrcevexg .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: none; border-top-width: 1px; border-top-color: #A5FEF2; border-left-style: none; border-left-width: 1px; border-left-color: #A5FEF2; border-right-style: none; border-right-width: 1px; border-right-color: #A5FEF2; vertical-align: middle; overflow-x: hidden; }
#tndrcevexg .gt_stub { color: #FFFFFF; background-color: #01837B; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #01837B; padding-left: 5px; padding-right: 5px; }
#tndrcevexg .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#tndrcevexg .gt_row_group_first td { border-top-width: 2px; }
#tndrcevexg .gt_row_group_first th { border-top-width: 2px; }
#tndrcevexg .gt_striped { color: #333333; background-color: #F4F4F4; }
#tndrcevexg .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; }
#tndrcevexg .gt_grand_summary_row { color: #333333; background-color: #A5FEF2; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#tndrcevexg .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#tndrcevexg .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#tndrcevexg .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#tndrcevexg .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#tndrcevexg .gt_left { text-align: left; }
#tndrcevexg .gt_center { text-align: center; }
#tndrcevexg .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#tndrcevexg .gt_font_normal { font-weight: normal; }
#tndrcevexg .gt_font_bold { font-weight: bold; }
#tndrcevexg .gt_font_italic { font-style: italic; }
#tndrcevexg .gt_super { font-size: 65%; }
#tndrcevexg .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#tndrcevexg .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">Gibraltar Temperature and Humidity Conditions</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Morning, Noon, and Evening Readings</th>
</tr>
<tr class="gt_col_headings">
<th id="datetime" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Time</th>
<th id="temp" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Temperature</th>
<th id="humidity" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Humidity</th>
<th id="condition" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Conditions</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_right">May 01 2023 (Mon) - 06:50 AM</td>
<td class="gt_row gt_right">17.2°C</td>
<td class="gt_row gt_right">1%</td>
<td class="gt_row gt_left">Fair</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped">May 01 2023 (Mon) - 12:20 PM</td>
<td class="gt_row gt_right gt_striped">22.2°C</td>
<td class="gt_row gt_right gt_striped">1%</td>
<td class="gt_row gt_left gt_striped">Fair</td>
</tr>
<tr>
<td class="gt_row gt_right">May 01 2023 (Mon) - 12:50 PM</td>
<td class="gt_row gt_right">22.2°C</td>
<td class="gt_row gt_right">1%</td>
<td class="gt_row gt_left">Fair</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped">May 01 2023 (Mon) - 06:20 PM</td>
<td class="gt_row gt_right gt_striped">20.0°C</td>
<td class="gt_row gt_right gt_striped">1%</td>
<td class="gt_row gt_left gt_striped">Fair</td>
</tr>
<tr>
<td class="gt_row gt_right">May 01 2023 (Mon) - 06:50 PM</td>
<td class="gt_row gt_right">20.0°C</td>
<td class="gt_row gt_right">1%</td>
<td class="gt_row gt_left">Fair</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped">May 02 2023 (Tue) - 06:50 AM</td>
<td class="gt_row gt_right gt_striped">17.8°C</td>
<td class="gt_row gt_right gt_striped">1%</td>
<td class="gt_row gt_left gt_striped">Mostly Cloudy</td>
</tr>
<tr>
<td class="gt_row gt_right">May 02 2023 (Tue) - 12:20 PM</td>
<td class="gt_row gt_right">18.9°C</td>
<td class="gt_row gt_right">1%</td>
<td class="gt_row gt_left">Mostly Cloudy</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped">May 02 2023 (Tue) - 12:50 PM</td>
<td class="gt_row gt_right gt_striped">20.0°C</td>
<td class="gt_row gt_right gt_striped">1%</td>
<td class="gt_row gt_left gt_striped">Mostly Cloudy</td>
</tr>
<tr>
<td class="gt_row gt_right">May 02 2023 (Tue) - 06:20 PM</td>
<td class="gt_row gt_right">22.2°C</td>
<td class="gt_row gt_right">1%</td>
<td class="gt_row gt_left">Fair</td>
</tr>
<tr>
<td class="gt_row gt_right gt_striped">May 02 2023 (Tue) - 06:50 PM</td>
<td class="gt_row gt_right gt_striped">22.2°C</td>
<td class="gt_row gt_right gt_striped">1%</td>
<td class="gt_row gt_left gt_striped">Fair</td>
</tr>
</tbody>
</table>
</div>
<p>The custom datetime formatting string in <code>format_str=&quot;%b %d %Y (%a) - %I:%M %p&quot;</code> creates a readable datetime format that&rsquo;s perfect for weather reporting, showing the day of week, month, day, year, and the time in 12-hour format.</p>
<h3 id="acknowledgements-and-whats-next">Acknowledgements and what&rsquo;s next
</h3>
<p>We&rsquo;re grateful to all the contributors who made this release possible. These new features represent significant improvements for creating space-efficient tables while also maximizing visual appeal.</p>
<p>The combination of these features lets you now create complex, professional tables with hierarchical column structures, boolean indicators, space-saving labels, and nicely formatted datetime displays.</p>
<p>We&rsquo;re always happy to get feedback and hear about how you&rsquo;re using Great Tables:</p>
<ol>
<li><a href="https://github.com/posit-dev/great-tables/issues" target="_blank" rel="noopener">GitHub Issues</a>
</li>
<li><a href="https://github.com/posit-dev/great-tables/discussions" target="_blank" rel="noopener">GitHub Discussions</a>
</li>
<li><a href="https://discord.com/invite/Ux7nrcXHVV" target="_blank" rel="noopener">Discord</a>
</li>
</ol>
<p>Keep building those beautiful tables!</p>
]]></description>
    </item>
    <item>
      <title>Adding Plots to Great Tables</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/plots-in-tables/</link>
      <pubDate>Thu, 03 Jul 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/plots-in-tables/</guid>
      <dc:creator>Jules Walzer-Goldfeld</dc:creator>
      <dc:creator>Michael Chow</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>While working on <a href="https://posit-dev.github.io/gt-extras/articles/intro.html" target="_blank" rel="noopener"><strong>gt-extras</strong></a>
, I&rsquo;ve been exploring how to add small plots to Great Tables. These can go by many names, like spark lines, nanoplots, and so on. In this post, I&rsquo;ll look at three approaches I tried: adding plots with <a href="https://plotnine.org/" target="_blank" rel="noopener"><code>plotnine</code></a>
, <a href="https://github.com/orsinium-labs/svg.py" target="_blank" rel="noopener"><code>svg.py</code></a>
, or adding HTML directly. In the first two cases, the plots are SVGs, while the latter entails a collection of composed HTML div elements.</p>
<p>Here are the pieces I&rsquo;ll cover:</p>
<ul>
<li><strong>svg.py</strong>: creating your own tiny chart directly for a row.</li>
<li><strong>direct HTML</strong>: adding HTML divs directly.</li>
<li><strong>plotnine</strong>: adding a full, stripped-down chart to a row.</li>
</ul>
<p>In the end, it&rsquo;s often simplest to use <code>svg.py</code>, since you can create basic charts with minimal overhead. Building elements with HTML has even <em>less</em> overhead, but it is also slightly less user-friendly. At the other end of the spectrum, as your charts become more complex, using existing packages like the more exhaustive <code>plotnine</code> is a good alternative.</p>
<div id="fpuvtcetir" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#fpuvtcetir table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#fpuvtcetir thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#fpuvtcetir p { margin: 0; padding: 0; }
#fpuvtcetir .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#fpuvtcetir .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#fpuvtcetir .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#fpuvtcetir .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#fpuvtcetir .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#fpuvtcetir .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#fpuvtcetir .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#fpuvtcetir .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#fpuvtcetir .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#fpuvtcetir .gt_column_spanner_outer:first-child { padding-left: 0; }
#fpuvtcetir .gt_column_spanner_outer:last-child { padding-right: 0; }
#fpuvtcetir .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#fpuvtcetir .gt_spanner_row { border-bottom-style: hidden; }
#fpuvtcetir .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#fpuvtcetir .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#fpuvtcetir .gt_from_md&gt; :first-child { margin-top: 0; }
#fpuvtcetir .gt_from_md&gt; :last-child { margin-bottom: 0; }
#fpuvtcetir .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#fpuvtcetir .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#fpuvtcetir .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#fpuvtcetir .gt_row_group_first td { border-top-width: 2px; }
#fpuvtcetir .gt_row_group_first th { border-top-width: 2px; }
#fpuvtcetir .gt_striped { color: #333333; background-color: #F4F4F4; }
#fpuvtcetir .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#fpuvtcetir .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#fpuvtcetir .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#fpuvtcetir .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#fpuvtcetir .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#fpuvtcetir .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#fpuvtcetir .gt_left { text-align: left; }
#fpuvtcetir .gt_center { text-align: center; }
#fpuvtcetir .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#fpuvtcetir .gt_font_normal { font-weight: normal; }
#fpuvtcetir .gt_font_bold { font-weight: bold; }
#fpuvtcetir .gt_font_italic { font-style: italic; }
#fpuvtcetir .gt_super { font-size: 65%; }
#fpuvtcetir .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#fpuvtcetir .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>Animal</th>
          <th>Legs</th>
          <th>Plot</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Ostrich</td>
          <td>2</td>
          <td>2</td>
      </tr>
      <tr>
          <td>Spider</td>
          <td>8</td>
          <td>8</td>
      </tr>
      <tr>
          <td>Lion</td>
          <td>4</td>
          <td>4</td>
      </tr>
  </tbody>
</table>
</div>
<p>Here is the final result:</p>
<details class="code-fold">
<summary>Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">svg</span> <span class="kn">import</span> <span class="n">SVG</span><span class="p">,</span> <span class="n">Rect</span><span class="p">,</span> <span class="n">Line</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">df</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">({</span><span class="s2">&#34;Animal&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;Ostrich&#34;</span><span class="p">,</span> <span class="s2">&#34;Spider&#34;</span><span class="p">,</span> <span class="s2">&#34;Lion&#34;</span><span class="p">],</span> <span class="s2">&#34;Legs&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">4</span><span class="p">],</span> <span class="s2">&#34;Plot&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">4</span><span class="p">]})</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">width</span> <span class="o">=</span> <span class="mi">50</span>
</span></span><span class="line"><span class="cl"><span class="n">height</span> <span class="o">=</span> <span class="mi">30</span>
</span></span><span class="line"><span class="cl"><span class="n">max_legs_value</span> <span class="o">=</span> <span class="n">df</span><span class="p">[</span><span class="s2">&#34;Legs&#34;</span><span class="p">]</span><span class="o">.</span><span class="n">max</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">create_plot_svg_py</span><span class="p">(</span><span class="n">val</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">    <span class="n">canvas</span> <span class="o">=</span> <span class="n">SVG</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">width</span><span class="o">=</span><span class="n">width</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">height</span><span class="o">=</span><span class="n">height</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">elements</span><span class="o">=</span><span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="n">Rect</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">                <span class="n">x</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">                <span class="n">y</span><span class="o">=</span><span class="n">height</span> <span class="o">/</span> <span class="mi">4</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">                <span class="n">width</span><span class="o">=</span><span class="n">width</span> <span class="o">*</span> <span class="p">(</span><span class="n">val</span> <span class="o">/</span> <span class="n">max_legs_value</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">                <span class="n">height</span><span class="o">=</span><span class="n">height</span> <span class="o">/</span> <span class="mi">2</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">                <span class="n">fill</span><span class="o">=</span><span class="s2">&#34;blue&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">            <span class="p">),</span>
</span></span><span class="line"><span class="cl">            <span class="n">Line</span><span class="p">(</span><span class="n">x1</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">x2</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">y1</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">y2</span><span class="o">=</span><span class="n">height</span><span class="p">,</span> <span class="n">stroke</span><span class="o">=</span><span class="s2">&#34;black&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">html</span> <span class="o">=</span> <span class="sa">f</span><span class="s2">&#34;&lt;div&gt;</span><span class="si">{</span><span class="n">canvas</span><span class="si">}</span><span class="s2">&lt;/div&gt;&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="n">html</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">GT</span><span class="p">(</span><span class="n">df</span><span class="p">)</span><span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">fns</span><span class="o">=</span><span class="n">create_plot_svg_py</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;Plot&#34;</span><span class="p">])</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="pftjpqlkkc" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#pftjpqlkkc table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#pftjpqlkkc thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#pftjpqlkkc p { margin: 0; padding: 0; }
#pftjpqlkkc .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#pftjpqlkkc .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#pftjpqlkkc .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#pftjpqlkkc .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#pftjpqlkkc .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pftjpqlkkc .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pftjpqlkkc .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pftjpqlkkc .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#pftjpqlkkc .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#pftjpqlkkc .gt_column_spanner_outer:first-child { padding-left: 0; }
#pftjpqlkkc .gt_column_spanner_outer:last-child { padding-right: 0; }
#pftjpqlkkc .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#pftjpqlkkc .gt_spanner_row { border-bottom-style: hidden; }
#pftjpqlkkc .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#pftjpqlkkc .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#pftjpqlkkc .gt_from_md&gt; :first-child { margin-top: 0; }
#pftjpqlkkc .gt_from_md&gt; :last-child { margin-bottom: 0; }
#pftjpqlkkc .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#pftjpqlkkc .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#pftjpqlkkc .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#pftjpqlkkc .gt_row_group_first td { border-top-width: 2px; }
#pftjpqlkkc .gt_row_group_first th { border-top-width: 2px; }
#pftjpqlkkc .gt_striped { color: #333333; background-color: #F4F4F4; }
#pftjpqlkkc .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pftjpqlkkc .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#pftjpqlkkc .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#pftjpqlkkc .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#pftjpqlkkc .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#pftjpqlkkc .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#pftjpqlkkc .gt_left { text-align: left; }
#pftjpqlkkc .gt_center { text-align: center; }
#pftjpqlkkc .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#pftjpqlkkc .gt_font_normal { font-weight: normal; }
#pftjpqlkkc .gt_font_bold { font-weight: bold; }
#pftjpqlkkc .gt_font_italic { font-style: italic; }
#pftjpqlkkc .gt_super { font-size: 65%; }
#pftjpqlkkc .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#pftjpqlkkc .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="gt_col_headings">
<th id="Animal" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Animal</th>
<th id="Legs" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Legs</th>
<th id="Plot" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Plot</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Ostrich</td>
<td class="gt_row gt_right">2</td>
<td class="gt_row gt_right"><div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="30">
<rect x="0" y="7.5" width="12.5" height="15.0" fill="blue"></rect><line stroke="black" x1="0" y1="0" x2="0" y2="30"></line>
</svg>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Spider</td>
<td class="gt_row gt_right">8</td>
<td class="gt_row gt_right"><div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="30">
<rect x="0" y="7.5" width="50.0" height="15.0" fill="blue"></rect><line stroke="black" x1="0" y1="0" x2="0" y2="30"></line>
</svg>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Lion</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right"><div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="30">
<rect x="0" y="7.5" width="25.0" height="15.0" fill="blue"></rect><line stroke="black" x1="0" y1="0" x2="0" y2="30"></line>
</svg>
</div></td>
</tr>
</tbody>
</table>
</div>
<h2 id="setup">Setup
</h2>
<p>Here is the code to start:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">df</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Animal&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;Ostrich&#34;</span><span class="p">,</span> <span class="s2">&#34;Spider&#34;</span><span class="p">,</span> <span class="s2">&#34;Lion&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Legs&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">4</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Plot&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">2</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="mi">4</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt</span> <span class="o">=</span> <span class="n">GT</span><span class="p">(</span><span class="n">df</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="the-binding-component-gtfmt">The Binding Component: GT.fmt()
</h2>
<p>Let&rsquo;s take advantage of the <a href="https://posit-dev.github.io/great-tables/reference/GT.fmt.html#great_tables.GT.fmt" target="_blank" rel="noopener"><code>fmt()</code></a>
 method to apply a plotting function that formats our row values into plots. To see how we might use <code>fmt()</code>, we first need to define a formatting function to apply to each cell in a column. It will take as input the value in the cell, and should return whatever you want in that cell. Before plotting, let&rsquo;s imagine we wanted to replace the number with a tally of the number of legs:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">create_leg_tally</span><span class="p">(</span><span class="n">value</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="s2">&#34;|&#34;</span> <span class="o">*</span> <span class="n">value</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt</span><span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">fns</span><span class="o">=</span><span class="n">create_leg_tally</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;Plot&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="stpyfgvtjj" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#stpyfgvtjj table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#stpyfgvtjj thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#stpyfgvtjj p { margin: 0; padding: 0; }
#stpyfgvtjj .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#stpyfgvtjj .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#stpyfgvtjj .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#stpyfgvtjj .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#stpyfgvtjj .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#stpyfgvtjj .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#stpyfgvtjj .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#stpyfgvtjj .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#stpyfgvtjj .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#stpyfgvtjj .gt_column_spanner_outer:first-child { padding-left: 0; }
#stpyfgvtjj .gt_column_spanner_outer:last-child { padding-right: 0; }
#stpyfgvtjj .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#stpyfgvtjj .gt_spanner_row { border-bottom-style: hidden; }
#stpyfgvtjj .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#stpyfgvtjj .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#stpyfgvtjj .gt_from_md&gt; :first-child { margin-top: 0; }
#stpyfgvtjj .gt_from_md&gt; :last-child { margin-bottom: 0; }
#stpyfgvtjj .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#stpyfgvtjj .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#stpyfgvtjj .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#stpyfgvtjj .gt_row_group_first td { border-top-width: 2px; }
#stpyfgvtjj .gt_row_group_first th { border-top-width: 2px; }
#stpyfgvtjj .gt_striped { color: #333333; background-color: #F4F4F4; }
#stpyfgvtjj .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#stpyfgvtjj .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#stpyfgvtjj .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#stpyfgvtjj .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#stpyfgvtjj .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#stpyfgvtjj .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#stpyfgvtjj .gt_left { text-align: left; }
#stpyfgvtjj .gt_center { text-align: center; }
#stpyfgvtjj .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#stpyfgvtjj .gt_font_normal { font-weight: normal; }
#stpyfgvtjj .gt_font_bold { font-weight: bold; }
#stpyfgvtjj .gt_font_italic { font-style: italic; }
#stpyfgvtjj .gt_super { font-size: 65%; }
#stpyfgvtjj .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#stpyfgvtjj .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>Animal</th>
          <th>Legs</th>
          <th>Plot</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Ostrich</td>
          <td>2</td>
          <td>||</td>
      </tr>
      <tr>
          <td>Spider</td>
          <td>8</td>
          <td>||||||||</td>
      </tr>
      <tr>
          <td>Lion</td>
          <td>4</td>
          <td>||||</td>
      </tr>
  </tbody>
</table>
</div>
<h2 id="a-lightweight-approach-svgpy">A Lightweight Approach: Svg.py
</h2>
<p>Now we can apply that same logic to making our plots. Let&rsquo;s start with the function that will eventually be passed into <code>fmt()</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">svg</span> <span class="kn">import</span> <span class="n">SVG</span><span class="p">,</span> <span class="n">Rect</span><span class="p">,</span> <span class="n">Line</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">height</span> <span class="o">=</span> <span class="mi">30</span>
</span></span><span class="line"><span class="cl"><span class="n">width</span> <span class="o">=</span> <span class="mi">50</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">create_plot_svg_py</span><span class="p">(</span><span class="n">val</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">    <span class="n">canvas</span> <span class="o">=</span> <span class="n">SVG</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">width</span><span class="o">=</span><span class="n">width</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">height</span><span class="o">=</span><span class="n">height</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">elements</span><span class="o">=</span><span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="n">Rect</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">                <span class="n">x</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">                <span class="n">y</span><span class="o">=</span><span class="n">height</span> <span class="o">/</span> <span class="mi">4</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">                <span class="n">width</span><span class="o">=</span><span class="n">width</span> <span class="o">*</span> <span class="p">(</span><span class="n">val</span> <span class="o">/</span> <span class="n">max_legs_value</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">                <span class="n">height</span><span class="o">=</span><span class="n">height</span> <span class="o">/</span> <span class="mi">2</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">                <span class="n">fill</span><span class="o">=</span><span class="s2">&#34;blue&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">            <span class="p">),</span>
</span></span><span class="line"><span class="cl">            <span class="n">Line</span><span class="p">(</span><span class="n">x1</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">x2</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">y1</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">y2</span><span class="o">=</span><span class="n">height</span><span class="p">,</span> <span class="n">stroke</span><span class="o">=</span><span class="s2">&#34;black&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">html</span> <span class="o">=</span> <span class="sa">f</span><span class="s2">&#34;&lt;div&gt;</span><span class="si">{</span><span class="n">canvas</span><span class="si">}</span><span class="s2">&lt;/div&gt;&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="n">html</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Here you get to call <code>fmt()</code> to modify the column you want to apply the plotting function to.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt</span><span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">fns</span><span class="o">=</span><span class="n">create_plot_svg_py</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;Plot&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="lqzcgvvbzu" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#lqzcgvvbzu table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#lqzcgvvbzu thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#lqzcgvvbzu p { margin: 0; padding: 0; }
#lqzcgvvbzu .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#lqzcgvvbzu .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#lqzcgvvbzu .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#lqzcgvvbzu .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#lqzcgvvbzu .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#lqzcgvvbzu .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#lqzcgvvbzu .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#lqzcgvvbzu .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#lqzcgvvbzu .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#lqzcgvvbzu .gt_column_spanner_outer:first-child { padding-left: 0; }
#lqzcgvvbzu .gt_column_spanner_outer:last-child { padding-right: 0; }
#lqzcgvvbzu .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#lqzcgvvbzu .gt_spanner_row { border-bottom-style: hidden; }
#lqzcgvvbzu .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#lqzcgvvbzu .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#lqzcgvvbzu .gt_from_md&gt; :first-child { margin-top: 0; }
#lqzcgvvbzu .gt_from_md&gt; :last-child { margin-bottom: 0; }
#lqzcgvvbzu .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#lqzcgvvbzu .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#lqzcgvvbzu .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#lqzcgvvbzu .gt_row_group_first td { border-top-width: 2px; }
#lqzcgvvbzu .gt_row_group_first th { border-top-width: 2px; }
#lqzcgvvbzu .gt_striped { color: #333333; background-color: #F4F4F4; }
#lqzcgvvbzu .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#lqzcgvvbzu .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#lqzcgvvbzu .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#lqzcgvvbzu .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#lqzcgvvbzu .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#lqzcgvvbzu .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#lqzcgvvbzu .gt_left { text-align: left; }
#lqzcgvvbzu .gt_center { text-align: center; }
#lqzcgvvbzu .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#lqzcgvvbzu .gt_font_normal { font-weight: normal; }
#lqzcgvvbzu .gt_font_bold { font-weight: bold; }
#lqzcgvvbzu .gt_font_italic { font-style: italic; }
#lqzcgvvbzu .gt_super { font-size: 65%; }
#lqzcgvvbzu .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#lqzcgvvbzu .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="gt_col_headings">
<th id="Animal" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Animal</th>
<th id="Legs" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Legs</th>
<th id="Plot" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Plot</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Ostrich</td>
<td class="gt_row gt_right">2</td>
<td class="gt_row gt_right"><div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="30">
<rect x="0" y="7.5" width="12.5" height="15.0" fill="blue"></rect><line stroke="black" x1="0" y1="0" x2="0" y2="30"></line>
</svg>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Spider</td>
<td class="gt_row gt_right">8</td>
<td class="gt_row gt_right"><div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="30">
<rect x="0" y="7.5" width="50.0" height="15.0" fill="blue"></rect><line stroke="black" x1="0" y1="0" x2="0" y2="30"></line>
</svg>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Lion</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right"><div>
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="30">
<rect x="0" y="7.5" width="25.0" height="15.0" fill="blue"></rect><line stroke="black" x1="0" y1="0" x2="0" y2="30"></line>
</svg>
</div></td>
</tr>
</tbody>
</table>
</div>
<p>This was very direct, we didn&rsquo;t have save to a buffer or import heavy duty plotting functions. We built the string with the help of <code>svg.py</code> and were able to insert into the table. See the string below:</p>
<!-- I would really like to wrap the output here, but nothing I've tried has worked -->
<!-- https://github.com/quarto-dev/quarto-cli/discussions/6017 -->
<pre><code>'&lt;div&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;50&quot; height=&quot;30&quot;&gt;&lt;rect x=&quot;0&quot; y=&quot;7.5&quot; width=&quot;25.0&quot; height=&quot;15.0&quot; fill=&quot;blue&quot;/&gt;&lt;line stroke=&quot;black&quot; x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;0&quot; y2=&quot;30&quot;/&gt;&lt;/svg&gt;&lt;/div&gt;'
</code></pre>
<p>Even in its outputted form the string is still easily readable, which is another upside of using an SVG generation package.</p>
<h2 id="extreme-minimalism-adding-html-directly">Extreme Minimalism: Adding HTML directly
</h2>
<p>In the previous section, note that <code>svg.py</code> simply generated a string of HTML. You can do the same thing directly.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">create_plot_html</span><span class="p">(</span><span class="n">val</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">    <span class="n">bar_element</span> <span class="o">=</span> <span class="sa">f</span><span class="s2">&#34;&#34;&#34;
</span></span></span><span class="line"><span class="cl"><span class="s2">    &lt;div style=&#34;position: absolute;
</span></span></span><span class="line"><span class="cl"><span class="s2">                width: </span><span class="si">{</span><span class="n">width</span> <span class="o">*</span> <span class="n">val</span> <span class="o">/</span> <span class="n">max_legs_value</span><span class="si">}</span><span class="s2">px;
</span></span></span><span class="line"><span class="cl"><span class="s2">                height: </span><span class="si">{</span><span class="n">height</span> <span class="o">/</span> <span class="mi">2</span><span class="si">}</span><span class="s2">px;
</span></span></span><span class="line"><span class="cl"><span class="s2">                background-color: purple;
</span></span></span><span class="line"><span class="cl"><span class="s2">                margin-top: </span><span class="si">{</span><span class="n">height</span> <span class="o">/</span> <span class="mi">4</span><span class="si">}</span><span class="s2">px;
</span></span></span><span class="line"><span class="cl"><span class="s2">    &#34;&gt;&lt;/div&gt;&#34;&#34;&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">line_element</span> <span class="o">=</span> <span class="s2">&#34;&#34;&#34;
</span></span></span><span class="line"><span class="cl"><span class="s2">    &lt;div style=&#34;position: absolute;
</span></span></span><span class="line"><span class="cl"><span class="s2">                top: 0;
</span></span></span><span class="line"><span class="cl"><span class="s2">                bottom: 0;
</span></span></span><span class="line"><span class="cl"><span class="s2">                width: 1px;
</span></span></span><span class="line"><span class="cl"><span class="s2">                background-color: black;
</span></span></span><span class="line"><span class="cl"><span class="s2">    &#34;&gt;&lt;/div&gt;&#34;&#34;&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">html</span> <span class="o">=</span> <span class="sa">f</span><span class="s2">&#34;&#34;&#34;
</span></span></span><span class="line"><span class="cl"><span class="s2">    &lt;div style=&#34;position: relative; width: </span><span class="si">{</span><span class="n">width</span><span class="si">}</span><span class="s2">px; height: </span><span class="si">{</span><span class="n">height</span><span class="si">}</span><span class="s2">px;&#34;&gt;
</span></span></span><span class="line"><span class="cl"><span class="s2">        </span><span class="si">{</span><span class="n">bar_element</span><span class="si">}</span><span class="s2">
</span></span></span><span class="line"><span class="cl"><span class="s2">        </span><span class="si">{</span><span class="n">line_element</span><span class="si">}</span><span class="s2">
</span></span></span><span class="line"><span class="cl"><span class="s2">    &lt;/div&gt;
</span></span></span><span class="line"><span class="cl"><span class="s2">    &#34;&#34;&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="n">html</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Now that we&rsquo;ve defined our <code>create_plot_*</code> formatting function, the call to <code>fmt()</code> is identical to the one above.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt</span><span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">fns</span><span class="o">=</span><span class="n">create_plot_html</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;Plot&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="kauzxggwba" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#kauzxggwba table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#kauzxggwba thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#kauzxggwba p { margin: 0; padding: 0; }
#kauzxggwba .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#kauzxggwba .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#kauzxggwba .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#kauzxggwba .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#kauzxggwba .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#kauzxggwba .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#kauzxggwba .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#kauzxggwba .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#kauzxggwba .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#kauzxggwba .gt_column_spanner_outer:first-child { padding-left: 0; }
#kauzxggwba .gt_column_spanner_outer:last-child { padding-right: 0; }
#kauzxggwba .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#kauzxggwba .gt_spanner_row { border-bottom-style: hidden; }
#kauzxggwba .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#kauzxggwba .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#kauzxggwba .gt_from_md&gt; :first-child { margin-top: 0; }
#kauzxggwba .gt_from_md&gt; :last-child { margin-bottom: 0; }
#kauzxggwba .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#kauzxggwba .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#kauzxggwba .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#kauzxggwba .gt_row_group_first td { border-top-width: 2px; }
#kauzxggwba .gt_row_group_first th { border-top-width: 2px; }
#kauzxggwba .gt_striped { color: #333333; background-color: #F4F4F4; }
#kauzxggwba .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#kauzxggwba .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#kauzxggwba .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#kauzxggwba .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#kauzxggwba .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#kauzxggwba .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#kauzxggwba .gt_left { text-align: left; }
#kauzxggwba .gt_center { text-align: center; }
#kauzxggwba .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#kauzxggwba .gt_font_normal { font-weight: normal; }
#kauzxggwba .gt_font_bold { font-weight: bold; }
#kauzxggwba .gt_font_italic { font-style: italic; }
#kauzxggwba .gt_super { font-size: 65%; }
#kauzxggwba .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#kauzxggwba .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="gt_col_headings">
<th id="Animal" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Animal</th>
<th id="Legs" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Legs</th>
<th id="Plot" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Plot</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Ostrich</td>
<td class="gt_row gt_right">2</td>
<td class="gt_row gt_right"><div style="position: relative; width: 50px; height: 30px;">
<div style="position: absolute;
                width: 12.5px;
                height: 15.0px;
                background-color: purple;
                margin-top: 7.5px;
    ">
&#10;</div>
<div style="position: absolute;
                top: 0;
                bottom: 0;
                width: 1px;
                background-color: black;
    ">
&#10;</div>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Spider</td>
<td class="gt_row gt_right">8</td>
<td class="gt_row gt_right"><div style="position: relative; width: 50px; height: 30px;">
<div style="position: absolute;
                width: 50.0px;
                height: 15.0px;
                background-color: purple;
                margin-top: 7.5px;
    ">
&#10;</div>
<div style="position: absolute;
                top: 0;
                bottom: 0;
                width: 1px;
                background-color: black;
    ">
&#10;</div>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Lion</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right"><div style="position: relative; width: 50px; height: 30px;">
<div style="position: absolute;
                width: 25.0px;
                height: 15.0px;
                background-color: purple;
                margin-top: 7.5px;
    ">
&#10;</div>
<div style="position: absolute;
                top: 0;
                bottom: 0;
                width: 1px;
                background-color: black;
    ">
&#10;</div>
</div></td>
</tr>
</tbody>
</table>
</div>
<p>At first glance, encoding HTML in multi-line strings may not be aesthetically pleasing, nor is it particularly more lightweight than <code>svg.py</code>. Still, it provides a good alternative if you are like me and insist on being as close to the output as possible. Separately, I have found the inclusion of text to be simpler with HTML on account of the default text handling behavior that comes along with it.</p>
<h2 id="a-comprehensive-package-plotnine">A Comprehensive Package: Plotnine
</h2>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">io</span> <span class="kn">import</span> <span class="n">StringIO</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">plotnine</span> <span class="kn">import</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">ggplot</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">aes</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">coord_flip</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">geom_col</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">scale_y_continuous</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">scale_x_continuous</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">theme_void</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">geom_hline</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">max_legs_value</span> <span class="o">=</span> <span class="n">df</span><span class="p">[</span><span class="s2">&#34;Legs&#34;</span><span class="p">]</span><span class="o">.</span><span class="n">max</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">def</span> <span class="nf">create_plot_plotnine</span><span class="p">(</span><span class="n">val</span><span class="p">:</span> <span class="nb">int</span><span class="p">)</span> <span class="o">-&gt;</span> <span class="nb">str</span><span class="p">:</span>
</span></span><span class="line"><span class="cl">    <span class="n">plot</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">ggplot</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">        <span class="o">+</span> <span class="n">aes</span><span class="p">(</span><span class="n">x</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span> <span class="n">y</span><span class="o">=</span><span class="n">val</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">        <span class="o">+</span> <span class="n">geom_col</span><span class="p">(</span><span class="n">width</span><span class="o">=</span><span class="mf">0.5</span><span class="p">,</span> <span class="n">fill</span><span class="o">=</span><span class="s2">&#34;green&#34;</span><span class="p">,</span> <span class="n">show_legend</span><span class="o">=</span><span class="kc">False</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">        <span class="o">+</span> <span class="n">scale_y_continuous</span><span class="p">(</span><span class="n">limits</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">max_legs_value</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">        <span class="o">+</span> <span class="n">scale_x_continuous</span><span class="p">(</span><span class="n">limits</span><span class="o">=</span><span class="p">(</span><span class="mf">0.5</span><span class="p">,</span> <span class="mf">1.5</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">        <span class="o">+</span> <span class="n">coord_flip</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">        <span class="o">+</span> <span class="n">theme_void</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">        <span class="o">+</span> <span class="n">geom_hline</span><span class="p">(</span><span class="n">yintercept</span><span class="o">=</span><span class="mi">0</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">buf</span> <span class="o">=</span> <span class="n">StringIO</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="n">plot</span><span class="o">.</span><span class="n">save</span><span class="p">(</span><span class="n">buf</span><span class="p">,</span> <span class="nb">format</span><span class="o">=</span><span class="s2">&#34;svg&#34;</span><span class="p">,</span> <span class="n">width</span><span class="o">=</span><span class="mf">0.5</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mf">0.3</span><span class="p">,</span> <span class="n">verbose</span><span class="o">=</span><span class="kc">False</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="n">svg_content</span> <span class="o">=</span> <span class="n">buf</span><span class="o">.</span><span class="n">getvalue</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="n">buf</span><span class="o">.</span><span class="n">close</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">    <span class="n">html</span> <span class="o">=</span> <span class="sa">f</span><span class="s2">&#34;&lt;div&gt;</span><span class="si">{</span><span class="n">svg_content</span><span class="si">}</span><span class="s2">&lt;/div&gt;&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="k">return</span> <span class="n">html</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># This might be familiar by now</span>
</span></span><span class="line"><span class="cl"><span class="n">gt</span><span class="o">.</span><span class="n">fmt</span><span class="p">(</span><span class="n">fns</span><span class="o">=</span><span class="n">create_plot_plotnine</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;Plot&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="hbekmneezk" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#hbekmneezk table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#hbekmneezk thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#hbekmneezk p { margin: 0; padding: 0; }
#hbekmneezk .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#hbekmneezk .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#hbekmneezk .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#hbekmneezk .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#hbekmneezk .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#hbekmneezk .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#hbekmneezk .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#hbekmneezk .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#hbekmneezk .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#hbekmneezk .gt_column_spanner_outer:first-child { padding-left: 0; }
#hbekmneezk .gt_column_spanner_outer:last-child { padding-right: 0; }
#hbekmneezk .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#hbekmneezk .gt_spanner_row { border-bottom-style: hidden; }
#hbekmneezk .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#hbekmneezk .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#hbekmneezk .gt_from_md&gt; :first-child { margin-top: 0; }
#hbekmneezk .gt_from_md&gt; :last-child { margin-bottom: 0; }
#hbekmneezk .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#hbekmneezk .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#hbekmneezk .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#hbekmneezk .gt_row_group_first td { border-top-width: 2px; }
#hbekmneezk .gt_row_group_first th { border-top-width: 2px; }
#hbekmneezk .gt_striped { color: #333333; background-color: #F4F4F4; }
#hbekmneezk .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#hbekmneezk .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#hbekmneezk .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#hbekmneezk .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#hbekmneezk .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#hbekmneezk .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#hbekmneezk .gt_left { text-align: left; }
#hbekmneezk .gt_center { text-align: center; }
#hbekmneezk .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#hbekmneezk .gt_font_normal { font-weight: normal; }
#hbekmneezk .gt_font_bold { font-weight: bold; }
#hbekmneezk .gt_font_italic { font-style: italic; }
#hbekmneezk .gt_super { font-size: 65%; }
#hbekmneezk .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#hbekmneezk .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="gt_col_headings">
<th id="Animal" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Animal</th>
<th id="Legs" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Legs</th>
<th id="Plot" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Plot</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Ostrich</td>
<td class="gt_row gt_right">2</td>
<td class="gt_row gt_right"><div>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="36pt" height="21.6pt" viewbox="0 0 36 21.6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<metadata>
<rdf xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<work>
<type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></type>
<date>2026-03-13T11:58:39.602794</date>
<format>image/svg+xml</format>
<creator>
<agent>
<title>
Matplotlib v3.10.8, https://matplotlib.org/
</title>
</agent>
</creator>
</work>
</rdf>
</metadata>
<defs>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 21.6 
L 36 21.6 
L 36 0 
L 0 0 
z
" style="fill: #ffffff"></path>
</g>
<g id="axes_1">
<g id="matplotlib.axis_1">
<g id="xtick_1"></g>
<g id="xtick_2"></g>
<g id="xtick_3"></g>
<g id="xtick_4"></g>
<g id="xtick_5"></g>
<g id="xtick_6"></g>
<g id="xtick_7"></g>
<g id="xtick_8"></g>
<g id="xtick_9"></g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1"></g>
<g id="ytick_2"></g>
<g id="ytick_3"></g>
<g id="ytick_4"></g>
<g id="ytick_5"></g>
<g id="ytick_6"></g>
<g id="ytick_7"></g>
<g id="ytick_8"></g>
<g id="ytick_9"></g>
</g>
<g id="PolyCollection_1">
<path d="M 1.636364 15.709091 
L 1.636364 5.890909 
L 9.818182 5.890909 
L 9.818182 15.709091 
z
" clip-path="url(#pb77253c51c)" style="fill: #008000"></path>
</g>
<g id="LineCollection_1">
<path d="M 1.636364 21.6 
L 1.636364 -0 
" clip-path="url(#pb77253c51c)" style="fill: none; stroke: #000000; stroke-width: 0.886227"></path>
</g>
</g>
</g>
<defs>
<clippath id="pb77253c51c">
<rect x="0" y="0" width="36" height="21.6"></rect>
</clippath>
</defs>
</svg>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Spider</td>
<td class="gt_row gt_right">8</td>
<td class="gt_row gt_right"><div>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="36pt" height="21.6pt" viewbox="0 0 36 21.6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<metadata>
<rdf xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<work>
<type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></type>
<date>2026-03-13T11:58:39.641571</date>
<format>image/svg+xml</format>
<creator>
<agent>
<title>
Matplotlib v3.10.8, https://matplotlib.org/
</title>
</agent>
</creator>
</work>
</rdf>
</metadata>
<defs>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 21.6 
L 36 21.6 
L 36 0 
L 0 0 
z
" style="fill: #ffffff"></path>
</g>
<g id="axes_1">
<g id="matplotlib.axis_1">
<g id="xtick_1"></g>
<g id="xtick_2"></g>
<g id="xtick_3"></g>
<g id="xtick_4"></g>
<g id="xtick_5"></g>
<g id="xtick_6"></g>
<g id="xtick_7"></g>
<g id="xtick_8"></g>
<g id="xtick_9"></g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1"></g>
<g id="ytick_2"></g>
<g id="ytick_3"></g>
<g id="ytick_4"></g>
<g id="ytick_5"></g>
<g id="ytick_6"></g>
<g id="ytick_7"></g>
<g id="ytick_8"></g>
<g id="ytick_9"></g>
</g>
<g id="PolyCollection_1">
<path d="M 1.636364 15.709091 
L 1.636364 5.890909 
L 34.363636 5.890909 
L 34.363636 15.709091 
z
" clip-path="url(#p7dab6c5e74)" style="fill: #008000"></path>
</g>
<g id="LineCollection_1">
<path d="M 1.636364 21.6 
L 1.636364 -0 
" clip-path="url(#p7dab6c5e74)" style="fill: none; stroke: #000000; stroke-width: 0.886227"></path>
</g>
</g>
</g>
<defs>
<clippath id="p7dab6c5e74">
<rect x="0" y="0" width="36" height="21.6"></rect>
</clippath>
</defs>
</svg>
</div></td>
</tr>
<tr>
<td class="gt_row gt_left">Lion</td>
<td class="gt_row gt_right">4</td>
<td class="gt_row gt_right"><div>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="36pt" height="21.6pt" viewbox="0 0 36 21.6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<metadata>
<rdf xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<work>
<type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></type>
<date>2026-03-13T11:58:39.678418</date>
<format>image/svg+xml</format>
<creator>
<agent>
<title>
Matplotlib v3.10.8, https://matplotlib.org/
</title>
</agent>
</creator>
</work>
</rdf>
</metadata>
<defs>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 21.6 
L 36 21.6 
L 36 0 
L 0 0 
z
" style="fill: #ffffff"></path>
</g>
<g id="axes_1">
<g id="matplotlib.axis_1">
<g id="xtick_1"></g>
<g id="xtick_2"></g>
<g id="xtick_3"></g>
<g id="xtick_4"></g>
<g id="xtick_5"></g>
<g id="xtick_6"></g>
<g id="xtick_7"></g>
<g id="xtick_8"></g>
<g id="xtick_9"></g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1"></g>
<g id="ytick_2"></g>
<g id="ytick_3"></g>
<g id="ytick_4"></g>
<g id="ytick_5"></g>
<g id="ytick_6"></g>
<g id="ytick_7"></g>
<g id="ytick_8"></g>
<g id="ytick_9"></g>
</g>
<g id="PolyCollection_1">
<path d="M 1.636364 15.709091 
L 1.636364 5.890909 
L 18 5.890909 
L 18 15.709091 
z
" clip-path="url(#p83128198cc)" style="fill: #008000"></path>
</g>
<g id="LineCollection_1">
<path d="M 1.636364 21.6 
L 1.636364 -0 
" clip-path="url(#p83128198cc)" style="fill: none; stroke: #000000; stroke-width: 0.886227"></path>
</g>
</g>
</g>
<defs>
<clippath id="p83128198cc">
<rect x="0" y="0" width="36" height="21.6"></rect>
</clippath>
</defs>
</svg>
</div></td>
</tr>
</tbody>
</table>
</div>
<p>Nice! But that was a sizable chunk of code just to create plots comprised of one bar each. If you&rsquo;re like me, you&rsquo;ll find it&rsquo;s not at all trivial to do, especially without experience using the plotting package.</p>
<p>However, this isn&rsquo;t the only graphic you might want to have on display &ndash; when you come across a use case that necessitates more detailed plots, a comprehensive plotting package like <code>plotnine</code> could very well be your best bet. Imagine we are passing in a list of tuples and want to generate a scatterplot, writing all of those as <code>svg.py</code> elements or direct HTML would be quite cumbersome.</p>
<h2 id="conclusion">Conclusion
</h2>
<p>How you choose to add plots to Great Tables is up to you. In writing graphical plotting functions for <a href="https://posit-dev.github.io/gt-extras/articles/intro.html" target="_blank" rel="noopener"><strong>gt-extras</strong></a>
, I&rsquo;ve personally turned towards an HTML-only approach that I&rsquo;ve felt comfortable with in other settings. With that said, I do believe converting table values to graphic output is a task best done with a little bit of help (whether it be <code>svg-py</code> or another plotting package will depend on how detailed your plots are).</p>
<p>The choice ultimately depends on your specific needs: simplicity and directness, versus abstraction and power. By understanding the trade-offs, you will be able to tailor your approach to the needs of your project.</p>
]]></description>
    </item>
    <item>
      <title>Great Tables &#43; marimo = Interactive Tables</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/marimo-and-great-tables/</link>
      <pubDate>Tue, 24 Jun 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/marimo-and-great-tables/</guid>
      <dc:creator>Rich Iannone</dc:creator>
      <dc:creator>Jerry Wu</dc:creator><description><![CDATA[<p>Jerry Wu&rsquo;s <a href="https://tech.ycwu.space/posts/gt-marimo-in-quarto/20250612.html" target="_blank" rel="noopener">recent post</a>
 demonstrates how Great Tables can be made reactive in a marimo notebook. The post showcases a really nice integration where marimo&rsquo;s reactive widgets can be embedded directly into Great Tables using the <a href="https://posit-dev.github.io/great-tables/reference/html.html" target="_blank" rel="noopener"><code>html()</code></a>
 helper function. This effectively creates an interactive table that updates in real-time whenever users interact with the controls.</p>
<h2 id="interactive-table-demo">Interactive Table Demo
</h2>
<p>Here&rsquo;s a screencast (based on the <a href="https://tech.ycwu.space/posts/gt-marimo-in-quarto/20250612.html" target="_blank" rel="noopener">aforementioned post</a>
) showing Jerry&rsquo;s GT table in marimo. It demonstrates how the embedded marimo widgets create reactive effects, allowing you to directly modify the table in real-time.</p>
<figure>
<img src="https://posit-open-source.netlify.app/blog/great-tables/marimo-and-great-tables/gt_marimo.gif" alt="Interactive Great Tables with marimo widgets" />
<figcaption aria-hidden="true">Interactive Great Tables with marimo widgets</figcaption>
</figure>
<p>The marimo reactive widgets can be embedded into a GT table through the <a href="https://posit-dev.github.io/great-tables/reference/html.html" target="_blank" rel="noopener"><code>html()</code></a>
 helper function. In Jerry&rsquo;s example, the table responds to widget changes in the <a href="https://posit-dev.github.io/great-tables/reference/GT.opt_stylize.html" target="_blank" rel="noopener"><code>opt_stylize()</code></a>
 method call, where the <code>.value</code> attributes for all of the widgets are passed in as arguments.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt</span><span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">style</span><span class="o">=</span><span class="n">style_widget</span><span class="o">.</span><span class="n">value</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">color</span><span class="o">=</span><span class="n">color_widget</span><span class="o">.</span><span class="n">value</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">add_row_striping</span><span class="o">=</span><span class="n">row_striping_widget</span><span class="o">.</span><span class="n">value</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="marimo-showcases-the-integration">marimo Showcases the Integration
</h2>
<p>The marimo team must have seen that post and liked what they saw! They recently released a video showcasing how marimo widgets work with Great Tables to create reactive tables.</p>















  

  
  
  
    
    
  

  
  










  
  
    <div class="w-full aspect-video">
      <iframe
        src="https://www.youtube.com/embed/09ByveIiXGY"
        class="w-full h-full"
        
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>
  




<p>For more details on marimo&rsquo;s widget system, check out their <a href="https://docs.marimo.io/api/inputs/" target="_blank" rel="noopener">UI elements documentation</a>
 and <a href="https://docs.marimo.io/guides/reactivity/" target="_blank" rel="noopener">reactivity guide</a>
.</p>
<h2 id="marimo--quarto-integration">marimo + Quarto Integration
</h2>
<p>For those interested in embedding marimo notebooks directly in Quarto documents, the marimo team has also created a <a href="https://github.com/marimo-team/quarto-marimo" target="_blank" rel="noopener">quarto-marimo plugin</a>
. This extension allows you to run marimo code blocks natively within Quarto documents, making it easy to create interactive content that combines the best of both tools. It&rsquo;s a very exciting development since we use Quarto extensively (our docs and this very blog post were authored through Quarto!). And naturally there&rsquo;s a video for this as well.</p>















  

  
  
  
    
    
  

  
  










  
  
    <div class="w-full aspect-video">
      <iframe
        src="https://www.youtube.com/embed/scuGmtv81S0"
        class="w-full h-full"
        
        frameborder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>
  




<h2 id="wrapping-up">Wrapping Up
</h2>
<p>We&rsquo;re excited by how the marimo team is committed to creating seamless integrations with popular tools like Great Tables and Quarto. We&rsquo;re also excited to see what new features and integrations they&rsquo;ll develop next!</p>
<p>Be sure to check out the <a href="https://www.youtube.com/@marimo-team" target="_blank" rel="noopener">marimo YouTube channel</a>
 as they consistently produce high-quality videos that demonstrate the power of reactive notebooks in action.</p>
]]></description>
      <enclosure url="https://posit-open-source.netlify.app/blog/great-tables/marimo-and-great-tables/gt_marimo.gif" length="1273278" type="image/gif" />
    </item>
    <item>
      <title>svglite 2.2.0</title>
      <link>https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/</link>
      <pubDate>Wed, 07 May 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/</guid>
      <dc:creator>Thomas Lin Pedersen</dc:creator><description><![CDATA[<style type='text/css'>
pre {
  text-wrap: nowrap;
  overflow-x: scroll;
}
</style>
<!--
TODO:
* [x] Look over / edit the post's title in the yaml
* [x] Edit (or delete) the description; note this appears in the Twitter card
* [x] Pick category and tags (see existing with `hugodown::tidy_show_meta()`)
* [x] Find photo & update yaml metadata
* [x] Create `thumbnail-sq.jpg`; height and width should be equal
* [x] Create `thumbnail-wd.jpg`; width should be >5x height
* [x] `hugodown::use_tidy_thumbnails()`
* [x] Add intro sentence, e.g. the standard tagline for the package
* [x] `usethis::use_tidy_thanks()`
-->
<p>We&rsquo;re pleased to announce the release of <a href="https://svglite.r-lib.org" target="_blank" rel="noopener">svglite</a>
 2.2.0. svglite is a graphic device that is capable of creating SVG files from R graphics. SVG is a vector graphic format which means that it encodes the instructions for recreating a graphic in a scale-independent way. This is in contrast with raster graphics, such as PNG (as can be produced with the graphic devices in <a href="https://ragg.r-lib.org" target="_blank" rel="noopener">ragg</a>
), which encode actual pixel values and will get pixelated as you zoom in.</p>
<p>You can install it from CRAN with:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">install.packages</span><span class="p">(</span><span class="s">&#34;svglite&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>This blog post will describe the news features available the release, with a special focus on text rendering and font handling.</p>
<p>You can see a full list of changes in the <a href="https://svglite.r-lib.org/news/index.html" target="_blank" rel="noopener">release notes</a>
</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">library</span><span class="p">(</span><span class="n">svglite</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">library</span><span class="p">(</span><span class="n">grid</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="graphics-engine-support">Graphics engine support
</h2>
<p>With this release svglite now supports all the latest features offered by the R graphics engine. The graphics engine is the part of R that communicate plotting instructions from the user to the graphics device, and the last couple of years Paul Murrell has made a huge amount of working adding to what is possible with R graphics. svglite already supported a bunch of these with the 2.0.0 release, but with 2.2.0 the support is complete (for now).</p>
<h3 id="stroking-and-filling-complex-paths">Stroking and filling complex paths
</h3>
<p><a href="https://www.stat.auckland.ac.nz/~paul/Reports/GraphicsEngine/paths/paths.html" target="_blank" rel="noopener">In 4.2.0 R gained the ability to create complex path objects</a>
 out of (almost) any grob or collection of grobs. Now, svglite supports this, even allowing text to be used. First, let&rsquo;s see how a compound grob looks when it is rendered normally:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="n">circle</span> <span class="o">&lt;-</span> <span class="nf">circleGrob</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="n">r</span> <span class="o">=</span> <span class="m">.25</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">gp</span> <span class="o">=</span> <span class="nf">gpar</span><span class="p">(</span><span class="n">col</span> <span class="o">=</span> <span class="s">&#34;black&#34;</span><span class="p">,</span> <span class="n">lwd</span> <span class="o">=</span> <span class="m">5</span><span class="p">,</span> <span class="n">fill</span> <span class="o">=</span> <span class="s">&#34;goldenrod&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">text</span> <span class="o">&lt;-</span> <span class="nf">textGrob</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="s">&#34;svglite&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">gp</span> <span class="o">=</span> <span class="nf">gpar</span><span class="p">(</span><span class="n">col</span> <span class="o">=</span> <span class="s">&#34;forestgreen&#34;</span><span class="p">,</span> <span class="n">fontsize</span> <span class="o">=</span> <span class="m">110</span><span class="p">,</span> <span class="n">fontface</span> <span class="o">=</span> <span class="s">&#34;bold&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">gt</span> <span class="o">&lt;-</span> <span class="nf">gTree</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="n">children</span> <span class="o">=</span> <span class="nf">gList</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">circle</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">text</span>
</span></span><span class="line"><span class="cl">  <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nf">grid.draw</span><span class="p">(</span><span class="n">gt</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/figure/unnamed-chunk-3-1.svg"
      alt="plot of chunk unnamed-chunk-3" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>Instead, if we render it as a compound path (using the even-odd filling rule) we get this:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">grid.draw</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="nf">fillGrob</span><span class="p">(</span><span class="n">gt</span><span class="p">,</span> <span class="n">rule</span> <span class="o">=</span> <span class="s">&#34;evenodd&#34;</span><span class="p">,</span> <span class="n">gp</span> <span class="o">=</span> <span class="nf">gpar</span><span class="p">(</span><span class="n">fill</span> <span class="o">=</span> <span class="s">&#34;steelblue&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/figure/unnamed-chunk-4-1.svg"
      alt="plot of chunk unnamed-chunk-4" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>Observe how everything is now part of the same graphic object, and that the even-odd filling rule makes it so that the overlap is empty. Another point is that the graphic parameters of the composite grob doesn&rsquo;t have an effect on the compound path as only the path information is used.</p>
<p>If you open up the two SVGs in a vector image editor like Inkscape or Affinity Designer, you can see another difference. In the first SVG the text is still editable, while in the second it is not. This is because that in order to support compound paths the glyphs have to be converted to paths, destroying the notion of &ldquo;text&rdquo; they might have had.</p>
<h3 id="groups">Groups
</h3>
<p>Another novelty in R 4.2.0 was the ability to define &ldquo;groups&rdquo; that could be reused, composed, and transformed. This is now also possible in svglite, though with a slight limitation in the number of composition operators possible. Inexplicably, the SVG standard has mode Porter-Duff composition way more complicated than colour blending to the extent that it doesn&rsquo;t really work with how the graphics engine is set up. Still, most of what makes groups great works:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">grid.group</span><span class="p">(</span><span class="n">text</span><span class="p">,</span> <span class="s">&#34;difference&#34;</span><span class="p">,</span> <span class="n">circle</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/figure/unnamed-chunk-5-1.svg"
      alt="plot of chunk unnamed-chunk-5" 
      loading="lazy"
    >
  </figure></div>
</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">grid.define</span><span class="p">(</span><span class="n">gt</span><span class="p">,</span> <span class="n">name</span> <span class="o">=</span> <span class="s">&#34;gt&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">grid.use</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="s">&#34;gt&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">transform</span> <span class="o">=</span> <span class="nf">\</span><span class="p">(</span><span class="kc">...</span><span class="p">)</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nf">viewportTransform</span><span class="p">(</span><span class="kc">...</span><span class="p">,</span> <span class="n">shear</span> <span class="o">=</span> <span class="nf">groupShear</span><span class="p">(</span><span class="n">sx</span> <span class="o">=</span> <span class="m">2</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/figure/unnamed-chunk-6-1.svg"
      alt="plot of chunk unnamed-chunk-6" 
      loading="lazy"
    >
  </figure></div>
</p>
<h3 id="glyphs">Glyphs
</h3>
<p>A slightly newer feature that came with R 4.3.0 is the glyph interface for rendering rich text. Despite the fact that this is what allows complex text layouting to work in e.g. <a href="https://marquee.r-lib.org" target="_blank" rel="noopener">marquee</a>
, at the device side it is actually really simple. It gets a font file, an index for the glyph in that file, and a location for the glyph and is then tasked with rendering it. This is in contrast with the standard text support where you get a string, a font family name, etc. and have to figure out on your own the location of the font file, how glyphs should be placed to look correct etc.</p>
<p>Still, the glyph interface presents a problem for svglite because it tries very hard to create output that can be edited in post-production, and in order to support the glyph interface we have to (like with the compound paths above) render the glyphs as <code>&lt;path&gt;</code> elements instead of <code>&lt;text&gt;</code> elements. There is simply no way in SVG to place glyphs individually based on a font file and a glyph index. However, some support is better than none, so until I find a way to render marquee text in an editable way with svglite, you have at least support for rendering of the text:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">grid.draw</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="n">marquee</span><span class="o">::</span><span class="nf">marquee_grob</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="s">&#34;This *is* now working with `{svglite}` 🎉&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">style</span> <span class="o">=</span> <span class="n">marquee</span><span class="o">::</span><span class="nf">classic_style</span><span class="p">(</span><span class="n">base_size</span> <span class="o">=</span> <span class="m">28</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="n">y</span> <span class="o">=</span> <span class="m">0.5</span>
</span></span><span class="line"><span class="cl">  <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/figure/unnamed-chunk-7-1.svg"
      alt="plot of chunk unnamed-chunk-7" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>Again, opening up the SVG in a text editor you&rsquo;ll see no trace of the input text there as it has all been converted to <code>&lt;path&gt;</code> elements (and an <code>&lt;image&gt;</code> element in the case of the emoji)</p>
<h2 id="font-embedding">Font embedding
</h2>
<p>If you have followed my work over the last years you know that I&rsquo;ve grown to care deeply about text rendering, and it&rsquo;s cousin: font handling. SVG files (as well as PDF files) are special in that regard because the text is not rendered directly in the file (except for the glyph implementation discussed above), but rather postponed until the file is opened. This poses the problem of the font potentially not being available on the machine(s) that is eventually going to open the file.</p>
<p>You can avoid all of these by only using fonts that are considered &ldquo;web-safe&rdquo;, such as Arial, Times New Roman, Courier, etc. but what a poor world to live in if those fonts were the only ones used in data visualization. Instead, you can use whatever font you like and embed the font specification in the file so it travels along and is available wherever the file is opened.</p>
<p><code>svglite()</code> has for a while had the <code>web_fonts</code> argument which allow you to specify font imports to add to the SVG file. With the new release, however, this has been tightened up and in unison with new functionality in systemfonts I believe the gordian knot of font handling in SVGs have finally been untied (this statement will come back to hunt me, I&rsquo;m sure).</p>
<p>systemfonts now provide the function <code>fonts_as_import()</code>, which allows you to get a URL pointing to a stylesheet with the font to be added. Most often, the font will be served by <a href="https://fonts.google.com" target="_blank" rel="noopener">Google Fonts</a>
, but the alternative repository <a href="https://fontlibrary.org" target="_blank" rel="noopener">Font Library</a>
 is also supported:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">fonts_as_import</span><span class="p">(</span><span class="s">&#34;Open Sans&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><pre tabindex="0"><code>## [1] &#34;https://fonts.googleapis.com/css2?family=Open+Sans&amp;display=swap&#34;
</code></pre><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">fonts_as_import</span><span class="p">(</span><span class="s">&#34;Bedstead&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><pre tabindex="0"><code>## [1] &#34;https://fontlibrary.org/face/bedstead&#34;
</code></pre><p>The output of this function can be used directly in the <code>web_fonts</code> argument making it very easy to embed any font of your liking in an SVG. Even easier, you can also just pass in the font family name and svglite will take care of the rest (though you loose out on the customization offered by <code>fonts_as_import()</code>):</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">library</span><span class="p">(</span><span class="n">ggplot2</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">require_font</span><span class="p">(</span><span class="s">&#34;Almendra&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">p</span> <span class="o">&lt;-</span> <span class="nf">ggplot</span><span class="p">(</span><span class="nf">na.omit</span><span class="p">(</span><span class="n">penguins</span><span class="p">))</span> <span class="o">+</span>
</span></span><span class="line"><span class="cl">  <span class="nf">geom_point</span><span class="p">(</span><span class="nf">aes</span><span class="p">(</span><span class="n">flipper_len</span><span class="p">,</span> <span class="n">body_mass</span><span class="p">,</span> <span class="n">colour</span> <span class="o">=</span> <span class="n">species</span><span class="p">))</span> <span class="o">+</span>
</span></span><span class="line"><span class="cl">  <span class="nf">theme_minimal</span><span class="p">(</span><span class="n">base_family</span> <span class="o">=</span> <span class="s">&#34;Almendra&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">svg</span> <span class="o">&lt;-</span> <span class="nf">svgstring</span><span class="p">(</span><span class="n">web_fonts</span> <span class="o">=</span> <span class="s">&#34;Almendra&#34;</span><span class="p">,</span> <span class="n">scaling</span> <span class="o">=</span> <span class="m">2</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">plot</span><span class="p">(</span><span class="n">p</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">invisible</span><span class="p">(</span><span class="nf">dev.off</span><span class="p">())</span>
</span></span><span class="line"><span class="cl"><span class="nf">svg</span><span class="p">()</span>
</span></span></code></pre></td></tr></table>
</div>
</div><?xml version='1.0' encoding='UTF-8' ?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='720.00pt' height='576.00pt' viewBox='0 0 720.00 576.00'>
<g class='svglite'>
<defs>
  <style type='text/css'><![CDATA[
    @import url('https://fonts.googleapis.com/css2?family=Almendra&display=swap');
    .svglite line, .svglite polyline, .svglite polygon, .svglite path, .svglite rect, .svglite circle {
      fill: none;
      stroke: #000000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: 10.00;
    }
    .svglite text {
      white-space: pre;
    }
    .svglite g.glyphgroup path {
      fill: inherit;
      stroke: none;
    }
  ]]></style>
</defs>
<rect width='100%' height='100%' style='stroke: none; fill: #FFFFFF;'/>
<defs>
  <clipPath id='cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA='>
    <rect x='0.00' y='0.00' width='720.00' height='576.00' />
  </clipPath>
</defs>
<g clip-path='url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)'>
</g>
<defs>
  <clipPath id='cpODAuNDJ8NTQ5LjUzfDEwLjk2fDUxNC42MQ=='>
    <rect x='80.42' y='10.96' width='469.11' height='503.65' />
  </clipPath>
</defs>
<g clip-path='url(#cpODAuNDJ8NTQ5LjUzfDEwLjk2fDUxNC42MQ==)'>
<polyline points='80.42,389.97 549.53,389.97 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='80.42,262.78 549.53,262.78 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='80.42,135.60 549.53,135.60 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='123.43,514.61 123.43,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='195.71,514.61 195.71,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='267.99,514.61 267.99,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='340.28,514.61 340.28,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='412.56,514.61 412.56,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='484.84,514.61 484.84,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='80.42,453.56 549.53,453.56 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='80.42,326.37 549.53,326.37 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='80.42,199.19 549.53,199.19 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='80.42,72.01 549.53,72.01 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='87.29,514.61 87.29,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='159.57,514.61 159.57,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='231.85,514.61 231.85,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='304.13,514.61 304.13,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='376.42,514.61 376.42,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='448.70,514.61 448.70,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='520.98,514.61 520.98,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<circle cx='166.80' cy='358.17' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='202.94' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='421.76' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='370.89' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='166.80' cy='374.07' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='240.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='174.03' cy='428.12' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='289.68' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='282.45' cy='262.78' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='188.48' cy='412.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='260.77' cy='300.94' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='116.20' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='159.57' cy='377.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='224.63' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='159.57' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='181.26' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='428.12' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='101.75' cy='434.48' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='159.57' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='145.12' cy='421.76' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='145.12' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='217.40' cy='415.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='188.48' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='412.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='275.22' cy='307.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='159.57' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='166.80' cy='415.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='188.48' cy='243.70' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='174.03' cy='434.48' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='202.94' cy='440.84' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='275.22' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='453.56' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='250.06' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='174.03' cy='399.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='307.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='202.94' cy='389.97' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='217.40' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='304.13' cy='320.01' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='466.28' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='202.94' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='166.80' cy='472.64' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='260.77' cy='358.17' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='434.48' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='377.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='246.31' cy='320.01' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='188.48' cy='472.64' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='246.31' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='409.04' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='217.40' cy='313.66' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='447.20' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='289.68' cy='269.14' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='377.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='275.22' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='282.45' cy='307.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='294.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='188.48' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='326.37' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='224.63' cy='428.12' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='275.22' cy='237.35' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='300.94' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='409.04' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='260.77' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='224.63' cy='389.97' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='224.63' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='377.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='318.59' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='340.28' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='202.94' cy='269.14' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='415.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='361.96' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='275.22' cy='281.86' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='145.12' cy='466.28' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='246.31' cy='313.66' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='246.31' cy='361.35' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='325.82' cy='234.17' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='181.26' cy='444.02' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='294.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='463.10' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='188.48' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='296.91' cy='358.17' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='166.80' cy='431.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='282.45' cy='227.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='289.68' cy='348.63' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='250.06' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='428.12' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='282.45' cy='291.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='275.22' cy='316.84' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='217.40' cy='466.28' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='296.91' cy='354.99' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='224.63' cy='409.04' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='224.63' cy='412.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='434.48' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='289.68' cy='389.97' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='130.66' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='318.59' cy='342.27' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='202.94' cy='447.20' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='296.91' cy='326.37' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='418.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='447.20' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='376.42' cy='326.37' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='412.22' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='282.45' cy='389.97' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='389.97' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='296.91' cy='265.96' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='399.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='239.08' cy='431.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='304.13' cy='329.55' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='294.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='393.15' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='217.40' cy='447.20' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='361.35' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='246.31' cy='453.56' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='195.71' cy='370.89' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='231.85' cy='294.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='188.48' cy='393.15' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='267.99' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='253.54' cy='358.17' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.17' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='311.36' cy='326.37' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='383.64' cy='262.78' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='520.98' cy='110.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='269.14' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='434.24' cy='110.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='148.32' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='256.42' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='383.64' cy='224.63' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='441.47' cy='173.75' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='369.19' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='180.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='405.33' cy='243.70' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='419.79' cy='129.24' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='405.33' cy='243.70' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='398.10' cy='91.08' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='300.94' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.01' cy='91.08' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='307.30' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='455.93' cy='33.85' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='369.19' cy='224.63' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='463.15' cy='154.68' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='434.24' cy='110.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='199.19' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='398.10' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='192.83' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='199.19' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='186.47' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='116.52' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='250.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='129.24' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='463.15' cy='167.39' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='369.19' cy='237.35' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='354.73' cy='192.83' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='520.98' cy='65.65' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='180.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='148.32' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='398.10' cy='205.55' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='441.47' cy='167.39' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='361.96' cy='281.86' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='361.96' cy='154.68' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='361.96' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='484.84' cy='110.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='419.79' cy='230.99' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='463.15' cy='129.24' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.01' cy='211.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='300.94' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='484.84' cy='148.32' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='398.10' cy='186.47' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='161.04' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='218.27' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='161.04' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='484.84' cy='199.19' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.01' cy='211.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='192.83' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='361.96' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='199.19' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='361.96' cy='269.14' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='477.61' cy='129.24' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='361.96' cy='300.94' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='455.93' cy='161.04' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='405.33' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='528.21' cy='116.52' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='441.47' cy='237.35' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='520.98' cy='110.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='513.75' cy='97.44' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='237.35' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='470.38' cy='129.24' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='419.79' cy='230.99' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='455.93' cy='199.19' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='455.93' cy='186.47' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.01' cy='173.75' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='419.79' cy='237.35' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='520.98' cy='97.44' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='369.19' cy='250.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='448.70' cy='72.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='230.99' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='470.38' cy='78.37' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='390.87' cy='246.88' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='455.93' cy='141.96' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='390.87' cy='234.17' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='477.61' cy='154.68' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='390.87' cy='230.99' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='506.52' cy='122.88' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='434.24' cy='250.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='434.24' cy='161.04' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='390.87' cy='215.09' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='520.98' cy='129.24' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='434.24' cy='205.55' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='506.52' cy='148.32' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='390.87' cy='230.99' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='477.61' cy='116.52' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='405.33' cy='218.27' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='492.07' cy='173.75' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='419.79' cy='208.73' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='463.15' cy='215.09' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='325.82' cy='246.88' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='484.84' cy='167.39' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='441.47' cy='218.27' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='506.52' cy='122.88' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='202.37' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='506.52' cy='135.60' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='135.60' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='376.42' cy='237.35' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='441.47' cy='135.60' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='361.96' cy='253.24' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='369.19' cy='135.60' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='419.79' cy='199.19' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='513.75' cy='78.37' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='398.10' cy='243.70' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='520.98' cy='135.60' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.01' cy='278.68' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='520.98' cy='91.08' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='463.15' cy='72.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='405.33' cy='208.73' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='412.56' cy='218.27' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='463.15' cy='103.80' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='390.87' cy='173.75' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='398.10' cy='148.32' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='246.31' cy='389.97' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='275.22' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='253.54' cy='370.89' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='217.40' cy='386.79' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='282.45' cy='361.35' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='289.68' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='145.12' cy='421.76' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='282.45' cy='358.17' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='267.99' cy='307.30' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='289.68' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='253.54' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='260.77' cy='354.99' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='195.71' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.36' cy='320.01' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='231.85' cy='380.43' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.36' cy='320.01' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='282.45' cy='415.40' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='166.80' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='231.85' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='267.99' cy='275.50' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='166.80' cy='377.25' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='239.08' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='210.17' cy='466.28' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='253.54' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='267.99' cy='415.40' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='282.45' cy='307.30' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='304.13' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='304.13' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='239.08' cy='364.53' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='340.28' cy='256.42' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='210.17' cy='428.12' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.36' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='210.17' cy='409.04' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='325.82' cy='313.66' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='267.99' cy='377.25' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='296.91' cy='339.09' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='267.99' cy='345.45' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='376.42' cy='224.63' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='246.31' cy='491.71' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='340.28' cy='262.78' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='376.42' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='210.17' cy='370.89' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='275.22' cy='383.61' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='275.22' cy='389.97' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='275.22' cy='367.71' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.36' cy='269.14' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='231.85' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='390.87' cy='288.22' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='210.17' cy='421.76' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='289.68' cy='367.71' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='296.91' cy='412.22' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.36' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='253.54' cy='377.25' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='325.82' cy='320.01' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='210.17' cy='409.04' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='282.45' cy='396.33' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='239.08' cy='421.76' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='325.82' cy='320.01' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='318.59' cy='351.81' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='260.77' cy='386.79' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='347.50' cy='332.73' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='224.63' cy='370.89' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='267.99' cy='370.89' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='354.73' cy='326.37' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='318.59' cy='402.68' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='253.54' cy='354.99' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='376.42' cy='313.66' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='289.68' cy='354.99' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
</g>
<g clip-path='url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)'>
<text x='70.56' y='459.36' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='34.27px' lengthAdjust='spacingAndGlyphs'>3000</text>
<text x='70.56' y='332.17' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='34.62px' lengthAdjust='spacingAndGlyphs'>4000</text>
<text x='70.56' y='204.99' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='34.45px' lengthAdjust='spacingAndGlyphs'>5000</text>
<text x='70.56' y='77.81' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='34.28px' lengthAdjust='spacingAndGlyphs'>6000</text>
<text x='87.29' y='536.07' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='21.50px' lengthAdjust='spacingAndGlyphs'>170</text>
<text x='159.57' y='536.07' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='23.02px' lengthAdjust='spacingAndGlyphs'>180</text>
<text x='231.85' y='536.07' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='22.58px' lengthAdjust='spacingAndGlyphs'>190</text>
<text x='304.13' y='536.07' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='25.38px' lengthAdjust='spacingAndGlyphs'>200</text>
<text x='376.42' y='536.07' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='22.45px' lengthAdjust='spacingAndGlyphs'>210</text>
<text x='448.70' y='536.07' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='24.41px' lengthAdjust='spacingAndGlyphs'>220</text>
<text x='520.98' y='536.07' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Almendra";' textLength='24.52px' lengthAdjust='spacingAndGlyphs'>230</text>
<text x='314.98' y='560.04' text-anchor='middle' style='font-size: 22.00px; font-family: "Almendra";' textLength='101.16px' lengthAdjust='spacingAndGlyphs'>flipper_len</text>
<text transform='translate(25.46,262.78) rotate(-90)' text-anchor='middle' style='font-size: 22.00px; font-family: "Almendra";' textLength='104.80px' lengthAdjust='spacingAndGlyphs'>body_mass</text>
<text x='582.41' y='212.71' style='font-size: 22.00px; font-family: "Almendra";' textLength='62.08px' lengthAdjust='spacingAndGlyphs'>species</text>
<circle cx='599.69' cy='243.45' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='599.69' cy='278.01' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='599.69' cy='312.57' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<text x='627.93' y='249.25' style='font-size: 17.60px; font-family: "Almendra";' textLength='44.88px' lengthAdjust='spacingAndGlyphs'>Adelie</text>
<text x='627.93' y='283.81' style='font-size: 17.60px; font-family: "Almendra";' textLength='70.16px' lengthAdjust='spacingAndGlyphs'>Chinstrap</text>
<text x='627.93' y='318.37' style='font-size: 17.60px; font-family: "Almendra";' textLength='50.12px' lengthAdjust='spacingAndGlyphs'>Gentoo</text>
</g>
</g>
</svg>
<p>Hopefully you can see that the svg above renders with the custom font, and hopefully I chose a font so obscure that you didn&rsquo;t already have it available on your computer so that you can see the font embedding in action.</p>
<p>If you look at the output generated by <code>fonts_as_import()</code> above, you can see they are URLs pointing to an online location as already discussed. This poses the issue that the one opening the SVG needs to be online for it to render correctly. While that is generally true, it is still a major limitation. Another requirement is that the font is available in one of the supported repositories, and that the repository hasn&rsquo;t changed it&rsquo;s API or is down or one of another myriad of reasons why the URL stops being valid. Many of these concerns seldom apply, but if you need your SVG file to by fully self-contained, <code>fonts_as_import()</code> also supports embedding the font data directly into the URL, by opting out of the repositories:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">require_font</span><span class="p">(</span><span class="s">&#34;Quicksand&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">full_embed</span> <span class="o">&lt;-</span> <span class="nf">fonts_as_import</span><span class="p">(</span><span class="s">&#34;Quicksand&#34;</span><span class="p">,</span> <span class="n">repositories</span> <span class="o">=</span> <span class="kc">NULL</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nf">substr</span><span class="p">(</span><span class="n">full_embed</span><span class="p">,</span> <span class="m">1</span><span class="p">,</span> <span class="m">400</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><pre tabindex="0"><code>## [1] &#34;data:text/css,@font-face%20%7B%0A%20%20font-family:%20%22Quicksand%22;%0A%20%20src:%20url(data:font/otf;charset=utf-8;base64,T1RUTwAKAIAAAwAgQ0ZGIIPL1GAAAAtoAABFjUdQT1OvRtmMAABUHAAAGghPUy8ygho88QAAARAAAABgY21hcED/4R8AAAf8AAADSmhlYWT4ztT1AAAArAAAADZoaGVhB/wFfQAAAOQAAAAkaG10eMd0NowAAFD4AAADJG1heHAAyVAAAAABCAAAAAZuYW1lEqs13gAAAXAAAAaJcG9zdP+4ADIAAAtIAAAAIAABAAAAAQCD/Fij2F8PPPUAAwPoAAAAAMq6SGIAAAAAyrp&#34;
</code></pre><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="n">p</span> <span class="o">&lt;-</span> <span class="n">p</span> <span class="o">+</span>
</span></span><span class="line"><span class="cl">  <span class="nf">theme_minimal</span><span class="p">(</span><span class="n">base_family</span> <span class="o">=</span> <span class="s">&#34;Quicksand&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">svg</span> <span class="o">&lt;-</span> <span class="nf">svgstring</span><span class="p">(</span><span class="n">web_fonts</span> <span class="o">=</span> <span class="n">full_embed</span><span class="p">,</span> <span class="n">scaling</span> <span class="o">=</span> <span class="m">2</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">plot</span><span class="p">(</span><span class="n">p</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">invisible</span><span class="p">(</span><span class="nf">dev.off</span><span class="p">())</span>
</span></span><span class="line"><span class="cl"><span class="nf">svg</span><span class="p">()</span>
</span></span></code></pre></td></tr></table>
</div>
</div><?xml version='1.0' encoding='UTF-8' ?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='720.00pt' height='576.00pt' viewBox='0 0 720.00 576.00'>
<g class='svglite'>
<defs>
  <style type='text/css'><![CDATA[
    @import url("data:text/css,@font-face%20%7B%0A%20%20font-family:%20%22Quicksand%22;%0A%20%20src:%20url(data:font/otf;charset=utf-8;base64,T1RUTwAKAIAAAwAgQ0ZGIIPL1GAAAAtoAABFjUdQT1OvRtmMAABUHAAAGghPUy8ygho88QAAARAAAABgY21hcED/4R8AAAf8AAADSmhlYWT4ztT1AAAArAAAADZoaGVhB/wFfQAAAOQAAAAkaG10eMd0NowAAFD4AAADJG1heHAAyVAAAAABCAAAAAZuYW1lEqs13gAAAXAAAAaJcG9zdP+4ADIAAAtIAAAAIAABAAAAAQCD/Fij2F8PPPUAAwPoAAAAAMq6SGIAAAAAyrpIYv/o/zMEWwObAAAAAwACAAAAAAAAAAEAAAO2/ygAAAWj/+j/6ARbAAEAAAAAAAAAAAAAAAAAAADJAABQAADJAAAAAgJEAZAABQAAAGQAZAAAAIwAZABkAAAAjAAyAPoAAAIHAwMAAAAGAACAAACvAAAACAAAAAAAAAAAcHlycwBAAAAhIgO2/ygAAAO2ANggAAERAAAAAAHqArwAAAAgAAIAAAAaAT4AAQAAAAAAAABmAAAAAQAAAAAAAQAJAGYAAQAAAAAAAgAHAG8AAQAAAAAAAwAoAHYAAQAAAAAABAARAJ4AAQAAAAAABQAFAK8AAQAAAAAABgARALQAAQAAAAAABwA3AMUAAQAAAAAACAARAPwAAQAAAAAACQARAPwAAQAAAAAADAAYAQ0AAQAAAAAADQCQASUAAQAAAAAADgAaAbUAAwABBAkAAADMAc8AAwABBAkAAQASApsAAwABBAkAAgAOAq0AAwABBAkAAwBQArsAAwABBAkABAAiAwsAAwABBAkABQAKAy0AAwABBAkABgAiAwsAAwABBAkABwBuAzcAAwABBAkACAAiA6UAAwABBAkACQAiA6UAAwABBAkADAAwA8cAAwABBAkADQEgA/cAAwABBAkADgA0BRdDb3B5cmlnaHQgKGMpIDIwMTEsIEFuZHJldyBQYWdsaW5hd2FuICh3d3cuYW5kcmV3cGFnbGluYXdhbi5jb20pLCB3aXRoIFJlc2VydmVkIEZvbnQgTmFtZSAiUXVpY2tzYW5kIi5RdWlja3NhbmRSZWd1bGFyQW5kcmV3UGFnbGluYXdhbjogUXVpY2tzYW5kIEl0YWxpYzogMjAwOFF1aWNrc2FuZCBSZWd1bGFyMS4wMDJRdWlja3NhbmQtUmVndWxhclF1aWNrc2FuZCBCb2xkIGlzIGEgdHJhZGVtYXJrIG9mIHRoZSBBbmRyZXcgUGFnbGluYXdhbi5BbmRyZXcgUGFnbGluYXdhbnd3dy5hbmRyZXdwYWdsaW5hd2FuLmNvbVRoaXMgRm9udCBTb2Z0d2FyZSBpcyBsaWNlbnNlZCB1bmRlciB0aGUgU0lMIE9wZW4gRm9udCBMaWNlbnNlLCBWZXJzaW9uIDEuMS4gVGhpcyBsaWNlbnNlIGlzIGF2YWlsYWJsZSB3aXRoIGEgRkFRIGF0OiBodHRwOi8vc2NyaXB0cy5zaWwub3JnL09GTGh0dHA6Ly9zY3JpcHRzLnNpbC5vcmcvT0ZMAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMQAxACwAIABBAG4AZAByAGUAdwAgAFAAYQBnAGwAaQBuAGEAdwBhAG4AIAAoAHcAdwB3AC4AYQBuAGQAcgBlAHcAcABhAGcAbABpAG4AYQB3AGEAbgAuAGMAbwBtACkALAAgAHcAaQB0AGgAIABSAGUAcwBlAHIAdgBlAGQAIABGAG8AbgB0ACAATgBhAG0AZQAgACIAUQB1AGkAYwBrAHMAYQBuAGQAIgAuAFEAdQBpAGMAawBzAGEAbgBkAFIAZQBnAHUAbABhAHIAQQBuAGQAcgBlAHcAUABhAGcAbABpAG4AYQB3AGEAbgA6ACAAUQB1AGkAYwBrAHMAYQBuAGQAIABJAHQAYQBsAGkAYwA6ACAAMgAwADAAOABRAHUAaQBjAGsAcwBhAG4AZAAtAFIAZQBnAHUAbABhAHIAMQAuADAAMAAyAFEAdQBpAGMAawBzAGEAbgBkACAAQgBvAGwAZAAgAGkAcwAgAGEAIAB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAHQAaABlACAAQQBuAGQAcgBlAHcAIABQAGEAZwBsAGkAbgBhAHcAYQBuAC4AQQBuAGQAcgBlAHcAIABQAGEAZwBsAGkAbgBhAHcAYQBuAHcAdwB3AC4AYQBuAGQAcgBlAHcAcABhAGcAbABpAG4AYQB3AGEAbgAuAGMAbwBtAFQAaABpAHMAIABGAG8AbgB0ACAAUwBvAGYAdAB3AGEAcgBlACAAaQBzACAAbABpAGMAZQBuAHMAZQBkACAAdQBuAGQAZQByACAAdABoAGUAIABTAEkATAAgAE8AcABlAG4AIABGAG8AbgB0ACAATABpAGMAZQBuAHMAZQAsACAAVgBlAHIAcwBpAG8AbgAgADEALgAxAC4AIABUAGgAaQBzACAAbABpAGMAZQBuAHMAZQAgAGkAcwAgAGEAdgBhAGkAbABhAGIAbABlACAAdwBpAHQAaAAgAGEAIABGAEEAUQAgAGEAdAA6ACAAaAB0AHQAcAA6AC8ALwBzAGMAcgBpAHAAdABzAC4AcwBpAGwALgBvAHIAZwAvAE8ARgBMAGgAdAB0AHAAOgAvAC8AcwBjAHIAaQBwAHQAcwAuAHMAaQBsAC4AbwByAGcALwBPAEYATAAAAAAAAAMAAAADAAABIgABAAAAAAAcAAMAAQAAASIAAAEGAAAAAAAAAAAAAAAbAAAAGwAAAAAAAAAAAAAAAAAAAAAAABtAUGZnABpPQUJSQ05KR0scHR4fICEiIyQlTE1ESUVIU0YBAgMEBQYHCAkKCwwNDg8QERITFBUWFxgZaVRqa1FaJicoKSorLC0uLzAxMjM0NTY3ODk6Ozw9Pj9sbm1iAIbHxbxklJF2X3eHeKXGv77AgsLBw8RldGByhHV+YX+FrJuioQCKs5+cnXBzXgCgqQAAAAC2AAAAAAAAtbAAiKhvmQAAgAAAtK9dG7l9lciBi4xVVlhZngCPjQAArqQAAK2yV4kAfL26g7t6e5h5l5YAW5OSXABxYwAAAACxAAAAAAQCKAAAAEgAQAAFAAgAAAAkAC8AOQBBAFoAYAB6AH4AowClAKsArgCwALIAtAC4ALsA6wDvAP8BUwFhAXgBkgLGAtwDfiAUIBogHiAiICYgOiEi//8AAAAAACAAJgAwADoAQgBbAGEAewCgAKUAqACtALAAsgC0ALYAugC/AOwA8AFSAWABeAGSAsYC3AN+IBMgGCAcICAgJiA5ISL//wAAAAAAAP/sAAD/vwAA/8UAAAAAABEAAAAA/+v/6P+/AAAAAAAA/9UAAAAAAAD/Ff7u/av9h/zP4HgAAAAAAADgNwAA304AAQAAAEYATgAAAF4AAABqAAAAcgB4AAAAfACCAAAAAAAAAH4AggCEAAAA2gD4APoAAAAAAAAAAAAAAAAA8AD0APgAAAD6AAAAAAAbAEAAUABmAGcAGgBPAEEAQgBSAEMATgBKAEcASwBMAE0ARABJAEUASABTAEYAaQBUAGoAawBRAFoAbABuAG0AYgAbAJkAogChAF4AnQC1ALQASgCcALMAsgCxALAArwBvALkAugB8AH0AhgDHAKAAxQC7ALwAvQCDAHkAegB7AJgApgBkAFsAlwCWAJUAlACqAKkAXACTAJIAkQCQALgAnwBfAHYAdwB4AIcApQCIAMYAvgC/AMAAggCnAGUAYAB0AHIAdQCEAJ4AqABhAH4AfwCFAI4AtwCPAMgAgQCrAKMAWABZAFcAVQBWAIkArACtAIoArgCkAAAAAwAAAAAAAP+1ADIAAAAAAAAAAAAAAAAAAAAAAAAAAAEABAIAAQEBElF1aWNrc2FuZC1SZWd1bGFyAAEBASP4EAD4GwH4HAL4HQP4HgRz+2H67/ovBfdlD/jjEaAcOdgSAAQBAWd4gYdDb3B5cmlnaHQgKGMpIDIwMTEsIEFuZHJldyBQYWdsaW5hd2FuICh3d3cuYW5kcmV3cGFnbGluYXdhbi5jb20pLCB3aXRoIFJlc2VydmVkIEZvbnQgTmFtZSAiUXVpY2tzYW5kIi5RdWlja3NhbmQgUmVndWxhclF1aWNrc2FuZE5vcm1hbAAAAQAjGAAHAAABAAARCQBCGQACAAAJAQAMAAAdAAAfAAAiAAAPAAAgAAAeAAAOAAAQAAAbAQANAABoAAADAABAAAALAAAhAAA9AABpAAB3AAB1AABBAAAIAAB8AAC+AADEAAB5AACDAADLAADbAADhAABfAAB/AAC6AADXAAAEAgA8AAA+AQBcAABeAABdAAB7AACZAAB+AADZAAB9AADYAADcAADIAQDNAAC5AAC2AQCsAACwAADeAQBlAACUAADRAAC0AADaAADgAACtAADKAACQAAB2AAB0AABvAACJAADGAADiAQDFAADDAADCAADBAAC9AAC/AAC8AAC7AAC4AABgAACkAAChAAClAACqAACfAACVAACKAABiAABhAADdAABsAADMAACaAACnAACTAACNAACoAADAAABwAQBrAAB4AACPAACFAAByAQBqAACLAABkAACiAACdAACuAACrAAC1AACyAQDSAADPAQDWAADTAgCxAADOAACvAACOAADJAgABAAMAawDgAQYBJQFWAdcCBQISAlYCpgK/AygDaAO1A/cEwQVeBiYGSgaTBvcHlAf5CBYIdAlxCXQJ+wo0CqQLLQuQDCgMowzsDWAN2w3oDjEOOw6c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vwp9C9S8+NILmZaVC5aYHgsHmYALioyKCwAAAAH0AAACUgBoAwMASQLPAGgCUQBoAl0AaAMuAEkCxQBoATEAbwJSACwCywBoAjMAaANMAGgDAwBpA1IASQJHAGgDTABCAnEAWgKbAEMCiAAyAy4AaQLuADsETgA/AtIATAJcADkCmwBJArgAMQEsAAACxgBBAU8AIQJOAC4CYgBJApgAMgJdAD4CggBAAksAQAJ2ADcCggBCAmsAKAKUAF0COwA6ApQAPAJhADoBagBBApQAPAJlAF0BGQBeAPn/+wIwAF0A+QBkA7cAXQJlAF0CcQBGApQAXQKUADwBtwBdAewANQGQACoCZQBTAkYAOANdAD0COgBGAkwANAIqAD0A/ABdAa4ARwGuADwCbABAAmwAPAJsAFsChgA6AOYAUgIWACgCbABPAZgAQgGmAEwA8ABXAPAAOwDmADYA5gBFAZoARQJY/+gBrgBMA9QANQHAAEABmgBNAZoAOwDmAAAA5gBNAOYAOwH0AKMDUgBJAvgAXQKoAFIB9ACFAj4APwKAADoCZQBTAcwAVQH0AGkDFgBpAmUAXgK8AC0CeAA9AzgANwGuAGIBrgA3AfQAUAHgADcB4AA1AR4AeQIWADcCsgAWAfQAjQKAADoB9ADJAoAAOgKAADoCPgA/Aj4APwI+AD8BXACUARIAUwESAAECmAA7ApgAOwJlAFMCZQBTAfoAOAQfADoCSAA9Ap4AaAKAADoCZQBTApcAOwI+AD8DugAzAZoANgHWAG8CEABCA4IAQgLMADkCTAA0AkwANALMADkC+ABdAvgAXQL4AF0DUgBJA1IASQNSAEkDUgBJARL/+AD8AF0BjAAAAcIASgGgACIDPgA1AmwAQAJsAF0EFQAjAoQAQgJFAD4B8QA1ATcAQwI+ADMDLAA3AnQAOgKAADoDUgBJAmwAZAKAAEMBmgA7Aa4ARQE3ADcCAwBDAYYALwH0AKoA5gBSAeAANQIDADcBhgA6Aq4AOAKUAF0CoQBoAokAOgKGADoCUQBoAlEAaAJRAGgCYQA6AmEAOgJhADoBGQAyARkAMgEZAAkBGf/6AwMASQI7ADoChgAuBaMASQABAAAACgAeACwAAWxhdG4ACAAEAAAAAP//AAEAAAABa2VybgAIAAAAAQAAAAEABAACAAAAAQAIAAEZQgAEAAAAXADC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/+IAR//sAEv/3QBO/+wAAgAg/+IAI//xAAQAIf/7ACP/5wAl//sAS//2AAQAHf/sACP/2AAl//YAS//sAAUAHv/2AB//+wAj/+IAJf/7AEv/7AAFAB3/7AAf//YAI//nACX/9gBL//YADwAc/+wAHQAKAB7/8QAf/+wAIP+rACH/5wAi/+wAJP/2ACX/8QBH/5wASv/iAEv/dABO/5wAi//iAIz/4gACACP/9gAl//sABwAe//YAH//2ACH/+wAj/+cAR//2AEv/5wBO//YACgAsACMALwB4ADEADgAz//YAO//sADz/7AA+AB8ASP/dAFL/8QBU/7UAEgA7/+cAPP/sAD3/4gA+/+cAP//xAEL/4gBH//YASP/dAE7/9gBS//EAVP+6AFX/9gBY//YAXf/2AGr/7ABt//EApP/7AK//+wAWACj/8QAp//YAKv/xACz/9gA0//EANv/2ADv/+wA8//sAPf/2AD7/+wBC//EASP/xAFT/2ABVAAoAVgAPAFgACgBZAA8Agf/xAKQACgCu//YArwAKALT/9gABACr/8QAQADf/6wA5/9gAO//nADz/5wA9/+IAPgAfAD//8QBC/+IAR//2AEj/2ABO//YAUv/sAFT/sABd//YAav/sAG3/9gAaACb/8QAo//YAKf/2ACr/9gAs//YANP/0ADb/9gA///YAQgAeAEf/0wBIACMAS//TAE7/0wBSAB4AVAAeAFUAHgBWACMAWAAeAFkAIwBd/9MAagAUAG0AHgBwADcAgf/2AK7/8QC0//EAAQBU/84ABwAmACgAO//sADz/8QA+//EASP/iAFL/8QBU/7UAAQAx/+sAAQAm/+wAFQAm//YAKP/nACn/5wAq/+cALP/nADT/5wA2/+cAOf/2ADr/9gA7/+wAPP/sAD7/8QBK/+wAVP/YAIH/5wCL/+wAjP/sAKT/9gCu/+wAr//2ALT/7AACACoALQA+AEEABgA7/+wAPP/xAD7/8QBI/+IAUv/xAFT/tQAHACn/7AA7/+wAPP/xAD7/8QBI/+IAUv/xAFT/tQAWACv/3QA3/+wAOf/tADr/8AA7/+IAPP/YAD3/3QA+AC0AP//sAEL/4gBH/+wASP/OAE7/7ABS/+wAVP+wAFX/7ABY/+wAXf/sAGr/7ABt//EApP/2AK//9gAVACr/9gAu/+EAMf/sADv/5wA8/+wAPf/iAD7/5wA///EAQv/iAEf/9gBI/90ATv/2AFL/8QBU/7oAVf/2AFj/9gBd//YAav/sAG3/8QCk//sAr//7AAEAVP/OABQAJv/nACj/5wAp/+cAKv/OADT/5wA2/+cAP//2AEf/pgBL/7UATv+mAFIAFABU/+IAVQAUAFYAIwBYABQAWQAjAF3/pgCB/+cArv/2ALT/9gAQADj/9gA5AA8AO//sADz/8QA9/+cAPgAjAD//9gBC/+wASP/dAFT/tQBV//YAWP/2AGr/8QBt//YArv/2ALT/9gAQACb/4gAo//EAKf/xACr/2AAs//EALf/sADT/8QA2//EAN/+6ADn/wQBU/9gAVgAKAFkACgCB//EArv/2ALT/9gADADH/4QAz/+gAVP/OAB0AJv/nACj/4gAp/+cAKv/iACz/5wA0/+IANv/nADj/7AA7//EAPP/xAD3/9gA+//EAP//7AEf/qwBI//YASv/xAEv/ugBO/6sAVP/OAF3/qwBq/+wAbf/2AIH/4gCL//EAjP/xAKT/8QCu/+IAr//xALT/4gAfACb/7AAo/+cAKf/sACr/xAAs/+wALv/CADH/xwA0/+cANv/sADj/8QA7//EAPP/2AD3/9gA+//YAP//7AEf/ugBI//YASv/2AEv/xABO/7oAVP/OAF3/ugBq/+wAbf/2AIH/5wCL//YAjP/2AKT/9gCu/+wAr//2ALT/7AAYACb/0wAo/90AKf/iACr/3QAs/+IALv/TADT/3QA2/+IAOP/sADv/9gA8//YAPv/2AEj/8QBK/+IAVP/OAGr/9gBt//YAgf/dAIv/4gCM/+IApP/xAK7/0wCv//EAtP/TAB4AJv/nACj/4gAp/+cAKv/iACz/5wAx/+IANP/iADb/5wA4/+wAO//xADz/9gA9//YAPv/2AD//+wBH/6sASP/2AEr/8QBL/7oATv+rAFT/zgBd/6sAav/sAG3/9gCB/+IAi//xAIz/8QCk//EArv/iAK//8QC0/+IACgAo//EAKf/xACr/8QAs//EANP/xADb/8QBU/9MAgf/xAK7/8QC0//EADgAC/+IABv/iAAn/8QAO/+IAEP/iACj/4gAp/+IAKv/iACz/7AAvAB4ANP/iADb/4gA4//EAgf/iACUAAv/YAAb/4AAH/+0ADv/YABL/7wAT/5wAFP/nABX/pgAW/68AGP+1ABkAIwAo/+cAKf/nACr/5wAr/+wALP/nADT/5wA2/+cAOf/iADr/9gA7/8QAPP/TAD7/9QBI/8QASv/YAFL/nABU/4gAVf+wAFb/sABY/7AAWf+wAHD/nACB/+cAi//YAIz/2ACu/+wAtP/sABoAAv/YAAb/2AAO/9gAEP/YABP/nAAU//EAFf+IABb/nAAY/34AHP/sAB3/zgAj/+wAKP/sACn/9gAq/+wAK//xACz/9gA0/+wANv/2ADn/5wA7/6sAPP+6AD7/xABW/9gAWf/YAIH/7AAQABP/pgAV/9gAFv/dABf/zgAY/7AAGf/iAB3/4gAf//YAI//YADv/8QA8//YAPf/iAD7/8QA///YARv/YAKD/2AApAAL/2AAG/9gACf9+AA7/2AAQ/9gAEv/iABn/7AAc/90AHQAKAB7/7AAf//YAIP+hACH/7AAi/90AI//2ACT/8QAl/+wAJv+/ACj/sAAp/7oAKv+wACv/5wAs/7oAMv/OADP/zgA0/7AANf/OADb/ugA3/84AOP+rADn/7AA6/84AO//OADz/zgA9/84APv/OAD//xABG/4gAS/9WAIH/sACg/4gABAAT/84AFf/sABb/8QAY/9gABAAT/84AFf/sABb/8QAY/9gAGwAC/9gABv/YAA7/2AAQ/9gAE/+cABT/8QAV/4gAFv+cABj/fgAc/+wAHf/OACP/7AAo/+wAKf/2ACr/7AAr//EALP/2AC8ADwA0/+wANv/2ADn/5wA7/6sAPP+6AD7/0wBW/9gAWf/YAIH/7AANAAn/sAAm//YAKP/sACn/8QAq/+wALP/xADT/7AA2//EAOP/2ADkACgBG/5wAgf/sAKD/nAAPAAL/2AAG/9gADv/YABD/2AAT/6YAFP/xABX/iAAW/5wAGP+SACv/9gAvAB4AOf/iADv/ugA8/8QAPv/EAA8ACf+wACb/9gAo//EAKf/xACr/8QAs//EANP/xADb/8QA4//YAOQAPAD//9gBG/6YAb//dAIH/8QCg/6YAFgAC/9gABv/YAA7/2AAQ/9gAE/+cABT/8QAV/4gAFv+cABj/fgAo/+wAKf/2ACr/7AAr//EALP/2AC8ADwA0/+wANv/2ADn/5wA7/6sAPP+6AD7/0wCB/+wADwAJ/7AAJv/2ACj/8QAp//EAKv/xACz/8QA0//EANv/xADj/9gA5AA8AP//2AEb/pgBv/90Agf/xAKD/pgAMAAn/nAAm/+wAKP/TACn/2AAq/9MALP/YADT/0wA2/9gAOP/iAEb/nACB/9MAoP+cABUAAv/YAAb/2AAO/9gAEP/YABP/nAAU//EAFf+IABb/nAAY/34AKP/sACn/9gAq/+wAK//xACz/9gA0/+wANv/2ADn/5wA7/6sAPP+6AD7/xACB/+wAAQAj//YAEgAC/+wABv/sAAn/9gAO/+wAEP/sACb/9gAo/+wAKf/sACr/7AAvAB4ANP/sADb/7AA4//EAO//sADz/7AA9//YAPv/2AIH/7AATAAL/7AAG/+wACf/2AA7/7AAQ/+wAKP/xACn/8QAq//EALP/2AC8AIwA0//EANv/xADj/9gA7//YAPP/2AD3/9gA+//YAP//2AIH/8QAQAAL/7AAG/+wADv/sABD/7AAT/8QAFP/xABX/xAAW/84AF//2ABj/ugAmAAoAK//2ADn/8QA7/9MAPP/dAD7/3QADAB0AHgAg/+IAIf/2AA4AO//nADz/5wA9/+IAPv/nAD//8QBC/+IAR//2AEj/2ABO//YAUv/sAFT/sABd//YAav/sAG3/9gAWAAL/2AAG/9gADv/YABD/2AAT/5wAFP/xABX/iAAW/5wAGP9+ACj/7AAp//YAKv/sACv/8QAs//YALwAPADT/7AA2//YAOf/nADv/qwA8/7oAPv/TAIH/7AAQABP/pgAV/9gAFv/dABf/zgAY/7AAGf/iAB3/4gAf//YAI//YADv/8QA8//YAPf/iAD7/8QA///YARv/YAKD/2AAQABP/pgAV/9gAFv/dABf/zgAY/7AAGf/iAB3/4gAf//YAI//YADv/8QA8//YAPf/iAD7/8QA///YARv/YAKD/2AAEADv/9gA8//sAPf/2AD7/9gARACj/9gAp//YAKv/2ADT/9gA7//YAPP/2AD7/9gBg//YAcv/2AHT/9gB1//YAgf/2AIL/9gCE//YAjv/2AI//9gCo//YAAQAg//EAEQAS//YAE/+mABX/xAAW/84AF//OABj/nAAZ//EAK//2ADj/9gA5//YAO//iADz/7AA9/9MAPv/iAD//7ABG/+wAoP/sABAAE/+6ABX/2AAW/90AF//sABj/tQAo//YAKf/7ACr/9gAs//sANP/2ADb/+wA7//EAPP/2AD3/8QA+//EAgf/2ABEAEv/2ABP/pgAV/8QAFv/OABf/zgAY/5wAGf/xACv/9gA4//YAOf/2ADv/4gA8/+wAPf/TAD7/4gA//+wARv/sAKD/7AAQABP/ugAV/9gAFv/dABf/7AAY/7UAKP/2ACn/+wAq//YALP/7ADT/9gA2//sAO//xADz/9gA9//EAPv/xAIH/9gABACD/7AACABcAAQAHAAAACQAaAAcAHAAcABkAHgA/ABoAQQBBADwARgBHAD0ASgBOAD8AUgBSAEQAVABVAEUAVwBZAEcAXQBdAEoAZwBnAEsAaQBpAEwAbABsAE0AbwBvAE4AgACBAE8AiQCJAFEAiwCMAFIAnwChAFQApACkAFcArgCvAFgAtAC0AFoAtgC2AFs=)%20format(%22opentype%22);%0A%20%20font-stretch:%20normal;%0A%20%20font-weight:%20400;%0A%20%20font-style:%20normal;%0A%7D");
    .svglite line, .svglite polyline, .svglite polygon, .svglite path, .svglite rect, .svglite circle {
      fill: none;
      stroke: #000000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: 10.00;
    }
    .svglite text {
      white-space: pre;
    }
    .svglite g.glyphgroup path {
      fill: inherit;
      stroke: none;
    }
  ]]></style>
</defs>
<rect width='100%' height='100%' style='stroke: none; fill: #FFFFFF;'/>
<defs>
  <clipPath id='cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA='>
    <rect x='0.00' y='0.00' width='720.00' height='576.00' />
  </clipPath>
</defs>
<g clip-path='url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)'>
</g>
<defs>
  <clipPath id='cpOTUuMzZ8NTM1LjEyfDEwLjk2fDUxMy44Ng=='>
    <rect x='95.36' y='10.96' width='439.77' height='502.90' />
  </clipPath>
</defs>
<g clip-path='url(#cpOTUuMzZ8NTM1LjEyfDEwLjk2fDUxMy44Ng==)'>
<polyline points='95.36,389.40 535.12,389.40 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='95.36,262.41 535.12,262.41 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='95.36,135.41 535.12,135.41 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='135.67,513.86 135.67,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='203.44,513.86 203.44,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='271.20,513.86 271.20,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='338.96,513.86 338.96,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='406.72,513.86 406.72,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='474.48,513.86 474.48,10.96 ' style='stroke-width: 1.07; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='95.36,452.90 535.12,452.90 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='95.36,325.91 535.12,325.91 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='95.36,198.91 535.12,198.91 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='95.36,71.92 535.12,71.92 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='101.79,513.86 101.79,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='169.56,513.86 169.56,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='237.32,513.86 237.32,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='305.08,513.86 305.08,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='372.84,513.86 372.84,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='440.60,513.86 440.60,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<polyline points='508.36,513.86 508.36,10.96 ' style='stroke-width: 2.13; stroke: #EBEBEB; stroke-linecap: butt;' />
<circle cx='176.33' cy='357.65' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.21' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='421.15' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='370.35' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='176.33' cy='373.53' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='240.18' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='183.11' cy='427.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='291.52' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='284.75' cy='262.41' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='196.66' cy='411.63' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='264.42' cy='300.51' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='128.90' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='169.56' cy='376.70' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='230.54' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='169.56' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='189.88' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='427.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='115.35' cy='433.85' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='169.56' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='156.00' cy='421.15' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='156.00' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='223.76' cy='414.80' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='196.66' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='411.63' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='277.97' cy='306.86' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='169.56' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='176.33' cy='414.80' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='196.66' cy='243.36' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='183.11' cy='433.85' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.21' cy='440.20' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='277.97' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='452.90' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='249.71' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='183.11' cy='398.93' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='306.86' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.21' cy='389.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='223.76' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='305.08' cy='319.56' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='465.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.21' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='176.33' cy='471.95' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='264.42' cy='357.65' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='433.85' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='376.70' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='250.87' cy='319.56' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='196.66' cy='471.95' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='250.87' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='408.45' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='223.76' cy='313.21' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='446.55' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='291.52' cy='268.76' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='376.70' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='277.97' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='284.75' cy='306.86' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='294.16' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='196.66' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='325.91' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='230.54' cy='427.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='277.97' cy='237.01' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='300.51' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='408.45' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='264.42' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='230.54' cy='389.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='230.54' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='376.70' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='318.63' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='338.96' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.21' cy='268.76' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='414.80' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='359.29' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='277.97' cy='281.46' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='156.00' cy='465.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='250.87' cy='313.21' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='250.87' cy='360.83' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='325.40' cy='233.83' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='189.88' cy='443.38' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='294.16' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='462.42' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='196.66' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='298.30' cy='357.65' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='176.33' cy='430.68' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='284.75' cy='227.48' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='291.52' cy='348.13' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='249.71' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='427.50' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='284.75' cy='290.98' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='277.97' cy='316.38' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='223.76' cy='465.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='298.30' cy='354.48' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='230.54' cy='408.45' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='230.54' cy='411.63' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='433.85' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='291.52' cy='389.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='142.45' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='318.63' cy='341.78' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='210.21' cy='446.55' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='298.30' cy='325.91' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='417.98' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='446.55' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='372.84' cy='325.91' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='411.63' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='284.75' cy='389.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='389.40' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='298.30' cy='265.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='398.93' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='244.09' cy='430.68' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='305.08' cy='329.08' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='294.16' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='392.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='223.76' cy='446.55' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='360.83' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='250.87' cy='452.90' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='203.44' cy='370.35' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='237.32' cy='294.16' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='196.66' cy='392.58' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='271.20' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='257.64' cy='357.65' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='216.99' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='311.85' cy='325.91' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='379.61' cy='262.41' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='508.36' cy='110.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='268.76' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.05' cy='110.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='148.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='256.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='379.61' cy='224.31' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='433.82' cy='173.51' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='366.06' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='179.86' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='399.94' cy='243.36' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='413.49' cy='129.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='399.94' cy='243.36' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='393.17' cy='90.97' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='300.51' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='420.27' cy='90.97' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='306.86' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='447.37' cy='33.82' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='366.06' cy='224.31' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='454.15' cy='154.46' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.05' cy='110.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='198.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='393.17' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='192.56' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='198.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='186.21' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='116.36' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='249.71' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='129.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='454.15' cy='167.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='366.06' cy='237.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='352.51' cy='192.56' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='508.36' cy='65.57' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='179.86' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='148.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='393.17' cy='205.26' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='433.82' cy='167.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='359.29' cy='281.46' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='359.29' cy='154.46' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='359.29' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='474.48' cy='110.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='413.49' cy='230.66' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='454.15' cy='129.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='420.27' cy='211.61' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='300.51' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='474.48' cy='148.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='393.17' cy='186.21' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='160.81' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='217.96' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='160.81' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='474.48' cy='198.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='420.27' cy='211.61' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='192.56' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='359.29' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='198.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='359.29' cy='268.76' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='467.70' cy='129.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='359.29' cy='300.51' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='447.37' cy='160.81' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='399.94' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='515.13' cy='116.36' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='433.82' cy='237.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='508.36' cy='110.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='501.58' cy='97.32' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='237.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='460.93' cy='129.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='413.49' cy='230.66' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='447.37' cy='198.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='447.37' cy='186.21' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='420.27' cy='173.51' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='413.49' cy='237.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='508.36' cy='97.32' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='366.06' cy='249.71' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='440.60' cy='71.92' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='230.66' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='460.93' cy='78.27' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='386.39' cy='246.53' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='447.37' cy='141.76' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='386.39' cy='233.83' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='467.70' cy='154.46' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='386.39' cy='230.66' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='494.81' cy='122.71' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.05' cy='249.71' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.05' cy='160.81' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='386.39' cy='214.79' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='508.36' cy='129.06' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='427.05' cy='205.26' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='494.81' cy='148.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='386.39' cy='230.66' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='467.70' cy='116.36' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='399.94' cy='217.96' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='481.25' cy='173.51' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='413.49' cy='208.44' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='454.15' cy='214.79' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='325.40' cy='246.53' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='474.48' cy='167.16' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='433.82' cy='217.96' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='494.81' cy='122.71' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='202.09' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='494.81' cy='135.41' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='135.41' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='372.84' cy='237.01' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='433.82' cy='135.41' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='359.29' cy='252.88' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='366.06' cy='135.41' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='413.49' cy='198.91' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='501.58' cy='78.27' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='393.17' cy='243.36' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='508.36' cy='135.41' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='420.27' cy='278.28' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='508.36' cy='90.97' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='454.15' cy='71.92' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='399.94' cy='208.44' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='406.72' cy='217.96' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='454.15' cy='103.66' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='386.39' cy='173.51' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='393.17' cy='148.11' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<circle cx='250.87' cy='389.40' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='277.97' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='257.64' cy='370.35' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='223.76' cy='386.23' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='284.75' cy='360.83' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='291.52' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='156.00' cy='421.15' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='284.75' cy='357.65' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='271.20' cy='306.86' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='291.52' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='257.64' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='264.42' cy='354.48' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='203.44' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.85' cy='319.56' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='237.32' cy='379.88' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.85' cy='319.56' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='284.75' cy='414.80' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='176.33' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='237.32' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='271.20' cy='275.11' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='176.33' cy='376.70' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='244.09' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='216.99' cy='465.60' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='257.64' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='271.20' cy='414.80' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='284.75' cy='306.86' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='305.08' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='305.08' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='244.09' cy='364.00' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='338.96' cy='256.06' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='216.99' cy='427.50' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.85' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='216.99' cy='408.45' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='325.40' cy='313.21' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='271.20' cy='376.70' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='298.30' cy='338.60' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='271.20' cy='344.95' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='372.84' cy='224.31' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='250.87' cy='491.00' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='338.96' cy='262.41' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='372.84' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='216.99' cy='370.35' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='277.97' cy='383.05' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='277.97' cy='389.40' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='277.97' cy='367.18' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.85' cy='268.76' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='237.32' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='386.39' cy='287.81' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='216.99' cy='421.15' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='291.52' cy='367.18' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='298.30' cy='411.63' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='311.85' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='257.64' cy='376.70' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='325.40' cy='319.56' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='216.99' cy='408.45' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='284.75' cy='395.75' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='244.09' cy='421.15' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='325.40' cy='319.56' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='318.63' cy='351.30' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='264.42' cy='386.23' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='345.73' cy='332.25' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='230.54' cy='370.35' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='271.20' cy='370.35' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='352.51' cy='325.91' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='318.63' cy='402.10' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='257.64' cy='354.48' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='372.84' cy='313.21' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='291.52' cy='354.48' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
</g>
<g clip-path='url(#cpMC4wMHw3MjAuMDB8MC4wMHw1NzYuMDA=)'>
<text x='85.49' y='459.06' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='48.19px' lengthAdjust='spacingAndGlyphs'>3000</text>
<text x='85.49' y='332.06' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='49.14px' lengthAdjust='spacingAndGlyphs'>4000</text>
<text x='85.49' y='205.07' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='48.09px' lengthAdjust='spacingAndGlyphs'>5000</text>
<text x='85.49' y='78.08' text-anchor='end' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='48.75px' lengthAdjust='spacingAndGlyphs'>6000</text>
<text x='101.79' y='536.04' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='28.34px' lengthAdjust='spacingAndGlyphs'>170</text>
<text x='169.56' y='536.04' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='29.45px' lengthAdjust='spacingAndGlyphs'>180</text>
<text x='237.32' y='536.04' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='29.67px' lengthAdjust='spacingAndGlyphs'>190</text>
<text x='305.08' y='536.04' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='35.34px' lengthAdjust='spacingAndGlyphs'>200</text>
<text x='372.84' y='536.04' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='28.75px' lengthAdjust='spacingAndGlyphs'>210</text>
<text x='440.60' y='536.04' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='33.23px' lengthAdjust='spacingAndGlyphs'>220</text>
<text x='508.36' y='536.04' text-anchor='middle' style='font-size: 17.60px;fill: #4D4D4D; font-family: "Quicksand";' textLength='33.59px' lengthAdjust='spacingAndGlyphs'>230</text>
<text x='315.24' y='560.53' text-anchor='middle' style='font-size: 22.00px; font-family: "Quicksand";' textLength='117.58px' lengthAdjust='spacingAndGlyphs'>flipper_len</text>
<text transform='translate(26.36,262.41) rotate(-90)' text-anchor='middle' style='font-size: 22.00px; font-family: "Quicksand";' textLength='124.91px' lengthAdjust='spacingAndGlyphs'>body_mass</text>
<text x='568.00' y='212.79' style='font-size: 22.00px; font-family: "Quicksand";' textLength='81.48px' lengthAdjust='spacingAndGlyphs'>species</text>
<circle cx='585.28' cy='243.29' r='3.91' style='stroke-width: 1.42; stroke: #F8766D; fill: #F8766D;' />
<circle cx='585.28' cy='277.85' r='3.91' style='stroke-width: 1.42; stroke: #00BA38; fill: #00BA38;' />
<circle cx='585.28' cy='312.41' r='3.91' style='stroke-width: 1.42; stroke: #619CFF; fill: #619CFF;' />
<text x='613.52' y='249.44' style='font-size: 17.60px; font-family: "Quicksand";' textLength='53.02px' lengthAdjust='spacingAndGlyphs'>Adelie</text>
<text x='613.52' y='284.00' style='font-size: 17.60px; font-family: "Quicksand";' textLength='84.56px' lengthAdjust='spacingAndGlyphs'>Chinstrap</text>
<text x='613.52' y='318.56' style='font-size: 17.60px; font-family: "Quicksand";' textLength='64.59px' lengthAdjust='spacingAndGlyphs'>Gentoo</text>
</g>
</g>
</svg>
<p>Be aware that embedding font data directly into an SVG will have a negative effect on the file size, so this is something you should reserve for when it is actually needed:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="n">embedded_data</span> <span class="o">&lt;-</span> <span class="nf">svgstring</span><span class="p">(</span><span class="n">web_fonts</span> <span class="o">=</span> <span class="n">full_embed</span><span class="p">,</span> <span class="n">scaling</span> <span class="o">=</span> <span class="m">2</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">plot</span><span class="p">(</span><span class="n">p</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">invisible</span><span class="p">(</span><span class="nf">dev.off</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">embedded_url</span> <span class="o">&lt;-</span> <span class="nf">svgstring</span><span class="p">(</span><span class="n">web_fonts</span> <span class="o">=</span> <span class="s">&#34;Quicksand&#34;</span><span class="p">,</span> <span class="n">scaling</span> <span class="o">=</span> <span class="m">2</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">plot</span><span class="p">(</span><span class="n">p</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">invisible</span><span class="p">(</span><span class="nf">dev.off</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nf">c</span><span class="p">(</span><span class="n">data</span> <span class="o">=</span> <span class="nf">nchar</span><span class="p">(</span><span class="nf">embedded_data</span><span class="p">()),</span> <span class="n">url</span> <span class="o">=</span> <span class="nf">nchar</span><span class="p">(</span><span class="nf">embedded_url</span><span class="p">()))</span>
</span></span></code></pre></td></tr></table>
</div>
</div><pre tabindex="0"><code>##  data   url
## 79300 41519
</code></pre><h2 id="acknowledgements">Acknowledgements
</h2>
<p>A big thank to everyone who contributed to this release with issues and PRs!</p>
<p><a href="https://github.com/ca4wa" target="_blank" rel="noopener">@ca4wa</a>
, <a href="https://github.com/davidhodge931" target="_blank" rel="noopener">@davidhodge931</a>
, <a href="https://github.com/gaborcsardi" target="_blank" rel="noopener">@gaborcsardi</a>
, <a href="https://github.com/hadley" target="_blank" rel="noopener">@hadley</a>
, <a href="https://github.com/psoldath" target="_blank" rel="noopener">@psoldath</a>
, <a href="https://github.com/robert-dodier" target="_blank" rel="noopener">@robert-dodier</a>
, <a href="https://github.com/thomasp85" target="_blank" rel="noopener">@thomasp85</a>
, and <a href="https://github.com/trevorld" target="_blank" rel="noopener">@trevorld</a>
.</p>
]]></description>
      <enclosure url="https://posit-open-source.netlify.app/blog/tidyverse/2025/svglite-2-2-0/thumbnail-wd.jpg" length="207612" type="image/jpeg" />
    </item>
    <item>
      <title>scales 1.4.0</title>
      <link>https://posit-open-source.netlify.app/blog/tidyverse/2025/scales-1-4-0/</link>
      <pubDate>Wed, 23 Apr 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/tidyverse/2025/scales-1-4-0/</guid>
      <dc:creator>Teun Van den Brand</dc:creator><description><![CDATA[<!--
TODO:
* [x] Look over / edit the post's title in the yaml
* [x] Edit (or delete) the description; note this appears in the Twitter card
* [x] Pick category and tags (see existing with [`hugodown::tidy_show_meta()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html))
* [x] Find photo & update yaml metadata
* [x] Create `thumbnail-sq.jpg`; height and width should be equal
* [x] Create `thumbnail-wd.jpg`; width should be >5x height
* [x] [`hugodown::use_tidy_thumbnails()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html)
* [x] Add intro sentence, e.g. the standard tagline for the package
* [x] [`usethis::use_tidy_thanks()`](https://usethis.r-lib.org/reference/use_tidy_thanks.html)
-->
<p>We&rsquo;re stoked to announce the release of <a href="https://scales.r-lib.org/" target="_blank" rel="noopener">scales</a>
 1.4.0. scales is a package that provides much of the scaling logic that is used in ggplot2 to a general framework, along with utility functions for e.g. formatting labels or creating colour palettes.</p>
<p>You can install it from CRAN with:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://rdrr.io/r/utils/install.packages.html'>install.packages</a></span><span class='o'>(</span><span class='s'>"scales"</span><span class='o'>)</span></span></code></pre>
</div>
<p>This blog post will give an overview of the 1.4.0 release, which has some nifty upgrades for working with colours and labels.</p>
<p>You can see a full list of changes in the <a href="https://scales.r-lib.org/news/index.html" target="_blank" rel="noopener">release notes</a>
</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='kr'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='o'>(</span><span class='nv'><a href='https://scales.r-lib.org'>scales</a></span><span class='o'>)</span></span></code></pre>
</div>
<h2 id="colour-manipulation">Colour manipulation
</h2>
<p>The <a href="https://scales.r-lib.org/reference/alpha.html" target="_blank" rel="noopener"><code>alpha()</code></a>
 and <a href="https://scales.r-lib.org/reference/muted.html" target="_blank" rel="noopener"><code>muted()</code></a>
 functions have been part of scales for a long time. Back in the 1.1.0 release we swapped to <a href="https://farver.data-imaginist.com/" target="_blank" rel="noopener">farver</a>
 to power these functions. We felt it was appropriate to use this package for other common colour tasks, and so <a href="https://scales.r-lib.org/reference/colour_manip.html" target="_blank" rel="noopener"><code>col_shift()</code></a>
, <a href="https://scales.r-lib.org/reference/colour_manip.html" target="_blank" rel="noopener"><code>col_lighter()</code></a>
, <a href="https://scales.r-lib.org/reference/colour_manip.html" target="_blank" rel="noopener"><code>col_darker()</code></a>
, <a href="https://scales.r-lib.org/reference/colour_manip.html" target="_blank" rel="noopener"><code>col_saturate()</code></a>
 and <a href="https://scales.r-lib.org/reference/col_mix.html" target="_blank" rel="noopener"><code>col_mix()</code></a>
 were born.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_colours</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"red"</span>, <span class='s'>"green"</span>, <span class='s'>"blue"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>m</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/cbind.html'>rbind</a></span><span class='o'>(</span></span>
<span>  original <span class='o'>=</span> <span class='nv'>my_colours</span>,</span>
<span>  shift    <span class='o'>=</span> <span class='nf'><a href='https://scales.r-lib.org/reference/colour_manip.html'>col_shift</a></span><span class='o'>(</span><span class='nv'>my_colours</span>, <span class='m'>90</span><span class='o'>)</span>,</span>
<span>  lighter  <span class='o'>=</span> <span class='nf'><a href='https://scales.r-lib.org/reference/colour_manip.html'>col_lighter</a></span><span class='o'>(</span><span class='nv'>my_colours</span>, <span class='m'>20</span><span class='o'>)</span>,</span>
<span>  darker   <span class='o'>=</span> <span class='nf'><a href='https://scales.r-lib.org/reference/colour_manip.html'>col_darker</a></span><span class='o'>(</span><span class='nv'>my_colours</span>, <span class='m'>20</span><span class='o'>)</span>,</span>
<span>  duller   <span class='o'>=</span> <span class='nf'><a href='https://scales.r-lib.org/reference/colour_manip.html'>col_saturate</a></span><span class='o'>(</span><span class='nv'>my_colours</span>, <span class='o'>-</span><span class='m'>50</span><span class='o'>)</span>,</span>
<span>  mixed    <span class='o'>=</span> <span class='nf'><a href='https://scales.r-lib.org/reference/col_mix.html'>col_mix</a></span><span class='o'>(</span><span class='nv'>my_colours</span>, <span class='s'>"orchid"</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/show_col.html'>show_col</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/t.html'>t</a></span><span class='o'>(</span><span class='nv'>m</span><span class='o'>)</span>, ncol <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/nrow.html'>ncol</a></span><span class='o'>(</span><span class='nv'>m</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/graphics/text.html'>text</a></span><span class='o'>(</span>x <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/nrow.html'>ncol</a></span><span class='o'>(</span><span class='nv'>m</span><span class='o'>)</span> <span class='o'>+</span> <span class='m'>0.25</span>, y <span class='o'>=</span> <span class='o'>-</span><span class='o'>(</span><span class='m'>1</span><span class='o'>:</span><span class='nf'><a href='https://rdrr.io/r/base/nrow.html'>nrow</a></span><span class='o'>(</span><span class='nv'>m</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span> <span class='m'>0.5</span>, <span class='nf'><a href='https://rdrr.io/r/base/colnames.html'>rownames</a></span><span class='o'>(</span><span class='nv'>m</span><span class='o'>)</span>, adj <span class='o'>=</span> <span class='m'>0</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/scales-1-4-0/figs/unnamed-chunk-2-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h2 id="palettes">Palettes
</h2>
<p>Palettes have also been reworked in this release to include some useful properties. Palettes now come in one of two classes: &lsquo;pal_discrete&rsquo; or &lsquo;pal_continuous&rsquo;.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>my_palette</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://scales.r-lib.org/reference/pal_manual.html'>manual_pal</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"palegreen"</span>, <span class='s'>"deepskyblue"</span>, <span class='s'>"magenta"</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/class.html'>class</a></span><span class='o'>(</span><span class='nv'>my_palette</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] "pal_discrete" "scales_pal"   "function"</span></span>
<span></span></code></pre>
</div>
<p>Having palettes as a class rather than as plain functions, allows us to store useful metadata about the palette which can be used downstream. In addition, most colour palette functions also allow the aforementioned colour manipulation functions to work on the palette output.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>palette_type</a></span><span class='o'>(</span><span class='nv'>my_palette</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] "colour"</span></span>
<span></span><span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>palette_nlevels</a></span><span class='o'>(</span><span class='nv'>my_palette</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] 3</span></span>
<span></span><span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/colour_manip.html'>col_shift</a></span><span class='o'>(</span><span class='nv'>my_palette</span>, <span class='m'>180</span><span class='o'>)</span><span class='o'>(</span><span class='m'>3</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] "#FFC3FF" "#E4A735" "#00B100"</span></span>
<span></span></code></pre>
</div>
<p>With the new setup it is now possible to expand discrete palettes to continuous palettes with <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>as_continuous_pal()</code></a>
 or vise versa to chop up continuous palettes into discrete palettes with <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>as_discrete_pal()</code></a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://rdrr.io/r/graphics/plot.default.html'>plot</a></span><span class='o'>(</span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>as_continuous_pal</a></span><span class='o'>(</span><span class='nv'>my_palette</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2025/scales-1-4-0/figs/unnamed-chunk-5-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Another quality of life improvement for palettes, is that the &lsquo;scales&rsquo; package now keeps track of some named palettes. By default, the collection of &lsquo;known&rsquo; palettes is pre-populated with colour palettes from the grDevices, RColorBrewer and viridisLite packages.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>as_discrete_pal</a></span><span class='o'>(</span><span class='s'>"Okabe-Ito"</span><span class='o'>)</span><span class='o'>(</span><span class='m'>8</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] "#000000" "#E69F00" "#56B4E9" "#009E73" "#F0E442" "#0072B2" "#D55E00"</span></span>
<span><span class='c'>#&gt; [8] "#CC79A7"</span></span>
<span></span></code></pre>
</div>
<h3 id="providing-palettes-as-package">Providing palettes as package
</h3>
<p>For those that are interested in developing R packages with palettes, there are a few recommendations we make in <code>?palette-recommendations</code> to smoothly interface with the scales package.</p>
<p>If your palettes are vectors of colour values, we recommend simply exporting the naked vector.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'>#' @export</span></span>
<span><span class='nv'>aurora</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"palegreen"</span>, <span class='s'>"deepskyblue"</span>, <span class='s'>"magenta"</span><span class='o'>)</span></span></code></pre>
</div>
<p>That way, they can easily be accessed and used in <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>as_discrete_pal()</code></a>
 and <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>as_continuous_pal()</code></a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>as_continuous_pal</a></span><span class='o'>(</span><span class='nv'>aurora</span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>as_discrete_pal</a></span><span class='o'>(</span><span class='nv'>aurora</span><span class='o'>)</span></span></code></pre>
</div>
<p>Alternatively, if you have functions that generate colours that is not predefined, we recommend wrapping the function in <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>new_discrete_palette()</code></a>
 and <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>new_continuous_palette()</code></a>
. For predefined palettes, you can also use <a href="https://scales.r-lib.org/reference/pal_manual.html" target="_blank" rel="noopener"><code>pal_manual()</code></a>
 or <a href="https://scales.r-lib.org/reference/pal_gradient_n.html" target="_blank" rel="noopener"><code>pal_gradient_n()</code></a>
.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>pal_random</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>  <span class='nv'>fun</span> <span class='o'>&lt;-</span> <span class='kr'>function</span><span class='o'>(</span><span class='nv'>n</span><span class='o'>)</span> <span class='o'>&#123;</span></span>
<span>    <span class='nf'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/grDevices/colors.html'>colours</a></span><span class='o'>(</span>distinct <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span>, size <span class='o'>=</span> <span class='nv'>n</span>, replace <span class='o'>=</span> <span class='kc'>TRUE</span><span class='o'>)</span></span>
<span>  <span class='o'>&#125;</span></span>
<span>  <span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>new_discrete_palette</a></span><span class='o'>(</span><span class='nv'>fun</span>, type <span class='o'>=</span> <span class='s'>"colour"</span>, nlevels <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/length.html'>length</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/grDevices/colors.html'>colours</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='o'>&#125;</span></span></code></pre>
</div>
<p>Populating the metadata in <a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>new_discrete_palette()</code></a>
/<a href="https://scales.r-lib.org/reference/new_continuous_palette.html" target="_blank" rel="noopener"><code>new_continuous_palette()</code></a>
 helps to make converting between palette types less painful.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>as_continuous_pal</a></span><span class='o'>(</span><span class='nf'>pal_random</span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/new_continuous_palette.html'>as_discrete_pal</a></span><span class='o'>(</span><span class='nf'>pal_random</span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span></span></code></pre>
</div>
<h2 id="labels">Labels
</h2>
<p>This release also provides improvements to labelling in the form of two new labelling functions and two new convenience functions for labels. In contrast to most of scales&rsquo; label functions, these label functions are great for discrete input. First up is <a href="https://scales.r-lib.org/reference/label_glue.html" target="_blank" rel="noopener"><code>label_glue()</code></a>
, which uses the string interpolation from the glue package to format your labels.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://scales.r-lib.org/reference/label_glue.html'>label_glue</a></span><span class='o'>(</span><span class='s'>"The &#123;x&#125; penguin"</span><span class='o'>)</span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"Gentoo"</span>, <span class='s'>"Chinstrap"</span>, <span class='s'>"Adelie"</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; The Gentoo penguin</span></span>
<span><span class='c'>#&gt; The Chinstrap penguin</span></span>
<span><span class='c'>#&gt; The Adelie penguin</span></span>
<span></span></code></pre>
</div>
<p>The other labelling function, <a href="https://scales.r-lib.org/reference/label_dictionary.html" target="_blank" rel="noopener"><code>label_dictionary()</code></a>
, is convenient when some variable you use consists of short-codes or abbreviations. You can provide <a href="https://scales.r-lib.org/reference/label_dictionary.html" target="_blank" rel="noopener"><code>label_dictionary()</code></a>
 with a named vector that translates the values to prettier labels. If one or more of your values doesn&rsquo;t exist in the dictionary, they stay as-is by default.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>dict</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span></span>
<span>  diy <span class='o'>=</span> <span class='s'>"Do it yourself"</span>, eta <span class='o'>=</span> <span class='s'>"Estimated time of arrival"</span>,</span>
<span>  asap <span class='o'>=</span> <span class='s'>"As soon as possible"</span>, tldr <span class='o'>=</span> <span class='s'>"Too long; didn't read"</span></span>
<span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/label_dictionary.html'>label_dictionary</a></span><span class='o'>(</span><span class='nv'>dict</span><span class='o'>)</span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"diy"</span>, <span class='s'>"tldr"</span>, <span class='s'>"bff"</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] "Do it yourself"        "Too long; didn't read" "bff"</span></span>
<span></span></code></pre>
</div>
<p><a href="https://scales.r-lib.org/reference/compose_label.html" target="_blank" rel="noopener"><code>compose_label()</code></a>
 is a useful convenience function we&rsquo;ve added which will help you to create custom labelling behaviour without needing to write a labelling function from scratch. Similar to <a href="https://scales.r-lib.org/reference/transform_compose.html" target="_blank" rel="noopener"><code>compose_trans()</code></a>
, it allows you to chain together different labelling functions.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>screaming_flowers</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://scales.r-lib.org/reference/compose_label.html'>compose_label</a></span><span class='o'>(</span><span class='nf'><a href='https://scales.r-lib.org/reference/label_glue.html'>label_glue</a></span><span class='o'>(</span><span class='s'>"The &#123;x&#125; flower"</span><span class='o'>)</span>, <span class='nv'>toupper</span><span class='o'>)</span></span>
<span><span class='nf'>screaming_flowers</span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"daffodil"</span>, <span class='s'>"orchid"</span>, <span class='s'>"tulip"</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; THE DAFFODIL FLOWER</span></span>
<span><span class='c'>#&gt; THE ORCHID FLOWER</span></span>
<span><span class='c'>#&gt; THE TULIP FLOWER</span></span>
<span></span></code></pre>
</div>
<p>Lastly, we haven&rsquo;t completely forgotton about numeric labels either. We have introduced the <a href="https://scales.r-lib.org/reference/number_options.html" target="_blank" rel="noopener"><code>number_options()</code></a>
 functions to globally populate defaults for functions such as <a href="https://scales.r-lib.org/reference/label_number.html" target="_blank" rel="noopener"><code>label_number()</code></a>
 and <a href="https://scales.r-lib.org/reference/label_currency.html" target="_blank" rel="noopener"><code>label_currency()</code></a>
. This can be convenient if you produce statistical reports in non-English languages.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://scales.r-lib.org/reference/number_options.html'>number_options</a></span><span class='o'>(</span></span>
<span>  decimal.mark <span class='o'>=</span> <span class='s'>","</span>,</span>
<span>  big.mark <span class='o'>=</span> <span class='s'>"."</span>,</span>
<span>  style_negative <span class='o'>=</span> <span class='s'>"minus"</span>,</span>
<span>  currency.prefix <span class='o'>=</span> <span class='s'>""</span>,</span>
<span>  currency.suffix <span class='o'>=</span> <span class='s'>"€"</span>,</span>
<span>  currency.decimal.mark <span class='o'>=</span> <span class='s'>","</span>,</span>
<span>  currency.big.mark <span class='o'>=</span> <span class='s'>" "</span>,</span>
<span>  ordinal.rules <span class='o'>=</span> <span class='nf'><a href='https://scales.r-lib.org/reference/label_ordinal.html'>ordinal_french</a></span><span class='o'>(</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/label_currency.html'>label_currency</a></span><span class='o'>(</span>accuracy <span class='o'>=</span> <span class='m'>0.01</span><span class='o'>)</span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0.1</span>, <span class='m'>10</span>, <span class='m'>1000000</span>, <span class='o'>-</span><span class='m'>1000</span><span class='o'>)</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] "0,10€"         "10,00€"        "1 000 000,00€" "-1 000,00€"</span></span>
<span></span><span></span>
<span><span class='nf'><a href='https://scales.r-lib.org/reference/label_ordinal.html'>label_ordinal</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>(</span><span class='m'>1</span><span class='o'>:</span><span class='m'>4</span><span class='o'>)</span></span>
<span><span class='c'>#&gt; [1] "1er" "2e"  "3e"  "4e"</span></span>
<span></span></code></pre>
</div>
<h2 id="acknowledgements">Acknowledgements
</h2>
<p>We&rsquo;d like to thank all people who have contributed in some way, whether it was filing issues, participating in discussion or contributing to code and documentation:</p>
<p><a href="https://github.com/Aariq" target="_blank" rel="noopener">@Aariq</a>
, <a href="https://github.com/Aehmlo" target="_blank" rel="noopener">@Aehmlo</a>
, <a href="https://github.com/Ali-Hudson" target="_blank" rel="noopener">@Ali-Hudson</a>
, <a href="https://github.com/cb12991" target="_blank" rel="noopener">@cb12991</a>
, <a href="https://github.com/colindouglas" target="_blank" rel="noopener">@colindouglas</a>
, <a href="https://github.com/d-morrison" target="_blank" rel="noopener">@d-morrison</a>
, <a href="https://github.com/davidhodge931" target="_blank" rel="noopener">@davidhodge931</a>
, <a href="https://github.com/EricMarcon" target="_blank" rel="noopener">@EricMarcon</a>
, <a href="https://github.com/kellijohnson-NOAA" target="_blank" rel="noopener">@kellijohnson-NOAA</a>
, <a href="https://github.com/kmcd39" target="_blank" rel="noopener">@kmcd39</a>
, <a href="https://github.com/lz1nwm" target="_blank" rel="noopener">@lz1nwm</a>
, <a href="https://github.com/mine-cetinkaya-rundel" target="_blank" rel="noopener">@mine-cetinkaya-rundel</a>
, <a href="https://github.com/mjskay" target="_blank" rel="noopener">@mjskay</a>
, <a href="https://github.com/Moohan" target="_blank" rel="noopener">@Moohan</a>
, <a href="https://github.com/muschellij2" target="_blank" rel="noopener">@muschellij2</a>
, <a href="https://github.com/ppreshant" target="_blank" rel="noopener">@ppreshant</a>
, <a href="https://github.com/rawktheuniversemon" target="_blank" rel="noopener">@rawktheuniversemon</a>
, <a href="https://github.com/rogiersbart" target="_blank" rel="noopener">@rogiersbart</a>
, <a href="https://github.com/SchmidtPaul" target="_blank" rel="noopener">@SchmidtPaul</a>
, <a href="https://github.com/teunbrand" target="_blank" rel="noopener">@teunbrand</a>
, and <a href="https://github.com/thomasp85" target="_blank" rel="noopener">@thomasp85</a>
.</p>
]]></description>
      <enclosure url="https://posit-open-source.netlify.app/blog/tidyverse/2025/scales-1-4-0/thumbnail-wd.jpg" length="232182" type="image/jpeg" />
    </item>
    <item>
      <title>Great Tables: Becoming the Polars `.style` Property</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/polars-dot-style/</link>
      <pubDate>Wed, 16 Apr 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/polars-dot-style/</guid>
      <dc:creator>Michael Chow</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>Roughly a year ago, the DataFrame library Polars made its v1.0.0 release.
One neat feature included in the release was a <a href="https://docs.pola.rs/user-guide/misc/styling/" target="_blank" rel="noopener"><code>DataFrame.style</code></a>
 property&mdash;which returns a Great Tables object, so you can
add things like titles, column labels, and highlighting for reporting.</p>
<p>When talking about the Polars integration, people are often surprised to hear it happened when Great Tables was only 8 months old.
Moreover, the whole process of how open source maintainers chat and
discuss teaming up can feel shrouded in mystery.</p>
<p>In this post, I want to take some time to discuss how folks in the Polars and Great Tables communities
got to <code>DataFrame.style</code>. There are three big pieces:</p>
<ul>
<li><strong>How we got there</strong>: the magic of the Polars discord.</li>
<li><strong>Making <code>.style</code> work</strong>: enabling Great Tables to work as a property.</li>
<li><strong>What&rsquo;s next?</strong></li>
</ul>
<h2 id="how-we-got-there">How we got there
</h2>
<h3 id="first-contact-polars-discord">First contact: Polars discord
</h3>
<p>Roughly a year ago, Rich Iannone and I (Michael Chow) started working together on Great Tables&mdash;a Python library
for creating display tables. Initially, Great Tables only supported Pandas, but this made a few things difficult.
For example, selecting columns and applying conditional styles took a surprising amount of code.</p>
<p>As an experiment, we added support for Polars, and wrote a post called
<a href="https://posit-open-source.netlify.app/blog/great-tables/polars-styling/">Great Tables: The Polars DataFrame Styler of Your Dreams</a>
.</p>
<p>Curious in what folks thought, we dropped it in the Polars discord, and got some Great Feedback:</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/polars-dot-style/discord-feedback.jpg" width="500" />
<p>But Ritchie Vink, the creator of Polars, knew we were harboring a shameful Pandas dependency secret:</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/polars-dot-style/discord-why-pandas.jpg" width="500" />
<p>It&rsquo;s true, we had baked Pandas in as a dependency. We were just kids back then when starting Great Tables.
We didn&rsquo;t realize that the world was moving to DataFrame agnostic support 😓.</p>
<p>But the more we used Polars with Great Tables, the happier we were.
So we made some architectural tweaks to make Great Tables <a href="https://posit-open-source.netlify.app/blog/great-tables/bring-your-own-df/">BYODF (Bring Your Own DataFrame)</a>
.
With these changes, Polars users could install and use Great Tables without pulling in an unnecessary
dependency on another DataFrame library (Pandas).</p>
<p>These interactions were critical early on for co-designing Great Tables with Polars in mind.
But the real magic for us was when Polars users started opening PRs on Great Tables, to make sure we got things right. Chief among them, Jerry Wu!</p>
<h3 id="jerry-wu-power-contributor">Jerry Wu: power contributor
</h3>
<p>Luckily, members of the Polars community, like Jerry Wu <a href="https://github.com/jrycw" target="_blank" rel="noopener">(jrycw)</a>
, showed up to make sure we wired up to Polars correctly, and to weigh in on how Polars should be used.</p>
<p>For example, Jerry&rsquo;s first PR was ensuring we handled a Polars deprecation correctly.</p>
<p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/great-tables/polars-dot-style/pr-jerry.jpg"
      alt="" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>I really can&rsquo;t overstate how much we appreciate his help, and how critical it has been in ensuring we get the details right.</p>
<p>In addition to his PRs, Jerry has done really Great Work sharing about table display. The most interesting example of this to me is that he discovered that Polars, Great Tables, and FastHTML work well together.</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/polars-dot-style/linkedin-jerry.jpg" width="500" />
<p>Rich and I had no idea that was possible, and the FastHTML folks ended up adapting his example into an <a href="https://fastht.ml/gallery/split_view?category=visualizations&amp;project=great_tables_tables" target="_blank" rel="noopener">entry on their gallery</a>
.
Jerry is constantly teaching us about what Great Tables can do.</p>
<h3 id="growing-up-making-the-case-for-style">Growing up: making the case for <code>.style</code>
</h3>
<p>With so much joy coming out of the Polars integration, and support from folks in the Polars community, we started to wonder: how could Great Tables make Polars a first-class citizen?</p>
<p>This ultimately boiled down to asking: what would it take for the <code>polars.DataFrame.style</code> property to return a Great Tables object?</p>
<p>After some discussion on discord, the big pieces folks needed were some sense that Great Tables used a reasonable approach to table styling, carried few dependencies, and was engineered such that it could be returned from a <code>DataFrame.style</code> property.
Ultimately, the next few months were spent getting Great Tables up to snuff, and the Polars PR merged.</p>
<h2 id="making-style-work">Making <code>.style</code> work
</h2>
<p>The <a href="https://github.com/pola-rs/polars/pull/16809" target="_blank" rel="noopener">PR to implement <code>.style</code> in Polars</a>
 went super quick, from advice on discord April to merged by June. A huge force behind the PR was <a href="https://github.com/MarcoGorelli" target="_blank" rel="noopener">Marco Gorelli</a>
, who encouraged us through the process!</p>
<p>In this section I&rsquo;ll look at how we addressed the 3 big requirements behind making a strong case for <code>.DataFrame.style</code> returning a Great Tables object:</p>
<ul>
<li><strong>Design Credibility</strong>: It&rsquo;s clear Great Tables is reasonably thought out.</li>
<li><strong>Working with Polars selectors</strong>: It integrates well with pieces like Polars selectors.</li>
<li><strong>Technical</strong>: Great Tables can be returned from a <code>DataFrame.style</code> property.</li>
</ul>
<h3 id="design-credibility">Design credibility
</h3>
<p>Our biggest hurdle was that the Great Tables library was less than a year old.
However, this youthful appearance is a bit misleading, because Great Tables builds on decades of
table design and tooling. For example, Rich&rsquo;s version of Great Tables in R, called <code>gt</code>, has been around since 2019 (see <a href="https://youtu.be/h1KAjSfSbmk" target="_blank" rel="noopener">his rstudio::conf() talk</a>
).</p>
<p>My favorite aspect of <code>gt</code> is that the community ran <strong>table contests</strong> every year. The contests don&rsquo;t even require the use of <code>gt</code> or Great Tables, just a zest for the art of table styling. The <a href="https://posit.co/blog/2024-table-contest-winners/" target="_blank" rel="noopener">2024 Table Contest</a>
 had around <strong>60 submissions</strong>, and is something we often draw on for inspiration.</p>
<p>For more on the long history of table design, see <a href="https://posit-dev.github.io/great-tables/blog/design-philosophy/" target="_blank" rel="noopener">The Design Philosophy of Great Tables</a>
, or this <a href="https://hutchdatascience.org/better_tables/" target="_blank" rel="noopener">Fred Hutch better tables workshop</a>
.</p>
<h3 id="working-with-polars-selectors">Working with Polars selectors
</h3>
<p>One important task was <strong>sorting out how we use Polars selectors</strong>, to ensure they didn&rsquo;t break down the road.</p>
<p>For example, Great Tables allows Polars selectors to set styles on specific columns data.
However, one challenge we ran into was figuring out what Polars considers an expression versus a selector.
Essentially, selectors choose columns, but expressions represent operations on the data itself.</p>
<p>The code below shows cases where the <code>.exclude()</code> results in expressions or selectors.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars.selectors</span> <span class="k">as</span> <span class="nn">cs</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># selector: all columns except &#34;a&#34;</span>
</span></span><span class="line"><span class="cl"><span class="n">cs</span><span class="o">.</span><span class="n">exclude</span><span class="p">(</span><span class="s2">&#34;a&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># expression: same columns as above ¯\_(ツ)_/¯</span>
</span></span><span class="line"><span class="cl"><span class="n">cs</span><span class="o">.</span><span class="n">all</span><span class="p">()</span><span class="o">.</span><span class="n">exclude</span><span class="p">(</span><span class="s2">&#34;a&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>After discussing with Polars folks <a href="https://github.com/pola-rs/polars/issues/16448" target="_blank" rel="noopener">in this Polars issue</a>
,
we landed on <strong>4 rules for selectors</strong>:</p>
<table>
  <thead>
      <tr>
          <th>rule</th>
          <th>description</th>
          <th>example</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>cs</code> functions</td>
          <td>top-level <code>cs</code> selection functions -&gt; <strong>selector</strong></td>
          <td><code>cs.starts_with(&quot;a&quot;)</code></td>
      </tr>
      <tr>
          <td>infix selectors</td>
          <td>infix operators over all selectors -&gt; <strong>selector</strong></td>
          <td><code>cs.starts_with(&quot;a&quot;) - cs.by_name(&quot;abc&quot;)</code></td>
      </tr>
      <tr>
          <td>infix expressions</td>
          <td>infix operators over any non-selectors -&gt; <strong>expression</strong></td>
          <td><code>cs.starts_with(&quot;a&quot;) - &quot;abc&quot;</code></td>
      </tr>
      <tr>
          <td>method expressions</td>
          <td>method calls off selectors -&gt; <strong>expression</strong></td>
          <td><code>cs.all().exclude(&quot;a&quot;)</code></td>
      </tr>
  </tbody>
</table>
<p>Clarifying this was critical in Great Tables, because in some place we only accept selectors, so
we needed to be able to articulate to users how to produce them.</p>
<h3 id="technical-wiring-work">Technical wiring work
</h3>
<p>The last hurdle was tweaking the <code>great_tables.GT</code> class to fit the flow of <code>DataFrame.style</code>.
For example, here is what creating a <code>GT()</code> object looked like before and after <code>.style</code>:</p>
<ul>
<li>Before: <code>GT(my_data, id=&quot;my-table&quot;)</code></li>
<li>After: <code>my_data.style.with_id(&quot;my-table&quot;)</code></li>
</ul>
<p>Notice that before, the <code>GT(id=...)</code> argument could set the html id for a table.
However, <code>DataFrame.style</code> is a property that can&rsquo;t take arguments, so we needed methods like <code>with_id()</code>
to set these kinds of options.</p>
<p>Here&rsquo;s a full code example, in case you want to see it in action.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">exibble</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># create a GT object ----</span>
</span></span><span class="line"><span class="cl"><span class="n">GT</span><span class="p">(</span><span class="n">exibble</span><span class="p">,</span> <span class="nb">id</span><span class="o">=</span><span class="s2">&#34;my-table&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># create GT object via .style property ----</span>
</span></span><span class="line"><span class="cl"><span class="n">pl</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span><span class="n">exibble</span><span class="p">)</span><span class="o">.</span><span class="n">style</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="pgelgeqlbq" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#pgelgeqlbq table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#pgelgeqlbq thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#pgelgeqlbq p { margin: 0; padding: 0; }
#pgelgeqlbq .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#pgelgeqlbq .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#pgelgeqlbq .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#pgelgeqlbq .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#pgelgeqlbq .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pgelgeqlbq .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pgelgeqlbq .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pgelgeqlbq .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#pgelgeqlbq .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#pgelgeqlbq .gt_column_spanner_outer:first-child { padding-left: 0; }
#pgelgeqlbq .gt_column_spanner_outer:last-child { padding-right: 0; }
#pgelgeqlbq .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#pgelgeqlbq .gt_spanner_row { border-bottom-style: hidden; }
#pgelgeqlbq .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#pgelgeqlbq .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#pgelgeqlbq .gt_from_md&gt; :first-child { margin-top: 0; }
#pgelgeqlbq .gt_from_md&gt; :last-child { margin-bottom: 0; }
#pgelgeqlbq .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#pgelgeqlbq .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#pgelgeqlbq .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#pgelgeqlbq .gt_row_group_first td { border-top-width: 2px; }
#pgelgeqlbq .gt_row_group_first th { border-top-width: 2px; }
#pgelgeqlbq .gt_striped { color: #333333; background-color: #F4F4F4; }
#pgelgeqlbq .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pgelgeqlbq .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#pgelgeqlbq .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#pgelgeqlbq .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#pgelgeqlbq .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#pgelgeqlbq .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#pgelgeqlbq .gt_left { text-align: left; }
#pgelgeqlbq .gt_center { text-align: center; }
#pgelgeqlbq .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#pgelgeqlbq .gt_font_normal { font-weight: normal; }
#pgelgeqlbq .gt_font_bold { font-weight: bold; }
#pgelgeqlbq .gt_font_italic { font-style: italic; }
#pgelgeqlbq .gt_super { font-size: 65%; }
#pgelgeqlbq .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#pgelgeqlbq .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>num</th>
          <th>char</th>
          <th>fctr</th>
          <th>date</th>
          <th>time</th>
          <th>datetime</th>
          <th>currency</th>
          <th>row</th>
          <th>group</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>0.1111</td>
          <td>apricot</td>
          <td>one</td>
          <td>2015-01-15</td>
          <td>13:35</td>
          <td>2018-01-01 02:22</td>
          <td>49.95</td>
          <td>row_1</td>
          <td>grp_a</td>
      </tr>
      <tr>
          <td>2.222</td>
          <td>banana</td>
          <td>two</td>
          <td>2015-02-15</td>
          <td>14:40</td>
          <td>2018-02-02 14:33</td>
          <td>17.95</td>
          <td>row_2</td>
          <td>grp_a</td>
      </tr>
      <tr>
          <td>33.33</td>
          <td>coconut</td>
          <td>three</td>
          <td>2015-03-15</td>
          <td>15:45</td>
          <td>2018-03-03 03:44</td>
          <td>1.39</td>
          <td>row_3</td>
          <td>grp_a</td>
      </tr>
      <tr>
          <td>444.4</td>
          <td>durian</td>
          <td>four</td>
          <td>2015-04-15</td>
          <td>16:50</td>
          <td>2018-04-04 15:55</td>
          <td>65100.0</td>
          <td>row_4</td>
          <td>grp_a</td>
      </tr>
      <tr>
          <td>5550.0</td>
          <td>None</td>
          <td>five</td>
          <td>2015-05-15</td>
          <td>17:55</td>
          <td>2018-05-05 04:00</td>
          <td>1325.81</td>
          <td>row_5</td>
          <td>grp_b</td>
      </tr>
      <tr>
          <td>None</td>
          <td>fig</td>
          <td>six</td>
          <td>2015-06-15</td>
          <td>None</td>
          <td>2018-06-06 16:11</td>
          <td>13.255</td>
          <td>row_6</td>
          <td>grp_b</td>
      </tr>
      <tr>
          <td>777000.0</td>
          <td>grapefruit</td>
          <td>seven</td>
          <td>None</td>
          <td>19:10</td>
          <td>2018-07-07 05:22</td>
          <td>None</td>
          <td>row_7</td>
          <td>grp_b</td>
      </tr>
      <tr>
          <td>8880000.0</td>
          <td>honeydew</td>
          <td>eight</td>
          <td>2015-08-15</td>
          <td>20:20</td>
          <td>None</td>
          <td>0.44</td>
          <td>row_8</td>
          <td>grp_b</td>
      </tr>
  </tbody>
</table>
</div>
<p>The <code>DataFrame.style</code> property is special, in that you don&rsquo;t pass any parameters to it.
The motivation for this in Polars is that it matches the Pandas <code>pandas.DataFrame.style</code> approach,
so provides a familiar interface for users coming from that package.
It also matches the <code>DataFrame.plot</code> flow of both packages.</p>
<p>As it turns out, allowing every options settable in the <code>GT()</code> constructor to be set somewhere else was not something anticipated in the design of Great Tables. But after some light architectural wrestling, we introduced <code>.tab_stub()</code>, <code>.with_id()</code>, and <code>.with_locale()</code> to capture arguments you might pass to <code>GT()</code>.</p>
<h2 id="whats-next">What&rsquo;s next?
</h2>
<p>Currently, we&rsquo;re really excited about using Great Tables in different ways!</p>
<ul>
<li><a href="https://github.com/posit-dev/pointblank" target="_blank" rel="noopener">Pointblank</a>
: validate your DataFrames and database tables. Pointblank is quick to fire up and produces delightfully styled reports (using Great Tables 😎).</li>
<li><a href="https://github.com/machow/reactable-py" target="_blank" rel="noopener">reactable</a>
: create interactive tables. We want to use reactable to render a Great Tables object interactively.</li>
</ul>
<p>We&rsquo;re also focused on keeping bug fixes and features cooking in Great Tables. If there&rsquo;s anything
in particular you&rsquo;re looking for, definitely reach out on the <a href="https://github.com/posit-dev/great-tables/discussions" target="_blank" rel="noopener">Great Tables discussion page</a>
.</p>
<h2 id="in-conclusion">In conclusion
</h2>
<p>This post looked at how interacting with the Polars community discord shaped Great Tables development early on, and how community members like Jerry ended up ensuring Great Tables and Polars played well together.
We ended up putting a ring on it, and ensuring Great Tables design, dependencies, and architecture worked
well enough to justify returning via <code>polars.DataFrame.style</code>. (Though this is still marked unstable in Polars!)</p>
<p>We&rsquo;re excited to look at different use cases for Great Tables (and table styling in general) over the
next year!</p>
]]></description>
    </item>
    <item>
      <title>How We Used Great Tables to Supercharge Reporting in Pointblank</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/pointblank-intro/</link>
      <pubDate>Tue, 11 Feb 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/pointblank-intro/</guid>
      <dc:creator>Rich Iannone</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>The Great Tables package allows you to make tables, and they&rsquo;re really great when part of a report, a book, or a web page. The API is meant to be easy to work with so DataFrames could be made into publication-quality tables without a lot of hassle. And having nice-looking tables in the mix elevates the quality of the medium you&rsquo;re working in.</p>
<p>We were inspired by this and decided to explore what it could mean to introduce a package where reporting is largely in the form of beautiful tables. To this end, we started work on a new Python package that generates tables (c/o Great Tables) as reporting objects. This package is called <a href="https://github.com/posit-dev/pointblank" target="_blank" rel="noopener">Pointblank</a>
, its focus is that of data validation, and the reporting tables it can produce informs users on the results of a data validation workflow. In this post we&rsquo;ll go through how Pointblank:</p>
<ul>
<li>enables you to validate many types of DataFrames and SQL databases</li>
<li>provides easy-to-understand validation result tables and thorough drilldowns</li>
<li>gives you nice previews of data tables across a range of backends</li>
</ul>
<h3 id="validating-data-with-pointblank">Validating data with Pointblank
</h3>
<p>Just like Great Tables, Pointblank&rsquo;s primary input is a table and the goal of that library is to perform checks of the tabular data. Other libraries in this domain include <a href="https://github.com/great-expectations/great_expectations" target="_blank" rel="noopener">Great Expectations</a>
, <a href="https://github.com/unionai-oss/pandera" target="_blank" rel="noopener">pandera</a>
, <a href="https://github.com/sodadata/soda-core?tab=readme-ov-file" target="_blank" rel="noopener">Soda</a>
, and <a href="https://github.com/awslabs/python-deequ" target="_blank" rel="noopener">PyDeequ</a>
.</p>
<p>Below is the main validation report table that users are likely to see quite often. Each row is a validation step, with columns reporting details about each step and their results.</p>
<details class="code-fold">
<summary>Show the code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">pointblank</span> <span class="k">as</span> <span class="nn">pb</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">validation</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pb</span><span class="o">.</span><span class="n">Validate</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">data</span><span class="o">=</span><span class="n">pb</span><span class="o">.</span><span class="n">load_dataset</span><span class="p">(</span><span class="n">dataset</span><span class="o">=</span><span class="s2">&#34;small_table&#34;</span><span class="p">,</span> <span class="n">tbl_type</span><span class="o">=</span><span class="s2">&#34;polars&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">label</span><span class="o">=</span><span class="s2">&#34;An example validation&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">thresholds</span><span class="o">=</span><span class="p">(</span><span class="mf">0.1</span><span class="p">,</span> <span class="mf">0.2</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">col_vals_gt</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;d&#34;</span><span class="p">,</span> <span class="n">value</span><span class="o">=</span><span class="mi">1000</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">col_vals_le</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;c&#34;</span><span class="p">,</span> <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">col_exists</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;date&#34;</span><span class="p">,</span> <span class="s2">&#34;date_time&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">interrogate</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">validation</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<pre><code>/Users/charlottewickham/Documents/posit/open-source-website/content/blog/great-tables/pointblank-intro/.venv/lib/python3.13/site-packages/pointblank/column.py:990: SyntaxWarning: invalid escape sequence '\d'
  &quot;&quot;&quot;
/Users/charlottewickham/Documents/posit/open-source-website/content/blog/great-tables/pointblank-intro/.venv/lib/python3.13/site-packages/pointblank/thresholds.py:295: SyntaxWarning: invalid escape sequence '\d'
  &quot;&quot;&quot;
/Users/charlottewickham/Documents/posit/open-source-website/content/blog/great-tables/pointblank-intro/.venv/lib/python3.13/site-packages/pointblank/validate.py:112: SyntaxWarning: invalid escape sequence '\d'
  &quot;&quot;&quot;Access step-level metadata when authoring custom actions.
/Users/charlottewickham/Documents/posit/open-source-website/content/blog/great-tables/pointblank-intro/.venv/lib/python3.13/site-packages/pointblank/validate.py:8866: SyntaxWarning: invalid escape sequence '\d'
  &quot;&quot;&quot;
</code></pre>
<div id="pb_tbl" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
#pb_tbl table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#pb_tbl thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#pb_tbl p { margin: 0; padding: 0; }
#pb_tbl .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 90%; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#pb_tbl .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#pb_tbl .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#pb_tbl .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#pb_tbl .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pb_tbl .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pb_tbl .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pb_tbl .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#pb_tbl .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#pb_tbl .gt_column_spanner_outer:first-child { padding-left: 0; }
#pb_tbl .gt_column_spanner_outer:last-child { padding-right: 0; }
#pb_tbl .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#pb_tbl .gt_spanner_row { border-bottom-style: hidden; }
#pb_tbl .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#pb_tbl .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#pb_tbl .gt_from_md&gt; :first-child { margin-top: 0; }
#pb_tbl .gt_from_md&gt; :last-child { margin-bottom: 0; }
#pb_tbl .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#pb_tbl .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#pb_tbl .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#pb_tbl .gt_row_group_first td { border-top-width: 2px; }
#pb_tbl .gt_row_group_first th { border-top-width: 2px; }
#pb_tbl .gt_striped { background-color: rgba(128,128,128,0.05); }
#pb_tbl .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pb_tbl .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#pb_tbl .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#pb_tbl .gt_left { text-align: left; }
#pb_tbl .gt_center { text-align: center; }
#pb_tbl .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#pb_tbl .gt_font_normal { font-weight: normal; }
#pb_tbl .gt_font_bold { font-weight: bold; }
#pb_tbl .gt_font_italic { font-style: italic; }
#pb_tbl .gt_super { font-size: 65%; }
#pb_tbl .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#pb_tbl .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table style="table-layout: fixed;; width: 0px" class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<colgroup>
  <col style="width:4px;"/>
  <col style="width:35px;"/>
  <col style="width:190px;"/>
  <col style="width:120px;"/>
  <col style="width:120px;"/>
  <col style="width:50px;"/>
  <col style="width:50px;"/>
  <col style="width:60px;"/>
  <col style="width:60px;"/>
  <col style="width:60px;"/>
  <col style="width:30px;"/>
  <col style="width:30px;"/>
  <col style="width:30px;"/>
  <col style="width:65px;"/>
</colgroup>
<thead>
  <tr class="gt_heading">
    <td colspan="14" class="gt_heading gt_title gt_font_normal" style="color: #444444;font-size: 28px;text-align: left;font-weight: bold;">Pointblank Validation</td>
  </tr>
  <tr class="gt_heading">
    <td colspan="14" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border"><div><span style='text-decoration-style: solid; text-decoration-color: #ADD8E6; text-decoration-line: underline; text-underline-position: under; color: #333333; font-variant-numeric: tabular-nums; padding-left: 4px; margin-right: 5px; padding-right: 2px;'>An example validation</span><div style="padding-top: 10px; padding-bottom: 5px;"><span style='background-color: #0075FF; color: #FFFFFF; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 10px 5px 0px; border: solid 1px #0075FF; font-weight: bold; padding: 2px 10px 2px 10px; font-size: 10px;'>Polars</span><span><span style="background-color: #AAAAAA; color: white; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 0px 5px 5px; border: solid 1px #AAAAAA; font-weight: bold; padding: 2px 15px 2px 15px; font-size: smaller;">WARNING</span><span style="background-color: none; color: #333333; padding: 0.5em 0.5em; position: inherit; margin: 5px 0px 5px -4px; font-weight: bold; border: solid 1px #AAAAAA; padding: 2px 15px 2px 15px; font-size: smaller; margin-right: 5px;">0.1</span><span style="background-color: #EBBC14; color: white; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 0px 5px 1px; border: solid 1px #EBBC14; font-weight: bold; padding: 2px 15px 2px 15px; font-size: smaller;">ERROR</span><span style="background-color: none; color: #333333; padding: 0.5em 0.5em; position: inherit; margin: 5px 0px 5px -4px; font-weight: bold; border: solid 1px #EBBC14; padding: 2px 15px 2px 15px; font-size: smaller; margin-right: 5px;">0.2</span><span style="background-color: #FF3300; color: white; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 0px 5px 1px; border: solid 1px #FF3300; font-weight: bold; padding: 2px 15px 2px 15px; font-size: smaller;">CRITICAL</span><span style="background-color: none; color: #333333; padding: 0.5em 0.5em; position: inherit; margin: 5px 0px 5px -4px; font-weight: bold; border: solid 1px #FF3300; padding: 2px 15px 2px 15px; font-size: smaller;">0.5</span></span></div></div></td>
  </tr>
<tr class="gt_col_headings">
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-status_color"></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-i"></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-type_upd">STEP</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-columns_upd">COLUMNS</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-values_upd">VALUES</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-tbl">TBL</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-eval">EVAL</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-test_units">UNITS</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-pass">PASS</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-fail">FAIL</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-w_upd">W</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-e_upd">E</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-c_upd">C</th>
  <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="color: #666666;font-weight: bold;" scope="col" id="pb_tbl-extract_upd">EXT</th>
</tr>
</thead>
<tbody class="gt_table_body">
  <tr>
    <td style="height: 40px; background-color: #EBBC14; color: transparent;font-size: 0px;" class="gt_row gt_left">#EBBC14</td>
    <td style="height: 40px; color: #666666;font-size: 13px;font-weight: bold;" class="gt_row gt_right">1</td>
    <td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_left">
        <div style="margin: 0; padding: 0; display: inline-block; height: 30px; vertical-align: middle; width: 16%;">
            <!--?xml version="1.0" encoding="UTF-8"?--><?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 67 67" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>col_vals_gt</title>
    <g id="All-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="col_vals_gt" transform="translate(0.000000, 0.724138)">
            <path d="M56.712234,1 C59.1975153,1 61.4475153,2.00735931 63.076195,3.63603897 C64.7048747,5.26471863 65.712234,7.51471863 65.712234,10 L65.712234,10 L65.712234,65 L10.712234,65 C8.22695259,65 5.97695259,63.9926407 4.34827294,62.363961 C2.71959328,60.7352814 1.71223397,58.4852814 1.71223397,56 L1.71223397,56 L1.71223397,10 C1.71223397,7.51471863 2.71959328,5.26471863 4.34827294,3.63603897 C5.97695259,2.00735931 8.22695259,1 10.712234,1 L10.712234,1 Z" id="rectangle" stroke="#000000" stroke-width="2" fill="#FFFFFF"></path>
            <path d="M49.7099609,12 L17.7099609,12 C14.9499609,12 12.7099609,14.24 12.7099609,17 L12.7099609,49 C12.7099609,51.76 14.9499609,54 17.7099609,54 L49.7099609,54 C52.4699609,54 54.7099609,51.76 54.7099609,49 L54.7099609,17 C54.7099609,14.24 52.4699609,12 49.7099609,12 Z M27.2799609,44.82 L26.1399609,43.18 L40.9499609,33 L26.1399609,22.82 L27.2799609,21.18 L44.4799609,33 L27.2799609,44.82 Z" id="greater_than" fill="#000000" fill-rule="nonzero"></path>
        </g>
    </g>
</svg>
        </div>
        <div style="font-family: 'IBM Plex Mono', monospace, courier; color: black; font-size: 11px; display: inline-block; vertical-align: middle;">
            <div>col_vals_gt()</div>
        </div>
<pre><code>    &lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;d&lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;1000&lt;/td&gt;
&lt;td style=&quot;height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;&quot; class=&quot;gt_row gt_center&quot;&gt;&lt;svg width=&quot;25px&quot; height=&quot;25px&quot; viewBox=&quot;0 0 25 25&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; style=&quot;vertical-align: middle;&quot;&gt;
&lt;g id=&quot;unchanged&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt;
    &lt;g id=&quot;unchanged&quot; transform=&quot;translate(0.500000, 0.570147)&quot;&gt;
        &lt;rect id=&quot;Rectangle&quot; x=&quot;0.125132506&quot; y=&quot;0&quot; width=&quot;23.749735&quot; height=&quot;23.7894737&quot;&gt;&lt;/rect&gt;
        &lt;path d=&quot;M5.80375046,8.18194736 C3.77191832,8.18194736 2.11875046,9.83495328 2.11875046,11.8669474 C2.11875046,13.8989414 3.77191832,15.5519474 5.80375046,15.5519474 C7.8355826,15.5519474 9.48875046,13.8989414 9.48875046,11.8669474 C9.48875046,9.83495328 7.83552863,8.18194736 5.80375046,8.18194736 Z M5.80375046,14.814915 C4.17821997,14.814915 2.85578285,13.4924778 2.85578285,11.8669474 C2.85578285,10.2414169 4.17821997,8.91897975 5.80375046,8.91897975 C7.42928095,8.91897975 8.75171807,10.2414169 8.75171807,11.8669474 C8.75171807,13.4924778 7.42928095,14.814915 5.80375046,14.814915 Z&quot; id=&quot;Shape&quot; fill=&quot;#000000&quot; fill-rule=&quot;nonzero&quot;&gt;&lt;/path&gt;
        &lt;path d=&quot;M13.9638189,8.699335 C13.9364621,8.70430925 13.9091059,8.71176968 13.8842359,8.71923074 C13.7822704,8.73663967 13.6877654,8.77643115 13.6056956,8.83860518 L10.2433156,11.3852598 C10.0766886,11.5046343 9.97720993,11.6986181 9.97720993,11.9025491 C9.97720993,12.1064807 10.0766886,12.3004639 10.2433156,12.4198383 L13.6056956,14.966493 C13.891697,15.1803725 14.2970729,15.1231721 14.5109517,14.8371707 C14.7248313,14.5511692 14.6676309,14.145794 14.3816294,13.9319145 L12.5313257,12.5392127 L21.8812495,12.5392127 L21.8812495,11.2658854 L12.5313257,11.2658854 L14.3816294,9.87318364 C14.6377872,9.71650453 14.7497006,9.40066014 14.6477351,9.11714553 C14.5482564,8.83363156 14.262255,8.65954352 13.9638189,8.699335 Z&quot; id=&quot;arrow&quot; fill=&quot;#000000&quot; transform=&quot;translate(15.929230, 11.894737) rotate(-180.000000) translate(-15.929230, -11.894737) &quot;&gt;&lt;/path&gt;
    &lt;/g&gt;
&lt;/g&gt;
</code></pre>
<p></svg></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color:#4CA64C;">✓</span></td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_right">13</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">7<br />0.54</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">6<br />0.46</td>
<td style="height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #AAAAAA;">●</span></td>
<td style="height: 40px; background-color: #FCFCFC;" class="gt_row gt_center"><span style="color: #EBBC14;">●</span></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #FF3300;">○</span></td>
<td style="height: 40px;" class="gt_row gt_center"><a href="data:text/csv;base64,X3Jvd19udW1fLGRhdGVfdGltZSxkYXRlLGEsYixjLGQsZSxmCjUsMjAxNi0wMS0wOVQxMjozNjowMC4wMDAwMDAsMjAxNi0wMS0wOSw4LDMtbGRtLTAzOCw3LDI4My45NCx0cnVlLGxvdwo3LDIwMTYtMDEtMTVUMTg6NDY6MDAuMDAwMDAwLDIwMTYtMDEtMTUsNywxLWtudy0wOTMsMyw4NDMuMzQsdHJ1ZSxoaWdoCjksMjAxNi0wMS0yMFQwNDozMDowMC4wMDAwMDAsMjAxNi0wMS0yMCwzLDUtYmNlLTY0Miw5LDgzNy45MyxmYWxzZSxoaWdoCjEwLDIwMTYtMDEtMjBUMDQ6MzA6MDAuMDAwMDAwLDIwMTYtMDEtMjAsMyw1LWJjZS02NDIsOSw4MzcuOTMsZmFsc2UsaGlnaAoxMSwyMDE2LTAxLTI2VDIwOjA3OjAwLjAwMDAwMCwyMDE2LTAxLTI2LDQsMi1kbXgtMDEwLDcsODMzLjk4LHRydWUsbG93CjEyLDIwMTYtMDEtMjhUMDI6NTE6MDAuMDAwMDAwLDIwMTYtMDEtMjgsMiw3LWRteC0wMTAsOCwxMDguMzQsZmFsc2UsbG93Cg==" download="extract_0001.csv"><button style="background-color: #67C2DC; color: #FFFFFF; border: none; padding: 5px; font-weight: bold; cursor: pointer; border-radius: 4px;">CSV</button></a></td></p>
  </tr>
  <tr>
    <td style="height: 40px; background-color: #FF3300; color: transparent;font-size: 0px;" class="gt_row gt_left">#FF3300</td>
    <td style="height: 40px; color: #666666;font-size: 13px;font-weight: bold;" class="gt_row gt_right">2</td>
    <td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_left">
        <div style="margin: 0; padding: 0; display: inline-block; height: 30px; vertical-align: middle; width: 16%;">
            <!--?xml version="1.0" encoding="UTF-8"?--><?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 67 67" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>col_vals_lte</title>
    <g id="All-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="col_vals_lte" transform="translate(0.000000, 0.793103)">
            <path d="M56.712234,1 C59.1975153,1 61.4475153,2.00735931 63.076195,3.63603897 C64.7048747,5.26471863 65.712234,7.51471863 65.712234,10 L65.712234,10 L65.712234,65 L10.712234,65 C8.22695259,65 5.97695259,63.9926407 4.34827294,62.363961 C2.71959328,60.7352814 1.71223397,58.4852814 1.71223397,56 L1.71223397,56 L1.71223397,10 C1.71223397,7.51471863 2.71959328,5.26471863 4.34827294,3.63603897 C5.97695259,2.00735931 8.22695259,1 10.712234,1 L10.712234,1 Z" id="rectangle" stroke="#000000" stroke-width="2" fill="#FFFFFF"></path>
            <path d="M53.712234,12 L13.712234,12 C13.157547,12 12.712234,12.449219 12.712234,13 L12.712234,53 C12.712234,53.550781 13.157547,54 13.712234,54 L53.712234,54 C54.266922,54 54.712234,53.550781 54.712234,53 L54.712234,13 C54.712234,12.449219 54.266922,12 53.712234,12 Z M42.227859,19.125 L43.196609,20.875 L26.770828,30 L43.196609,39.125 L42.227859,40.875 L22.65364,30 L42.227859,19.125 Z M44.712234,47 L22.712234,47 L22.712234,45 L44.712234,45 L44.712234,47 Z" id="less_than_equal" fill="#000000" fill-rule="nonzero"></path>
        </g>
    </g>
</svg>
        </div>
        <div style="font-family: 'IBM Plex Mono', monospace, courier; color: black; font-size: 11px; display: inline-block; vertical-align: middle;">
            <div>col_vals_le()</div>
        </div>
<pre><code>    &lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;c&lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;5&lt;/td&gt;
&lt;td style=&quot;height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;&quot; class=&quot;gt_row gt_center&quot;&gt;&lt;svg width=&quot;25px&quot; height=&quot;25px&quot; viewBox=&quot;0 0 25 25&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; style=&quot;vertical-align: middle;&quot;&gt;
&lt;g id=&quot;unchanged&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt;
    &lt;g id=&quot;unchanged&quot; transform=&quot;translate(0.500000, 0.570147)&quot;&gt;
        &lt;rect id=&quot;Rectangle&quot; x=&quot;0.125132506&quot; y=&quot;0&quot; width=&quot;23.749735&quot; height=&quot;23.7894737&quot;&gt;&lt;/rect&gt;
        &lt;path d=&quot;M5.80375046,8.18194736 C3.77191832,8.18194736 2.11875046,9.83495328 2.11875046,11.8669474 C2.11875046,13.8989414 3.77191832,15.5519474 5.80375046,15.5519474 C7.8355826,15.5519474 9.48875046,13.8989414 9.48875046,11.8669474 C9.48875046,9.83495328 7.83552863,8.18194736 5.80375046,8.18194736 Z M5.80375046,14.814915 C4.17821997,14.814915 2.85578285,13.4924778 2.85578285,11.8669474 C2.85578285,10.2414169 4.17821997,8.91897975 5.80375046,8.91897975 C7.42928095,8.91897975 8.75171807,10.2414169 8.75171807,11.8669474 C8.75171807,13.4924778 7.42928095,14.814915 5.80375046,14.814915 Z&quot; id=&quot;Shape&quot; fill=&quot;#000000&quot; fill-rule=&quot;nonzero&quot;&gt;&lt;/path&gt;
        &lt;path d=&quot;M13.9638189,8.699335 C13.9364621,8.70430925 13.9091059,8.71176968 13.8842359,8.71923074 C13.7822704,8.73663967 13.6877654,8.77643115 13.6056956,8.83860518 L10.2433156,11.3852598 C10.0766886,11.5046343 9.97720993,11.6986181 9.97720993,11.9025491 C9.97720993,12.1064807 10.0766886,12.3004639 10.2433156,12.4198383 L13.6056956,14.966493 C13.891697,15.1803725 14.2970729,15.1231721 14.5109517,14.8371707 C14.7248313,14.5511692 14.6676309,14.145794 14.3816294,13.9319145 L12.5313257,12.5392127 L21.8812495,12.5392127 L21.8812495,11.2658854 L12.5313257,11.2658854 L14.3816294,9.87318364 C14.6377872,9.71650453 14.7497006,9.40066014 14.6477351,9.11714553 C14.5482564,8.83363156 14.262255,8.65954352 13.9638189,8.699335 Z&quot; id=&quot;arrow&quot; fill=&quot;#000000&quot; transform=&quot;translate(15.929230, 11.894737) rotate(-180.000000) translate(-15.929230, -11.894737) &quot;&gt;&lt;/path&gt;
    &lt;/g&gt;
&lt;/g&gt;
</code></pre>
<p></svg></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color:#4CA64C;">✓</span></td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_right">13</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">5<br />0.38</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">8<br />0.62</td>
<td style="height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #AAAAAA;">●</span></td>
<td style="height: 40px; background-color: #FCFCFC;" class="gt_row gt_center"><span style="color: #EBBC14;">●</span></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #FF3300;">●</span></td>
<td style="height: 40px;" class="gt_row gt_center"><a href="data:text/csv;base64,X3Jvd19udW1fLGRhdGVfdGltZSxkYXRlLGEsYixjLGQsZSxmCjIsMjAxNi0wMS0wNFQwMDozMjowMC4wMDAwMDAsMjAxNi0wMS0wNCwzLDUtZWdoLTE2Myw4LDk5OTkuOTksdHJ1ZSxsb3cKNCwyMDE2LTAxLTA2VDE3OjIzOjAwLjAwMDAwMCwyMDE2LTAxLTA2LDIsNS1qZG8tOTAzLCwzODkyLjQsZmFsc2UsbWlkCjUsMjAxNi0wMS0wOVQxMjozNjowMC4wMDAwMDAsMjAxNi0wMS0wOSw4LDMtbGRtLTAzOCw3LDI4My45NCx0cnVlLGxvdwo5LDIwMTYtMDEtMjBUMDQ6MzA6MDAuMDAwMDAwLDIwMTYtMDEtMjAsMyw1LWJjZS02NDIsOSw4MzcuOTMsZmFsc2UsaGlnaAoxMCwyMDE2LTAxLTIwVDA0OjMwOjAwLjAwMDAwMCwyMDE2LTAxLTIwLDMsNS1iY2UtNjQyLDksODM3LjkzLGZhbHNlLGhpZ2gKMTEsMjAxNi0wMS0yNlQyMDowNzowMC4wMDAwMDAsMjAxNi0wMS0yNiw0LDItZG14LTAxMCw3LDgzMy45OCx0cnVlLGxvdwoxMiwyMDE2LTAxLTI4VDAyOjUxOjAwLjAwMDAwMCwyMDE2LTAxLTI4LDIsNy1kbXgtMDEwLDgsMTA4LjM0LGZhbHNlLGxvdwoxMywyMDE2LTAxLTMwVDExOjIzOjAwLjAwMDAwMCwyMDE2LTAxLTMwLDEsMy1ka2EtMzAzLCwyMjMwLjA5LHRydWUsaGlnaAo=" download="extract_0002.csv"><button style="background-color: #67C2DC; color: #FFFFFF; border: none; padding: 5px; font-weight: bold; cursor: pointer; border-radius: 4px;">CSV</button></a></td></p>
  </tr>
  <tr>
    <td style="height: 40px; background-color: #4CA64C; color: transparent;font-size: 0px;" class="gt_row gt_left">#4CA64C</td>
    <td style="height: 40px; color: #666666;font-size: 13px;font-weight: bold;" class="gt_row gt_right">3</td>
    <td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_left">
        <div style="margin: 0; padding: 0; display: inline-block; height: 30px; vertical-align: middle; width: 16%;">
            <!--?xml version="1.0" encoding="UTF-8"?--><?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 67 67" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>col_exists</title>
    <g id="All-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="col_exists" transform="translate(0.000000, 0.827586)">
            <path d="M56.712234,1.01466935 C59.1975153,1.01466935 61.4475153,2.02202867 63.076195,3.65070832 C64.7048747,5.27938798 65.712234,7.52938798 65.712234,10.0146694 L65.712234,10.0146694 L65.712234,65.0146694 L10.712234,65.0146694 C8.22695259,65.0146694 5.97695259,64.00731 4.34827294,62.3786304 C2.71959328,60.7499507 1.71223397,58.4999507 1.71223397,56.0146694 L1.71223397,56.0146694 L1.71223397,10.0146694 C1.71223397,7.52938798 2.71959328,5.27938798 4.34827294,3.65070832 C5.97695259,2.02202867 8.22695259,1.01466935 10.712234,1.01466935 L10.712234,1.01466935 Z" id="rectangle" stroke="#000000" stroke-width="2" fill="#FFFFFF"></path>
            <rect id="column" fill="#000000" x="12.2117153" y="12.0146694" width="20" height="42" rx="1"></rect>
            <path d="M44.3177114,43.0146694 L44.3177114,40.5136928 L46.818688,40.5136928 L46.818688,43.0146694 L44.3177114,43.0146694 Z M44.3177114,38.0000209 L44.3177114,37.314474 C44.3177114,35.6979295 44.9397755,34.178739 46.1839224,32.7568569 L46.9837271,31.830099 C48.3125097,30.3066539 48.9768911,29.058294 48.9768911,28.0849819 C48.9768911,27.3317229 48.6849019,26.7350492 48.1009146,26.2949428 C47.5169273,25.8548364 46.7298258,25.6347865 45.7395864,25.6347865 C44.4446581,25.6347865 43.0693463,25.9479345 41.6136099,26.5742397 L41.6136099,24.4541225 C43.1793729,23.9801618 44.643551,23.743185 46.006188,23.743185 C47.7327591,23.743185 49.1038392,24.1303881 50.1194692,24.9048061 C51.1350993,25.679224 51.6429067,26.7265768 51.6429067,28.0468959 C51.6429067,28.7916913 51.4969121,29.4327982 51.2049185,29.9702358 C50.9129248,30.5076733 50.3522208,31.1699389 49.5227896,31.9570522 L48.7356802,32.6933803 C47.9485669,33.4381757 47.432296,34.0623556 47.1868521,34.5659389 C46.9414081,35.0695221 46.818688,35.7487146 46.818688,36.6035365 L46.818688,38.0000209 L44.3177114,38.0000209 Z" id="?" fill="#000000"></path>
        </g>
    </g>
</svg>
        </div>
        <div style="font-family: 'IBM Plex Mono', monospace, courier; color: black; font-size: 11px; display: inline-block; vertical-align: middle;">
            <div>col_exists()</div>
        </div>
<pre><code>    &lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;date&lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;&amp;mdash;&lt;/td&gt;
&lt;td style=&quot;height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;&quot; class=&quot;gt_row gt_center&quot;&gt;&lt;svg width=&quot;25px&quot; height=&quot;25px&quot; viewBox=&quot;0 0 25 25&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; style=&quot;vertical-align: middle;&quot;&gt;
&lt;g id=&quot;unchanged&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt;
    &lt;g id=&quot;unchanged&quot; transform=&quot;translate(0.500000, 0.570147)&quot;&gt;
        &lt;rect id=&quot;Rectangle&quot; x=&quot;0.125132506&quot; y=&quot;0&quot; width=&quot;23.749735&quot; height=&quot;23.7894737&quot;&gt;&lt;/rect&gt;
        &lt;path d=&quot;M5.80375046,8.18194736 C3.77191832,8.18194736 2.11875046,9.83495328 2.11875046,11.8669474 C2.11875046,13.8989414 3.77191832,15.5519474 5.80375046,15.5519474 C7.8355826,15.5519474 9.48875046,13.8989414 9.48875046,11.8669474 C9.48875046,9.83495328 7.83552863,8.18194736 5.80375046,8.18194736 Z M5.80375046,14.814915 C4.17821997,14.814915 2.85578285,13.4924778 2.85578285,11.8669474 C2.85578285,10.2414169 4.17821997,8.91897975 5.80375046,8.91897975 C7.42928095,8.91897975 8.75171807,10.2414169 8.75171807,11.8669474 C8.75171807,13.4924778 7.42928095,14.814915 5.80375046,14.814915 Z&quot; id=&quot;Shape&quot; fill=&quot;#000000&quot; fill-rule=&quot;nonzero&quot;&gt;&lt;/path&gt;
        &lt;path d=&quot;M13.9638189,8.699335 C13.9364621,8.70430925 13.9091059,8.71176968 13.8842359,8.71923074 C13.7822704,8.73663967 13.6877654,8.77643115 13.6056956,8.83860518 L10.2433156,11.3852598 C10.0766886,11.5046343 9.97720993,11.6986181 9.97720993,11.9025491 C9.97720993,12.1064807 10.0766886,12.3004639 10.2433156,12.4198383 L13.6056956,14.966493 C13.891697,15.1803725 14.2970729,15.1231721 14.5109517,14.8371707 C14.7248313,14.5511692 14.6676309,14.145794 14.3816294,13.9319145 L12.5313257,12.5392127 L21.8812495,12.5392127 L21.8812495,11.2658854 L12.5313257,11.2658854 L14.3816294,9.87318364 C14.6377872,9.71650453 14.7497006,9.40066014 14.6477351,9.11714553 C14.5482564,8.83363156 14.262255,8.65954352 13.9638189,8.699335 Z&quot; id=&quot;arrow&quot; fill=&quot;#000000&quot; transform=&quot;translate(15.929230, 11.894737) rotate(-180.000000) translate(-15.929230, -11.894737) &quot;&gt;&lt;/path&gt;
    &lt;/g&gt;
&lt;/g&gt;
</code></pre>
<p></svg></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color:#4CA64C;">✓</span></td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_right">1</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">1<br />1.00</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">0<br />0.00</td>
<td style="height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #AAAAAA;">○</span></td>
<td style="height: 40px; background-color: #FCFCFC;" class="gt_row gt_center"><span style="color: #EBBC14;">○</span></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #FF3300;">○</span></td>
<td style="height: 40px;" class="gt_row gt_center">—</td></p>
  </tr>
  <tr>
    <td style="height: 40px; background-color: #4CA64C; color: transparent;font-size: 0px;" class="gt_row gt_left">#4CA64C</td>
    <td style="height: 40px; color: #666666;font-size: 13px;font-weight: bold;" class="gt_row gt_right">4</td>
    <td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_left">
        <div style="margin: 0; padding: 0; display: inline-block; height: 30px; vertical-align: middle; width: 16%;">
            <!--?xml version="1.0" encoding="UTF-8"?--><?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 67 67" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>col_exists</title>
    <g id="All-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="col_exists" transform="translate(0.000000, 0.827586)">
            <path d="M56.712234,1.01466935 C59.1975153,1.01466935 61.4475153,2.02202867 63.076195,3.65070832 C64.7048747,5.27938798 65.712234,7.52938798 65.712234,10.0146694 L65.712234,10.0146694 L65.712234,65.0146694 L10.712234,65.0146694 C8.22695259,65.0146694 5.97695259,64.00731 4.34827294,62.3786304 C2.71959328,60.7499507 1.71223397,58.4999507 1.71223397,56.0146694 L1.71223397,56.0146694 L1.71223397,10.0146694 C1.71223397,7.52938798 2.71959328,5.27938798 4.34827294,3.65070832 C5.97695259,2.02202867 8.22695259,1.01466935 10.712234,1.01466935 L10.712234,1.01466935 Z" id="rectangle" stroke="#000000" stroke-width="2" fill="#FFFFFF"></path>
            <rect id="column" fill="#000000" x="12.2117153" y="12.0146694" width="20" height="42" rx="1"></rect>
            <path d="M44.3177114,43.0146694 L44.3177114,40.5136928 L46.818688,40.5136928 L46.818688,43.0146694 L44.3177114,43.0146694 Z M44.3177114,38.0000209 L44.3177114,37.314474 C44.3177114,35.6979295 44.9397755,34.178739 46.1839224,32.7568569 L46.9837271,31.830099 C48.3125097,30.3066539 48.9768911,29.058294 48.9768911,28.0849819 C48.9768911,27.3317229 48.6849019,26.7350492 48.1009146,26.2949428 C47.5169273,25.8548364 46.7298258,25.6347865 45.7395864,25.6347865 C44.4446581,25.6347865 43.0693463,25.9479345 41.6136099,26.5742397 L41.6136099,24.4541225 C43.1793729,23.9801618 44.643551,23.743185 46.006188,23.743185 C47.7327591,23.743185 49.1038392,24.1303881 50.1194692,24.9048061 C51.1350993,25.679224 51.6429067,26.7265768 51.6429067,28.0468959 C51.6429067,28.7916913 51.4969121,29.4327982 51.2049185,29.9702358 C50.9129248,30.5076733 50.3522208,31.1699389 49.5227896,31.9570522 L48.7356802,32.6933803 C47.9485669,33.4381757 47.432296,34.0623556 47.1868521,34.5659389 C46.9414081,35.0695221 46.818688,35.7487146 46.818688,36.6035365 L46.818688,38.0000209 L44.3177114,38.0000209 Z" id="?" fill="#000000"></path>
        </g>
    </g>
</svg>
        </div>
        <div style="font-family: 'IBM Plex Mono', monospace, courier; color: black; font-size: 11px; display: inline-block; vertical-align: middle;">
            <div>col_exists()</div>
        </div>
<pre><code>    &lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;date_time&lt;/td&gt;
&lt;td style=&quot;height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;&quot; class=&quot;gt_row gt_left&quot;&gt;&amp;mdash;&lt;/td&gt;
&lt;td style=&quot;height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;&quot; class=&quot;gt_row gt_center&quot;&gt;&lt;svg width=&quot;25px&quot; height=&quot;25px&quot; viewBox=&quot;0 0 25 25&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; style=&quot;vertical-align: middle;&quot;&gt;
&lt;g id=&quot;unchanged&quot; stroke=&quot;none&quot; stroke-width=&quot;1&quot; fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;&gt;
    &lt;g id=&quot;unchanged&quot; transform=&quot;translate(0.500000, 0.570147)&quot;&gt;
        &lt;rect id=&quot;Rectangle&quot; x=&quot;0.125132506&quot; y=&quot;0&quot; width=&quot;23.749735&quot; height=&quot;23.7894737&quot;&gt;&lt;/rect&gt;
        &lt;path d=&quot;M5.80375046,8.18194736 C3.77191832,8.18194736 2.11875046,9.83495328 2.11875046,11.8669474 C2.11875046,13.8989414 3.77191832,15.5519474 5.80375046,15.5519474 C7.8355826,15.5519474 9.48875046,13.8989414 9.48875046,11.8669474 C9.48875046,9.83495328 7.83552863,8.18194736 5.80375046,8.18194736 Z M5.80375046,14.814915 C4.17821997,14.814915 2.85578285,13.4924778 2.85578285,11.8669474 C2.85578285,10.2414169 4.17821997,8.91897975 5.80375046,8.91897975 C7.42928095,8.91897975 8.75171807,10.2414169 8.75171807,11.8669474 C8.75171807,13.4924778 7.42928095,14.814915 5.80375046,14.814915 Z&quot; id=&quot;Shape&quot; fill=&quot;#000000&quot; fill-rule=&quot;nonzero&quot;&gt;&lt;/path&gt;
        &lt;path d=&quot;M13.9638189,8.699335 C13.9364621,8.70430925 13.9091059,8.71176968 13.8842359,8.71923074 C13.7822704,8.73663967 13.6877654,8.77643115 13.6056956,8.83860518 L10.2433156,11.3852598 C10.0766886,11.5046343 9.97720993,11.6986181 9.97720993,11.9025491 C9.97720993,12.1064807 10.0766886,12.3004639 10.2433156,12.4198383 L13.6056956,14.966493 C13.891697,15.1803725 14.2970729,15.1231721 14.5109517,14.8371707 C14.7248313,14.5511692 14.6676309,14.145794 14.3816294,13.9319145 L12.5313257,12.5392127 L21.8812495,12.5392127 L21.8812495,11.2658854 L12.5313257,11.2658854 L14.3816294,9.87318364 C14.6377872,9.71650453 14.7497006,9.40066014 14.6477351,9.11714553 C14.5482564,8.83363156 14.262255,8.65954352 13.9638189,8.699335 Z&quot; id=&quot;arrow&quot; fill=&quot;#000000&quot; transform=&quot;translate(15.929230, 11.894737) rotate(-180.000000) translate(-15.929230, -11.894737) &quot;&gt;&lt;/path&gt;
    &lt;/g&gt;
&lt;/g&gt;
</code></pre>
<p></svg></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color:#4CA64C;">✓</span></td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px;" class="gt_row gt_right">1</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">1<br />1.00</td>
<td style="height: 40px; color: black;font-family: IBM Plex Mono;font-size: 11px; border-left: 1px dashed #E5E5E5;" class="gt_row gt_right">0<br />0.00</td>
<td style="height: 40px; background-color: #FCFCFC; border-left: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #AAAAAA;">○</span></td>
<td style="height: 40px; background-color: #FCFCFC;" class="gt_row gt_center"><span style="color: #EBBC14;">○</span></td>
<td style="height: 40px; background-color: #FCFCFC; border-right: 1px solid #D3D3D3;" class="gt_row gt_center"><span style="color: #FF3300;">○</span></td>
<td style="height: 40px;" class="gt_row gt_center">—</td></p>
  </tr>
</tbody>
  <tfoot class="gt_sourcenotes">
  <tr>
    <td class="gt_sourcenote" colspan="14"><div style='margin-top: 5px; margin-bottom: 5px;'><span style='background-color: #FFF; color: #444; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin-left: 10px; margin-right: 5px; border: solid 1px #999999; font-variant-numeric: tabular-nums; border-radius: 0; padding: 2px 10px 2px 10px;'>2026-03-13 19:07:32 UTC</span><span style='background-color: #FFF; color: #444; padding: 0.5em 0.5em; position: inherit; margin-right: 5px; border: solid 1px #999999; font-variant-numeric: tabular-nums; border-radius: 0; padding: 2px 10px 2px 10px;'>< 1 s</span><span style='background-color: #FFF; color: #444; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 1px 5px -1px; border: solid 1px #999999; font-variant-numeric: tabular-nums; border-radius: 0; padding: 2px 10px 2px 10px;'>2026-03-13 19:07:32 UTC</span></div></td>
  </tr>
</tfoot>
</table>
</div>
<p>The first validation step (<code>cols_val_gt()</code>) checks the <code>d</code> column in the data, to ensure each value is greater than <code>1000</code>. Notice that the red bar on the left indicates it failed, and the <code>FAIL</code> column says it has 6 failing values out of 13 <code>UNITS</code>.</p>
<p>The table is chock full of the information you need when doing data validation tasks. And it&rsquo;s also easy on the eyes. Some cool features include:</p>
<ol>
<li>a header with information on the type of input table plus important validation options</li>
<li>vertical color strips on the left side to indicate overall status of the rows</li>
<li>icons in several columns (space saving and they let you know what&rsquo;s up)</li>
<li>&lsquo;CSV&rsquo; buttons that, when clicked, provide you with a CSV file</li>
<li>a footer with timing information for the analysis</li>
</ol>
<p>It&rsquo;s a nice table and it scales nicely to the large variety of validation types and options available in the Pointblank library. Viewing this table is a central part of using that library and the great thing about the reporting being a table like this is that it can be shared by placing it in a publication environment of your choosing (for example, it could be put in a Quarto document).</p>
<p>Here is the code that was used to generate the data validation above:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">pointblank</span> <span class="k">as</span> <span class="nn">pb</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">validation</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pb</span><span class="o">.</span><span class="n">Validate</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">data</span><span class="o">=</span><span class="n">pb</span><span class="o">.</span><span class="n">load_dataset</span><span class="p">(</span><span class="n">dataset</span><span class="o">=</span><span class="s2">&#34;small_table&#34;</span><span class="p">,</span> <span class="n">tbl_type</span><span class="o">=</span><span class="s2">&#34;polars&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">label</span><span class="o">=</span><span class="s2">&#34;An example validation&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">thresholds</span><span class="o">=</span><span class="p">(</span><span class="mf">0.1</span><span class="p">,</span> <span class="mf">0.2</span><span class="p">,</span> <span class="mf">0.5</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">col_vals_gt</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;d&#34;</span><span class="p">,</span> <span class="n">value</span><span class="o">=</span><span class="mi">1000</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">col_vals_le</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;c&#34;</span><span class="p">,</span> <span class="n">value</span><span class="o">=</span><span class="mi">5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">col_exists</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;date&#34;</span><span class="p">,</span> <span class="s2">&#34;date_time&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">interrogate</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">validation</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Pointblank makes it easy to get started by giving you a simple entry point (<code>Validate()</code>), allowing you to define as many validation steps as needed. Each validation step is specified by calling methods like <code>.cols_vals_gt()</code>, which is short for checking that &ldquo;column values are greater than&rdquo; some specified value.</p>
<p>Pointblank enables you to validate many types of DataFrames and SQL databases. Pointblank supports Pandas and Polars through Narwhals, and numerous backends (like DuckDB and MySQL) are also supported though our Ibis integration.</p>
<h3 id="exploring-data-validation-failures">Exploring data validation failures
</h3>
<p>Note that the above validation report table showed 6 failures in the first validation step. You might want to know exactly <em>what</em> failed, giving you a chance to fix the underlying data quality issues. To do that, you can use the <code>get_step_report()</code> method:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">validation</span><span class="o">.</span><span class="n">get_step_report</span><span class="p">(</span><span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="pb_preview_tbl" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
#pb_preview_tbl table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#pb_preview_tbl thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#pb_preview_tbl p { margin: 0; padding: 0; }
#pb_preview_tbl .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#pb_preview_tbl .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#pb_preview_tbl .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#pb_preview_tbl .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#pb_preview_tbl .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pb_preview_tbl .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pb_preview_tbl .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pb_preview_tbl .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: solid; border-left-width: 1px; border-left-color: #F2F2F2; border-right-style: solid; border-right-width: 1px; border-right-color: #F2F2F2; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#pb_preview_tbl .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#pb_preview_tbl .gt_column_spanner_outer:first-child { padding-left: 0; }
#pb_preview_tbl .gt_column_spanner_outer:last-child { padding-right: 0; }
#pb_preview_tbl .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#pb_preview_tbl .gt_spanner_row { border-bottom-style: hidden; }
#pb_preview_tbl .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#pb_preview_tbl .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#pb_preview_tbl .gt_from_md&gt; :first-child { margin-top: 0; }
#pb_preview_tbl .gt_from_md&gt; :last-child { margin-bottom: 0; }
#pb_preview_tbl .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: solid; border-left-width: 1px; border-left-color: #E9E9E9; border-right-style: solid; border-right-width: 1px; border-right-color: #E9E9E9; vertical-align: middle; overflow-x: hidden; }
#pb_preview_tbl .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#pb_preview_tbl .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#pb_preview_tbl .gt_row_group_first td { border-top-width: 2px; }
#pb_preview_tbl .gt_row_group_first th { border-top-width: 2px; }
#pb_preview_tbl .gt_striped { background-color: rgba(128,128,128,0.05); }
#pb_preview_tbl .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pb_preview_tbl .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#pb_preview_tbl .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#pb_preview_tbl .gt_left { text-align: left; }
#pb_preview_tbl .gt_center { text-align: center; }
#pb_preview_tbl .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#pb_preview_tbl .gt_font_normal { font-weight: normal; }
#pb_preview_tbl .gt_font_bold { font-weight: bold; }
#pb_preview_tbl .gt_font_italic { font-style: italic; }
#pb_preview_tbl .gt_super { font-size: 65%; }
#pb_preview_tbl .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#pb_preview_tbl .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table style="table-layout: fixed;; width: 0px" class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<colgroup>
  <col style="width:25.6px;"/>
  <col style="width:158px;"/>
  <col style="width:88px;"/>
  <col style="width:49px;"/>
  <col style="width:80px;"/>
  <col style="width:49px;"/>
  <col style="width:65px;"/>
  <col style="width:65px;"/>
  <col style="width:57px;"/>
</colgroup>
<thead>
  <tr class="gt_heading">
    <td colspan="9" class="gt_heading gt_title gt_font_normal">Report for Validation Step 1<div style='font-size: 13.6px;'><div style='padding-top: 7px;'>ASSERTION <span style='border-style: solid; border-width: thin; border-color: lightblue; padding-left: 2px; padding-right: 2px;'><code style='color: #303030; background-color: transparent; position: relative; bottom: 1px;'><code style='color: #303030; font-family: monospace; font-size: smaller;'>d > 1000</code></code></span></div><div style='padding-top: 7px;'><strong>6</strong> / <strong>13</strong> TEST UNIT FAILURES IN COLUMN <strong>6</strong></div><div>EXTRACT OF ALL <strong>6</strong> ROWS WITH <span style='color: #B22222;'>TEST UNIT FAILURES IN RED</span>:</div></div></td>
  </tr>
<tr class="gt_col_headings">
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-_row_num_"></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-date_time"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>date_time</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>Datetime</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-date"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>date</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>Date</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-a"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>a</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>Int64</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-b"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>b</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>String</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-c"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>c</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>Int64</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px; border-left: 2px solid black;border-right: 2px solid black;" scope="col" id="pb_preview_tbl-d"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>d</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>Float64</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_center" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-e"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>e</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>Boolean</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-f"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>f</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>String</em></div></div></th>
</tr>
</thead>
<tbody class="gt_table_body">
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">5</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-09 12:36:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-09</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">8</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">3-ldm-038</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">7</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: #B22222; background-color: #FFC1C159; border-left: 2px solid black;border-right: 2px solid black;" class="gt_row gt_right">283.94</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_center">True</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">low</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">7</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-15 18:46:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-15</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">7</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">1-knw-093</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: #B22222; background-color: #FFC1C159; border-left: 2px solid black;border-right: 2px solid black;" class="gt_row gt_right">843.34</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_center">True</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">high</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">9</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-20 04:30:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-20</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">5-bce-642</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">9</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: #B22222; background-color: #FFC1C159; border-left: 2px solid black;border-right: 2px solid black;" class="gt_row gt_right">837.93</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_center">False</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">high</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">10</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-20 04:30:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-20</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">5-bce-642</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">9</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: #B22222; background-color: #FFC1C159; border-left: 2px solid black;border-right: 2px solid black;" class="gt_row gt_right">837.93</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_center">False</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">high</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">11</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-26 20:07:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-26</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">4</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">2-dmx-010</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">7</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: #B22222; background-color: #FFC1C159; border-left: 2px solid black;border-right: 2px solid black;" class="gt_row gt_right">833.98</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_center">True</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">low</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">12</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-28 02:51:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2016-01-28</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">7-dmx-010</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">8</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: #B22222; background-color: #FFC1C159; border-left: 2px solid black;border-right: 2px solid black;" class="gt_row gt_right">108.34</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_center">False</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">low</td>
  </tr>
</tbody>
</table>
</div>
<p>The use of a table for reporting is ideal here! The main features of this step report table include:</p>
<ol>
<li>a header with summarized information</li>
<li>the selected rows that contain the failures</li>
<li>a highlighted column of interest</li>
</ol>
<p>Different types of validation methods will have step report tables that organize the pertinent information in a way that makes sense for the validation performed.</p>
<h3 id="previewing-datasets-across-backends">Previewing datasets across backends
</h3>
<p>Because many of the backends Pointblank supports have varying ways to view the underlying data, we provide a unified <code>preview()</code> function. It gives you a beautiful and consistent view of any data table. Here is how it looks against a 2,000 row DuckDB table that&rsquo;s included in the package (<code>game_revenue</code>):</p>
<details class="code-fold">
<summary>Show the code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">pb</span><span class="o">.</span><span class="n">preview</span><span class="p">(</span><span class="n">pb</span><span class="o">.</span><span class="n">load_dataset</span><span class="p">(</span><span class="n">dataset</span><span class="o">=</span><span class="s2">&#34;game_revenue&#34;</span><span class="p">,</span> <span class="n">tbl_type</span><span class="o">=</span><span class="s2">&#34;duckdb&#34;</span><span class="p">))</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="pb_preview_tbl" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
#pb_preview_tbl table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#pb_preview_tbl thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#pb_preview_tbl p { margin: 0; padding: 0; }
#pb_preview_tbl .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#pb_preview_tbl .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#pb_preview_tbl .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#pb_preview_tbl .gt_subtitle { color: #333333; font-size: 12px; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#pb_preview_tbl .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pb_preview_tbl .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pb_preview_tbl .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#pb_preview_tbl .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: solid; border-left-width: 1px; border-left-color: #F2F2F2; border-right-style: solid; border-right-width: 1px; border-right-color: #F2F2F2; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#pb_preview_tbl .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#pb_preview_tbl .gt_column_spanner_outer:first-child { padding-left: 0; }
#pb_preview_tbl .gt_column_spanner_outer:last-child { padding-right: 0; }
#pb_preview_tbl .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#pb_preview_tbl .gt_spanner_row { border-bottom-style: hidden; }
#pb_preview_tbl .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#pb_preview_tbl .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#pb_preview_tbl .gt_from_md&gt; :first-child { margin-top: 0; }
#pb_preview_tbl .gt_from_md&gt; :last-child { margin-bottom: 0; }
#pb_preview_tbl .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: solid; border-left-width: 1px; border-left-color: #E9E9E9; border-right-style: solid; border-right-width: 1px; border-right-color: #E9E9E9; vertical-align: middle; overflow-x: hidden; }
#pb_preview_tbl .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#pb_preview_tbl .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#pb_preview_tbl .gt_row_group_first td { border-top-width: 2px; }
#pb_preview_tbl .gt_row_group_first th { border-top-width: 2px; }
#pb_preview_tbl .gt_striped { background-color: rgba(128,128,128,0.05); }
#pb_preview_tbl .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#pb_preview_tbl .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#pb_preview_tbl .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#pb_preview_tbl .gt_left { text-align: left; }
#pb_preview_tbl .gt_center { text-align: center; }
#pb_preview_tbl .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#pb_preview_tbl .gt_font_normal { font-weight: normal; }
#pb_preview_tbl .gt_font_bold { font-weight: bold; }
#pb_preview_tbl .gt_font_italic { font-style: italic; }
#pb_preview_tbl .gt_super { font-size: 65%; }
#pb_preview_tbl .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#pb_preview_tbl .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table style="table-layout: fixed;; width: 0px" class="gt_table" data-quarto-disable-processing="true" data-quarto-bootstrap="false">
<colgroup>
  <col style="width:41.2px;"/>
  <col style="width:127px;"/>
  <col style="width:197px;"/>
  <col style="width:205px;"/>
  <col style="width:205px;"/>
  <col style="width:80px;"/>
  <col style="width:80px;"/>
  <col style="width:104px;"/>
  <col style="width:135px;"/>
  <col style="width:88px;"/>
  <col style="width:119px;"/>
  <col style="width:111px;"/>
</colgroup>
<thead>
  <tr class="gt_heading">
    <td colspan="12" class="gt_heading gt_title gt_font_normal"><div><div style="padding-top: 0; padding-bottom: 7px;"><span style='background-color: #000000; color: #FFFFFF; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 10px 5px 0px; border: solid 1px #000000; font-weight: bold; padding: 2px 10px 2px 10px; font-size: 10px;'>DuckDB</span><span style='background-color: #eecbff; color: #333333; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 0px 5px 5px; font-weight: bold; border: solid 1px #eecbff; padding: 2px 15px 2px 15px; font-size: 10px;'>Rows</span><span style='background-color: none; color: #333333; padding: 0.5em 0.5em; position: inherit; margin: 5px 0px 5px -4px; font-weight: bold; border: solid 1px #eecbff; padding: 2px 15px 2px 15px; font-size: 10px;'>2,000</span><span style='background-color: #BDE7B4; color: #333333; padding: 0.5em 0.5em; position: inherit; text-transform: uppercase; margin: 5px 0px 5px 3px; font-weight: bold; border: solid 1px #BDE7B4; padding: 2px 15px 2px 15px; font-size: 10px;'>Columns</span><span style='background-color: none; color: #333333; padding: 0.5em 0.5em; position: inherit; margin: 5px 0px 5px -4px; font-weight: bold; border: solid 1px #BDE7B4; padding: 2px 15px 2px 15px; font-size: 10px;'>11</span></div></div></td>
  </tr>
<tr class="gt_col_headings">
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-_row_num_"></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-player_id"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>player_id</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>string</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-session_id"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>session_id</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>string</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-session_start"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>session_start</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>timestamp</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-time"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>time</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>timestamp</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-item_type"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>item_type</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>string</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-item_name"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>item_name</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>string</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-item_revenue"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>item_revenue</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>float64</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-session_duration"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>session_duration</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>float64</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_right" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-start_day"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>start_day</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>date</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-acquisition"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>acquisition</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>string</em></div></div></th>
  <th class="gt_col_heading gt_columns_bottom_border gt_left" rowspan="1" colspan="1" style="color: gray20;font-family: IBM Plex Mono;font-size: 12px;" scope="col" id="pb_preview_tbl-country"><div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-bottom: 2px; margin-bottom: 2px;'>country</div><div style='white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-top: 2px; margin-top: 2px;'><em>string</em></div></div></th>
</tr>
</thead>
<tbody class="gt_table_body">
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">1</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896-eol2j8bs</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:31:03+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:31:27+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">iap</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">offer2</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">8.99</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">16.3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">google</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">Germany</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">2</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896-eol2j8bs</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:31:03+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:36:57+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">iap</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">gems3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">22.49</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">16.3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">google</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">Germany</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896-eol2j8bs</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:31:03+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:37:45+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">iap</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">gold7</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">107.99</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">16.3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">google</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">Germany</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">4</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ECPANOIXLZHF896-eol2j8bs</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:31:03+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01 01:42:33+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad_20sec</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">0.76</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">16.3</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-01</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">google</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">Germany</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">5</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_left">ECPANOIXLZHF896</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_left">ECPANOIXLZHF896-hdu9jkls</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_right">2015-01-01 11:50:02+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_right">2015-01-01 11:55:20+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_left">ad</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_left">ad_5sec</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_right">0.03</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_right">35.2</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_right">2015-01-01</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_left">google</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; border-bottom: 2px solid #6699CC80;" class="gt_row gt_left">Germany</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">1996</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">NAOJRDMCSEBI281</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">NAOJRDMCSEBI281-j2vs9ilp</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 01:57:50+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 02:02:50+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad_survey</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">1.332</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">25.8</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-11</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">organic</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">Norway</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">1997</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">NAOJRDMCSEBI281</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">NAOJRDMCSEBI281-j2vs9ilp</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 01:57:50+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 02:22:14+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad_survey</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">1.35</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">25.8</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-11</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">organic</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">Norway</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">1998</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">RMOSWHJGELCI675</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">RMOSWHJGELCI675-vbhcsmtr</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 02:39:48+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 02:40:00+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad_5sec</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">0.03</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">8.4</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-10</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">other_campaign</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">France</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">1999</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">RMOSWHJGELCI675</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">RMOSWHJGELCI675-vbhcsmtr</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 02:39:48+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 02:47:12+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">iap</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">offer5</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">26.09</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">8.4</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-10</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">other_campaign</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">France</td>
  </tr>
  <tr>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E; color: gray;font-family: IBM Plex Mono;font-size: 10px; border-right: 2px solid #6699CC80;" class="gt_row gt_right">2000</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">GJCXNTWEBIPQ369</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">GJCXNTWEBIPQ369-9elq67md</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 03:59:23+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-21 04:06:29+00:00</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">ad_5sec</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">0.12</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">18.5</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_right">2015-01-14</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">organic</td>
    <td style="height: 14px; padding: 4px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: black;font-family: IBM Plex Mono;font-size: 12px; border-top: 1px solid #E9E9E;border-bottom: 1px solid #E9E9E;" class="gt_row gt_left">United States</td>
  </tr>
</tbody>
</table>
</div>
<p>Notice that the table displays only 10 rows by default, 5 from the top and 5 from the bottom. The grey text on the left of the table indicates the row number, and a blue line helps demarcate the top and bottom rows.</p>
<p>The <code>preview()</code> function had a few design goals in mind:</p>
<ul>
<li>get the dimensions of the table and display them prominently in the header</li>
<li>provide the column names and the column types</li>
<li>have a consistent line height along with a sensible limit to the column width</li>
<li>use a monospaced typeface having high legibility</li>
<li>should work for all sorts of tables!</li>
</ul>
<p>This is a nice drop-in replacement for looking at DataFrames or Ibis tables (the types of tables that Pointblank can work with). If you were to inspect the DuckDB table materialized by <code>pb.load_dataset(dataset=&quot;game_revenue&quot;, tbl_type=&quot;duckdb&quot;)</code> without <code>preview()</code> you&rsquo;d get this:</p>
<details class="code-fold">
<summary>Show the code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">pb</span><span class="o">.</span><span class="n">load_dataset</span><span class="p">(</span><span class="n">dataset</span><span class="o">=</span><span class="s2">&#34;game_revenue&#34;</span><span class="p">,</span> <span class="n">tbl_type</span><span class="o">=</span><span class="s2">&#34;duckdb&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<pre style="white-space:pre;overflow-x:auto;line-height:normal;font-family:Menlo,'DejaVu Sans Mono',consolas,'Courier New',monospace">DatabaseTable: game_revenue
  player_id        string
  session_id       string
  session_start    timestamp('UTC', 6)
  time             timestamp('UTC', 6)
  item_type        string
  item_name        string
  item_revenue     float64
  session_duration float64
  start_day        date
  acquisition      string
  country          string
</pre>
<p>Which is not nearly as good.</p>
<h3 id="in-closing">In closing
</h3>
<p>We hope this post is a good introduction to Pointblank and that it provides some insight on how Great Tables makes sense for reporting in a different library. If you&rsquo;d like to learn more about Pointblank, please visit the <a href="https://posit-dev.github.io/pointblank/" target="_blank" rel="noopener">project website</a>
 and check out the many <a href="https://posit-dev.github.io/pointblank/demos/" target="_blank" rel="noopener">examples</a>
.</p>
]]></description>
    </item>
    <item>
      <title>Style Table Body with `mask=` in `loc.body()`</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/locbody-mask/</link>
      <pubDate>Fri, 24 Jan 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/locbody-mask/</guid>
      <dc:creator>Jerry Wu</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>In Great Tables <code>0.16.0</code>, we introduced the <code>mask=</code> parameter in <code>loc.body()</code>, enabling users to apply conditional styling to rows on a per-column basis more efficiently when working with a Polars DataFrame. This post will demonstrate how it works and compare it with the &ldquo;old-fashioned&rdquo; approach:</p>
<ul>
<li><strong>Leveraging the <code>mask=</code> parameter in <code>loc.body()</code>:</strong> Use Polars expressions for streamlined styling.</li>
<li><strong>Utilizing the <code>locations=</code> parameter in <code>GT.tab_style()</code>:</strong> Pass a list of <code>loc.body()</code> objects.</li>
</ul>
<p>Let&rsquo;s dive in.</p>
<h3 id="preparations">Preparations
</h3>
<p>We&rsquo;ll use the built-in dataset <code>gtcars</code> to create a Polars DataFrame. Next, we&rsquo;ll select the columns <code>mfr</code>, <code>drivetrain</code>, <code>year</code>, and <code>hp</code> to create a small pivoted table named <code>df_mini</code>. Finally, we&rsquo;ll pass <code>df_mini</code> to the <code>GT</code> object to create a table named <code>gt</code>, using <code>drivetrain</code> as the <code>rowname_col=</code> and <code>mfr</code> as the <code>groupname_col=</code>, as shown below:</p>
<details class="code-fold">
<summary>Show the Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">loc</span><span class="p">,</span> <span class="n">style</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">gtcars</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">polars</span> <span class="kn">import</span> <span class="n">selectors</span> <span class="k">as</span> <span class="n">cs</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">year_cols</span> <span class="o">=</span> <span class="p">[</span><span class="s2">&#34;2014&#34;</span><span class="p">,</span> <span class="s2">&#34;2015&#34;</span><span class="p">,</span> <span class="s2">&#34;2016&#34;</span><span class="p">,</span> <span class="s2">&#34;2017&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="n">df_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">gtcars</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;mfr&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">is_in</span><span class="p">([</span><span class="s2">&#34;Ferrari&#34;</span><span class="p">,</span> <span class="s2">&#34;Lamborghini&#34;</span><span class="p">,</span> <span class="s2">&#34;BMW&#34;</span><span class="p">]))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">sort</span><span class="p">(</span><span class="s2">&#34;drivetrain&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">pivot</span><span class="p">(</span><span class="n">on</span><span class="o">=</span><span class="s2">&#34;year&#34;</span><span class="p">,</span> <span class="n">index</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;mfr&#34;</span><span class="p">,</span> <span class="s2">&#34;drivetrain&#34;</span><span class="p">],</span> <span class="n">values</span><span class="o">=</span><span class="s2">&#34;hp&#34;</span><span class="p">,</span> <span class="n">aggregate_function</span><span class="o">=</span><span class="s2">&#34;mean&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span><span class="s2">&#34;mfr&#34;</span><span class="p">,</span> <span class="s2">&#34;drivetrain&#34;</span><span class="p">,</span> <span class="o">*</span><span class="n">year_cols</span><span class="p">])</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt</span> <span class="o">=</span> <span class="n">GT</span><span class="p">(</span><span class="n">df_mini</span><span class="p">)</span><span class="o">.</span><span class="n">tab_stub</span><span class="p">(</span><span class="n">rowname_col</span><span class="o">=</span><span class="s2">&#34;drivetrain&#34;</span><span class="p">,</span> <span class="n">groupname_col</span><span class="o">=</span><span class="s2">&#34;mfr&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;cyan&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">gt</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="sajtalqkmd" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#sajtalqkmd table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#sajtalqkmd thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#sajtalqkmd p { margin: 0; padding: 0; }
#sajtalqkmd .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #016763; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #016763; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#sajtalqkmd .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#sajtalqkmd .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#sajtalqkmd .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#sajtalqkmd .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#sajtalqkmd .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; }
#sajtalqkmd .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#sajtalqkmd .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#sajtalqkmd .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#sajtalqkmd .gt_column_spanner_outer:first-child { padding-left: 0; }
#sajtalqkmd .gt_column_spanner_outer:last-child { padding-right: 0; }
#sajtalqkmd .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#sajtalqkmd .gt_spanner_row { border-bottom-style: hidden; }
#sajtalqkmd .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#sajtalqkmd .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; vertical-align: middle; }
#sajtalqkmd .gt_from_md&gt; :first-child { margin-top: 0; }
#sajtalqkmd .gt_from_md&gt; :last-child { margin-bottom: 0; }
#sajtalqkmd .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: none; border-top-width: 1px; border-top-color: #A5FEF2; border-left-style: none; border-left-width: 1px; border-left-color: #A5FEF2; border-right-style: none; border-right-width: 1px; border-right-color: #A5FEF2; vertical-align: middle; overflow-x: hidden; }
#sajtalqkmd .gt_stub { color: #FFFFFF; background-color: #01837B; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #01837B; padding-left: 5px; padding-right: 5px; }
#sajtalqkmd .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#sajtalqkmd .gt_row_group_first td { border-top-width: 2px; }
#sajtalqkmd .gt_row_group_first th { border-top-width: 2px; }
#sajtalqkmd .gt_striped { color: #333333; background-color: #F4F4F4; }
#sajtalqkmd .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; }
#sajtalqkmd .gt_grand_summary_row { color: #333333; background-color: #A5FEF2; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#sajtalqkmd .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#sajtalqkmd .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#sajtalqkmd .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#sajtalqkmd .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#sajtalqkmd .gt_left { text-align: left; }
#sajtalqkmd .gt_center { text-align: center; }
#sajtalqkmd .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#sajtalqkmd .gt_font_normal { font-weight: normal; }
#sajtalqkmd .gt_font_bold { font-weight: bold; }
#sajtalqkmd .gt_font_italic { font-style: italic; }
#sajtalqkmd .gt_super { font-size: 65%; }
#sajtalqkmd .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#sajtalqkmd .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="2014" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2014</th>
<th id="2015" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2015</th>
<th id="2016" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2016</th>
<th id="2017" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2017</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<td colspan="5" class="gt_group_heading" data-quarto-table-cell-role="th">Ferrari</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">awd</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">652.0</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">680.0</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">rwd</td>
<td class="gt_row gt_right gt_striped">562.0</td>
<td class="gt_row gt_right gt_striped">678.4</td>
<td class="gt_row gt_right gt_striped">661.0</td>
<td class="gt_row gt_right gt_striped">None</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="5" class="gt_group_heading" data-quarto-table-cell-role="th">Lamborghini</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">awd</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">700.0</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">None</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">rwd</td>
<td class="gt_row gt_right gt_striped">550.0</td>
<td class="gt_row gt_right gt_striped">610.0</td>
<td class="gt_row gt_right gt_striped">None</td>
<td class="gt_row gt_right gt_striped">None</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="5" class="gt_group_heading" data-quarto-table-cell-role="th">BMW</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">awd</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">357.0</td>
<td class="gt_row gt_right">None</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">rwd</td>
<td class="gt_row gt_right gt_striped">None</td>
<td class="gt_row gt_right gt_striped">None</td>
<td class="gt_row gt_right gt_striped">465.0</td>
<td class="gt_row gt_right gt_striped">None</td>
</tr>
</tbody>
</table>
</div>
<p>The numbers in the cells represent the average horsepower for each combination of <code>mfr</code> and <code>drivetrain</code> for a specific year.</p>
<h3 id="leveraging-the-mask-parameter-in-locbody">Leveraging the <code>mask=</code> parameter in <code>loc.body()</code>
</h3>
<p>The <code>mask=</code> parameter in <code>loc.body()</code> accepts a Polars expression that evaluates to a boolean result for each cell.</p>
<p>Here&rsquo;s how we can use it to achieve the two goals:</p>
<ul>
<li>Highlight the cell text in red if the column datatype is numerical and the cell value exceeds 650.</li>
<li>Fill the background color as lightgrey if the cell value is missing in the last two columns (<code>2016</code> and <code>2017</code>).</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt</span><span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;red&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">mask</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">numeric</span><span class="p">()</span><span class="o">.</span><span class="n">gt</span><span class="p">(</span><span class="mi">650</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span><span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;lightgrey&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">mask</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">nth</span><span class="p">(</span><span class="o">-</span><span class="mi">2</span><span class="p">,</span> <span class="o">-</span><span class="mi">1</span><span class="p">)</span><span class="o">.</span><span class="n">is_null</span><span class="p">()),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="nvxbhjcjrj" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#nvxbhjcjrj table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#nvxbhjcjrj thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#nvxbhjcjrj p { margin: 0; padding: 0; }
#nvxbhjcjrj .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #016763; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #016763; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#nvxbhjcjrj .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#nvxbhjcjrj .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#nvxbhjcjrj .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#nvxbhjcjrj .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#nvxbhjcjrj .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; }
#nvxbhjcjrj .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#nvxbhjcjrj .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#nvxbhjcjrj .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#nvxbhjcjrj .gt_column_spanner_outer:first-child { padding-left: 0; }
#nvxbhjcjrj .gt_column_spanner_outer:last-child { padding-right: 0; }
#nvxbhjcjrj .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#nvxbhjcjrj .gt_spanner_row { border-bottom-style: hidden; }
#nvxbhjcjrj .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#nvxbhjcjrj .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; vertical-align: middle; }
#nvxbhjcjrj .gt_from_md&gt; :first-child { margin-top: 0; }
#nvxbhjcjrj .gt_from_md&gt; :last-child { margin-bottom: 0; }
#nvxbhjcjrj .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: none; border-top-width: 1px; border-top-color: #A5FEF2; border-left-style: none; border-left-width: 1px; border-left-color: #A5FEF2; border-right-style: none; border-right-width: 1px; border-right-color: #A5FEF2; vertical-align: middle; overflow-x: hidden; }
#nvxbhjcjrj .gt_stub { color: #FFFFFF; background-color: #01837B; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #01837B; padding-left: 5px; padding-right: 5px; }
#nvxbhjcjrj .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#nvxbhjcjrj .gt_row_group_first td { border-top-width: 2px; }
#nvxbhjcjrj .gt_row_group_first th { border-top-width: 2px; }
#nvxbhjcjrj .gt_striped { color: #333333; background-color: #F4F4F4; }
#nvxbhjcjrj .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #01837B; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #01837B; }
#nvxbhjcjrj .gt_grand_summary_row { color: #333333; background-color: #A5FEF2; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#nvxbhjcjrj .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#nvxbhjcjrj .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#nvxbhjcjrj .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#nvxbhjcjrj .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#nvxbhjcjrj .gt_left { text-align: left; }
#nvxbhjcjrj .gt_center { text-align: center; }
#nvxbhjcjrj .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#nvxbhjcjrj .gt_font_normal { font-weight: normal; }
#nvxbhjcjrj .gt_font_bold { font-weight: bold; }
#nvxbhjcjrj .gt_font_italic { font-style: italic; }
#nvxbhjcjrj .gt_super { font-size: 65%; }
#nvxbhjcjrj .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#nvxbhjcjrj .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="2014" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2014</th>
<th id="2015" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2015</th>
<th id="2016" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2016</th>
<th id="2017" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">2017</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<td colspan="5" class="gt_group_heading" data-quarto-table-cell-role="th">Ferrari</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">awd</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right" style="color: red">652.0</td>
<td class="gt_row gt_right" style="background-color: lightgrey">None</td>
<td class="gt_row gt_right" style="color: red">680.0</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">rwd</td>
<td class="gt_row gt_right gt_striped">562.0</td>
<td class="gt_row gt_right gt_striped" style="color: red">678.4</td>
<td class="gt_row gt_right gt_striped" style="color: red">661.0</td>
<td class="gt_row gt_right gt_striped" style="background-color: lightgrey">None</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="5" class="gt_group_heading" data-quarto-table-cell-role="th">Lamborghini</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">awd</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right" style="color: red">700.0</td>
<td class="gt_row gt_right" style="background-color: lightgrey">None</td>
<td class="gt_row gt_right" style="background-color: lightgrey">None</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">rwd</td>
<td class="gt_row gt_right gt_striped">550.0</td>
<td class="gt_row gt_right gt_striped">610.0</td>
<td class="gt_row gt_right gt_striped" style="background-color: lightgrey">None</td>
<td class="gt_row gt_right gt_striped" style="background-color: lightgrey">None</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="5" class="gt_group_heading" data-quarto-table-cell-role="th">BMW</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">awd</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">None</td>
<td class="gt_row gt_right">357.0</td>
<td class="gt_row gt_right" style="background-color: lightgrey">None</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">rwd</td>
<td class="gt_row gt_right gt_striped">None</td>
<td class="gt_row gt_right gt_striped">None</td>
<td class="gt_row gt_right gt_striped">465.0</td>
<td class="gt_row gt_right gt_striped" style="background-color: lightgrey">None</td>
</tr>
</tbody>
</table>
</div>
<p>In this example:</p>
<ul>
<li><code>cs.numeric()</code> targets numerical columns, and <code>.gt(650)</code> checks if the cell value is greater than 650.</li>
<li><code>pl.nth(-2, -1)</code> targets the last two columns, and <code>.is_null()</code> identifies missing values.</li>
</ul>
<p>Did you notice that we can use Polars selectors and expressions to dynamically identify columns at runtime? This is definitely a killer feature when working with pivoted operations.</p>
<p>The <code>mask=</code> parameter acts as a syntactic sugar, streamlining the process and removing the need to loop through columns manually.</p>
<div class="callout callout-warning" role="note" aria-label="Warning">
<div class="callout-header">
<span class="callout-title">Using <code>mask=</code> Independently</span>
</div>
<div class="callout-body">
<p><code>mask=</code> should not be used in combination with the <code>columns</code> or <code>rows</code> arguments. Attempting to do so will raise a <code>ValueError</code>.</p>
</div>
</div>
<h3 id="utilizing-the-locations-parameter-in-gttab_style">Utilizing the <code>locations=</code> parameter in <code>GT.tab_style()</code>
</h3>
<p>A more &ldquo;old-fashioned&rdquo; approach involves passing a list of <code>loc.body()</code> objects to the <code>locations=</code> parameter in <code>GT.tab_style()</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt</span><span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;red&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="p">[</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="n">col</span><span class="p">,</span> <span class="n">rows</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="n">col</span><span class="p">)</span><span class="o">.</span><span class="n">gt</span><span class="p">(</span><span class="mi">650</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">                   <span class="k">for</span> <span class="n">col</span> <span class="ow">in</span> <span class="n">year_cols</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span><span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;lightgrey&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="p">[</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="n">col</span><span class="p">,</span> <span class="n">rows</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="n">col</span><span class="p">)</span><span class="o">.</span><span class="n">is_null</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">                   <span class="k">for</span> <span class="n">col</span> <span class="ow">in</span> <span class="n">year_cols</span><span class="p">[</span><span class="o">-</span><span class="mi">2</span><span class="p">:]],</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>This approach, though functional, demands additional effort:</p>
<ul>
<li>Explicitly preparing the column names in advance.</li>
<li>Specifying the <code>columns=</code> and <code>rows=</code> arguments for each <code>loc.body()</code> in the loop.</li>
</ul>
<p>While effective, it is less efficient and more verbose compared to the first approach.</p>
<h3 id="wrapping-up">Wrapping up
</h3>
<p>With the introduction of the <code>mask=</code> parameter in <code>loc.body()</code>, users can now style the table body in a more vectorized-like manner, akin to using <code>df.apply()</code> in Pandas, enhancing the overall user experience.</p>
<p>We extend our gratitude to <a href="https://github.com/igorcalabria" target="_blank" rel="noopener">@igorcalabria</a>
 for suggesting this feature in <a href="https://github.com/posit-dev/great-tables/issues/389" target="_blank" rel="noopener">#389</a>
 and providing an insightful explanation of its utility. A special thanks to <a href="https://github.com/henryharbeck" target="_blank" rel="noopener">@henryharbeck</a>
 for providing the second approach.</p>
<p>We hope you enjoy this new functionality as much as we do! Have ideas to make Great Tables even better? Share them with us via <a href="https://github.com/posit-dev/great-tables/issues" target="_blank" rel="noopener">GitHub Issues</a>
. We&rsquo;re always amazed by the creativity of our users! See you, until the next great table.</p>
]]></description>
    </item>
    <item>
      <title>Updates to Text Rendering in R Graphics</title>
      <link>https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/</link>
      <pubDate>Fri, 17 Jan 2025 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/</guid>
      <dc:creator>Thomas Lin Pedersen</dc:creator><description><![CDATA[<!--
TODO:
* [x] Look over / edit the post's title in the yaml
* [x] Edit (or delete) the description; note this appears in the Twitter card
* [x] Pick category and tags (see existing with `hugodown::tidy_show_meta()`)
* [x] Find photo & update yaml metadata
* [x] Create `thumbnail-sq.jpg`; height and width should be equal
* [x] Create `thumbnail-wd.jpg`; width should be >5x height
* [x] `hugodown::use_tidy_thumbnails()`
* [ ] Add intro sentence, e.g. the standard tagline for the package
* [ ] `usethis::use_tidy_thanks()`
-->
<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:6cf4jj62ofgoswlxcqdvtcg5/app.bsky.feed.post/3lfevs4qe5k2l" data-bluesky-cid="bafyreigvpe72rfvuw47nr6qrec2je2lntsowdnzer5vz2imjbejree6ebm"><p lang="en">text rendering is one of those disciplines where, if you think you finally got it right, you can be 100% certain that you didn&#x27;t</p>&mdash; Thomas Lin Pedersen (<a href="https://bsky.app/profile/did:plc:6cf4jj62ofgoswlxcqdvtcg5?ref_src=embed">@thomasp85.com</a>) <a href="https://bsky.app/profile/did:plc:6cf4jj62ofgoswlxcqdvtcg5/post/3lfevs4qe5k2l?ref_src=embed">January 10, 2025 at 10:44 AM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
<p>No reason to hide the fact: Text rendering is complicated! When I set out to improve the support for modern text rendering features in R all those years ago, I don&rsquo;t think I truly appreciated that fact. And probably for the better, since I&rsquo;m not sure I would have taken on the task had I known.</p>
<p>Taking the quote above as a universal truth (it comes from a reputable source after all), I&rsquo;m sure I&rsquo;ll never be fully done, but recent work on the whole stack at least makes me worry less about the correctness. This post will go through the changes that span the <a href="https://github.com/r-lib/systemfonts" target="_blank" rel="noopener">systemfonts</a>
, <a href="https://github.com/r-lib/textshaping" target="_blank" rel="noopener">textshaping</a>
, and <a href="https://marquee.r-lib.org" target="_blank" rel="noopener">marquee</a>
 packages and let you now how you, as a user or developer, should take advantage of them.</p>
<h2 id="working-with-non-installed-fonts">Working with non-installed fonts
</h2>
<p>The genesis of the systemfonts package was a need to be able to tap into the operating systems font library, so that whatever was installed on the system, would be available to graphics devices (assuming those devices used systemfonts). The scope of the package has gradually increased, and one of the needs that has become obvious over time, is a way to work with fonts, that aren&rsquo;t installed on the system (E.g. if you want to bundle a font with a package, or if you are deploying a Shiny app that uses a specific font for the graphics).</p>
<p>Until now, the <code>register_font()</code> and <code>register_variant()</code> functions have been the only option for letting systemfonts know about fonts other than those installed on the system. However, both of these functions were designed to circumvent limitations in the R graphics system when it comes to font selection (e.g. no way to use a &ldquo;thin&rdquo; font variant as the only weight option in the graphics system is bold yes/no), and as such were clunky to use for introducing new fonts.</p>
<p>With the new version of systemfonts we get a dedicated way to tell systemfonts &ldquo;please consider these font files as equals to the installed ones&rdquo;. The function is called <code>add_fonts()</code> and all you need to do is to pass in a vector of paths to font files and these will then be reachable by systemfonts.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="c1"># Add fonts from specific files</span>
</span></span><span class="line"><span class="cl"><span class="n">systemfonts</span><span class="o">::</span><span class="nf">add_fonts</span><span class="p">(</span><span class="nf">c</span><span class="p">(</span><span class="s">&#34;path/to/font1.ttf&#34;</span><span class="p">,</span> <span class="s">&#34;path/to/font2.ttf&#34;</span><span class="p">))</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>In addition to this function, systemfonts also comes with <code>scan_local_fonts()</code> that looks in <code>./fonts</code> and <code>~/fonts</code> and adds any fonts located there. The function is called when systemfonts is loaded meaning that you can immediately uses fonts saved in these directories. This is great for deploying projects because all you need to do is to include a <code>fonts</code> folder at the root of you project and these fonts will then always be available wherever you deploy your code.</p>
<p>While it is nice to have good access to the font files on your computer, the files has to come from somewhere. Nowadays that <em>somewhere</em> is usually <a href="https://fonts.google.com" target="_blank" rel="noopener">Google Fonts</a>
 or some other online font repository. systemfonts is now aware of a few of these repositories (Google Fonts and <a href="https://www.fontsquirrel.com" target="_blank" rel="noopener">Font Squirrel</a>
 for now), and can search and download from these (using <code>search_web_fonts()</code>, <code>get_from_google_fonts()</code>, and <code>get_from_font_squirrel()</code>). The downloaded fonts are automatically added using <code>add_fonts()</code> so they are immediately available, and by default they are placed in <code>~/fonts</code> so that they persist across R sessions and projects.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="c1"># Search and download fonts</span>
</span></span><span class="line"><span class="cl"><span class="n">systemfonts</span><span class="o">::</span><span class="nf">get_from_font_squirrel</span><span class="p">(</span><span class="s">&#34;Quicksand&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">systemfonts</span><span class="o">::</span><span class="nf">get_from_google_fonts</span><span class="p">(</span><span class="s">&#34;Rubik Moonrocks&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>But what if you don&rsquo;t want to think too much about all these details and just want to ensure that some specific font is available when a piece of code is running? In that case <code>require_font()</code> got you covered. This function allows you to state a dependency on a font in a script. The function scans the available fonts on the system and, if it doesn&rsquo;t find anything, proceeds to look for the font in the online repositories, downloading it if it finds it. If that also fails the function will either throw an error, or map the required font to a fallback of your choosing:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">library</span><span class="p">(</span><span class="n">systemfonts</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">require_font</span><span class="p">(</span><span class="s">&#34;Rubik Moonrocks&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nf">plot.new</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="nf">text</span><span class="p">(</span><span class="m">0.5</span><span class="p">,</span> <span class="m">0.5</span><span class="p">,</span> <span class="s">&#34;Fancy Font&#34;</span><span class="p">,</span> <span class="n">family</span> <span class="o">=</span> <span class="s">&#34;Rubik Moonrocks&#34;</span><span class="p">,</span> <span class="n">cex</span> <span class="o">=</span> <span class="m">6</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/figure/unnamed-chunk-3-1.png"
      alt="plot of chunk unnamed-chunk-3" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>Remember that all of these niceties only goes into effect if you use a graphics device that uses systemfonts. For now, that more or less means that you should use ragg (you should use ragg anyway so that is not a terrible requirement).</p>
<h2 id="getting-to-the-glyphs">Getting to the Glyphs
</h2>
<p>Most fonts these days are based on a vector outline. That means that they can be scaled smoothly to any size and doesn&rsquo;t take up a lot of storage space. It also means that there are polygons inside the font files and that these can be extracted! This is now possible with systemfonts and the new <code>glyph_outline()</code> and <code>glyph_raster()</code> functions.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="c1"># Get the location of the glyph inside the font</span>
</span></span><span class="line"><span class="cl"><span class="n">moonrocks</span> <span class="o">&lt;-</span> <span class="nf">font_info</span><span class="p">(</span><span class="s">&#34;Rubik Moonrocks&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">G</span> <span class="o">&lt;-</span> <span class="nf">glyph_info</span><span class="p">(</span><span class="s">&#34;G&#34;</span><span class="p">,</span> <span class="n">path</span> <span class="o">=</span> <span class="n">moonrocks</span><span class="o">$</span><span class="n">path</span><span class="p">,</span> <span class="n">index</span> <span class="o">=</span> <span class="n">moonrocks</span><span class="o">$</span><span class="n">index</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># Extract the outline of the glyph and plot it</span>
</span></span><span class="line"><span class="cl"><span class="n">outline</span> <span class="o">&lt;-</span> <span class="nf">glyph_outline</span><span class="p">(</span><span class="n">G</span><span class="o">$</span><span class="n">index</span><span class="p">,</span> <span class="n">moonrocks</span><span class="o">$</span><span class="n">path</span><span class="p">,</span> <span class="n">moonrocks</span><span class="o">$</span><span class="n">index</span><span class="p">,</span> <span class="n">size</span> <span class="o">=</span> <span class="m">400</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">grid</span><span class="o">::</span><span class="nf">grid.path</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="n">x</span> <span class="o">=</span> <span class="n">outline</span><span class="o">$</span><span class="n">x</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">y</span> <span class="o">=</span> <span class="n">outline</span><span class="o">$</span><span class="n">y</span> <span class="o">+</span> <span class="m">20</span><span class="p">,</span> <span class="c1"># To raise the baseline a bit</span>
</span></span><span class="line"><span class="cl">  <span class="n">id</span> <span class="o">=</span> <span class="n">outline</span><span class="o">$</span><span class="n">contour</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">default.units</span> <span class="o">=</span> <span class="s">&#34;bigpts&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">gp</span> <span class="o">=</span> <span class="n">grid</span><span class="o">::</span><span class="nf">gpar</span><span class="p">(</span><span class="n">fill</span> <span class="o">=</span> <span class="s">&#34;grey&#34;</span><span class="p">,</span> <span class="n">col</span> <span class="o">=</span> <span class="s">&#34;black&#34;</span><span class="p">,</span> <span class="n">lwd</span> <span class="o">=</span> <span class="m">4</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/figure/unnamed-chunk-4-1.png"
      alt="plot of chunk unnamed-chunk-4" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>Extracting them as polygons means that we can do all sorts of weird stuff with them if we so pleases:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="c1"># Skew the glyph making it italic</span>
</span></span><span class="line"><span class="cl"><span class="n">grid</span><span class="o">::</span><span class="nf">grid.path</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="n">x</span> <span class="o">=</span> <span class="n">outline</span><span class="o">$</span><span class="n">x</span> <span class="o">+</span> <span class="n">outline</span><span class="o">$</span><span class="n">y</span> <span class="o">*</span> <span class="m">0.4</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">y</span> <span class="o">=</span> <span class="n">outline</span><span class="o">$</span><span class="n">y</span> <span class="o">+</span> <span class="m">20</span><span class="p">,</span> <span class="c1"># To raise the baseline a bit</span>
</span></span><span class="line"><span class="cl">  <span class="n">id</span> <span class="o">=</span> <span class="n">outline</span><span class="o">$</span><span class="n">contour</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">default.units</span> <span class="o">=</span> <span class="s">&#34;bigpts&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="n">gp</span> <span class="o">=</span> <span class="n">grid</span><span class="o">::</span><span class="nf">gpar</span><span class="p">(</span><span class="n">fill</span> <span class="o">=</span> <span class="s">&#34;grey&#34;</span><span class="p">,</span> <span class="n">col</span> <span class="o">=</span> <span class="s">&#34;black&#34;</span><span class="p">,</span> <span class="n">lwd</span> <span class="o">=</span> <span class="m">4</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/figure/unnamed-chunk-5-1.png"
      alt="plot of chunk unnamed-chunk-5" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>(real italic glyphs are designed to look good skewed, not just skewed versions of the regular glyphs)</p>
<p>Remember how I said &ldquo;most fonts&rdquo; in the beginning of this section. There are still fonts that do not provide an outline, the prime example being most emoji fonts. The glyphs in such fonts are encoded as multiple bitmaps at fixed sizes (Microsofts emoji font going a different way by encoding them as SVGs). Since we can&rsquo;t get to the data as outlines we can instead extract it as a raster:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="n">emoji</span> <span class="o">&lt;-</span> <span class="nf">font_info</span><span class="p">(</span><span class="s">&#34;emoji&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">dancer</span> <span class="o">&lt;-</span> <span class="nf">glyph_info</span><span class="p">(</span><span class="s">&#34;💃&#34;</span><span class="p">,</span> <span class="n">path</span> <span class="o">=</span> <span class="n">emoji</span><span class="o">$</span><span class="n">path</span><span class="p">,</span> <span class="n">index</span> <span class="o">=</span> <span class="n">emoji</span><span class="o">$</span><span class="n">index</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">raster</span> <span class="o">&lt;-</span> <span class="nf">glyph_raster</span><span class="p">(</span><span class="n">dancer</span><span class="o">$</span><span class="n">index</span><span class="p">,</span> <span class="n">emoji</span><span class="o">$</span><span class="n">path</span><span class="p">,</span> <span class="n">emoji</span><span class="o">$</span><span class="n">index</span><span class="p">,</span> <span class="n">size</span> <span class="o">=</span> <span class="m">400</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">grid</span><span class="o">::</span><span class="nf">grid.draw</span><span class="p">(</span><span class="nf">glyph_raster_grob</span><span class="p">(</span><span class="n">raster[[1]]</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">50</span><span class="p">))</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/figure/unnamed-chunk-6-1.png"
      alt="plot of chunk unnamed-chunk-6" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>In the above we used the <code>glyph_raster_grob()</code> helper function to create a raster grob with the correct scaling of the resulting raster.</p>
<p>Raster extraction is not only for bitmap encoded fonts since it is easy to go from an outline to a raster (but not the other way around). Freetype (which systemfonts uses) includes a very efficient scanline rasterizer (the same as used in ragg) and we can thus get a raster version of any font:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="n">raster2</span> <span class="o">&lt;-</span> <span class="nf">glyph_raster</span><span class="p">(</span><span class="n">G</span><span class="o">$</span><span class="n">index</span><span class="p">,</span> <span class="n">moonrocks</span><span class="o">$</span><span class="n">path</span><span class="p">,</span> <span class="n">moonrocks</span><span class="o">$</span><span class="n">index</span><span class="p">,</span> <span class="n">size</span> <span class="o">=</span> <span class="m">400</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">grid</span><span class="o">::</span><span class="nf">grid.draw</span><span class="p">(</span><span class="nf">glyph_raster_grob</span><span class="p">(</span><span class="n">raster2[[1]]</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">20</span><span class="p">))</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/figure/unnamed-chunk-7-1.png"
      alt="plot of chunk unnamed-chunk-7" 
      loading="lazy"
    >
  </figure></div>
</p>
<h2 id="the-way-the-text-flows">The Way the Text Flows
</h2>
<p>The thing that provoked me to writing the quote in the beginning of this blog post, was my work on the textshaping package. This package is largely invisible to the user but together with systemfonts it is responsible for laying out strings of text correctly. It figures out the location of every glyph and finds alternative fonts if the selected one doesn&rsquo;t contain the needed glyph. textshaping powers ragg as well as marquee, doing the heavy lifting of translating a string of text into glyphs and locations.</p>
<p>Part of converting a string into glyphs and coordinates (a process known as text shaping) is to figure out which way the text flows and act accordingly. For many people left-to-right flow is the natural text direction, but this is merely a cultural bias and many scripts with a different flow exists (arabic and hebrew being the two most dominant right-to-left flowing scripts). So, part of shaping requires figuring out what script a specific character belongs to and what direction it flows. This is all fairly simple when a string internally agrees on the direction of flow, but can get much more complicated when scripts are embedded within other scripts that doesn&rsquo;t have the same flow (not to mention scripts embedded even deeper). Combine all of this with soft wrapping of text inside an embedded script and you got the recipe for a headache. textshaping (through me) already made the claim that it fully supported bi-directional text but it turned out that I severely misjudged the complexity. Because of this, the shaping engine has been rewritten almost from scratch. Based on the starting quote I can&rsquo;t quite claim that it now works 100% correctly but it does pass all 91.707 test cases for bidirectional text provided by the Unicode consortium so there&rsquo;s that.</p>
<p>Again, it is unlikely that you will come into contact with textshaping directly so you will mostly experience these improvements in the way text just appears more correct (to the extend that this was ever an issue for you). The place you are most likely to stumble upon these changes is marquee, which uses textshaping under the hood. Styling in marquee has been expanded to include a <code>text_direction</code> setting. It defaults to <code>&quot;auto&quot;</code> which mean &ldquo;deduce it from the text you get&rdquo;, but you can also set it to <code>&quot;ltr&quot;</code> or <code>&quot;rtl&quot;</code> to set the direction explicitly. Be aware that this setting doesn&rsquo;t change how single glyphs flow so you cannot use it to e.g. write arabic in left-to-right flow. Instead it governs the paragraph-level direction and thus how bi-directional text should be assembled. It also governs to which side indentation happen and the placement of bullets in bullet lists. Often, leaving it on the default value will work fine. There are also two new values for the <code>align</code> setting. <code>&quot;auto&quot;</code> picks either <code>&quot;left&quot;</code> or <code>&quot;right&quot;</code> depending on the text direction, while <code>&quot;justified&quot;</code> picks either <code>&quot;justified-left&quot;</code> or <code>&quot;justified-right&quot;</code>. This makes it much easier to work natively with right-to-left text as everything just looks as it should. To top it off, <code>classic_style()</code> gains an <code>ltr</code> argument that controls whether the styling in general should cater to left-to-right or right-to-left text. It controls things such as the position of the grey bar in quotation blocks and the indentation of nested lists.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="nf">library</span><span class="p">(</span><span class="n">marquee</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="c1"># Create a style specific for rtl text</span>
</span></span><span class="line"><span class="cl"><span class="n">rtl_style</span> <span class="o">&lt;-</span> <span class="nf">classic_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="n">text_direction</span> <span class="o">=</span> <span class="s">&#34;rtl&#34;</span><span class="p">,</span> <span class="c1"># Forces bidi text to be assembled from right to left</span>
</span></span><span class="line"><span class="cl">  <span class="n">align</span> <span class="o">=</span> <span class="s">&#34;auto&#34;</span><span class="p">,</span> <span class="c1"># Will convert itself to &#34;right&#34;</span>
</span></span><span class="line"><span class="cl">  <span class="n">ltr</span> <span class="o">=</span> <span class="kc">FALSE</span> <span class="c1"># Will move bullet padding and bar along quote blocks to the right</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><h2 id="a-marquee-for-everyone">A marquee for Everyone
</h2>
<p>Speaking of marquee, the biggest obstacle it has put in front of its users is that it is build on very new features in R. The ability to write text by placing glyphs one at a time was only added in R 4.2 and not every graphics device supports it yet (worse still, the implementation in the default macOS quartz device caused the session to crash). Again, ragg is your friend, but the Cairo devices also has excellent support.</p>
<p>Text rendering, however, should always work. It is quite frustrating for text to not show up when you expect it to. Because of this it has been a clear plan to expand the support for marquee somehow. With the new version of marquee this is finally a reality. How does it work? Well, remember when we talked about extracting glyph outlines and rasters? If marquee encounters a graphics device that doesn&rsquo;t provide the necessary features it will take matters into its own hands, by extracting all the necessary polygons and bitmaps and plot them. It is certainly not faster than relying on the optimized routines of the graphics device and it can also lead to visual degradation at smaller font sizes. But it works - everywhere.</p>
<p>To show it off, here is an svg created with svglite which doesn&rsquo;t have the required new features:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-r" data-lang="r"><span class="line"><span class="cl"><span class="n">text</span> <span class="o">&lt;-</span> <span class="s">&#34;_Fancy_ {.red Font}📝&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">m_grob</span> <span class="o">&lt;-</span> <span class="nf">marquee_grob</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">  <span class="n">text</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">  <span class="nf">classic_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">body_font</span> <span class="o">=</span> <span class="s">&#34;Rubik Moonrocks&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="n">base_size</span> <span class="o">=</span> <span class="m">72</span>
</span></span><span class="line"><span class="cl">  <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">s</span> <span class="o">&lt;-</span> <span class="n">svglite</span><span class="o">::</span><span class="nf">svgstring</span><span class="p">(</span><span class="n">width</span> <span class="o">=</span> <span class="m">7</span><span class="p">,</span> <span class="n">height</span> <span class="o">=</span> <span class="m">1.5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">grid</span><span class="o">::</span><span class="nf">grid.draw</span><span class="p">(</span><span class="n">m_grob</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nf">invisible</span><span class="p">(</span><span class="nf">dev.off</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nf">s</span><span class="p">()</span>
</span></span></code></pre></td></tr></table>
</div>
</div><?xml version='1.0' encoding='UTF-8' ?>
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='504.00pt' height='108.00pt' viewBox='0 0 504.00 108.00'>
<g class='svglite'>
<defs>
  <style type='text/css'><![CDATA[
    .svglite line, .svglite polyline, .svglite polygon, .svglite path, .svglite rect, .svglite circle {
      fill: none;
      stroke: #000000;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-miterlimit: 10.00;
    }
    .svglite text {
      white-space: pre;
    }
  ]]></style>
</defs>
<rect width='100%' height='100%' style='stroke: none; fill: #FFFFFF;'/>
<defs>
  <clipPath id='cpMC4wMHw1MDQuMDB8MC4wMHwxMDguMDA='>
    <rect x='0.00' y='0.00' width='504.00' height='108.00' />
  </clipPath>
</defs>
<g clip-path='url(#cpMC4wMHw1MDQuMDB8MC4wMHwxMDguMDA=)'>
<path d='M 5.16 71.17 L 4.53 70.74 L 4.10 70.11 L 3.95 69.38 L 3.95 22.86 L 4.10 22.12 L 4.53 21.49 L 5.16 21.05 L 5.91 20.91 L 42.19 20.91 L 42.93 21.05 L 43.56 21.49 L 44.00 22.12 L 44.14 22.86 L 44.14 33.80 L 44.00 34.54 L 43.56 35.17 L 42.93 35.61 L 42.19 35.75 L 21.59 35.75 L 21.59 41.08 L 40.75 41.08 L 41.49 41.22 L 42.12 41.66 L 42.38 41.95 L 42.56 42.28 L 42.67 42.63 L 42.70 43.02 L 42.70 53.89 L 42.56 54.63 L 42.12 55.27 L 41.49 55.69 L 40.75 55.83 L 21.59 55.83 L 21.59 69.38 L 21.45 70.11 L 21.02 70.74 L 20.72 70.99 L 20.39 71.17 L 20.04 71.28 L 19.66 71.31 L 5.91 71.31 ZM 24.59 24.25 L 24.07 24.25 L 23.62 24.29 L 23.25 24.38 L 22.93 24.54 L 22.62 24.82 L 22.32 25.22 L 22.03 25.74 L 21.80 26.28 L 21.67 26.77 L 21.65 27.19 L 21.73 27.55 L 21.92 27.88 L 22.19 28.24 L 22.54 28.63 L 22.97 29.05 L 23.45 29.48 L 23.88 29.84 L 24.27 30.13 L 24.61 30.34 L 24.97 30.46 L 25.41 30.45 L 25.92 30.32 L 26.50 30.06 L 27.08 29.70 L 27.51 29.34 L 27.79 28.99 L 27.94 28.63 L 27.98 28.22 L 27.97 27.72 L 27.91 27.13 L 27.80 26.45 L 27.67 25.90 L 27.49 25.44 L 27.27 25.09 L 27.00 24.84 L 26.67 24.66 L 26.26 24.51 L 25.77 24.39 L 25.20 24.30 ZM 8.28 25.87 L 8.28 25.53 L 8.16 25.27 L 7.78 25.09 L 7.34 25.01 L 6.95 25.07 L 6.62 25.26 L 6.34 25.59 L 6.04 26.05 L 5.89 26.42 L 5.93 26.79 L 6.19 27.25 L 6.57 27.60 L 6.98 27.81 L 7.43 27.85 L 7.92 27.75 L 8.28 27.50 L 8.34 27.17 L 8.30 26.78 L 8.28 26.31 ZM 39.02 26.01 L 38.88 26.17 L 38.66 26.67 L 38.38 27.25 L 38.34 27.49 L 38.52 27.75 L 38.79 27.95 L 39.02 27.94 L 39.29 27.82 L 39.67 27.69 L 40.09 27.24 L 40.17 26.75 L 40.07 26.43 L 39.89 26.19 L 39.64 26.03 L 39.31 25.95 ZM 33.61 26.60 L 33.49 26.38 L 33.34 26.24 L 33.16 26.17 L 32.68 26.10 L 32.05 26.03 L 31.54 26.01 L 31.17 26.09 L 30.89 26.34 L 30.59 26.81 L 30.48 27.27 L 30.53 27.61 L 30.75 27.93 L 31.11 28.33 L 31.62 28.72 L 32.00 29.02 L 32.18 29.10 L 32.41 29.11 L 32.67 29.05 L 32.97 28.91 L 33.50 28.48 L 33.77 28.08 L 33.82 27.59 L 33.70 26.89 ZM 12.07 26.99 L 11.77 26.81 L 11.49 26.80 L 11.16 27.03 L 10.80 27.38 L 10.58 27.69 L 10.55 28.04 L 10.73 28.55 L 10.97 28.92 L 11.27 29.05 L 11.64 29.03 L 12.09 28.97 L 12.52 28.90 L 12.81 28.80 L 13.01 28.59 L 13.17 28.19 L 13.18 27.83 L 13.03 27.61 L 12.78 27.45 L 12.45 27.25 ZM 38.45 29.99 L 37.94 30.20 L 37.66 30.92 L 38.52 31.06 L 38.81 30.42 ZM 18.53 30.09 L 18.08 30.20 L 17.72 30.51 L 17.36 31.00 L 17.01 31.64 L 16.84 32.11 L 16.92 32.55 L 17.28 33.08 L 17.71 33.51 L 18.14 33.63 L 18.65 33.54 L 19.30 33.38 L 19.86 33.09 L 20.27 32.83 L 20.40 32.68 L 20.49 32.46 L 20.53 32.19 L 20.52 31.86 L 20.40 31.18 L 20.19 30.75 L 19.80 30.45 L 19.16 30.20 ZM 6.77 34.30 L 6.48 34.88 L 7.48 34.59 L 7.20 34.09 ZM 13.53 34.30 L 13.03 34.88 L 13.39 35.45 L 13.97 35.45 L 14.41 34.67 ZM 12.43 40.32 L 12.38 39.86 L 12.29 39.48 L 12.16 39.17 L 11.97 38.92 L 11.68 38.69 L 11.29 38.50 L 10.80 38.34 L 10.25 38.19 L 9.79 38.12 L 9.39 38.12 L 9.06 38.19 L 8.78 38.35 L 8.48 38.61 L 8.17 38.97 L 7.84 39.42 L 7.53 39.87 L 7.31 40.28 L 7.19 40.64 L 7.16 40.97 L 7.22 41.30 L 7.35 41.66 L 7.56 42.07 L 7.84 42.52 L 8.19 42.89 L 8.53 43.16 L 8.84 43.32 L 9.14 43.38 L 9.83 43.29 L 10.73 43.02 L 11.57 42.71 L 12.09 42.34 L 12.25 42.10 L 12.36 41.77 L 12.43 41.36 L 12.45 40.86 ZM 16.98 42.52 L 16.70 43.24 L 17.50 43.45 L 18.14 42.88 L 17.56 42.30 ZM 24.37 43.95 L 24.01 43.85 L 23.64 43.88 L 23.25 44.03 L 22.68 44.35 L 22.25 44.58 L 22.10 44.70 L 22.00 44.89 L 21.95 45.14 L 21.95 45.47 L 22.05 45.79 L 22.18 46.02 L 22.34 46.16 L 22.53 46.22 L 23.04 46.26 L 23.69 46.33 L 24.26 46.38 L 24.66 46.38 L 24.97 46.20 L 25.27 45.75 L 25.44 45.25 L 25.38 44.89 L 25.12 44.56 L 24.70 44.17 ZM 23.99 49.12 L 24.05 48.64 L 24.04 48.44 L 23.94 48.26 L 23.75 48.11 L 23.47 47.99 L 22.82 47.85 L 22.31 47.88 L 21.89 48.12 L 21.45 48.63 L 21.29 48.90 L 21.21 49.14 L 21.22 49.35 L 21.31 49.53 L 21.63 49.92 L 22.03 50.44 L 22.36 50.78 L 22.64 50.97 L 22.96 51.02 L 23.41 50.94 L 23.79 50.76 L 23.94 50.52 L 23.96 50.17 L 23.97 49.72 ZM 16.25 48.91 L 15.77 48.86 L 15.29 49.05 L 14.69 49.50 L 14.07 50.03 L 13.64 50.47 L 13.52 50.70 L 13.47 50.98 L 13.50 51.33 L 13.61 51.74 L 13.80 52.15 L 14.01 52.47 L 14.25 52.68 L 14.50 52.78 L 15.14 52.84 L 15.98 52.81 L 16.65 52.68 L 17.06 52.42 L 17.34 51.98 L 17.56 51.30 L 17.70 50.59 L 17.67 50.08 L 17.41 49.64 L 16.84 49.20 ZM 8.42 50.50 L 7.78 51.02 L 7.92 51.80 L 8.72 51.80 L 8.78 51.16 ZM 28.86 50.53 L 28.61 50.66 L 28.41 50.90 L 28.16 51.22 L 27.99 51.48 L 27.92 51.75 L 27.95 52.02 L 28.08 52.30 L 28.34 52.70 L 28.52 53.03 L 28.75 53.21 L 29.16 53.17 L 29.61 53.00 L 29.80 52.75 L 29.86 52.38 L 29.88 51.88 L 29.86 51.38 L 29.80 51.05 L 29.62 50.81 L 29.23 50.58 ZM 35.30 51.49 L 35.06 51.30 L 34.79 51.23 L 34.42 51.30 L 33.91 51.50 L 33.52 51.66 L 33.37 51.76 L 33.27 51.93 L 33.21 52.16 L 33.19 52.45 L 33.31 53.06 L 33.52 53.42 L 33.88 53.65 L 34.48 53.81 L 35.07 53.96 L 35.53 53.97 L 35.91 53.77 L 36.28 53.31 L 36.42 53.08 L 36.47 52.88 L 36.43 52.70 L 36.31 52.56 L 35.97 52.24 L 35.56 51.80 ZM 12.41 55.72 L 12.13 55.47 L 11.75 55.36 L 11.23 55.33 L 10.84 55.38 L 10.50 55.54 L 10.23 55.81 L 10.02 56.19 L 9.84 56.70 L 9.75 57.09 L 9.85 57.45 L 10.22 57.84 L 10.68 58.11 L 11.05 58.17 L 11.44 58.06 L 11.95 57.78 L 12.37 57.44 L 12.62 57.14 L 12.71 56.76 L 12.59 56.19 ZM 14.59 62.12 L 14.39 61.24 L 14.22 60.90 L 13.91 60.62 L 13.47 60.39 L 12.89 60.22 L 12.14 60.08 L 11.49 60.01 L 10.93 60.01 L 10.47 60.08 L 10.06 60.26 L 9.65 60.59 L 9.25 61.06 L 8.86 61.67 L 8.52 62.38 L 8.29 63.02 L 8.17 63.57 L 8.17 64.05 L 8.29 64.50 L 8.52 65.00 L 8.88 65.54 L 9.36 66.13 L 9.85 66.59 L 10.32 66.89 L 10.75 67.04 L 11.16 67.03 L 11.59 66.91 L 12.09 66.75 L 12.67 66.53 L 13.31 66.27 L 13.83 66.01 L 14.23 65.74 L 14.52 65.46 L 14.69 65.16 L 14.77 64.81 L 14.82 64.40 L 14.81 63.90 L 14.77 63.33 Z' style='fill-rule: nonzero; fill: #000000; stroke-width: 0.75; stroke: none;' />
<path d='M 58.70 71.94 L 56.83 71.66 L 55.07 71.19 L 53.42 70.53 L 51.93 69.71 L 50.60 68.75 L 49.46 67.65 L 48.49 66.42 L 47.71 65.09 L 47.16 63.67 L 46.83 62.16 L 46.72 60.58 L 46.79 59.30 L 46.99 58.10 L 47.32 56.96 L 47.79 55.90 L 48.39 54.90 L 49.13 53.98 L 50.00 53.13 L 51.00 52.34 L 52.12 51.63 L 53.33 50.96 L 54.63 50.35 L 56.02 49.80 L 57.50 49.30 L 59.07 48.85 L 60.74 48.46 L 62.49 48.13 L 70.13 46.83 L 70.11 45.96 L 70.05 45.21 L 69.94 44.59 L 69.80 44.09 L 69.56 43.72 L 69.18 43.45 L 68.65 43.29 L 67.97 43.24 L 67.49 43.26 L 67.06 43.34 L 66.68 43.46 L 66.35 43.64 L 65.71 44.11 L 65.02 44.75 L 64.59 45.09 L 64.12 45.34 L 63.59 45.48 L 63.00 45.53 L 50.75 45.53 L 50.10 45.43 L 49.56 45.11 L 49.36 44.87 L 49.23 44.60 L 49.17 44.30 L 49.17 43.95 L 49.28 43.24 L 49.50 42.47 L 49.85 41.64 L 50.33 40.75 L 50.94 39.84 L 51.71 38.94 L 52.62 38.06 L 53.67 37.19 L 54.89 36.36 L 56.26 35.60 L 57.80 34.92 L 59.50 34.31 L 61.38 33.81 L 63.44 33.45 L 65.68 33.23 L 68.11 33.16 L 70.48 33.22 L 72.69 33.41 L 74.75 33.73 L 76.65 34.17 L 78.39 34.74 L 79.97 35.44 L 81.39 36.27 L 82.66 37.22 L 83.77 38.29 L 84.74 39.46 L 85.55 40.74 L 86.22 42.12 L 86.74 43.61 L 87.11 45.20 L 87.33 46.90 L 87.41 48.70 L 87.41 69.38 L 87.26 70.11 L 86.83 70.74 L 86.20 71.17 L 85.46 71.31 L 72.86 71.31 L 72.12 71.17 L 71.49 70.74 L 71.06 70.11 L 70.92 69.38 L 70.92 67.36 L 70.06 68.38 L 69.07 69.29 L 67.95 70.09 L 66.71 70.78 L 65.35 71.33 L 63.89 71.72 L 62.34 71.95 L 60.69 72.03 ZM 65.88 35.03 L 65.52 35.45 L 65.80 36.11 L 66.53 35.81 L 66.60 35.03 ZM 62.99 36.20 L 62.52 36.06 L 62.14 36.11 L 61.77 36.47 L 61.59 36.77 L 61.48 37.04 L 61.43 37.27 L 61.46 37.47 L 61.64 37.88 L 61.99 38.41 L 62.34 38.77 L 62.67 38.88 L 63.06 38.80 L 63.58 38.63 L 63.92 38.48 L 64.17 38.25 L 64.31 37.94 L 64.36 37.55 L 64.31 37.12 L 64.17 36.79 L 63.92 36.55 L 63.58 36.39 ZM 75.50 36.69 L 75.26 36.51 L 74.96 36.40 L 74.60 36.39 L 74.24 36.47 L 73.96 36.63 L 73.77 36.87 L 73.66 37.19 L 73.60 37.64 L 73.58 37.99 L 73.69 38.27 L 74.02 38.55 L 74.46 38.70 L 74.77 38.70 L 75.06 38.56 L 75.46 38.27 L 75.69 38.00 L 75.80 37.69 L 75.80 37.35 L 75.67 36.97 ZM 70.95 38.76 L 70.63 38.92 L 70.38 39.19 L 70.21 39.56 L 70.12 39.94 L 70.19 40.19 L 70.40 40.39 L 70.71 40.64 L 70.96 40.81 L 71.23 40.88 L 71.50 40.85 L 71.78 40.72 L 71.97 40.55 L 72.07 40.32 L 72.11 40.04 L 72.06 39.70 L 71.94 39.31 L 71.85 38.99 L 71.69 38.77 L 71.35 38.70 ZM 55.63 38.81 L 55.33 38.84 L 55.03 39.04 L 54.64 39.34 L 54.33 39.67 L 54.10 39.92 L 54.00 40.21 L 54.06 40.64 L 54.29 41.07 L 54.53 41.36 L 54.87 41.51 L 55.36 41.50 L 55.85 41.40 L 56.16 41.22 L 56.34 40.91 L 56.44 40.42 L 56.55 39.92 L 56.55 39.56 L 56.40 39.27 L 56.02 38.99 ZM 80.21 41.72 L 79.63 42.16 L 80.28 42.38 L 80.92 42.30 L 80.86 41.50 ZM 77.44 42.56 L 77.14 42.34 L 76.83 42.27 L 76.39 42.44 L 76.09 42.74 L 76.06 43.06 L 76.18 43.42 L 76.32 43.88 L 76.44 44.35 L 76.53 44.75 L 76.72 45.02 L 77.11 45.11 L 77.66 45.08 L 78.03 44.97 L 78.33 44.71 L 78.63 44.24 L 78.67 43.76 L 78.52 43.45 L 78.22 43.20 L 77.83 42.88 ZM 57.10 42.38 L 56.38 42.94 L 56.60 43.88 L 57.38 43.67 L 57.89 43.02 ZM 72.86 43.59 L 72.22 44.39 L 72.28 45.11 L 73.08 45.33 L 73.52 44.45 ZM 83.84 46.54 L 83.52 46.33 L 83.18 46.29 L 82.72 46.47 L 82.26 46.77 L 82.03 47.10 L 81.98 47.47 L 82.00 47.99 L 82.17 48.45 L 82.39 48.67 L 82.74 48.77 L 83.24 48.84 L 83.67 48.89 L 83.99 48.86 L 84.23 48.67 L 84.46 48.27 L 84.61 47.89 L 84.62 47.54 L 84.50 47.21 L 84.24 46.91 ZM 76.03 48.84 L 75.38 49.50 L 75.89 50.28 L 76.67 50.00 L 76.53 49.36 ZM 62.66 49.98 L 62.35 49.86 L 62.01 49.84 L 61.63 49.92 L 61.21 50.09 L 60.94 50.27 L 60.81 50.52 L 60.77 50.94 L 60.82 51.35 L 60.99 51.59 L 61.28 51.74 L 61.71 51.88 L 62.16 52.06 L 62.53 52.17 L 62.85 52.09 L 63.14 51.74 L 63.39 51.34 L 63.39 51.02 L 63.22 50.67 L 62.92 50.22 ZM 73.22 50.36 L 72.86 50.80 L 73.30 51.38 L 73.88 50.94 L 73.88 50.28 ZM 57.10 51.10 L 56.77 51.20 L 56.51 51.46 L 56.24 51.88 L 55.94 52.27 L 55.77 52.63 L 55.78 52.98 L 56.02 53.39 L 56.36 53.70 L 56.66 53.78 L 57.03 53.70 L 57.53 53.53 L 57.88 53.36 L 58.12 53.13 L 58.27 52.85 L 58.31 52.52 L 58.30 52.01 L 58.24 51.63 L 58.05 51.35 L 57.60 51.16 ZM 83.27 53.43 L 82.98 52.91 L 82.64 52.55 L 82.25 52.34 L 81.79 52.23 L 81.24 52.14 L 80.59 52.07 L 79.85 52.02 L 79.11 52.00 L 78.46 52.02 L 77.92 52.09 L 77.47 52.20 L 77.09 52.40 L 76.75 52.75 L 76.44 53.25 L 76.17 53.89 L 75.89 54.71 L 75.67 55.44 L 75.53 56.09 L 75.46 56.66 L 75.52 57.18 L 75.78 57.71 L 76.23 58.25 L 76.89 58.78 L 77.54 59.21 L 78.12 59.43 L 78.62 59.43 L 79.05 59.22 L 79.49 58.87 L 80.01 58.48 L 80.61 58.04 L 81.28 57.56 L 81.89 57.15 L 82.43 56.77 L 82.89 56.43 L 83.27 56.13 L 83.54 55.78 L 83.67 55.33 L 83.67 54.78 L 83.52 54.11 ZM 52.06 54.13 L 51.77 54.19 L 51.55 54.34 L 51.33 54.69 L 51.13 55.21 L 50.97 55.66 L 50.99 56.04 L 51.33 56.41 L 51.86 56.80 L 52.30 56.99 L 52.76 56.93 L 53.35 56.63 L 53.84 56.26 L 54.00 55.88 L 53.95 55.39 L 53.78 54.75 L 53.64 54.37 L 53.38 54.22 L 53.00 54.17 L 52.49 54.11 ZM 61.22 55.30 L 60.92 55.29 L 60.65 55.38 L 60.41 55.55 L 60.24 55.78 L 60.17 56.05 L 60.20 56.36 L 60.33 56.70 L 60.52 56.95 L 60.74 57.11 L 60.99 57.20 L 61.27 57.20 L 61.70 57.12 L 61.99 57.02 L 62.17 56.81 L 62.28 56.41 L 62.28 56.04 L 62.16 55.80 L 61.92 55.61 L 61.57 55.41 ZM 66.66 61.29 L 67.55 61.04 L 68.35 60.61 L 69.05 60.02 L 69.62 59.24 L 70.02 58.27 L 70.27 57.11 L 70.35 55.77 L 66.10 56.70 L 65.23 56.93 L 64.53 57.20 L 63.97 57.50 L 63.57 57.84 L 63.08 58.58 L 62.92 59.36 L 62.97 59.75 L 63.10 60.11 L 63.31 60.45 L 63.61 60.77 L 64.00 61.03 L 64.47 61.22 L 65.02 61.34 L 65.66 61.38 ZM 52.05 58.60 L 51.55 58.55 L 51.12 58.56 L 50.75 58.64 L 50.43 58.80 L 50.11 59.08 L 49.78 59.45 L 49.46 59.94 L 49.25 60.38 L 49.19 60.75 L 49.27 61.06 L 49.50 61.31 L 50.14 61.83 L 50.83 62.53 L 51.30 63.01 L 51.72 63.30 L 52.21 63.35 L 52.85 63.17 L 53.83 62.76 L 54.61 62.50 L 54.91 62.34 L 55.11 62.06 L 55.21 61.64 L 55.22 61.09 L 55.12 60.50 L 54.97 60.02 L 54.76 59.66 L 54.50 59.41 L 54.17 59.21 L 53.74 59.03 L 53.23 58.87 L 52.63 58.72 ZM 59.91 60.03 L 59.55 60.02 L 59.17 60.09 L 58.92 60.19 L 58.80 60.38 L 58.75 60.74 L 58.82 61.01 L 59.00 61.13 L 59.28 61.18 L 59.61 61.30 L 59.99 61.33 L 60.27 61.09 L 60.41 60.74 L 60.27 60.38 ZM 76.39 60.16 L 75.89 60.74 L 76.03 61.38 L 76.75 61.38 L 77.11 60.66 ZM 73.49 62.50 L 73.22 62.39 L 72.88 62.41 L 72.42 62.45 L 72.14 62.56 L 71.91 62.72 L 71.74 62.96 L 71.64 63.25 L 71.65 63.53 L 71.75 63.77 L 71.94 64.00 L 72.22 64.19 L 72.66 64.24 L 73.14 63.97 L 73.48 63.66 L 73.72 63.44 L 73.83 63.19 L 73.72 62.81 ZM 82.80 63.35 L 82.65 63.14 L 82.44 62.99 L 82.14 62.89 L 81.82 62.83 L 81.56 62.81 L 81.36 62.90 L 81.14 63.17 L 80.98 63.52 L 80.94 63.84 L 81.02 64.14 L 81.22 64.41 L 81.49 64.58 L 81.72 64.55 L 82.30 64.25 L 82.72 64.00 L 82.84 63.85 L 82.88 63.61 ZM 62.53 64.41 L 62.13 64.08 L 61.60 63.94 L 60.85 63.89 L 60.51 63.91 L 60.24 63.98 L 60.03 64.09 L 59.89 64.25 L 59.69 64.70 L 59.47 65.34 L 59.27 66.11 L 59.11 66.67 L 59.10 66.91 L 59.19 67.15 L 59.38 67.39 L 59.69 67.64 L 59.99 67.81 L 60.26 67.87 L 60.49 67.83 L 60.69 67.69 L 61.12 67.26 L 61.71 66.78 L 62.28 66.33 L 62.74 66.02 L 62.90 65.86 L 62.97 65.65 L 62.96 65.38 L 62.86 65.05 ZM 77.50 64.19 L 77.14 64.08 L 76.79 64.15 L 76.39 64.41 L 76.07 64.75 L 75.89 65.12 L 75.85 65.54 L 75.96 65.99 L 76.19 66.37 L 76.46 66.53 L 76.82 66.56 L 77.33 66.56 L 77.66 66.48 L 77.92 66.33 L 78.13 66.09 L 78.27 65.77 L 78.31 65.32 L 78.33 64.99 L 78.23 64.71 L 77.91 64.47 ZM 65.08 66.56 L 64.52 67.06 L 64.30 67.86 L 65.24 67.78 L 65.88 67.14 ZM 55.68 66.71 L 55.46 66.69 L 55.29 66.74 L 55.17 66.86 L 54.96 67.18 L 54.64 67.56 L 54.39 67.89 L 54.21 68.14 L 54.15 68.40 L 54.28 68.72 L 54.50 69.00 L 54.77 69.17 L 55.11 69.25 L 55.52 69.22 L 56.01 69.09 L 56.36 68.97 L 56.60 68.74 L 56.74 68.28 L 56.75 67.72 L 56.66 67.33 L 56.41 67.03 L 55.94 66.78 ZM 75.74 68.00 L 75.02 68.72 L 75.46 69.52 L 76.10 69.16 L 76.17 68.72 ZM 81.86 68.80 L 81.50 69.22 L 82.00 69.58 L 82.52 69.22 L 82.52 68.58 Z' style='fill-rule: nonzero; fill: #000000; stroke-width: 0.75; stroke: none;' />
<path d='M 94.73 71.17 L 94.10 70.74 L 93.67 70.11 L 93.52 69.38 L 93.52 35.81 L 93.67 35.08 L 94.10 34.45 L 94.73 34.02 L 95.47 33.88 L 108.07 33.88 L 108.81 34.02 L 109.44 34.45 L 109.88 35.08 L 110.02 35.81 L 110.02 38.19 L 111.00 37.19 L 112.16 36.26 L 113.48 35.41 L 114.97 34.64 L 116.60 33.99 L 118.31 33.53 L 120.10 33.25 L 121.97 33.16 L 123.78 33.27 L 125.52 33.59 L 127.19 34.13 L 128.80 34.89 L 130.31 35.87 L 131.67 37.08 L 132.88 38.53 L 133.94 40.22 L 134.41 41.15 L 134.81 42.15 L 135.15 43.21 L 135.43 44.34 L 135.65 45.53 L 135.80 46.79 L 135.90 48.11 L 135.93 49.50 L 135.93 69.38 L 135.78 70.11 L 135.35 70.74 L 135.05 70.99 L 134.73 71.17 L 134.37 71.28 L 133.99 71.31 L 120.24 71.31 L 119.50 71.17 L 118.86 70.74 L 118.44 70.11 L 118.30 69.38 L 118.30 50.00 L 118.25 49.07 L 118.08 48.27 L 117.79 47.59 L 117.40 47.04 L 116.89 46.60 L 116.27 46.30 L 115.54 46.11 L 114.69 46.05 L 113.85 46.11 L 113.12 46.30 L 112.50 46.60 L 112.00 47.04 L 111.60 47.59 L 111.32 48.27 L 111.16 49.07 L 111.10 50.00 L 111.10 69.38 L 110.95 70.11 L 110.52 70.74 L 109.89 71.17 L 109.15 71.31 L 95.47 71.31 ZM 98.79 35.14 L 98.38 35.20 L 98.07 35.43 L 97.77 35.89 L 97.59 36.41 L 97.60 36.80 L 97.81 37.14 L 98.21 37.55 L 98.61 37.96 L 98.96 38.20 L 99.35 38.24 L 99.86 38.05 L 100.38 37.70 L 100.65 37.38 L 100.74 36.97 L 100.72 36.39 L 100.54 35.81 L 100.29 35.50 L 99.92 35.33 L 99.36 35.17 ZM 102.60 36.69 L 102.02 37.05 L 101.94 37.97 L 102.96 37.97 L 103.32 37.05 ZM 105.41 40.72 L 104.76 41.08 L 105.05 41.72 L 105.83 41.94 L 105.99 41.14 ZM 108.51 41.14 L 108.01 41.94 L 108.36 42.58 L 109.22 42.58 L 109.30 41.66 ZM 99.87 41.43 L 99.68 41.33 L 99.44 41.31 L 99.07 41.36 L 98.78 41.45 L 98.57 41.58 L 98.42 41.74 L 98.35 41.94 L 98.35 42.21 L 98.44 42.44 L 98.60 42.64 L 98.85 42.80 L 99.29 42.85 L 99.72 42.58 L 99.96 42.33 L 100.12 42.16 L 100.16 41.96 L 100.08 41.66 ZM 117.83 41.34 L 117.46 41.28 L 117.15 41.39 L 116.85 41.72 L 116.56 42.24 L 116.41 42.63 L 116.47 43.01 L 116.79 43.52 L 117.13 43.82 L 117.46 43.84 L 117.85 43.71 L 118.36 43.52 L 118.71 43.34 L 118.96 43.11 L 119.11 42.80 L 119.16 42.44 L 119.11 42.11 L 118.95 41.84 L 118.68 41.64 L 118.30 41.50 ZM 112.03 41.70 L 111.60 41.63 L 111.22 41.74 L 110.80 42.16 L 110.52 42.61 L 110.52 42.99 L 110.72 43.36 L 111.02 43.88 L 111.31 44.29 L 111.60 44.50 L 111.95 44.54 L 112.46 44.45 L 112.95 44.29 L 113.29 44.09 L 113.47 43.77 L 113.54 43.24 L 113.49 42.68 L 113.35 42.33 L 113.08 42.09 L 112.60 41.86 ZM 127.22 43.09 L 126.71 42.74 L 126.47 42.63 L 126.19 42.62 L 125.86 42.70 L 125.49 42.88 L 125.12 43.13 L 124.86 43.38 L 124.72 43.64 L 124.69 43.89 L 124.81 44.50 L 124.99 45.33 L 125.13 46.17 L 125.27 46.83 L 125.40 47.09 L 125.62 47.30 L 125.95 47.45 L 126.36 47.55 L 126.82 47.55 L 127.20 47.49 L 127.49 47.36 L 127.69 47.16 L 128.04 46.57 L 128.44 45.75 L 128.56 45.38 L 128.63 45.06 L 128.63 44.78 L 128.58 44.56 L 128.33 44.13 L 127.86 43.59 ZM 106.88 43.72 L 106.60 43.28 L 106.45 43.12 L 106.23 43.03 L 105.96 43.02 L 105.63 43.09 L 105.30 43.18 L 105.06 43.31 L 104.90 43.47 L 104.82 43.67 L 104.76 44.19 L 104.69 44.89 L 104.72 45.36 L 104.89 45.75 L 105.19 46.08 L 105.63 46.33 L 106.06 46.38 L 106.33 46.27 L 106.59 45.99 L 106.91 45.61 L 107.17 45.28 L 107.35 45.00 L 107.38 44.68 L 107.21 44.24 ZM 99.02 45.56 L 98.67 45.63 L 98.38 45.81 L 98.13 46.11 L 97.83 46.63 L 97.63 47.02 L 97.61 47.39 L 97.85 47.84 L 98.26 48.18 L 98.63 48.20 L 99.05 48.04 L 99.57 47.84 L 99.91 47.63 L 100.07 47.41 L 100.13 47.12 L 100.15 46.69 L 100.11 46.26 L 100.01 45.97 L 99.79 45.77 L 99.43 45.61 ZM 133.13 48.63 L 132.47 48.92 L 132.83 49.56 L 133.55 49.56 L 133.55 48.84 ZM 95.76 49.20 L 95.26 49.78 L 95.54 50.28 L 96.19 50.44 L 96.33 49.72 ZM 107.74 50.58 L 107.56 50.31 L 107.31 50.11 L 106.99 50.00 L 106.62 49.98 L 106.30 50.08 L 106.04 50.27 L 105.83 50.58 L 105.71 50.93 L 105.69 51.24 L 105.79 51.53 L 105.99 51.80 L 106.31 52.06 L 106.55 52.13 L 106.83 52.06 L 107.21 51.94 L 107.52 51.74 L 107.74 51.56 L 107.86 51.31 L 107.85 50.94 ZM 103.55 52.57 L 103.21 52.20 L 102.90 51.92 L 102.60 51.74 L 102.27 51.63 L 101.86 51.60 L 101.37 51.66 L 100.80 51.80 L 100.29 51.97 L 99.92 52.18 L 99.67 52.45 L 99.57 52.75 L 99.50 53.52 L 99.43 54.53 L 99.40 55.56 L 99.43 56.34 L 99.53 56.65 L 99.76 56.93 L 100.11 57.19 L 100.58 57.42 L 101.05 57.54 L 101.43 57.55 L 101.74 57.43 L 101.97 57.20 L 102.44 56.56 L 103.04 55.77 L 103.67 54.99 L 104.15 54.42 L 104.28 54.16 L 104.28 53.84 L 104.15 53.47 L 103.90 53.03 ZM 127.24 52.64 L 126.68 52.27 L 126.17 52.00 L 125.71 51.81 L 125.25 51.75 L 124.74 51.84 L 124.17 52.10 L 123.55 52.52 L 122.82 53.08 L 122.20 53.60 L 121.69 54.09 L 121.29 54.55 L 121.02 55.04 L 120.92 55.66 L 120.97 56.40 L 121.18 57.27 L 121.52 58.15 L 121.91 58.84 L 122.34 59.34 L 122.82 59.66 L 123.39 59.84 L 124.10 59.97 L 124.95 60.05 L 125.93 60.08 L 126.72 60.03 L 127.35 59.88 L 127.83 59.64 L 128.16 59.30 L 128.42 58.85 L 128.68 58.29 L 128.96 57.62 L 129.24 56.84 L 129.41 56.17 L 129.49 55.59 L 129.48 55.09 L 129.38 54.69 L 129.18 54.31 L 128.86 53.92 L 128.42 53.52 L 127.86 53.09 ZM 107.28 57.83 L 106.99 58.14 L 106.58 58.72 L 106.53 58.95 L 106.71 59.22 L 107.00 59.45 L 107.33 59.54 L 107.68 59.52 L 108.07 59.36 L 108.34 59.19 L 108.43 58.97 L 108.41 58.67 L 108.36 58.28 L 108.16 57.98 L 107.71 57.78 ZM 133.63 60.02 L 133.27 60.74 L 133.49 61.38 L 134.13 61.02 L 134.57 60.22 ZM 106.99 61.09 L 106.99 61.95 L 107.49 62.39 L 108.07 61.95 L 107.85 61.30 ZM 99.15 61.59 L 98.79 62.24 L 99.21 62.67 L 100.01 62.67 L 99.79 61.95 ZM 126.36 62.81 L 125.79 63.39 L 126.15 63.89 L 126.57 63.83 L 126.79 63.39 ZM 100.49 64.54 L 100.12 64.33 L 99.72 64.29 L 99.21 64.47 L 98.79 64.83 L 98.65 65.19 L 98.68 65.62 L 98.79 66.20 L 98.99 66.77 L 99.15 67.17 L 99.41 67.43 L 99.93 67.56 L 100.56 67.57 L 100.97 67.42 L 101.29 67.10 L 101.58 66.56 L 101.75 66.05 L 101.66 65.67 L 101.37 65.32 L 100.94 64.91 ZM 107.92 65.44 L 107.55 65.32 L 107.16 65.34 L 106.77 65.49 L 106.19 65.86 L 105.72 66.13 L 105.57 66.27 L 105.49 66.47 L 105.48 66.74 L 105.55 67.06 L 105.73 67.81 L 105.97 68.33 L 106.16 68.51 L 106.43 68.64 L 106.78 68.74 L 107.21 68.80 L 107.57 68.80 L 107.86 68.74 L 108.07 68.62 L 108.21 68.44 L 108.45 67.91 L 108.72 67.20 L 108.90 66.70 L 108.86 66.34 L 108.65 66.04 L 108.29 65.70 ZM 124.11 66.25 L 123.84 66.26 L 123.61 66.36 L 123.41 66.56 L 123.28 66.79 L 123.25 67.03 L 123.31 67.29 L 123.47 67.56 L 123.70 67.84 L 123.93 68.00 L 124.17 68.06 L 124.41 68.00 L 124.63 67.89 L 124.79 67.72 L 124.88 67.47 L 124.91 67.14 L 124.88 66.85 L 124.79 66.61 L 124.63 66.45 L 124.41 66.34 ZM 133.37 66.56 L 132.99 66.56 L 132.67 66.76 L 132.41 66.92 L 132.26 67.14 L 132.26 67.50 L 132.38 67.79 L 132.58 67.94 L 133.19 68.08 L 133.53 68.08 L 133.81 68.02 L 134.03 67.90 L 134.21 67.72 L 134.28 67.42 L 134.21 67.22 L 134.03 67.05 L 133.77 66.84 ZM 96.47 67.36 L 95.83 67.92 L 96.26 68.86 L 97.27 68.44 L 97.41 67.42 Z' style='fill-rule: nonzero; fill: #000000; stroke-width: 0.75; stroke: none;' />
<path d='M 158.46 71.91 L 155.91 71.56 L 153.49 70.96 L 151.19 70.13 L 150.10 69.62 L 149.07 69.06 L 148.09 68.45 L 147.17 67.78 L 146.30 67.05 L 145.48 66.27 L 144.71 65.44 L 144.00 64.55 L 143.36 63.60 L 142.79 62.61 L 142.30 61.56 L 141.88 60.46 L 141.54 59.31 L 141.27 58.11 L 141.08 56.85 L 140.97 55.55 L 140.92 54.25 L 140.91 52.67 L 140.92 51.07 L 140.97 49.72 L 141.08 48.41 L 141.27 47.16 L 141.53 45.95 L 141.87 44.80 L 142.28 43.69 L 142.76 42.64 L 143.32 41.64 L 143.96 40.69 L 144.66 39.79 L 145.42 38.94 L 146.24 38.15 L 147.11 37.42 L 148.04 36.75 L 149.02 36.13 L 150.06 35.57 L 151.16 35.06 L 153.47 34.23 L 155.90 33.63 L 158.45 33.28 L 161.13 33.16 L 162.53 33.18 L 163.87 33.26 L 165.16 33.39 L 166.40 33.56 L 167.59 33.79 L 168.72 34.07 L 169.79 34.40 L 170.82 34.78 L 172.72 35.63 L 174.44 36.58 L 175.96 37.61 L 177.30 38.74 L 178.46 39.91 L 179.46 41.07 L 180.30 42.23 L 180.97 43.39 L 181.50 44.49 L 181.88 45.47 L 182.13 46.35 L 182.24 47.13 L 182.23 47.50 L 182.13 47.86 L 181.95 48.18 L 181.69 48.49 L 181.03 48.92 L 180.28 49.06 L 166.25 49.06 L 165.54 48.97 L 164.99 48.67 L 164.55 48.21 L 164.16 47.63 L 163.65 46.72 L 163.11 46.05 L 162.81 45.80 L 162.44 45.61 L 162.01 45.51 L 161.50 45.47 L 160.74 45.55 L 160.12 45.77 L 159.63 46.16 L 159.27 46.69 L 159.01 47.36 L 158.82 48.15 L 158.68 49.05 L 158.61 50.08 L 158.59 51.56 L 158.58 52.90 L 158.59 54.11 L 158.61 55.19 L 158.71 56.26 L 158.85 57.19 L 159.05 57.97 L 159.30 58.61 L 159.64 59.10 L 160.12 59.44 L 160.74 59.65 L 161.50 59.72 L 162.09 59.68 L 162.58 59.58 L 162.97 59.39 L 163.25 59.14 L 163.71 58.46 L 164.16 57.56 L 164.51 56.93 L 164.97 56.49 L 165.55 56.22 L 166.25 56.13 L 180.28 56.13 L 181.03 56.27 L 181.69 56.70 L 181.95 57.00 L 182.13 57.33 L 182.23 57.68 L 182.24 58.06 L 182.16 58.58 L 182.01 59.19 L 181.78 59.90 L 181.47 60.70 L 181.08 61.56 L 180.59 62.45 L 180.00 63.38 L 179.32 64.33 L 178.52 65.29 L 177.60 66.22 L 176.56 67.14 L 175.39 68.03 L 174.10 68.88 L 172.67 69.64 L 171.11 70.32 L 169.41 70.92 L 167.57 71.41 L 165.58 71.76 L 163.43 71.96 L 161.13 72.03 ZM 164.42 34.61 L 163.97 34.64 L 163.52 34.88 L 162.94 35.24 L 162.62 35.59 L 162.53 35.92 L 162.62 36.31 L 162.78 36.83 L 162.95 37.26 L 163.14 37.55 L 163.44 37.71 L 163.88 37.77 L 164.51 37.75 L 164.96 37.69 L 165.28 37.47 L 165.53 36.97 L 165.68 36.27 L 165.71 35.75 L 165.50 35.31 L 164.96 34.88 ZM 159.73 35.10 L 159.39 34.75 L 159.23 34.64 L 159.02 34.60 L 158.77 34.63 L 158.47 34.74 L 158.19 34.86 L 157.99 35.00 L 157.87 35.17 L 157.83 35.36 L 157.83 35.83 L 157.83 36.47 L 157.89 36.89 L 158.08 37.16 L 158.39 37.31 L 158.83 37.41 L 159.40 37.59 L 159.83 37.72 L 160.18 37.68 L 160.49 37.33 L 160.72 36.82 L 160.71 36.44 L 160.49 36.06 L 160.13 35.59 ZM 149.39 38.36 L 149.08 38.21 L 148.74 38.18 L 148.39 38.27 L 148.12 38.49 L 148.03 38.74 L 148.05 39.03 L 148.10 39.42 L 148.16 39.79 L 148.21 40.06 L 148.35 40.26 L 148.67 40.42 L 149.08 40.44 L 149.42 40.37 L 149.70 40.19 L 149.91 39.92 L 150.03 39.60 L 150.03 39.27 L 149.92 38.95 L 149.69 38.63 ZM 153.31 38.36 L 153.03 38.38 L 152.76 38.53 L 152.43 38.77 L 152.22 38.97 L 152.12 39.20 L 152.11 39.47 L 152.21 39.78 L 152.34 40.15 L 152.46 40.39 L 152.65 40.52 L 153.00 40.56 L 153.44 40.54 L 153.75 40.47 L 153.98 40.26 L 154.16 39.84 L 154.23 39.47 L 154.17 39.13 L 153.97 38.82 L 153.64 38.55 ZM 174.45 39.65 L 174.21 39.28 L 173.84 39.04 L 173.24 38.91 L 172.98 38.90 L 172.78 38.96 L 172.65 39.07 L 172.58 39.24 L 172.46 39.67 L 172.22 40.20 L 172.13 40.52 L 172.14 40.80 L 172.24 41.06 L 172.44 41.28 L 172.67 41.45 L 172.93 41.50 L 173.21 41.45 L 173.52 41.28 L 173.98 41.04 L 174.38 40.89 L 174.53 40.81 L 174.63 40.67 L 174.68 40.46 L 174.67 40.20 ZM 157.75 39.27 L 157.83 40.20 L 158.61 40.56 L 158.91 39.84 L 158.69 39.06 ZM 168.66 40.66 L 168.47 40.86 L 168.37 41.18 L 168.19 41.58 L 168.14 42.00 L 168.41 42.38 L 168.72 42.71 L 168.94 42.99 L 169.19 43.12 L 169.57 43.02 L 169.85 42.74 L 169.88 42.45 L 169.71 41.72 L 169.59 41.28 L 169.52 40.97 L 169.39 40.76 L 169.05 40.64 ZM 161.78 41.66 L 161.86 42.58 L 162.58 43.24 L 163.08 42.38 L 162.72 41.80 ZM 145.58 41.77 L 145.41 41.91 L 145.29 42.13 L 145.16 42.44 L 145.02 42.76 L 144.92 43.02 L 144.95 43.25 L 145.16 43.52 L 145.49 43.76 L 145.77 43.89 L 146.05 43.88 L 146.38 43.74 L 146.79 43.46 L 147.02 43.20 L 147.10 42.88 L 147.02 42.44 L 146.90 42.05 L 146.66 41.88 L 146.32 41.80 L 145.88 41.72 ZM 151.40 47.73 L 151.28 47.05 L 151.18 46.44 L 151.13 45.91 L 150.99 45.45 L 150.66 45.09 L 150.12 44.83 L 149.39 44.67 L 148.56 44.65 L 147.87 44.73 L 147.30 44.91 L 146.88 45.19 L 146.52 45.57 L 146.16 46.08 L 145.80 46.72 L 145.44 47.49 L 145.14 48.23 L 144.96 48.89 L 144.89 49.46 L 144.94 49.94 L 145.12 50.38 L 145.42 50.85 L 145.87 51.35 L 146.44 51.88 L 146.97 52.33 L 147.47 52.63 L 147.93 52.76 L 148.36 52.74 L 148.81 52.59 L 149.32 52.38 L 149.90 52.09 L 150.55 51.74 L 151.03 51.41 L 151.39 51.08 L 151.62 50.76 L 151.74 50.44 L 151.77 50.07 L 151.75 49.62 L 151.68 49.09 L 151.57 48.49 ZM 166.03 45.75 L 165.38 45.83 L 165.53 46.55 L 166.25 46.77 L 166.61 46.05 ZM 174.24 46.19 L 173.80 46.91 L 174.60 47.19 L 175.32 46.83 L 174.89 46.19 ZM 169.35 46.19 L 169.41 46.91 L 169.85 47.27 L 170.71 46.97 L 170.13 46.33 ZM 153.44 56.08 L 153.21 56.05 L 152.94 56.12 L 152.57 56.19 L 151.96 56.42 L 151.77 56.56 L 151.71 56.84 L 151.76 57.18 L 151.91 57.34 L 152.17 57.44 L 152.50 57.56 L 152.87 57.70 L 153.14 57.81 L 153.38 57.81 L 153.64 57.56 L 153.84 57.27 L 153.92 56.97 L 153.88 56.66 L 153.72 56.34 ZM 146.16 56.13 L 145.88 56.70 L 146.44 56.99 L 147.10 56.63 L 146.66 56.13 ZM 144.60 57.31 L 144.50 57.06 L 144.35 56.90 L 144.07 56.84 L 143.77 56.89 L 143.53 57.02 L 143.34 57.25 L 143.21 57.56 L 143.14 57.87 L 143.21 58.06 L 143.39 58.22 L 143.64 58.42 L 143.92 58.60 L 144.17 58.68 L 144.39 58.67 L 144.58 58.56 L 144.78 58.37 L 144.82 58.19 L 144.78 57.95 L 144.72 57.63 ZM 167.31 58.78 L 167.10 58.71 L 166.93 58.71 L 166.78 58.78 L 166.47 59.04 L 166.03 59.36 L 165.65 59.63 L 165.38 59.84 L 165.26 60.11 L 165.32 60.58 L 165.49 60.97 L 165.74 61.13 L 166.10 61.15 L 166.61 61.16 L 166.94 61.12 L 167.21 61.00 L 167.41 60.80 L 167.55 60.52 L 167.73 60.00 L 167.86 59.61 L 167.84 59.27 L 167.55 58.92 ZM 157.96 59.54 L 157.67 59.28 L 157.37 59.17 L 157.07 59.19 L 156.34 59.39 L 155.38 59.66 L 154.33 59.83 L 153.50 59.94 L 153.18 60.04 L 152.93 60.28 L 152.75 60.65 L 152.64 61.16 L 152.60 61.83 L 152.63 62.40 L 152.71 62.87 L 152.86 63.25 L 153.10 63.56 L 153.46 63.86 L 153.93 64.14 L 154.52 64.41 L 155.12 64.64 L 155.66 64.78 L 156.12 64.82 L 156.52 64.77 L 156.89 64.60 L 157.28 64.33 L 157.69 63.96 L 158.11 63.47 L 158.49 62.98 L 158.76 62.54 L 158.92 62.14 L 158.97 61.78 L 158.93 61.41 L 158.79 60.98 L 158.57 60.49 L 158.25 59.94 ZM 174.10 59.43 L 173.75 59.31 L 173.41 59.32 L 173.08 59.44 L 172.71 59.71 L 172.47 60.03 L 172.35 60.39 L 172.36 60.80 L 172.50 61.44 L 172.61 61.92 L 172.71 62.10 L 172.87 62.24 L 173.12 62.33 L 173.44 62.39 L 173.77 62.40 L 174.04 62.35 L 174.24 62.25 L 174.38 62.09 L 174.62 61.67 L 174.89 61.09 L 175.06 60.64 L 174.99 60.30 L 174.77 60.00 L 174.46 59.66 ZM 148.46 59.66 L 148.10 60.16 L 148.32 60.80 L 149.11 60.66 L 148.89 60.08 ZM 170.23 61.74 L 169.99 61.75 L 169.73 61.85 L 169.41 62.03 L 169.23 62.16 L 169.13 62.33 L 169.09 62.55 L 169.13 62.81 L 169.30 63.39 L 169.47 63.56 L 169.77 63.61 L 170.07 63.60 L 170.33 63.51 L 170.54 63.31 L 170.71 63.03 L 170.80 62.69 L 170.80 62.38 L 170.70 62.11 L 170.50 61.88 ZM 147.80 62.92 L 147.49 62.78 L 147.12 62.81 L 146.66 62.95 L 146.32 63.13 L 146.13 63.33 L 146.05 63.61 L 146.02 64.05 L 146.06 64.34 L 146.20 64.58 L 146.42 64.77 L 146.74 64.91 L 147.04 64.98 L 147.24 64.91 L 147.40 64.73 L 147.60 64.47 L 147.88 64.10 L 148.14 63.83 L 148.26 63.58 L 148.10 63.25 ZM 151.71 64.19 L 151.21 64.91 L 151.71 65.55 L 152.35 65.27 L 152.57 64.47 ZM 164.38 65.84 L 163.80 66.63 L 164.66 67.14 L 165.38 66.78 L 165.10 66.13 ZM 168.59 66.54 L 168.28 66.49 L 167.98 66.54 L 167.69 66.70 L 167.34 67.03 L 167.14 67.28 L 167.10 67.57 L 167.19 68.00 L 167.40 68.43 L 167.61 68.72 L 167.92 68.88 L 168.41 68.94 L 168.82 68.87 L 169.05 68.66 L 169.20 68.31 L 169.35 67.86 L 169.40 67.54 L 169.35 67.24 L 169.18 66.96 L 168.91 66.70 ZM 158.99 67.28 L 158.75 66.92 L 158.62 66.80 L 158.44 66.72 L 158.19 66.69 L 157.89 66.70 L 157.64 66.76 L 157.46 66.85 L 157.35 66.98 L 157.32 67.14 L 157.28 67.56 L 157.18 68.08 L 157.09 68.53 L 156.99 68.88 L 157.02 69.16 L 157.32 69.44 L 157.76 69.63 L 158.08 69.63 L 158.37 69.45 L 158.75 69.16 L 159.12 68.83 L 159.33 68.55 L 159.39 68.22 L 159.27 67.78 ZM 165.67 68.80 L 165.24 69.02 L 165.17 69.66 L 165.82 69.58 L 166.25 69.16 Z' style='fill-rule: nonzero; fill: #000000; stroke-width: 0.75; stroke: none;' />
<path d='M 192.15 84.89 L 191.64 84.56 L 191.28 84.08 L 191.17 83.49 L 191.17 83.16 L 191.23 82.77 L 197.00 68.94 L 183.10 36.11 L 183.03 35.59 L 183.25 34.93 L 183.64 34.38 L 184.17 34.00 L 184.82 33.88 L 197.00 33.88 L 197.50 33.91 L 197.93 34.02 L 198.29 34.20 L 198.57 34.45 L 199.00 35.03 L 199.29 35.59 L 205.20 52.02 L 211.32 35.59 L 211.67 34.98 L 212.14 34.42 L 212.44 34.18 L 212.82 34.01 L 213.26 33.91 L 213.78 33.88 L 225.79 33.88 L 226.41 33.99 L 226.95 34.34 L 227.32 34.84 L 227.45 35.39 L 227.43 35.78 L 227.37 36.11 L 207.07 83.27 L 206.72 83.88 L 206.21 84.45 L 205.89 84.69 L 205.51 84.86 L 205.07 84.97 L 204.56 85.00 L 192.75 85.00 ZM 190.28 38.08 L 190.01 38.04 L 189.79 38.07 L 189.60 38.16 L 189.26 38.47 L 188.85 38.91 L 188.51 39.38 L 188.32 39.78 L 188.33 40.20 L 188.57 40.72 L 188.93 41.15 L 189.29 41.33 L 189.72 41.30 L 190.29 41.14 L 190.85 40.98 L 191.23 40.78 L 191.47 40.44 L 191.59 39.84 L 191.59 39.22 L 191.45 38.77 L 191.12 38.44 L 190.59 38.19 ZM 196.34 39.70 L 196.28 40.36 L 197.06 40.56 L 197.06 39.84 L 196.85 39.20 ZM 220.26 40.47 L 219.85 40.03 L 219.63 39.90 L 219.34 39.82 L 219.00 39.80 L 218.59 39.84 L 217.60 40.08 L 216.93 40.36 L 216.70 40.55 L 216.50 40.84 L 216.34 41.23 L 216.21 41.72 L 216.18 42.22 L 216.21 42.65 L 216.30 42.99 L 216.46 43.27 L 217.04 43.74 L 217.95 44.24 L 218.92 44.67 L 219.67 44.94 L 220.01 44.96 L 220.37 44.85 L 220.77 44.61 L 221.18 44.24 L 221.51 43.82 L 221.68 43.45 L 221.70 43.10 L 221.57 42.80 L 221.16 42.09 L 220.68 41.14 ZM 193.18 40.92 L 192.53 41.22 L 192.82 41.94 L 193.46 41.80 L 193.75 41.22 ZM 198.20 42.22 L 197.80 42.27 L 197.45 42.44 L 197.14 42.74 L 196.98 43.11 L 197.06 43.38 L 197.30 43.63 L 197.57 43.95 L 197.82 44.34 L 198.00 44.64 L 198.24 44.79 L 198.65 44.75 L 198.96 44.56 L 199.04 44.31 L 199.02 43.97 L 199.01 43.52 L 199.02 43.07 L 199.04 42.74 L 198.96 42.48 L 198.65 42.30 ZM 188.28 43.24 L 188.43 43.88 L 188.93 44.31 L 189.21 43.74 L 189.07 43.09 ZM 192.73 43.45 L 192.34 43.20 L 192.18 43.12 L 192.01 43.13 L 191.84 43.25 L 191.67 43.45 L 191.51 43.84 L 191.65 44.14 L 191.95 44.45 L 192.25 44.89 L 192.50 45.27 L 192.70 45.55 L 192.95 45.67 L 193.32 45.61 L 193.71 45.43 L 193.89 45.19 L 193.94 44.84 L 193.96 44.39 L 193.92 44.09 L 193.78 43.89 L 193.56 43.76 L 193.25 43.67 ZM 211.04 46.08 L 210.55 46.06 L 210.15 46.11 L 209.84 46.25 L 209.28 46.77 L 208.65 47.63 L 208.46 48.00 L 208.38 48.33 L 208.42 48.62 L 208.57 48.86 L 209.07 49.36 L 209.67 50.00 L 210.13 50.49 L 210.53 50.80 L 210.73 50.88 L 210.98 50.89 L 211.27 50.84 L 211.60 50.72 L 212.37 50.38 L 212.90 50.08 L 213.09 49.89 L 213.21 49.62 L 213.27 49.27 L 213.26 48.84 L 213.15 47.84 L 212.93 47.10 L 212.76 46.80 L 212.48 46.56 L 212.09 46.35 L 211.60 46.19 ZM 196.31 48.06 L 196.11 47.86 L 195.84 47.74 L 195.48 47.70 L 195.03 47.70 L 194.68 47.70 L 194.42 47.83 L 194.18 48.20 L 194.08 48.62 L 194.11 49.01 L 194.29 49.38 L 194.62 49.72 L 195.13 50.06 L 195.51 50.25 L 195.90 50.24 L 196.42 50.00 L 196.76 49.64 L 196.78 49.28 L 196.62 48.87 L 196.42 48.34 ZM 191.38 47.71 L 191.09 47.81 L 190.85 48.07 L 190.59 48.49 L 190.27 48.90 L 190.04 49.25 L 190.00 49.60 L 190.23 50.00 L 190.61 50.35 L 191.02 50.56 L 191.47 50.60 L 191.95 50.50 L 192.48 50.26 L 192.75 49.97 L 192.85 49.56 L 192.89 49.00 L 192.83 48.51 L 192.67 48.17 L 192.35 47.94 L 191.81 47.77 ZM 217.16 49.53 L 216.94 49.61 L 216.81 49.75 L 216.75 49.94 L 216.67 50.40 L 216.51 50.94 L 216.42 51.25 L 216.43 51.53 L 216.56 51.79 L 216.79 52.02 L 217.12 52.33 L 217.40 52.56 L 217.70 52.62 L 218.09 52.45 L 218.48 52.11 L 218.65 51.81 L 218.67 51.45 L 218.59 50.94 L 218.45 50.36 L 218.31 49.92 L 218.20 49.76 L 218.02 49.64 L 217.77 49.55 L 217.45 49.50 ZM 212.02 53.86 L 211.67 53.89 L 211.37 54.09 L 211.03 54.39 L 210.76 54.74 L 210.70 55.05 L 210.80 55.37 L 211.03 55.77 L 211.23 56.13 L 211.42 56.38 L 211.69 56.49 L 212.12 56.49 L 212.53 56.33 L 212.76 56.13 L 212.89 55.84 L 212.98 55.41 L 213.02 54.90 L 213.01 54.55 L 212.86 54.27 L 212.48 54.03 ZM 201.46 55.54 L 200.76 55.45 L 200.15 55.41 L 199.62 55.44 L 199.15 55.58 L 198.69 55.90 L 198.26 56.39 L 197.85 57.06 L 197.37 57.95 L 196.98 58.74 L 196.70 59.44 L 196.53 60.05 L 196.51 60.63 L 196.72 61.28 L 197.14 61.98 L 197.79 62.75 L 198.46 63.38 L 199.09 63.78 L 199.69 63.94 L 200.26 63.86 L 200.87 63.64 L 201.55 63.35 L 202.33 63.00 L 203.18 62.59 L 203.98 62.21 L 204.65 61.84 L 205.19 61.48 L 205.59 61.13 L 205.88 60.71 L 206.05 60.14 L 206.11 59.43 L 206.06 58.56 L 205.91 57.79 L 205.68 57.18 L 205.36 56.73 L 204.95 56.45 L 204.44 56.25 L 203.82 56.06 L 203.09 55.87 L 202.25 55.69 ZM 211.90 60.88 L 211.82 61.38 L 212.32 61.74 L 212.90 61.24 L 212.40 60.80 ZM 208.89 62.45 L 208.65 62.28 L 208.41 62.24 L 208.07 62.31 L 207.64 62.51 L 207.32 62.67 L 207.14 62.92 L 207.07 63.39 L 207.12 63.95 L 207.25 64.33 L 207.55 64.58 L 208.07 64.77 L 208.56 64.82 L 208.87 64.69 L 209.10 64.40 L 209.37 63.97 L 209.57 63.59 L 209.56 63.33 L 209.41 63.08 L 209.17 62.75 ZM 210.98 67.32 L 210.67 67.31 L 210.35 67.45 L 209.95 67.64 L 209.73 67.81 L 209.59 68.04 L 209.52 68.32 L 209.53 68.66 L 209.62 68.91 L 209.78 69.12 L 209.98 69.27 L 210.25 69.38 L 210.54 69.37 L 210.80 69.28 L 211.01 69.11 L 211.18 68.86 L 211.37 68.48 L 211.53 68.19 L 211.55 67.90 L 211.32 67.56 ZM 206.61 69.29 L 206.35 69.34 L 206.17 69.45 L 206.06 69.63 L 205.86 70.06 L 205.56 70.59 L 205.41 70.95 L 205.38 71.29 L 205.48 71.63 L 205.70 71.95 L 206.00 72.19 L 206.33 72.32 L 206.69 72.34 L 207.07 72.25 L 207.52 71.98 L 207.85 71.77 L 207.98 71.65 L 208.06 71.48 L 208.09 71.25 L 208.07 70.95 L 207.98 70.32 L 207.82 69.84 L 207.70 69.66 L 207.51 69.51 L 207.26 69.39 L 206.93 69.30 ZM 202.69 73.15 L 202.43 72.83 L 202.08 72.67 L 201.53 72.61 L 200.99 72.73 L 200.67 72.94 L 200.47 73.29 L 200.31 73.83 L 200.17 74.34 L 200.20 74.74 L 200.41 75.07 L 200.81 75.42 L 201.24 75.64 L 201.67 75.69 L 202.11 75.60 L 202.54 75.34 L 202.86 74.97 L 203.04 74.57 L 203.07 74.14 L 202.96 73.69 ZM 206.45 75.62 L 206.19 75.34 L 205.84 75.18 L 205.42 75.13 L 205.03 75.21 L 204.87 75.45 L 204.81 75.81 L 204.70 76.20 L 204.70 76.66 L 204.98 77.00 L 205.42 77.14 L 205.85 77.00 L 206.19 76.75 L 206.50 76.56 L 206.68 76.35 L 206.64 76.00 ZM 198.67 77.61 L 198.29 77.20 L 198.08 77.09 L 197.82 77.05 L 197.51 77.06 L 197.14 77.14 L 196.26 77.38 L 195.62 77.64 L 195.40 77.83 L 195.23 78.11 L 195.11 78.48 L 195.04 78.94 L 195.04 79.44 L 195.10 79.85 L 195.22 80.17 L 195.40 80.39 L 195.98 80.77 L 196.85 81.17 L 197.75 81.52 L 198.43 81.67 L 198.73 81.65 L 199.05 81.52 L 199.38 81.26 L 199.73 80.89 L 199.99 80.51 L 200.12 80.17 L 200.13 79.86 L 200.01 79.59 L 199.60 79.00 L 199.07 78.22 Z' style='fill-rule: nonzero; fill: #000000; stroke-width: 0.75; stroke: none;' />
<path d='M 246.44 71.17 L 245.80 70.74 L 245.37 70.11 L 245.22 69.38 L 245.22 22.86 L 245.37 22.12 L 245.80 21.49 L 246.44 21.05 L 247.18 20.91 L 283.46 20.91 L 284.20 21.05 L 284.83 21.49 L 285.27 22.12 L 285.41 22.86 L 285.41 33.80 L 285.27 34.54 L 284.83 35.17 L 284.20 35.61 L 283.46 35.75 L 262.87 35.75 L 262.87 41.08 L 282.02 41.08 L 282.76 41.22 L 283.40 41.66 L 283.65 41.95 L 283.83 42.28 L 283.94 42.63 L 283.97 43.02 L 283.97 53.89 L 283.83 54.63 L 283.40 55.27 L 282.76 55.69 L 282.02 55.83 L 262.87 55.83 L 262.87 69.38 L 262.72 70.11 L 262.29 70.74 L 261.99 70.99 L 261.67 71.17 L 261.31 71.28 L 260.93 71.31 L 247.18 71.31 ZM 265.87 24.25 L 265.34 24.25 L 264.89 24.29 L 264.52 24.38 L 264.20 24.54 L 263.90 24.82 L 263.60 25.22 L 263.30 25.74 L 263.07 26.28 L 262.94 26.77 L 262.92 27.19 L 263.01 27.55 L 263.19 27.88 L 263.46 28.24 L 263.81 28.63 L 264.24 29.05 L 264.72 29.48 L 265.15 29.84 L 265.54 30.13 L 265.88 30.34 L 266.24 30.46 L 266.68 30.45 L 267.19 30.32 L 267.77 30.06 L 268.35 29.70 L 268.78 29.34 L 269.07 28.99 L 269.21 28.63 L 269.25 28.22 L 269.24 27.72 L 269.18 27.13 L 269.07 26.45 L 268.94 25.90 L 268.76 25.44 L 268.54 25.09 L 268.27 24.84 L 267.94 24.66 L 267.53 24.51 L 267.04 24.39 L 266.47 24.30 ZM 249.55 25.87 L 249.55 25.53 L 249.43 25.27 L 249.05 25.09 L 248.61 25.01 L 248.22 25.07 L 247.89 25.26 L 247.61 25.59 L 247.31 26.05 L 247.16 26.42 L 247.20 26.79 L 247.46 27.25 L 247.84 27.60 L 248.25 27.81 L 248.70 27.85 L 249.19 27.75 L 249.55 27.50 L 249.62 27.17 L 249.57 26.78 L 249.55 26.31 ZM 280.29 26.01 L 280.15 26.17 L 279.93 26.67 L 279.65 27.25 L 279.61 27.49 L 279.79 27.75 L 280.06 27.95 L 280.29 27.94 L 280.56 27.82 L 280.94 27.69 L 281.36 27.24 L 281.44 26.75 L 281.34 26.43 L 281.16 26.19 L 280.91 26.03 L 280.58 25.95 ZM 274.88 26.60 L 274.76 26.38 L 274.61 26.24 L 274.43 26.17 L 273.95 26.10 L 273.32 26.03 L 272.81 26.01 L 272.44 26.09 L 272.16 26.34 L 271.87 26.81 L 271.75 27.27 L 271.80 27.61 L 272.02 27.93 L 272.38 28.33 L 272.89 28.72 L 273.27 29.02 L 273.45 29.10 L 273.68 29.11 L 273.94 29.05 L 274.24 28.91 L 274.77 28.48 L 275.04 28.08 L 275.09 27.59 L 274.97 26.89 ZM 253.34 26.99 L 253.04 26.81 L 252.76 26.80 L 252.43 27.03 L 252.07 27.38 L 251.85 27.69 L 251.82 28.04 L 252.01 28.55 L 252.24 28.92 L 252.54 29.05 L 252.91 29.03 L 253.36 28.97 L 253.79 28.90 L 254.08 28.80 L 254.28 28.59 L 254.44 28.19 L 254.45 27.83 L 254.30 27.61 L 254.05 27.45 L 253.72 27.25 ZM 279.72 29.99 L 279.21 30.20 L 278.93 30.92 L 279.79 31.06 L 280.08 30.42 ZM 259.80 30.09 L 259.35 30.20 L 258.99 30.51 L 258.63 31.00 L 258.28 31.64 L 258.12 32.11 L 258.19 32.55 L 258.55 33.08 L 258.99 33.51 L 259.41 33.63 L 259.92 33.54 L 260.57 33.38 L 261.13 33.09 L 261.54 32.83 L 261.68 32.68 L 261.76 32.46 L 261.80 32.19 L 261.79 31.86 L 261.67 31.18 L 261.46 30.75 L 261.08 30.45 L 260.43 30.20 ZM 248.04 34.30 L 247.76 34.88 L 248.76 34.59 L 248.47 34.09 ZM 254.80 34.30 L 254.30 34.88 L 254.66 35.45 L 255.24 35.45 L 255.68 34.67 ZM 253.71 40.32 L 253.65 39.86 L 253.56 39.48 L 253.43 39.17 L 253.24 38.92 L 252.95 38.69 L 252.56 38.50 L 252.07 38.34 L 251.53 38.19 L 251.06 38.12 L 250.66 38.12 L 250.33 38.19 L 250.05 38.35 L 249.75 38.61 L 249.44 38.97 L 249.11 39.42 L 248.80 39.87 L 248.58 40.28 L 248.46 40.64 L 248.43 40.97 L 248.49 41.30 L 248.62 41.66 L 248.83 42.07 L 249.11 42.52 L 249.47 42.89 L 249.80 43.16 L 250.11 43.32 L 250.41 43.38 L 251.10 43.29 L 252.01 43.02 L 252.85 42.71 L 253.36 42.34 L 253.52 42.10 L 253.63 41.77 L 253.70 41.36 L 253.72 40.86 ZM 258.26 42.52 L 257.97 43.24 L 258.77 43.45 L 259.41 42.88 L 258.83 42.30 ZM 265.64 43.95 L 265.28 43.85 L 264.91 43.88 L 264.52 44.03 L 263.95 44.35 L 263.52 44.58 L 263.37 44.70 L 263.27 44.89 L 263.22 45.14 L 263.22 45.47 L 263.32 45.79 L 263.45 46.02 L 263.61 46.16 L 263.80 46.22 L 264.31 46.26 L 264.96 46.33 L 265.53 46.38 L 265.93 46.38 L 266.24 46.20 L 266.54 45.75 L 266.71 45.25 L 266.65 44.89 L 266.39 44.56 L 265.97 44.17 ZM 265.26 49.12 L 265.32 48.64 L 265.31 48.44 L 265.21 48.26 L 265.02 48.11 L 264.74 47.99 L 264.09 47.85 L 263.58 47.88 L 263.16 48.12 L 262.72 48.63 L 262.56 48.90 L 262.48 49.14 L 262.49 49.35 L 262.58 49.53 L 262.90 49.92 L 263.30 50.44 L 263.63 50.78 L 263.91 50.97 L 264.23 51.02 L 264.68 50.94 L 265.06 50.76 L 265.21 50.52 L 265.23 50.17 L 265.24 49.72 ZM 257.53 48.91 L 257.04 48.86 L 256.56 49.05 L 255.96 49.50 L 255.34 50.03 L 254.91 50.47 L 254.79 50.70 L 254.74 50.98 L 254.77 51.33 L 254.88 51.74 L 255.07 52.15 L 255.28 52.47 L 255.52 52.68 L 255.77 52.78 L 256.42 52.84 L 257.26 52.81 L 257.92 52.68 L 258.33 52.42 L 258.61 51.98 L 258.83 51.30 L 258.97 50.59 L 258.94 50.08 L 258.68 49.64 L 258.12 49.20 ZM 249.69 50.50 L 249.05 51.02 L 249.19 51.80 L 249.99 51.80 L 250.05 51.16 ZM 270.13 50.53 L 269.88 50.66 L 269.68 50.90 L 269.43 51.22 L 269.26 51.48 L 269.19 51.75 L 269.22 52.02 L 269.35 52.30 L 269.61 52.70 L 269.79 53.03 L 270.02 53.21 L 270.43 53.17 L 270.88 53.00 L 271.07 52.75 L 271.13 52.38 L 271.15 51.88 L 271.13 51.38 L 271.07 51.05 L 270.90 50.81 L 270.51 50.58 ZM 276.57 51.49 L 276.33 51.30 L 276.06 51.23 L 275.69 51.30 L 275.18 51.50 L 274.79 51.66 L 274.64 51.76 L 274.54 51.93 L 274.48 52.16 L 274.46 52.45 L 274.58 53.06 L 274.79 53.42 L 275.15 53.65 L 275.76 53.81 L 276.35 53.96 L 276.80 53.97 L 277.19 53.77 L 277.55 53.31 L 277.69 53.08 L 277.74 52.88 L 277.70 52.70 L 277.58 52.56 L 277.24 52.24 L 276.83 51.80 ZM 253.68 55.72 L 253.40 55.47 L 253.02 55.36 L 252.51 55.33 L 252.11 55.38 L 251.77 55.54 L 251.50 55.81 L 251.29 56.19 L 251.11 56.70 L 251.02 57.09 L 251.12 57.45 L 251.49 57.84 L 251.95 58.11 L 252.32 58.17 L 252.71 58.06 L 253.22 57.78 L 253.64 57.44 L 253.90 57.14 L 253.98 56.76 L 253.86 56.19 ZM 255.86 62.12 L 255.66 61.24 L 255.49 60.90 L 255.19 60.62 L 254.74 60.39 L 254.16 60.22 L 253.41 60.08 L 252.76 60.01 L 252.20 60.01 L 251.74 60.08 L 251.33 60.26 L 250.92 60.59 L 250.52 61.06 L 250.13 61.67 L 249.79 62.38 L 249.56 63.02 L 249.45 63.57 L 249.44 64.05 L 249.56 64.50 L 249.79 65.00 L 250.15 65.54 L 250.63 66.13 L 251.12 66.59 L 251.59 66.89 L 252.02 67.04 L 252.43 67.03 L 252.86 66.91 L 253.36 66.75 L 253.94 66.53 L 254.58 66.27 L 255.10 66.01 L 255.51 65.74 L 255.79 65.46 L 255.96 65.16 L 256.05 64.81 L 256.09 64.40 L 256.08 63.90 L 256.04 63.33 Z' style='fill-rule: nonzero; fill: #FF0000; stroke-width: 0.75; stroke: none;' />
<path d='M 307.91 71.97 L 305.66 71.78 L 303.55 71.47 L 301.59 71.03 L 299.77 70.46 L 298.10 69.77 L 296.58 68.96 L 295.20 68.02 L 293.97 66.95 L 292.88 65.76 L 291.94 64.44 L 291.15 63.00 L 290.50 61.43 L 290.00 59.73 L 289.65 57.92 L 289.44 55.97 L 289.33 52.59 L 289.44 49.20 L 289.66 47.28 L 290.04 45.48 L 290.56 43.81 L 291.24 42.25 L 292.07 40.81 L 293.06 39.49 L 294.20 38.30 L 295.49 37.22 L 296.92 36.27 L 298.47 35.44 L 300.14 34.74 L 301.93 34.17 L 303.84 33.73 L 305.88 33.41 L 308.04 33.22 L 310.32 33.16 L 312.60 33.22 L 314.75 33.41 L 316.79 33.73 L 318.71 34.17 L 320.51 34.74 L 322.18 35.44 L 323.74 36.27 L 325.18 37.22 L 326.48 38.30 L 327.62 39.49 L 328.61 40.81 L 329.44 42.25 L 330.11 43.81 L 330.63 45.48 L 330.99 47.28 L 331.19 49.20 L 331.30 52.59 L 331.19 55.97 L 330.98 57.92 L 330.63 59.73 L 330.13 61.43 L 329.48 63.00 L 328.69 64.44 L 327.75 65.76 L 326.67 66.95 L 325.43 68.02 L 324.06 68.96 L 322.53 69.77 L 320.86 70.46 L 319.04 71.03 L 317.08 71.47 L 314.97 71.78 L 312.72 71.97 L 310.32 72.03 ZM 317.48 35.62 L 317.16 35.61 L 316.75 35.72 L 316.22 35.75 L 315.84 35.77 L 315.57 35.83 L 315.39 35.97 L 315.29 36.25 L 315.09 36.77 L 314.96 37.19 L 315.00 37.53 L 315.36 37.83 L 315.83 38.08 L 316.22 38.13 L 316.62 37.96 L 317.08 37.61 L 317.51 37.22 L 317.77 36.91 L 317.86 36.52 L 317.74 35.95 ZM 304.76 36.36 L 304.38 36.25 L 303.91 36.33 L 303.27 36.39 L 302.68 36.47 L 302.21 36.55 L 302.03 36.62 L 301.88 36.76 L 301.76 36.97 L 301.68 37.25 L 301.61 37.94 L 301.71 38.41 L 302.01 38.77 L 302.55 39.13 L 303.24 39.47 L 303.75 39.64 L 303.99 39.63 L 304.25 39.54 L 304.53 39.38 L 304.85 39.13 L 305.33 38.58 L 305.49 38.08 L 305.40 37.53 L 305.13 36.83 ZM 308.74 38.05 L 308.16 38.55 L 308.38 39.27 L 308.96 38.99 L 309.32 38.49 ZM 316.34 39.74 L 316.07 39.56 L 315.71 39.52 L 315.22 39.56 L 314.88 39.68 L 314.74 39.89 L 314.70 40.18 L 314.64 40.56 L 314.56 41.03 L 314.46 41.41 L 314.48 41.70 L 314.79 41.94 L 315.31 42.15 L 315.72 42.22 L 316.10 42.11 L 316.50 41.80 L 316.82 41.39 L 316.89 41.05 L 316.80 40.66 L 316.58 40.14 ZM 306.90 40.11 L 306.64 39.89 L 306.39 39.81 L 306.07 39.92 L 305.77 40.10 L 305.74 40.36 L 305.93 41.08 L 305.99 41.34 L 306.09 41.53 L 306.24 41.66 L 306.43 41.72 L 307.11 41.88 L 307.36 41.83 L 307.58 41.58 L 307.71 41.20 L 307.64 40.94 L 307.47 40.70 L 307.22 40.42 ZM 324.01 42.80 L 323.41 42.14 L 322.84 41.63 L 322.30 41.25 L 321.72 41.03 L 321.02 40.97 L 320.20 41.08 L 319.25 41.36 L 318.39 41.75 L 317.77 42.20 L 317.38 42.70 L 317.22 43.27 L 317.20 43.92 L 317.20 44.68 L 317.21 45.56 L 317.24 46.55 L 317.31 47.24 L 317.46 47.78 L 317.70 48.19 L 318.02 48.45 L 318.43 48.65 L 318.94 48.84 L 319.55 49.02 L 320.25 49.20 L 320.91 49.40 L 321.49 49.54 L 322.01 49.64 L 322.46 49.69 L 322.87 49.63 L 323.27 49.40 L 323.67 49.02 L 324.07 48.49 L 324.56 47.74 L 324.96 47.07 L 325.26 46.48 L 325.47 45.97 L 325.54 45.47 L 325.43 44.91 L 325.13 44.28 L 324.64 43.59 ZM 297.20 46.48 L 296.86 45.92 L 296.54 45.43 L 296.27 45.03 L 295.96 44.74 L 295.52 44.56 L 294.96 44.52 L 294.27 44.60 L 293.64 44.81 L 293.19 45.10 L 292.92 45.46 L 292.85 45.89 L 292.85 46.97 L 292.75 48.34 L 292.63 49.58 L 292.54 50.55 L 292.58 50.95 L 292.80 51.31 L 293.19 51.64 L 293.75 51.94 L 294.50 52.22 L 295.16 52.42 L 295.73 52.52 L 296.21 52.53 L 296.66 52.42 L 297.14 52.15 L 297.66 51.73 L 298.22 51.16 L 298.61 50.60 L 298.82 50.09 L 298.87 49.63 L 298.75 49.22 L 298.53 48.79 L 298.27 48.30 L 297.95 47.74 L 297.58 47.13 ZM 311.26 60.44 L 312.01 60.22 L 312.56 59.85 L 312.91 59.33 L 313.14 58.65 L 313.32 57.81 L 313.47 56.79 L 313.57 55.61 L 313.59 55.02 L 313.61 54.32 L 313.62 53.51 L 313.63 52.59 L 313.62 51.68 L 313.61 50.87 L 313.59 50.16 L 313.57 49.56 L 313.47 48.45 L 313.32 47.47 L 313.14 46.63 L 312.91 45.94 L 312.56 45.39 L 312.01 44.99 L 311.26 44.75 L 310.32 44.67 L 309.40 44.75 L 308.67 44.99 L 308.12 45.39 L 307.75 45.94 L 307.51 46.63 L 307.32 47.47 L 307.18 48.45 L 307.08 49.56 L 307.05 50.16 L 307.02 50.87 L 307.01 51.68 L 307.00 52.59 L 307.01 53.51 L 307.02 54.32 L 307.05 55.02 L 307.08 55.61 L 307.18 56.79 L 307.32 57.81 L 307.51 58.65 L 307.75 59.33 L 308.12 59.85 L 308.67 60.22 L 309.40 60.44 L 310.32 60.52 ZM 305.45 45.16 L 305.16 45.03 L 304.80 45.01 L 304.35 44.95 L 303.99 44.96 L 303.70 45.03 L 303.48 45.18 L 303.33 45.39 L 303.25 45.71 L 303.30 45.94 L 303.47 46.14 L 303.77 46.41 L 304.02 46.65 L 304.22 46.83 L 304.47 46.88 L 304.85 46.77 L 305.23 46.49 L 305.49 46.27 L 305.64 45.97 L 305.64 45.53 ZM 300.46 44.95 L 300.16 45.69 L 300.74 45.97 L 301.10 45.75 L 301.25 45.17 ZM 301.49 51.42 L 301.27 51.54 L 301.09 51.74 L 300.96 52.02 L 300.87 52.35 L 300.87 52.65 L 300.97 52.89 L 301.18 53.09 L 301.46 53.26 L 301.75 53.31 L 302.04 53.26 L 302.33 53.09 L 302.60 52.87 L 302.76 52.61 L 302.81 52.33 L 302.75 52.02 L 302.64 51.67 L 302.43 51.49 L 302.13 51.40 L 301.75 51.38 ZM 328.36 54.89 L 328.00 54.45 L 327.59 54.22 L 327.13 54.19 L 326.01 54.33 L 324.58 54.47 L 323.98 54.55 L 323.47 54.67 L 323.06 54.80 L 322.74 54.97 L 322.48 55.20 L 322.26 55.54 L 322.07 55.99 L 321.91 56.55 L 321.80 57.16 L 321.75 57.68 L 321.76 58.13 L 321.83 58.50 L 322.00 58.83 L 322.28 59.16 L 322.69 59.51 L 323.21 59.86 L 323.89 60.27 L 324.49 60.61 L 325.02 60.90 L 325.47 61.13 L 325.92 61.23 L 326.42 61.15 L 326.98 60.89 L 327.60 60.44 L 328.21 59.81 L 328.68 59.23 L 329.00 58.70 L 329.18 58.20 L 329.23 57.69 L 329.16 57.07 L 328.98 56.36 L 328.68 55.55 ZM 300.74 55.11 L 300.52 55.77 L 301.10 56.27 L 301.68 55.83 L 301.39 55.25 ZM 294.09 56.95 L 293.72 56.92 L 293.35 57.08 L 292.89 57.42 L 292.60 57.73 L 292.43 58.07 L 292.38 58.45 L 292.46 58.86 L 292.68 59.42 L 292.89 59.80 L 293.22 60.01 L 293.75 60.08 L 294.01 60.05 L 294.20 59.98 L 294.31 59.86 L 294.36 59.69 L 294.43 59.24 L 294.55 58.72 L 294.74 58.20 L 294.88 57.81 L 294.85 57.50 L 294.55 57.20 ZM 296.79 57.92 L 296.13 58.50 L 296.71 59.08 L 297.29 59.00 L 297.50 58.36 ZM 303.63 58.36 L 302.83 58.92 L 303.33 59.58 L 304.13 59.80 L 304.41 58.86 ZM 310.44 64.59 L 310.37 64.20 L 310.27 63.89 L 310.13 63.66 L 309.66 63.28 L 308.88 62.95 L 308.40 62.80 L 307.99 62.71 L 307.65 62.68 L 307.36 62.70 L 307.10 62.81 L 306.83 63.01 L 306.53 63.30 L 306.22 63.69 L 306.02 63.99 L 305.93 64.27 L 305.96 64.52 L 306.10 64.74 L 306.55 65.21 L 307.08 65.84 L 307.42 66.26 L 307.72 66.49 L 308.09 66.54 L 308.60 66.42 L 309.37 66.17 L 309.96 66.02 L 310.18 65.92 L 310.33 65.72 L 310.43 65.43 L 310.46 65.05 ZM 296.17 63.35 L 295.85 63.13 L 295.45 63.02 L 294.99 63.03 L 294.58 63.21 L 294.39 63.47 L 294.33 63.83 L 294.27 64.33 L 294.21 64.78 L 294.19 65.13 L 294.32 65.39 L 294.69 65.63 L 295.12 65.74 L 295.41 65.63 L 295.66 65.37 L 295.99 65.05 L 296.30 64.67 L 296.52 64.41 L 296.59 64.12 L 296.43 63.69 ZM 313.40 63.64 L 312.99 63.44 L 312.61 63.41 L 312.19 63.69 L 311.93 64.09 L 312.00 64.44 L 312.25 64.83 L 312.47 65.34 L 312.68 65.72 L 312.86 65.99 L 313.11 66.13 L 313.49 66.13 L 314.12 66.06 L 314.60 65.99 L 314.78 65.91 L 314.94 65.75 L 315.06 65.51 L 315.14 65.19 L 315.16 64.90 L 315.11 64.67 L 315.01 64.49 L 314.85 64.38 L 314.44 64.16 L 313.93 63.89 ZM 321.00 64.00 L 320.57 63.94 L 320.09 64.09 L 319.46 64.33 L 318.89 64.67 L 318.46 64.99 L 318.30 65.15 L 318.20 65.38 L 318.16 65.65 L 318.16 65.99 L 318.36 66.94 L 318.52 67.64 L 318.66 67.91 L 318.91 68.13 L 319.27 68.31 L 319.75 68.44 L 320.20 68.46 L 320.56 68.39 L 320.81 68.23 L 320.97 67.97 L 321.25 67.28 L 321.63 66.42 L 321.91 65.83 L 322.02 65.34 L 321.90 64.89 L 321.47 64.41 ZM 300.57 64.49 L 300.27 64.52 L 299.99 64.66 L 299.66 64.91 L 299.36 65.23 L 299.16 65.49 L 299.09 65.77 L 299.16 66.20 L 299.39 66.55 L 299.63 66.74 L 299.94 66.80 L 300.38 66.78 L 300.74 66.68 L 300.96 66.53 L 301.10 66.28 L 301.25 65.91 L 301.31 65.47 L 301.35 65.16 L 301.27 64.90 L 300.96 64.61 ZM 314.43 67.72 L 313.99 68.66 L 314.79 69.02 L 315.43 68.80 L 315.43 67.86 Z' style='fill-rule: nonzero; fill: #FF0000; stroke-width: 0.75; stroke: none;' />
<path d='M 337.88 71.17 L 337.24 70.74 L 336.81 70.11 L 336.67 69.38 L 336.67 35.81 L 336.81 35.08 L 337.24 34.45 L 337.88 34.02 L 338.62 33.88 L 351.21 33.88 L 351.95 34.02 L 352.59 34.45 L 353.02 35.08 L 353.17 35.81 L 353.17 38.19 L 354.15 37.19 L 355.30 36.26 L 356.63 35.41 L 358.12 34.64 L 359.75 33.99 L 361.45 33.53 L 363.25 33.25 L 365.12 33.16 L 366.92 33.27 L 368.66 33.59 L 370.34 34.13 L 371.95 34.89 L 373.46 35.87 L 374.82 37.08 L 376.03 38.53 L 377.09 40.22 L 377.55 41.15 L 377.96 42.15 L 378.30 43.21 L 378.58 44.34 L 378.79 45.53 L 378.95 46.79 L 379.04 48.11 L 379.07 49.50 L 379.07 69.38 L 378.93 70.11 L 378.49 70.74 L 378.20 70.99 L 377.87 71.17 L 377.52 71.28 L 377.13 71.31 L 363.38 71.31 L 362.64 71.17 L 362.01 70.74 L 361.59 70.11 L 361.45 69.38 L 361.45 50.00 L 361.39 49.07 L 361.22 48.27 L 360.94 47.59 L 360.54 47.04 L 360.04 46.60 L 359.42 46.30 L 358.68 46.11 L 357.84 46.05 L 357.00 46.11 L 356.27 46.30 L 355.65 46.60 L 355.14 47.04 L 354.75 47.59 L 354.47 48.27 L 354.30 49.07 L 354.24 50.00 L 354.24 69.38 L 354.10 70.11 L 353.67 70.74 L 353.03 71.17 L 352.29 71.31 L 338.62 71.31 ZM 341.94 35.14 L 341.53 35.20 L 341.22 35.43 L 340.92 35.89 L 340.73 36.41 L 340.74 36.80 L 340.95 37.14 L 341.35 37.55 L 341.76 37.96 L 342.10 38.20 L 342.49 38.24 L 343.01 38.05 L 343.53 37.70 L 343.79 37.38 L 343.89 36.97 L 343.87 36.39 L 343.69 35.81 L 343.43 35.50 L 343.06 35.33 L 342.51 35.17 ZM 345.74 36.69 L 345.17 37.05 L 345.09 37.97 L 346.10 37.97 L 346.46 37.05 ZM 348.56 40.72 L 347.90 41.08 L 348.20 41.72 L 348.98 41.94 L 349.13 41.14 ZM 351.65 41.14 L 351.15 41.94 L 351.51 42.58 L 352.37 42.58 L 352.45 41.66 ZM 343.02 41.43 L 342.82 41.33 L 342.58 41.31 L 342.21 41.36 L 341.93 41.45 L 341.71 41.58 L 341.57 41.74 L 341.49 41.94 L 341.50 42.21 L 341.58 42.44 L 341.75 42.64 L 341.99 42.80 L 342.43 42.85 L 342.87 42.58 L 343.11 42.33 L 343.26 42.16 L 343.31 41.96 L 343.23 41.66 ZM 360.98 41.34 L 360.60 41.28 L 360.29 41.39 L 359.99 41.72 L 359.70 42.24 L 359.56 42.63 L 359.62 43.01 L 359.93 43.52 L 360.28 43.82 L 360.60 43.84 L 360.99 43.71 L 361.51 43.52 L 361.86 43.34 L 362.11 43.11 L 362.26 42.80 L 362.31 42.44 L 362.25 42.11 L 362.09 41.84 L 361.82 41.64 L 361.45 41.50 ZM 355.17 41.70 L 354.74 41.63 L 354.36 41.74 L 353.95 42.16 L 353.67 42.61 L 353.67 42.99 L 353.86 43.36 L 354.17 43.88 L 354.46 44.29 L 354.74 44.50 L 355.10 44.54 L 355.60 44.45 L 356.10 44.29 L 356.43 44.09 L 356.62 43.77 L 356.68 43.24 L 356.63 42.68 L 356.49 42.33 L 356.22 42.09 L 355.74 41.86 ZM 370.36 43.09 L 369.85 42.74 L 369.62 42.63 L 369.34 42.62 L 369.01 42.70 L 368.63 42.88 L 368.26 43.13 L 368.01 43.38 L 367.86 43.64 L 367.84 43.89 L 367.95 44.50 L 368.13 45.33 L 368.28 46.17 L 368.42 46.83 L 368.54 47.09 L 368.77 47.30 L 369.09 47.45 L 369.51 47.55 L 369.97 47.55 L 370.34 47.49 L 370.63 47.36 L 370.84 47.16 L 371.19 46.57 L 371.59 45.75 L 371.71 45.38 L 371.77 45.06 L 371.78 44.78 L 371.73 44.56 L 371.48 44.13 L 371.01 43.59 ZM 350.02 43.72 L 349.74 43.28 L 349.59 43.12 L 349.38 43.03 L 349.11 43.02 L 348.77 43.09 L 348.45 43.18 L 348.20 43.31 L 348.04 43.47 L 347.96 43.67 L 347.90 44.19 L 347.84 44.89 L 347.87 45.36 L 348.03 45.75 L 348.34 46.08 L 348.77 46.33 L 349.20 46.38 L 349.48 46.27 L 349.73 45.99 L 350.06 45.61 L 350.31 45.28 L 350.49 45.00 L 350.53 44.68 L 350.35 44.24 ZM 342.17 45.56 L 341.82 45.63 L 341.52 45.81 L 341.28 46.11 L 340.97 46.63 L 340.77 47.02 L 340.76 47.39 L 340.99 47.84 L 341.40 48.18 L 341.77 48.20 L 342.20 48.04 L 342.71 47.84 L 343.06 47.63 L 343.21 47.41 L 343.27 47.12 L 343.29 46.69 L 343.26 46.26 L 343.15 45.97 L 342.94 45.77 L 342.57 45.61 ZM 376.27 48.63 L 375.62 48.92 L 375.98 49.56 L 376.70 49.56 L 376.70 48.84 ZM 338.90 49.20 L 338.40 49.78 L 338.68 50.28 L 339.34 50.44 L 339.48 49.72 ZM 350.89 50.58 L 350.71 50.31 L 350.46 50.11 L 350.13 50.00 L 349.76 49.98 L 349.45 50.08 L 349.19 50.27 L 348.98 50.58 L 348.85 50.93 L 348.84 51.24 L 348.93 51.53 L 349.13 51.80 L 349.45 52.06 L 349.70 52.13 L 349.97 52.06 L 350.35 51.94 L 350.67 51.74 L 350.88 51.56 L 351.01 51.31 L 350.99 50.94 ZM 346.69 52.57 L 346.36 52.20 L 346.04 51.92 L 345.74 51.74 L 345.41 51.63 L 345.01 51.60 L 344.52 51.66 L 343.95 51.80 L 343.44 51.97 L 343.06 52.18 L 342.82 52.45 L 342.71 52.75 L 342.65 53.52 L 342.57 54.53 L 342.54 55.56 L 342.57 56.34 L 342.67 56.65 L 342.90 56.93 L 343.25 57.19 L 343.73 57.42 L 344.19 57.54 L 344.58 57.55 L 344.89 57.43 L 345.12 57.20 L 345.59 56.56 L 346.18 55.77 L 346.82 54.99 L 347.29 54.42 L 347.42 54.16 L 347.42 53.84 L 347.30 53.47 L 347.04 53.03 ZM 370.39 52.64 L 369.82 52.27 L 369.31 52.00 L 368.85 51.81 L 368.40 51.75 L 367.88 51.84 L 367.32 52.10 L 366.70 52.52 L 365.96 53.08 L 365.34 53.60 L 364.83 54.09 L 364.43 54.55 L 364.17 55.04 L 364.06 55.66 L 364.11 56.40 L 364.32 57.27 L 364.66 58.15 L 365.05 58.84 L 365.48 59.34 L 365.96 59.66 L 366.54 59.84 L 367.25 59.97 L 368.09 60.05 L 369.07 60.08 L 369.86 60.03 L 370.50 59.88 L 370.98 59.64 L 371.31 59.30 L 371.56 58.85 L 371.83 58.29 L 372.10 57.62 L 372.38 56.84 L 372.56 56.17 L 372.64 55.59 L 372.63 55.09 L 372.53 54.69 L 372.32 54.31 L 372.01 53.92 L 371.57 53.52 L 371.01 53.09 ZM 350.42 57.83 L 350.13 58.14 L 349.73 58.72 L 349.67 58.95 L 349.85 59.22 L 350.15 59.45 L 350.47 59.54 L 350.83 59.52 L 351.21 59.36 L 351.48 59.19 L 351.57 58.97 L 351.56 58.67 L 351.51 58.28 L 351.31 57.98 L 350.85 57.78 ZM 376.77 60.02 L 376.42 60.74 L 376.63 61.38 L 377.28 61.02 L 377.71 60.22 ZM 350.13 61.09 L 350.13 61.95 L 350.63 62.39 L 351.21 61.95 L 350.99 61.30 ZM 342.29 61.59 L 341.93 62.24 L 342.35 62.67 L 343.15 62.67 L 342.93 61.95 ZM 369.51 62.81 L 368.93 63.39 L 369.29 63.89 L 369.71 63.83 L 369.93 63.39 ZM 343.63 64.54 L 343.26 64.33 L 342.87 64.29 L 342.35 64.47 L 341.93 64.83 L 341.79 65.19 L 341.83 65.62 L 341.93 66.20 L 342.13 66.77 L 342.29 67.17 L 342.56 67.43 L 343.07 67.56 L 343.70 67.57 L 344.12 67.42 L 344.44 67.10 L 344.73 66.56 L 344.90 66.05 L 344.81 65.67 L 344.52 65.32 L 344.09 64.91 ZM 351.07 65.44 L 350.69 65.32 L 350.31 65.34 L 349.92 65.49 L 349.33 65.86 L 348.87 66.13 L 348.71 66.27 L 348.63 66.47 L 348.63 66.74 L 348.70 67.06 L 348.87 67.81 L 349.12 68.33 L 349.31 68.51 L 349.58 68.64 L 349.92 68.74 L 350.35 68.80 L 350.71 68.80 L 351.00 68.74 L 351.21 68.62 L 351.35 68.44 L 351.59 67.91 L 351.87 67.20 L 352.04 66.70 L 352.01 66.34 L 351.79 66.04 L 351.43 65.70 ZM 367.25 66.25 L 366.99 66.26 L 366.75 66.36 L 366.56 66.56 L 366.43 66.79 L 366.39 67.03 L 366.46 67.29 L 366.62 67.56 L 366.84 67.84 L 367.07 68.00 L 367.31 68.06 L 367.56 68.00 L 367.77 67.89 L 367.93 67.72 L 368.03 67.47 L 368.06 67.14 L 368.03 66.85 L 367.93 66.61 L 367.77 66.45 L 367.56 66.34 ZM 376.51 66.56 L 376.13 66.56 L 375.81 66.76 L 375.56 66.92 L 375.41 67.14 L 375.40 67.50 L 375.52 67.79 L 375.73 67.94 L 376.34 68.08 L 376.67 68.08 L 376.95 68.02 L 377.18 67.90 L 377.35 67.72 L 377.42 67.42 L 377.35 67.22 L 377.17 67.05 L 376.92 66.84 ZM 339.62 67.36 L 338.98 67.92 L 339.40 68.86 L 340.42 68.44 L 340.56 67.42 Z' style='fill-rule: nonzero; fill: #FF0000; stroke-width: 0.75; stroke: none;' />
<path d='M 405.57 71.23 L 403.19 70.96 L 400.94 70.52 L 398.84 69.91 L 397.85 69.53 L 396.92 69.08 L 396.04 68.58 L 395.21 68.01 L 394.44 67.38 L 393.72 66.69 L 393.05 65.94 L 392.44 65.13 L 391.89 64.24 L 391.41 63.27 L 391.01 62.23 L 390.68 61.11 L 390.42 59.91 L 390.24 58.63 L 390.13 57.27 L 390.09 55.83 L 390.09 46.47 L 384.41 46.47 L 383.66 46.33 L 383.03 45.91 L 382.61 45.27 L 382.47 44.53 L 382.47 35.81 L 382.61 35.08 L 383.03 34.45 L 383.66 34.02 L 384.41 33.88 L 390.09 33.88 L 390.09 22.14 L 390.24 21.40 L 390.67 20.77 L 391.30 20.33 L 392.05 20.19 L 404.64 20.19 L 405.02 20.22 L 405.38 20.33 L 405.70 20.51 L 406.00 20.77 L 406.43 21.40 L 406.58 22.14 L 406.58 33.88 L 415.66 33.88 L 416.04 33.91 L 416.39 34.02 L 416.72 34.20 L 417.02 34.45 L 417.45 35.08 L 417.59 35.81 L 417.59 44.53 L 417.45 45.27 L 417.02 45.91 L 416.39 46.33 L 415.66 46.47 L 406.58 46.47 L 406.58 54.39 L 406.62 55.18 L 406.76 55.88 L 407.00 56.50 L 407.33 57.03 L 407.76 57.46 L 408.30 57.76 L 408.94 57.94 L 409.69 58.00 L 416.23 58.00 L 416.62 58.04 L 416.97 58.15 L 417.30 58.33 L 417.59 58.58 L 417.85 58.88 L 418.03 59.20 L 418.14 59.55 L 418.17 59.94 L 418.17 69.38 L 418.03 70.11 L 417.59 70.74 L 417.30 70.99 L 416.97 71.17 L 416.62 71.28 L 416.23 71.31 L 408.09 71.31 ZM 401.52 22.10 L 401.25 21.99 L 401.00 21.96 L 400.78 22.00 L 400.36 22.21 L 399.89 22.56 L 399.41 23.04 L 399.12 23.44 L 399.07 23.64 L 399.07 23.89 L 399.12 24.18 L 399.23 24.52 L 399.55 25.09 L 399.89 25.38 L 400.36 25.47 L 401.05 25.45 L 401.65 25.33 L 402.01 25.13 L 402.24 24.76 L 402.41 24.16 L 402.55 23.52 L 402.55 23.05 L 402.34 22.65 L 401.83 22.28 ZM 396.44 24.30 L 395.56 24.44 L 395.86 25.24 L 396.58 25.74 L 397.16 24.94 ZM 401.47 26.67 L 401.05 27.03 L 400.83 27.69 L 401.55 27.75 L 401.69 27.25 ZM 395.68 28.29 L 395.51 28.09 L 395.28 27.96 L 394.98 27.89 L 394.66 27.85 L 394.41 27.86 L 394.20 27.97 L 393.98 28.25 L 393.89 28.57 L 393.90 28.87 L 394.00 29.15 L 394.20 29.41 L 394.47 29.60 L 394.70 29.59 L 395.28 29.34 L 395.69 28.96 L 395.78 28.55 ZM 397.41 32.60 L 396.67 32.24 L 396.02 31.93 L 395.45 31.67 L 394.92 31.56 L 394.34 31.68 L 393.71 32.05 L 393.05 32.66 L 392.48 33.32 L 392.14 33.94 L 392.03 34.52 L 392.14 35.06 L 392.40 35.63 L 392.73 36.28 L 393.11 37.01 L 393.55 37.83 L 393.97 38.60 L 394.36 39.24 L 394.73 39.77 L 395.06 40.17 L 395.46 40.46 L 396.00 40.61 L 396.69 40.65 L 397.51 40.56 L 398.33 40.39 L 398.99 40.14 L 399.48 39.82 L 399.81 39.42 L 400.04 38.93 L 400.24 38.32 L 400.40 37.59 L 400.53 36.75 L 400.63 35.98 L 400.62 35.34 L 400.50 34.82 L 400.28 34.42 L 399.95 34.08 L 399.50 33.73 L 398.93 33.37 L 398.23 33.02 ZM 388.68 37.29 L 388.47 37.08 L 388.16 36.98 L 387.72 36.89 L 387.28 36.91 L 386.97 36.97 L 386.73 37.15 L 386.50 37.55 L 386.34 38.01 L 386.28 38.38 L 386.39 38.71 L 386.72 39.06 L 387.17 39.40 L 387.53 39.56 L 387.92 39.52 L 388.44 39.27 L 388.82 38.92 L 388.97 38.59 L 388.95 38.20 L 388.80 37.69 ZM 406.50 41.22 L 406.31 40.93 L 406.03 40.71 L 405.64 40.56 L 405.06 40.42 L 404.59 40.25 L 404.40 40.21 L 404.21 40.27 L 404.02 40.44 L 403.84 40.72 L 403.54 41.31 L 403.48 41.80 L 403.67 42.26 L 404.06 42.80 L 404.53 43.23 L 404.95 43.38 L 405.44 43.31 L 406.08 43.09 L 406.46 42.84 L 406.61 42.52 L 406.62 42.10 L 406.58 41.58 ZM 390.59 40.33 L 390.39 40.36 L 390.17 40.56 L 390.01 40.88 L 389.95 41.18 L 390.01 41.46 L 390.17 41.72 L 390.44 41.93 L 390.67 41.99 L 390.93 41.92 L 391.25 41.80 L 391.44 41.70 L 391.58 41.53 L 391.66 41.30 L 391.69 41.00 L 391.65 40.80 L 391.54 40.64 L 391.36 40.51 L 391.11 40.42 ZM 410.33 41.44 L 410.55 42.16 L 411.26 42.30 L 411.41 41.66 L 411.05 41.28 ZM 387.44 43.02 L 387.22 43.81 L 387.58 44.24 L 388.30 44.09 L 388.16 43.38 ZM 400.39 43.67 L 399.89 44.24 L 400.31 44.75 L 400.97 44.67 L 401.25 43.95 ZM 396.96 45.06 L 396.72 44.81 L 396.38 44.69 L 395.92 44.60 L 395.27 44.51 L 394.77 44.39 L 394.56 44.36 L 394.36 44.44 L 394.17 44.61 L 393.98 44.89 L 393.84 45.19 L 393.78 45.46 L 393.79 45.69 L 393.87 45.89 L 394.19 46.31 L 394.62 46.83 L 395.03 47.13 L 395.39 47.16 L 395.76 47.01 L 396.22 46.77 L 396.65 46.55 L 396.94 46.33 L 397.08 46.02 L 397.08 45.53 ZM 394.61 49.09 L 394.41 48.78 L 394.11 48.62 L 393.62 48.56 L 393.16 48.62 L 392.79 48.80 L 392.51 49.09 L 392.33 49.50 L 392.20 50.01 L 392.25 50.38 L 392.47 50.68 L 392.83 51.02 L 393.23 51.20 L 393.62 51.27 L 394.02 51.20 L 394.42 51.02 L 394.68 50.71 L 394.83 50.36 L 394.86 49.98 L 394.78 49.56 ZM 401.22 49.74 L 400.89 49.75 L 400.57 49.90 L 400.17 50.14 L 399.83 50.43 L 399.64 50.69 L 399.59 50.99 L 399.67 51.38 L 399.87 51.95 L 400.03 52.38 L 400.13 52.53 L 400.30 52.65 L 400.53 52.71 L 400.83 52.74 L 401.15 52.72 L 401.41 52.66 L 401.60 52.56 L 401.72 52.42 L 401.91 52.01 L 402.12 51.44 L 402.24 50.93 L 402.19 50.58 L 401.97 50.27 L 401.61 49.92 ZM 401.93 55.10 L 401.25 54.96 L 400.68 55.00 L 400.22 55.22 L 399.78 55.58 L 399.29 56.04 L 398.75 56.60 L 398.16 57.27 L 397.63 57.89 L 397.21 58.46 L 396.88 58.97 L 396.64 59.44 L 396.54 59.90 L 396.59 60.44 L 396.80 61.05 L 397.16 61.74 L 397.65 62.56 L 398.12 63.26 L 398.58 63.81 L 399.02 64.22 L 399.52 64.49 L 400.16 64.63 L 400.93 64.62 L 401.83 64.47 L 402.74 64.25 L 403.45 63.95 L 403.96 63.57 L 404.28 63.11 L 404.48 62.54 L 404.66 61.84 L 404.81 61.02 L 404.92 60.08 L 405.00 59.17 L 405.00 58.38 L 404.94 57.72 L 404.81 57.17 L 404.56 56.69 L 404.13 56.24 L 403.51 55.81 L 402.70 55.41 ZM 392.76 59.08 L 392.41 59.72 L 393.41 59.58 L 393.41 59.00 ZM 413.72 60.66 L 413.20 61.09 L 413.28 61.81 L 414.08 61.74 L 414.22 61.09 ZM 411.32 62.23 L 411.00 61.84 L 410.81 61.74 L 410.57 61.68 L 410.26 61.65 L 409.89 61.67 L 409.53 61.72 L 409.25 61.81 L 409.03 61.93 L 408.89 62.09 L 408.69 62.54 L 408.53 63.17 L 408.33 63.97 L 408.17 64.59 L 408.16 64.85 L 408.26 65.10 L 408.48 65.33 L 408.81 65.55 L 409.19 65.76 L 409.53 65.88 L 409.84 65.91 L 410.11 65.84 L 410.66 65.52 L 411.33 64.97 L 411.76 64.49 L 411.91 64.05 L 411.84 63.54 L 411.62 62.89 ZM 405.60 66.22 L 405.42 66.06 L 405.14 65.97 L 404.72 65.84 L 404.45 65.82 L 404.21 65.88 L 404.01 66.03 L 403.84 66.27 L 403.68 66.58 L 403.63 66.87 L 403.68 67.13 L 403.84 67.36 L 404.06 67.54 L 404.28 67.53 L 404.86 67.28 L 405.50 67.08 L 405.70 66.91 L 405.72 66.56 ZM 411.55 68.66 L 411.76 69.44 L 412.42 69.38 L 412.92 68.86 L 412.27 68.44 Z' style='fill-rule: nonzero; fill: #FF0000; stroke-width: 0.75; stroke: none;' />
<image width='71.31' height='71.31' x='419.98' y='7.13' preserveAspectRatio='none' xlink:href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAgAElEQVR4nOy9d5Bc153v97mhb+fJOQEzGMRBJkEwgQQBEqQYtFQiKUoraaWVdrdc5T9c5a16W2W71uV9dr3949V7z17vPmllSrsiJQJMIAGCRCIiB4M8gzCYnGcwOU933+Q/bujbPT2I8voP+5CN6b733BO/55fPuQL3mRYWFpbPzs5uBAxJku738YxJluWU35qmLbr2/6elx0XTNMAaR+e7NznPZLr3oEnX9fTfUk5Ozo1AINB6r2WYsOa+Z3l2dnbP1NTU/yGKIqIoutcFQVj0PdO1u/02TXPRvUzJmz/TPed6ellLXffWnf43/d69pPvJ+8dOd6vXOwamaWbMn349PY9hGCn3NE0TFEX5H4D/9V7bKUDzg5AZ0TRN2TRNDMNAEISUD9w72BYVLIpLAgoWA2SpdCfg3+n6nRbRvZTpbbt3PNKB/P90ultd6e3KlD8dnOkLynvf+RiGIXKf6UEAaIiiiCAIiKKIJEl3BOD9gmEpyvP/tbQU9b0bRfZeu1P+pcCZfj0TFTRNE1EUMQzD/dgcMZUv30O6bwA6gHPA5wXj/VLATODy/nY6eqd0ryzyXqhCphV+L88+bPpjLbK7jYGX4qUDK9M1z5M4P53rDvd72PY/sKTvpXqOMnI3mdD57m3w3RqeDoQ7yXAPk7xgzzSg97IYnHxLJbfEOyyapcCevjDvtQ13WjzplHLpPKkANE0TSZLQdd0Vm9KVkntNDwRAL3icSclEAe/GijMBM/36ncq513beC+W6Wx33Wu8d8wkCZADH/dZ3NyXrbuUtRdmXymOaIAiplM9ZkOly5P2mBwZgusyXfs3bIe9f0zQtSpDSYAFBuPugw+LVuhQFsZKTJ0nZ0stc6tqdWFl6e+6WUiZ2iXqX6ksmeS69zMV1ORTLyXM3S0HKukhJVr3JsgQ7s5P9XjnZUumhWLDzNxPF8jZ6UX77mun57s1zL/Wms8v01Wv9zrzCveC5E1v13vNOlt0S+3mnrPR2Zp7Uu03YUtQ/E6Vb+rpA6uXMsloShMn8S4s4FqhFUcQ0jPuet6XSH83au5gKLkWVbCrgfNyOL12udf/u7Hmpa0vJT/cKgrtfy8T2MstwqUAW7H7fm8x2t/Y4171cZqn+po6Js2DuRCmFZB57dT2oaORNDwXAO6/mO8uB6XkFwXrCXCJfJuqVsTxngJJMwnPLoZbe69bgusBAwMzAsu6cMvc/U/MWL47Mz9+rbOe95/RBFEWXTS41lt4F7QDLEoNEV9G4l/TgtM9KDyUDOskdnHuQ4dK/L7pnfxAeUON1896rYJ9hoZjC4sddYHsvpRmYHZFiibxLtyFzvrtZC1IAt6hbHlHnnuXN1PuZ6spYz/+bLDiTQnKXB1KeTb/nTuBSZdnETRRE64uHDTpjlKpILF4XqSzFetYBvVPHIiOuO8mOALF4HLysKRP1uSv1zjAud1KGllLAHBacrii4/bcy3VW8ccfmXsH4AOmhzDCLri9xP51iLn5ecP53MizKmzJpguc5TxleOSa5IO6sQYpi6srPlCe1vXcWKcz0vty1vKXT4kVtJv94Fleq5mv/TuvzIm3aXnyLqDjeBZzMk9IuO49wl7G4l/TQhuj7zScsnpoUCpU6GJk7mElQX1rAzqzpZjJvLGXaSa8zM/CciUmtI/l7cZszpTuPqU3XluhrSr/vWv5iGTVjv60bqdcdZD6sAMgfUQt20l1XegawLf2sV0BOTuCdjJ/3oiU715ekjMLiZZJs/p2p/9J1O2w/XR6w//FQHZc8kQokZ0wWm4S8LVhcz1KeHafMO8qIXrFiiXxOQ+7FU5Se7v+J9AaQHOjMgMjwjJA5b7KDjlzp5E8FSSbQLH3d+i1JEj6fL6XdopgGCA+HF5aC2gOv+iUeXLQgUy6k3Ut+T/+4oLtXVuhh60tRdMhEsTPMcVpb7yc9EABTJy0z6IQMVMT7nCzLbqCkKIrIsuyuoDv1ZfHAZ77vLUiSJDRNY3R0NE1j9ywcW6ZxKS0moiQRCATcdsmyjN/v99SfvgBSQZRJtMg4Hkut0vT+3CG5RTl2BM9z3jKSDNhtZUpbvPlS6s5IdR8+PTQFXKSxLqLSi6mjJMlMTk4yPDzsBjLMzc2lRFi4T98FcOlle2mINYgiPp+PkydPcujQFwhCMnhicSuTySf7iMfiXLx4ibm5ORS/wsLCAt09PXY7vc8KKaV45b57ERWEDGDJ9Dsd9Mn7qWWIoqdFHqooCELK9CyibWlsO+1myvV0zvGguHwgALoymKdh3sY4bTeTo5Cs0KYmp06eoqOjE7/fT29vDye+OuHGlVmPZHLxsWiw079765JlGUVRaG/v4PLlK6xbuxa/35+M5l1i1HyyjCRLfHXiBEeOHrVi3QSRTz/9jKNHjyIIAqIoeSjY4jLuRJ2XCl27N/l1acooiiI+WV4MnntQ1qxs5h1/L5WcUrxR0veaHkBqFD0NvzNFypTL7/fT09PN9MwsdXV1qKrKxYuXyc3NIxwKYZrpnUgOgqIoyBkG2KvRWj54a5JnZmZoa2vj448/ZnpmhmhW1G6bzYbNxRTH7gDXr13n/PnzvPTSi2RnZ/Phhx/R29vHczt3oiiKPdgeyoQtN7pcVUBRFPx+/yKKey9G6Xthu25eUcTv9xOPxxkZHUNRFAKBgFuvz+fD5/MhyzKBQMCVhZ18TvLeu59kmtY/D6KE3LcW7FZxT6vDS52s34ahc/PmLZYvX05+fh4XL11C0wy2PbYN3XWHLS5DEATa2trx+/2UlZW6AFjKLOLz+ejq6uL9998nKzubJx9/gkAgYMetLaY+YFHMhYUFjh07zsmTp1i5cgUbN2zgww8/oq2tjR+8/X0qKitc007KiveU5fP5EEWR27eHmZmZpqSkhEgk4rZV13UXHKZpoGm6O/Gqqqa5ybwRMeAsSIf7KIqCbug0Xm3kxo1m1tatxTB0bg8NsWLFCrKysxkbG0OSREBgaHCIrOwsSkpK6OnpYWxsjNVrVqPICi0tLSiKQmmpM75myjSntiWNCGQGwF3Tg5thhGS1jtieCrg0UJig+BUGBweZmZ5h167nmJ+fo/FqI08//TShUBBN0xAEEUXxYYI7UYIgsLCwwJUrV1m5spbKykokydrllYnsO3WPj48jSwpvfO8NamqqAYtNKIqCiYmaUFOeE0URRbEmoqSkmG++9k2OHD3GjRs3efmVlyktKwVgcnLSpSbpEyHLPlRV5eTJU1y/foOxsTG+8Y0X2br1EeLxGIODg1RWVjI9PU1LayvLly1j2bJltLW1YRgG1dVWOyVJQpIkTMDQDQxdA4+X2qf4EASRnu4ezn5dz9zsHKvXrKKnu5uvjn3F8MgwW7ZsJhQM0dbehq7rRCJROtrb2f74dtatXcs77/yG6upq1q9fz8lTp/jyyy/YvWsXlVWVqInEkgb6Jc0xD5Aewg7oFWi9on9qMjFdIV0URTo7u8jKyqKrq4uLFy9RWVlJXl4un332GRUVFWzYsIHhkREAsrKi9Pf3Mzo6xtq1a9i96zlycnMZGBjg0qXLrF9fR1VVlQ3cpJDs8/kYGBzg7JmzfOPll6ipqWZkZIS+vj5WrFjB8PAIk5MTbNy40aVkjlx2/vx5AP78z39G/8AgRw4fIZqVxZkzZygrLWVmZoYDBz7jW9/6FsuWLSORSLh9lUQRTdP45JP9jIyMuYBta+vg3LkGZFlmYmKSmhXVjI9P0Nbayp49LzA9PcP7779POBzi5z//Ofn5+cRiMc6fP097ewd1dXVs3rwJXdcxDAOfz8f09DQnTpyktbWNNWvWsGPH05w8eQoB2LxlM18cOsTVq42sXbsWVdWYnZkhGs0hv6AQTPhk/6fUrFjB008/xYEDn3Pq9Gm2PbqVx594Al3TMI3FIRmpQQqL7t43guChAOix8gser4X71aaI9nXZ52NmZobGpmtoqsatlhYUn8L27dv54osvaWxsYseOZ4gnVI4eOUooFKK6upqbN29SUlrC5s2bCIVCXLx4kfr6c1SUVxAKBq3qPeBTFIVYLMaXX3zJylWrKC8v5/NDX9DR3sH09BQ+RUEQJLY9sgVZll0qK0kSly5f5ujRY7zxxhsMDQ3xzjvvkJ2djezzUVhQyOTkJHv37WPZsmVkZ2cTi8UsKmVPiiTLXDx/nonJSX760x+jaxpHjx2nsfEq+fkF9PcPMDs3y+TkFJFImOLiEmZn5/jyyy8pLS2jvaOdhoYG6tav59Dnh9B1nampafyKgqL4CAQC1NTU0NR4jaPHjhONRHj9T75JzYoaDhw4iK7rfPObr/LxR/tZuWo1L7ywm5ZbLfT29PDss89y6fIVVE3l8pWryJJI5YYNfHHoS2RZZs2qVSQSCdscJmGIJqbNXZaieubib/dNBh/QF+zU5WW+TlMcirdYvrp27TrhYIi6bXV0dXVRWVFJU1MTQ7eHqaurQ9NUjh09xvT0DDk5eVy7dh3D0Hn66addkPX29jE3v8D2xx+jqLgYVU2AabXBAd/HH3/CzeYWVq9ayR/+sJeJiQnq6tZhGAbZ2dk8+eQT1NQs97BvgXMNDRw+fAS/P0Bz8y0aGxvJy83lxT0vcur0aaampzl1+hTBQABN0/j0wAGe2P44K1bUoKpJVj58e5hQKMjI6CiNjU20tLaye/duqqur2bt3H5tLNzEyMoZpGqiqSnNzMzt3Psvo6CgLC/M0Nl3nypVG1q1by7PPPMOhL74EQeSrr07wyCOP0NnZxfmGC2zbto0dzzxtiSumSSKhMjo6wr/+y+8IhSO88cZ3CIfDnG+4wM7nniM/P4/6cw2Ul5VRXlZGe0cnN5ub2bhhAz6fj7Nnz1JcUoyu6yQSCZeTOFQvk0H6QQLXFmHpfh+YnJz8xezszD+JouTuirN2yFlC7iKzCBYwJicnOXz4KC/ueYHpmWlu3WqlrKyUT/bvp6iwCL8SIBaLsWbNas5fuIAkSizEFgiHI5SXl/H4448RjUaYm5vj6tVGJiYn+d53v4ssi+i6zZampvngo4/ANFm5ciUDAwMUFRVz9cpVTEzWrl3L88/vQpZlFzQ+n4/TZ85w9MhRXnvtNRRFob6+nvXr61i9eg3Z2VnU19czNTXF+vXriUaj9Pb0IskSlZWVBINBF8iyLDM0NMShQ4cYHZsgNzeH53Y+Q23tShJqgqnJKXJycpiamsLvDzA5OcHMzCxr16ymrb2dK1cauXT5Ert2PccLzz9PLBbjX377OwYGBwiFQmRnZaMbOi+9tIfq6mp0XUdVVWRJYmZ2jksXLyEIAo8/sZ1gMEAsFsc0TVdDnpubJxqNEPD7mZiYxDRNcnNzGB0bY2joNiXFxUSzovT09OD3+ykoKHBPU7AAaLrBCYZhYOg6umFgGDqappGTk/s3OTk597wxHR6AAmYU+m150IvmVMOzxLVr1yktLSU7J5vz5y+wfsN6DEMnK5KFrunEzBi7dj1Hdc0yBFEgJzubnNxcerp7MIHc3FxGRkY4ffo009Mz1NaucNmfLMtMTU3x7nvvIks+3nzzDbKzsy3ZThAoLy/DMHRWrVoFgKom7EgSAcMwKCwo4M233mTN6tUArFmzClm2tFJN03jyySdT+puTkwOArmsYRjL8Stc1ysrK+N73vsf09DQFBQX4/X40TUUURAoLC9F1nYKCAjBNotGIW+b4+DhXr17hxT172LnzWXRdx+9XePXVlzn4+ee0tbWzauVKdu1+jmg0SiIRd5UETdeJRiPsfn6X9VtViccTCIKALEmoqookSeTl5aBpOguxGJFIGBOYX1ggGo2Qm5uLpmlomkpxcbHdP2unm2cHiPVrkRkso+v6ntIDseCMCnjmMDn8fj/9/f0M3x5m9/O7SCRU6urqKCosAEHg9W/9CdNT05SWlVBQWICuauzc+Yz7/PLlVYA1GJWVFTzx5BPMTs+yevVKBAF0w0QEdE1j44aNbNy4kaysLFRVRRRFNMNg1aqVgFdrTtrrdF1ntQ08VVUtQ7EguuYQQRDQVBWWkIOc5KhkqqoSiYSJRqMYhm5TWuteIpFAEMAwdHe8fD6Fa9dv8Ps/7KWysoInn3wS07S2Pc7OzlHf0EBvby/f+MZLPPPMDkzTJB6PJ+u1O6JpmqU8pLVLN3TXTpdIGC47VR3WCmiajqYlt1VKkohpeoiNW2i6HyVtwu/fDv0AdkBRTGuQmKLpepNDYZqbb7G8ejn5+fnE43FKy4rRdQNMk2XLqux8Oom4pVEaiTiZ0CwIAitra608huFqv5qmkZ2Tw9NPP41hmi6F03XLZeaV0TKZC7z3TdNAM1O9PKYjZCZz4ZV6U9tqoqk228rgovJGMcmSzML8PIcPHyYei7Pj6R0oig/DNJifm+fjjz9maOg25RUVbN68GYB4PJ7RgyGQGkDg/e1cW+S1chrk+W56/qYrHxZ4k489vAT4sOFYS06K1Tif7KO/fwBRFKmrW+cKt5qmu4PorOZ7syOZHoriaNjJUCFVVVM2PKXOvg0ibz2eUCgvMoS0WDfr5yJGlFK2F47pVabfcb4ZNiiKCgtYVlXF5s0bXa386NFjiKLAtm2PMjk1SSgUTJp8UgDiNEpIAdNil3xmF1yKcTnzk8lBWATr1PvGA5DAB5cB7xamY1rsTfH5qKtbh9+voKqp9rqMvuQ7ppR17qnLAx77lokFJC9onHqXTKanFnPJ2u706H0lXdeQZJlvfetbyLLsKnDNzc2Mjo7y1FNPcubMWbZt24Ysy8RjsaSC54lOcRQDJy1pNkmhZkbGe6kE0UwDZ8oD7sc0zaTf/z7TQ3hC7l6jYejk5edZspjNLlOeWlREOmtzLjk2xgyDkQEhAqmT4AV90g3nsBtIX0xLgcl2I2dq0p1ow+KueVtqGvgVxW6GNZnnz19gdm6OU6fOUFJcxLp1a1MM3m4bvUZhb+UpVD65CL2sOR1oiyR7z7UUM4zz3Va8HEr8gPi7/2AE7wMpg5A2iU44gmkaljblznbyjzMSgv18yniaqUW6A+etZCmXkCcgIHPoklWiQDIyJT2sSRAEBNvElCzHetj9TvI5BNLKIK08bxuTGBEQ0A3d1jgtcaKmpgZd06iqrGDPiy8AtlFYyHyen+lZEelynxd81n0zbdisUU0Zby81zLg4zdTykmX+2xiiM8kaqeKU9cVhZT6fhICApltamigKyLKEJFlsx9B1VE3LTOFc6sWS3VssP959HBxNU5IkTMNA0/UUIiUIuJ6SVPeTh/Rl0DCsHB6ymLHu5G2vLGkYJqap8thj29i0aSOhUAjDMFJElyQFy6BoePrmJMe/nTQwJ3N6I9CdVe9gTvCCLH2hp1VqGncRbe6Q7l8GdOvPUKGQyvLARBQkRkfH8MkyBYWFACTiccbHJxgfG+f28G1EBDZt3kQwFMLQDQ8FSxadmYOlk/5krsX5Tdf2ByayJKEZOkePH6eooJBNmzZYpgjb9CLLPk6dOYMsiTy+fbtrpnA04hRZEyxqKYkZQ5IsecuihI4iZpHMJaJNBJNg0ArOcExBizdJJdeAT1HANEl4ImkA11HQ1NSEJEmsWLECw15oLhXzjGFGMKf0YzFgF+e6v/TAMqBppv1YAgyyT6anp4fGxkYqKqoQJZG52RlmZ+cQBYGs7CxW1tYSCAbdwc9sgkkvm2Q+M23oPLKa9axHO7cnVJQkzn1dz0cffsSrr77C5s2bAGtyfD4ft1paOfzlYV55+RsIggimlnGCnGQYJvML8yzMzzO/sMD4+DiTk9OMjAyzfHkVa1avJh6Lk5uX6wJqEdFwKI5hoBlJ6iM4aE8bF0EQ8Pv9XLt+ne6uLp566ilCoZB9lrSEKAh89dVX7N//KTt27GD1qlUkDD0px9l1mt6Fa5qpdbpt9MiD7n+LKN99I/Ehd8UlaaF3jBxKY5qWja2ubh3BYJC+/n4kUSI/v4BNmzbZrp8sxsfHGRsbJT8/31O0d1gEtwIv+0JI1n2nYUinHj6fj77+fo5/9RWRSJQV1dWAZRbxKwrjExN89NFHbN68ie3bt7vmnUxJlmWmpqc4euQ4t4eH0XSN6elpopEw0XCIcCTK5OQk/9c7v0GSJH76058QDAbR1cVGY0eW8kpzSaBY973KTzAYoL29nd/85rfk5eWyY8cOVwHz+XycOnWGfR98yPJlyy0bqX2aabrO4rDlpWx+Dkgdbds0TTDSJHIr833LgA+2KSnDN3B1ipRkGAay7GP9+vW8+sorrFy5ktHRUUpKSohmZXF7+Db/9E//lfr6enw+n2vbSxd9UwZEANNT9/0sO1mWSSQSHDt2nNHRMTZuWM+K2lrL9aVY+z7e37uPUCjIi3v2ZBT60/unKAorapbz1JPbWVm7gmg4xNvff4uf/vSnvPXWm4yNTXDj+nWqq6sJ+AMYmp7Sw6Sy4EAvI3VxO2sYJoFAgNHRUX7/+z+gaxqvvvoq4XAYVVPx+/20t3fw2YED5Ofl853vfJviokKbRafKikkfr/Mx8CqEzri7SopjevG0z6vs3G96sD0hng7cy/QbhiUAJxJxTp86jc/nIxwOMzc3x/79nzEwMEh5eQWCIGKYJoIgIoiWapmxBtNSZJwwc1mW3e/OoYmKoriRyYqipBwtfP7iRS5cvEhFeSnP7HiaREIFAWZmZnnv9+9z8cJ5Nm/aZE2oqqbVndoi3dBRfApbtm5l8+YtLCwsULe+jqKiYgRR4szZrzl16iRbt25l965dCKKIbhhJ3uFOtJEiY3lNSF7QGKYTcrbA3vf3Mj4+zs9+9lM2bthAIpFAFCUSiThHjx5jfn6Bt958g1WrVjI/P58KGAdIhmHF/pnJRW6m53GVqrTnveOxpGJw5/TQu+LSVffMeQT8ikJnZydT01M89eQTCILAsWPHabnVyrq166irq7Mn04csSRlde3Zp7h6H6elp4vE4sVicyclJFhYWUFWLAnT39DA4OIhpmly6fJnh4WF8Ph+3bw9z+PAR8vNy+cmPf4Q/GGT/p/vRVI2Tp05x43oTb7/1Flu2bEmhEF47RYp5wkwa5zu7uhgYHGTjho0AdHR2cfDg59SuWMHrr79OKBREEkVkWbInPY3Fmqa79dPv9xMIBt1oo2AwaC0yScLE5JNP9tPb18vPf/5zKioq6OzsRNN0AoEATY1NXLt2jddefYW8/Dyampo81gQP2CAjpU3Pg5cyksSaaSbFBvNBHME8jAzorFDnp/e7956AS9kaG5tYtmwZhUVFNDQ00NjYREVFBbUra5mamiIYDNLT28PZs2fZ+shWVq1clUaBrNCi2VnLSHuzuZlwKAiCwNzsLJIk8uSTT1JeUcH7f3ifx594nJu3bvHV8eP86Q9/QGlpKYe++JL52Vn+6q/+An8gyPTUFDueforLV65w5colfvLjH7F+w0bqGxooLy2lrKzMDUla5Bmx+ynak3vp0iUqKyopLi5mamqazz77jMlJK4wrJzeHeDxOS2srBQUFFOTloesGpmD70U0Tv81Wm65do6qyiqGhIWprayjIL+D06dMoisJjjz3GyZMnaTh/gbff/j4FBfn84z/+E+MTE/zFL36OLIscPnqUbdu2UVe3jl/96p9ZtqyKFStWuFq11X6X1KX0xQs8wfPboXJenSSDIvVvZwd01kKaGpLy3ZZtCQQUent7GR4e5s0336Svt4+zZ7/G5/MxNz/L+Qvn6evr4dmdO9n7/l76BwZYv2F90qRhF+n3+xkbG2Pfvg+Zn59ndmaGuZlpdNNkeHiYstJSEgmVve/vxacodPf00nLrFmVlZSxfXs3lK1dpb2vhT3/4A4KhCO+8846l5Uo+Dn5+iD0v7KamdiV/2LuP5ps3+fGP/jTlLQBLHcTtUxR6enro7+vnzTffAOCLL7+kpaWVvLxcbt1q4erVRjo7u2hsvMoPfvA2pSXF6Asxe5INfLb8+eFHH3Hx4kWKCosJhoIUFhXydX0Dhw8f5vnndxMKhTh58hTr1q3j6tVGjh45Rl9fP+vq1hIIBvjkk0/BhI2bNvLJ/k/p6+9j27ZHLa4iAKZAQk1Y5q4UpcMzm2ZyVlPue8wuqUqfBcQH2Zb5YABcFI3hMUBjW/3ti6IoIgCXL1+mqsoKrfr4k08wgXh8AV03iMcTrFu7lpMnTjIyMsKLe15k+bLlFvXzlDO/EOPjTz4hHA7xyCNbuHTxMkXFxfT19bFsWRVDQ7epP3eO8fExIpEoLbduEQqFmJ2dZd8HH9HR0U5FZSUT07PsP/Br5mdnudp4jRs3b6AmYnR0dPN1/XnaWlt5/PHHqKioQNctL0UsFkdRfG7snzMCVrsWOP7VCaprllNQUMDBg4c4fvw4NdXVRKJZBAIBBgcHOXbsKMuXV+OTfVbEjG0xEO1DIQ8d+oKJ8UleevFFGhousHrNWgbtAFdF8dPV1c25+nOsXr2a3Lw8Ll64gM/no7i4iGVVyzjw2ec0Nl4lOzuHAwc+p6y0hD0v7KG7p4fpmRnm5ma5ceMGNTUrKC0twZE11UTCNSy6hMX0EpFU0uelel4FRBTF+5YBH4IFC/ckciqKj+bmWwwMDPL663/Cia++QvZZHpD1deupqKzkwMEDtLS0omkaWVlZdHS0U1CQx7Zt29B1HcGW+77++msmJyb4y7/4SzRdo7S0jImJcYqLC1m7dh1Hjx7Dp8isr/smYLH+kydP0tnZRUdHB7Oz8xjGELGFBR5/7FFm5+bp6upi544dBEMhuru6WbOqFgydYDBgy2QSExOzXL9+nS1bNhMOhz2U0FKEmq41MT09xbe/9Tpnzpzh3Ll68nJzeXTbI8iSzFcnTnL79hBVlRUYhk53d7e9S09wqV9HVyeN1xr51uvfYvOmTUQiEc41nMc0TcrLSikuLiYSjjAzPUV7eztCZxevvvoq0WiYjz76mKZr1ygtKeHtt7/P9MwMg4ODqAmVjs4ORoZH+Nd//Zym8LkAACAASURBVB3T09OIokB5eQWSJHOruRmfolBeXm67S5OekFQ7g/Ub555HRkz5/gDpvnn2+Pj4L2ZnnJB8EdENyxcs7dXxfQKiJGGaBp9+eoDi4iKe2bGDnt5eIpEIExMTlJSUEAoGabp2jVgsRlVlFYNDg8zOzrJ6zWqKCotsAFrmE2d74Zo1azENA0mS0XTV9c0KtrzpNTzPzc0xMzNDw/kLHDl6jKeffJxXX32ZUChiRQ4n4oRCYddDAgKjoyOYpkl2dg6YJqqmMTMzTVY0K2VjvInlbZiYmEDTVEpKSuno6MAJao1mRQmHQ1y5coVAIEhJcTGqqhLNyiIYCGDYQpVTxtDQILUrV+JXFObnF2htbUEQRIqLi8nOziIYDNLe1s6NmzepqKigrq4OE4OhwSEUxU9+fj6yLCFLMq1tbZw6eQoTk0Ag6O6nrqqqIhyOIEoC5+q/xu8PsmXLFhJODKYkIdgWA9MwQNcx7N14DhBNw8QwzZQ3JamqSlFR0b/Ly8v73/5NACjYb0qSRBuEtvPejYwQBERBQDcMpqamyM3JQbZNJSYmkmgdGGQJ334EBAzTsE4+FQQ0TbXv47IHWZYRRNGNXMZm/Y6T3gGeYZ/ibpomgWCQ+YV5/s9//CVDQ4P8xc9/Rm3tSuLxuNtmQ7ejhu1ABud4C0cBct4K5RXivQqJMw7xRAJFUazTVE3TjVBWFAXTnjAB0HTNcu25Hi3TNRclEnEM3bBO81IUqz+6jmaH/0uSZGnRpkk8FsfERPFZJzUk1IS7nVKSRJe1myRPAtNUjYQdU+nIdYIggE/GFET0mRm0yUnURBwUP76sLPxZWdaW01jM6pNN8ax9IQaGaaCqCYoLi/5dXkHBfQHwgUPyU/2HJpYul7RjAa5Nr7i4CF030A0dI2EFo2qolvYnwIIjjAukmF9S1RoBTdfBqwg4UoBDkRz7muONsZWY+nMNtLe18eijW6msqkKzfaa6CRi6227Hwe/stHPrNwy0NAHby3B0TUOz63XCprwre2FhwWuvSjI30/0HwzCIx2IWwAUbpPPJ16s6WXVdx2qe6ZrgFvRYijZrgh30aykahmFg2KDxLhxBEEAUMWQZY2IcrbEJva2N+Pg48wsLzBkG88EgUkUFuXV1FK9aRSASITE3Z29ZMDAxXe+K8QAE7Y9zQKWNSHvsUkLRBcEJeXcoI4sRLHjmwnXlOQVgD+pSlsFMPlXrH78/wODQbU6fOkMoFOTJx7fjV/zEYrGM/hZgcVmZOurYI9J8zkkbjROgmZ4h2Tann95kuOaOxV6eRW6y9GvOdc8193gNI1XDdYmGKGOIItq1JsT6evwjo0iiSFgUiSgKc/E4EyMjDLe303f8ODdrali+81mWb9mKPxxmYWbGjuAx7bbff/qjn5DqYsuLIg/IvPhzrE0CqZEqSaQmkyB4Jp3Uwc9kApJlH8Ojo+z74AP6ent4+ZVvsGrVaptCeagQ6bqUt540yHs74Mm6uPPWsx4ClxLR4r2eqS/e++nAW/zdoYSp4VOLTSaWZusoDigKuqqin/0a/+VLhAQBOT8PQRAxDRNN1whpGpFwmJycHEampuhubqah8SrNGzay6fXXKV+9isTcPImYlqFX95YejAW71vvkgC5Je01nsk3XDrWIyqU9n/SICimTnfI3FduLSpEliRs3btDd1cnuXTt5ftduTHCVmsWU2BUoyTiOnsklQy6HvblN9OS33IUSiUTCphRCSlle0p+kpmZq25wxcZ+30G+58Bzly7Q2e3lalg5K0zDAr6AvLKAfO0bw5k2i0ShKOGzJxE6kjmFgaBpBRSHo8xHw+QiHQmSPjdF64QIHm5pY++orbHn5FZRQCHV6KnUC7jE9tCeE9EH0fncs6h5qYt1JJYnJsbbYj5mS2yrAcJ9LyolO1ZJsHeKj22H/pmkSTySoW7uWZZUVlJaWuUEIXrlRFEVkSUbTVLt8u047zEnXNVQ1zQviFRnsckzPYvASAovQKIyNjXPj5g02bthAJBL2KCBWxx2FyQ2MMm265W6/cWmYayIxTRNREJAk2e6bSiKhuV4ZpxmmaTvJTBNMA1Pxo8/OoX/5JeGODqK5uSihIKLsA0my2mOCYBiIhoGsaSg+H4rswydJyKJIIBCgfWCAC+/8hu6mazz7k5+QX1Z2V8hkSg/Fgk08E5Hstg0iayItrU1OMZGIdky6qqruLjCfLKN6tEwghcolGXYq1H0+H/Pz89Z+3HAEE0vTNAyDnJwcCgsLSCRUS3P2NtUOkx+bGCcYCFjbIQ0T2SchChItrW2EQ0GKi4rcSG63TR4u7bq08LwiC0cTtbTjw4cPMzQ0xJbNmx1hzbNuHUqfqkSkUFfPdcEzpoZuMDE5QUdHB01NTdTWrmT79sfcoFfTc8SaaRgIfj/a7Cz6oUOEurqI5BeghIIIig9kH4iiR2wywTBAszZORWQZWbQcAiIgVlTgDwa5deEC+3p6eOZnP+O5116Lc5/pjyYDulTMIWw2OY/FYszPz7v7eDVVI5GIMzs3Z/mFbYD09HRTVFRsxcoZ1hl+ydjUxUZR07Rcc7FYnH37PqC2dgU7duxwFQxIbtZOEd5schUIBrja2MSp06d44zvfIRjMQ5asMLcjx45z/Pgxvvudb1NRXo6ma061i4FBsviknGeB2+8PcOLkSW423+Tt779NNBIhFoulDZxXSksuMC+l8yk+ZEnGNAwSqsr4+Dh9ff10dHbS39+HYRiUlpRQVVXpLj6H5YqiiISJboMv8fnnhLu7iRRY4MPvB58NvvSjiw3DuibLIMsERJEc28TkNY01d3Xx2X/4D/hFsfg+YfMQEdE4A2e6DXLIvrOIfLJMS2sL9V+fwzAMz0mhJqFQkOLiYvz+AJcvX+HcuXP84O23kUQBw7a0mF6dxK5PEiUUv4IgiMTiCT759DNiCwusXrM6eY6J868p2GXYtMoeNL/fz/jEFF8e/pLaFTXk5uYiSRKxeIJPPz3I0aOHeWL7Y6xZs4Z4Qk1q997+O9Qug9RjmhAKhbh6tZEDBz/nhd27Wbt2DbGFhTSZNTmRqdQvWZMkSbTcaqGntxfDMBkZHWFmahpBFMnNyeGJx7dTXV1DQUEBX9d/TV9/P5s3bUJTVQQB5ufnWYjHUVQV7dgxwv39hPLz8QUC4FcwfT4LYDb1S+cSLjAlCUSRoCBiYGnsuqP9VlfT2tPD3r/7u5/u/fWvW7/305/+6l5x9HCbkjx/0ikUpqVJVVZUkLUnajvzDWSfj6xIhEAgQCgcYnR0lFOnTrNp0wZyc3OJJ+Kkl+pMhyhKzMzOcrv9NppucPHiRc6ePcM3XnyJgrx8j+EaUpi1p3GSLKMbBp/s3080EuYbL30Dn6IwN7fAvg8/ov7sGZ7d8TTf/OY3CQQCrtZskHoCTqp+YHqUDggFg3R2drF33142b9zIzp3Poqoqhr0X16JwjuE8NbbOJHVsBVFgamqKjo4OotEoRYWFPLJ5C7dablFbW8vWLVvQdZ1Tp09z4MBBXn7lFVcOXFhYoK2tHVOW8Y2PE+zsJCcawRcMYvp8GJIdP2mLRAKW2Ol1JrhJlm0ZUSBoWnZRzbYxmqYJlZWYvb0FX/zDP/zHfe+8M/fdn/zkvXuB0sOdD5jhmsODTayTPcPhMHl5lnp/9OhRysvLqamudo/hOHb0GJFImCeeeBLdMKzQLYwUyuc2VpKYnZvjbH0915quk5eTxfO7d1NUXEQ8HreVEY/F0GbfjmAviJZS8OXhI3S0tfLzP/8ZgUCAqelp9u77kMuXLvLKyy+xZ88eRFkiEYvbrkbBPhlftL0ZAgaWS0qSLVekoRvugULjExPs++ADSkvLeP31P3GPjXOianyyz7WbJWyPjOJXbC9FIjmUmCTiCTZv2sTGDRsQJZFIJEpvbw+dnV2sss+0uXb9BgcOHuTJp57kka1biC0sWLsNDZP+gQH8fj+bt21DWFbN0OHDyAsLhMNhzKWoHljvcraB6QLRptairhPUdTTndCybchsVFei9vZHP/9N/+i9HDx6c3P3yy5/fDUUPGBFtJuUhV6hO04rtRjunenb39NDS2uru9vL5ZM6c/Zqbzc3s3LmTaDTqPubaEe2P859hGFRUlJOTnUNJcSE/+bOf8NZbb/HUk0/iuON8soxgLw5RsM6xkew3pgcC1tl/J0+eZM+e56latox4IsHv399L09Ur/ODtt3j1tdeQJAt8gYAf0zSZmZlF162znCVJxjAtEAaDQRIJlcnJKcu1J1o2tIMHP6e5uZn8/AJM0+T8hQvs++AjJiemmJub48zX9fT09vLFl19y81Yrkixx7lwDLa1tSJJ1KpdhJl1lhmm9LNEwTGKxGGfPnKWouJj1dXV0dHby4YcfUltbyzM7dlgyry0O6ZpGMBBgZHiY5qYmyjdtoPDtH9IdjDAzM40B6Ng7Hb0mIBt0ZjoLlmVQFPD78fn9BAIBwsEg2aEQeaEQheEwKysqyBHF/Pf+/b//348dOlR3NyzdNwU0dd1jaEhqwgJ4CaCrIQqICIJI49WrlJWVUVlRgSxJ3Gxu5uCBgyAIXLx4iaysLBobmxgbH+XFPXvIysq2FQirXEkSkRUfh48co62tlT/94Q+pqKy0FRsVv1/BNGFhfp5AIIAgisRjMXz2nlhFURgbn+SDDz8iPz+PFbUrab7VyoULFxjo6+XP/uwnZOfkcuHiRdauXk04EuHates0nL/AxPgEObk5mIZBIOAnGA7x/K7dNLe0cK6+gfHJCUqKivn2d77FhbNnabrWxLZHH6Wzs4MPP/6Enp4eJsbHeWTrZs7WX6fhXIMd8RygtnYlX3zxJadOnebb3/42kiSiabYkaI+0YVgLMRAM0NbaRld3D2+++SYjIyP84Q97ESWZ5557Dr+iMDs7S0JVMQydru5uFL+f6poabt++zad797Ln1dfIf/MHtO7dR+3kBFm5eRbQsKmRw44FwWW5rnbsKCCyjOD347cpoPMx7MWyqqqKi83NNV/85jf/ub29/dsrVqyYWgpPi9/Ycpf03//1Xz8ajydec96dIYieQyndxifZZzAYpLu7m0uXL7Pz2WcoLCyiu6eH3//+D4TDIbKys5EkkaHbIxw9cpRIJMLGjRtRnNM5sQTxQCDIydNnOHrkCG989zv4/AH2f7qf5pvNzMzMIkoyR48e4/TpM/gDfm7cbGZsfAzThPr6r6murubY8RN0d3ZgmAbNN5u50XyTzq5OfviD7yPKCr/61T/T091N3fr1XLpyhSOHjzA2Psbk5CTz8/N0dnYwMDBAXl4+Q8O3OXniFLGFBUZHRtmyZROJRIIDBw9SUVFBKBRGln0MDAwwOTnJunV1jI6N0dfXx8aNG5icmuTZZ5+lr6+X06dOk52Tw+bNm8nOss5LBNs1Z4NQsg3ZBw5+ztq1ayksLODd371Hd3c3kWiURCKBovj4/PNDdHR0EAgGmJubQxQl8vPz2LJ1K1PTM5w9eYKimmqMFZvoa20jKzaNYr+qwZ1HUUz9ONchhTMJhm1btBUy5wPg8/u52dRUPaWq2penTh3/owHwr//6rx9JJBKviaKQGgEjJDvgGJ5lSSYej/HFF1+wfNkyHn30UdrbO/jdu++SFc1iy5bNDA3dJi83l8bGRgLBANu2PcryZcuSgZ92HRcvXeKzzz4jOztKNCuH48eP09HRztDgIIIgcur0WTo6OpianKKltY2BwQGqKqs4ceIkmCaxhMq5+q9ZXr2c2dlZdu18lqeeepLxiQmGh0c4ffoMw7eHKS+voLW1lY6Odp7fvRNF8VNZWYHsk8jPz0fTdQxTp/FqE4qioKoJCgsLqF1Zywf79lFdU0NpSQlfnThhRcYIJqIgshBbYGhoiFdffRUTk+Zbtxgfn2BsZJTnn3+eoaEhRkdH2WTLepqWPJFBEMCv+PnqqxOMjY1TvXw5+/d/Snd3D3n5+czPz5Obk8v169e5fuMGlVWVZEWiBEMhikpKCYWjSLLEunXrmFtY4OhnnxLKL8So2cxQZxc5sUkCwQCm8/IdJyQrHYQe8GEY1uFPnr0i2EA07GNEVE2jqbFx6z9/+GH9r379664/LgAd8IlW7JvzkhavBuVTfJw7d47Z2Vn27NmDJEqcO9/A8O1hvvOdbzM4NER7exuRcITi4iKcjdbLly+3zye2WN6VK1c5dPBzXnh+N5Ikc+PmDV7as4d16+ro6OzCNAx03ZIrdz23k0cf2crtoSF6+/oZHRkmkVBpbW0lEYsxNzfPE49vZ8czz5KVlU0oGGRocJDyslLKystQFB/BgMI3XnqJtWvXUlpSQk1NNWWlpaxbtw4EKCosZPXqlRYrX1HD8Mht6wzE5ct5/vndrFy5Er9fIS8vl507d7J16xYKCvLZvv0x93zDaCTCmtWr0XWNxqbrBPwKTzzxOGDS2HiN/Px8OyzMwOdTuHDxIlcbm1i1aiVnTp2mq7uHrVu3UlZawuDgIIZpMDo6yrZt26iuXk48liASibJq9SoKC4sYn5pmcnycVevriJsSX330Pko4jLTmUW73DZATnyIYClngs0EneJQURy4XDMOyD3o+jnzu3cykGwaCJDE4OKjc6ump/uz48X1///d/n0jH03377kZGRn4xMzPzT04coOQcSeEJRnVItigKDA3dJhqJkJObg6pq1vsngEgkzNTUFAsLMXJzc1EU6xR9vz9gx89Zgr4sy/T29TE9PcXGDRttGSdBQUEhCwsLtLS0kBWN4g8EmJqaoqamhmAwyLVr15icnKCosIj+gX7y8vKtY3dNg+XV1UiiiG7o+GQfzoFGjmdGURTA8tQ4sXeSJLvviBNFKcXQ29vbi6ZrVJRX4Mhu1pnZ1hCbpuGaoeLxOJIkodgvpmnvaGegf4CaFSsoLS2lt7eXjo4ONm3aZHtnrPfnnT17lnAkyqqVK2lrbaV/YJCtW7aQUBNcv34NEysAo7CgwBJZgmFkf4C8nGyqKsvRBZGmW53MzEyTW1bNpXP1nPj4PdZs30Xl2scIXDnFo/I8RSXFCLLPPdbD9VzZ4BN0HTQNVBVUFS2RQE0kiMfjJOJxFmIxZufnGZufZ2ByktbbtznX2cn3/+ZvfvHDX/zil38kAE6nHFIu2atF9IDPoYKKfW6JavtpZUmyWIyqIftkJElG1y0XnGxPsq7rHreKFY4vSRLxRMINgFVV1XpFlQ1WCwy2w9/Q8St+RMnajScK9kGOAmCYdlBA8vhZh92LojUchmGZWJx9sF4PSOqxb1aEic/nQxCw605Ry9xgAcfeZ8+ldc32ckiSZC1OVXUDApJuSSucShAsm6BhmLZZyHTPnk6oKv39/UxPTaPpOiWlJaxYuQpBVujtH0RBp7x6ORMJiSuXrzM9Mkx+VQ0dN69y4sPfsWbbM6zatgtfYz3b5BlKysoQJR+SI2aZpsV+7QhpUVVB0zBVy8WpJhIk7L+xWIyFeJyp+XmGpqfpm5zk/K1b+GpqGv+nX/5yV0VFxZgXTw9oB/QIpG5ydF5SrqlqAq8xWDd0dENHwIrO9UYGG0YiGWjg1CIIqJpqnZ6FFaiJrlsTaRjEFhYWLSMTPAZtb2Gp311N3p5o+4Q0V5r2bhR3++ic2eJqqc4prx7d30GYIKSZCaw5TFZu2fl000ASrfcZa3ZfJXvLQzyesECMgKnp7n6UeCLB+Ng4sYUFhkdGkCSJUDhMVlYUSVYAk5xIEKGqkuu3Ohi82ER+ZS355csYH5vm1sUGymvX8MyffJ9je99Bjc+z8ZnXaGhq4JGBQcrLy3AkNBEwdd2lgKYNPs22BWqe0HzHqC1JEgFZJqQoVBYX03Tr1saGkydfBX7jnasH3JieDrz078lrSbeY47ZL/slUnDNfHiNj6h3HQO0xBpk2FfP77Rf0mSZpDXDtla5L2PAYMj1eDNN+1kx/zjTB8ORxKVwSpO4+Wdck6oyD4W5Edwp3AGx4KP+p06fp6ekjGAgyPz9He3une960szvPtE/lHxkepX9wDM2UQBCZnZsnJzeX1avXkF9cSv/QCCOjoygBHwXlyxieUrny9VlmxicoXlaLPyuftsaLFJVW8cIbP+FmwymuHvsAafNjXCCX3t5+DDVh1auqLuhQVXRVdSmeqlpbJzRdt1xzYBm47Td3hhSFvKwssmWZy0eOvG6aZgrRe8DXtXpmdtH3JEXxZMb1kCzChieCJB106cbGFNQmcSGJIpIk09LayujoKLIku88tgrADCoGUxiSJuecVZIuakSwtuSnbWRiee+59G2ym/axdiRMeb8ltMn6/QkPDeb7+uh7Jjh08cuQoR48ftzYuCdYGIcN+J4cp+An4BEabP2RucoDHd7xA9ao1TM8nkCSJovxsojn5tPbcprWzH80UKaysYV6TuHXhLPMTo1SuqCOnpIrWpssUFJXzzR/+jFuX67lw6D0CWx7lolxId28/RiKGrqoYCdWiejboVE0joWkW+AwD3TTRsAzbpiAgSBKiLOOXZcI+H8W5uUx3dW27du3aMu8cPvwLq53JSfKzpCssjQqZiy46E5SOrEUPLbrtlCWKAoo/QH3DeX7/3ntMTkwg++RMeF1UdtLHkrwpOO470w5lylCn+5THW5GknN6A0CTQHKw7G5N8ig9FURAFkStXrvLFl4cBgZHhYY4d/4qLly+zedMmgn4/mmq9XsLUDQwxSCIWQ+r7JcVz/8xg/f9I+7VTPPrYo+QWFnPlZjtj07MEo2GkaAHNt7rpuHUL0zApWbYSwxeh7fJZ5iZus2zlegoqa2m90UheQSFv/PhntF27TP2BfyGyeSOX/GV09gxAfAFDTaDF49YZP5qGaoNPtQ/31EwTQxAwRdGlgIIdNhbw+ciPRlFUtbj13LmV3ul4IDNMPB57zbLPWVsxrR1X2LJT2puS7O+yJCLZ2qMlEib9tc7mJM/VJJVKd/7jcU0iEAwFqT93nv37P2HnszvYunUrmqqngCo9JRlo8pR51+9upobrLy5GcEEseH673JWkFwjDgatTtKUoaZpKw/nz9puRLnPm9FmysrNYUVPDyMgIZ86cZfPmzTz7zA6LxRm6JQdKAQxNQ7v5P2P0/ZpoFMLCGAMtxxmfL2DNI7sYnolzvbkDzZSRfEFiqkB/ZwfxuRmC0VzC2fnMzM5wu62JaFY25dUrMRDoab1JZUUZdetWceroYabH+qjd8RzdExqB2z1kKSKqbqLZLFfXNDTTtFytJF16zl/NViYdOVHXdQxBEMMFBQc/OnbsmjOaD0IBzdQfqXKPc80ZcNM0bPeSztz8HIGA3zpgx7Ss+4qiINovRhFFwVUA3DenOx833MuaZVEQCUfCtLS2ceDAZ+x8dgfP737BtpEa3sa4HFIQRCRZAuwwIlc3strr1OG03+fz4ZN9aew0Fdqm7aeVJBETw94OabVaEJNnOnuppK4b6JrO4OAg5xsusGr1Kv6bv/pLnnh8Oz09PVRVVvH87l2Yhm5rwwamaB/r1vK/IN/+NYEQhIJQVgKbKwaR2/47Lhz8L+QXlCMF8zl37gqdHV2IkkSksJzhoSEG22+gyBLL124mWFjJrYsnmB7qZsXK1ZTXrOP6zVbCkTA/+tFbdLTc4uQnvyG0dhmXclfQOjhGYmEuSf3snYIO4AxBQBcEDPvjGLAdy0dAlskOBo2ikpJZL34ejALG4q85BmivQVpYRP0sGQcEDh06RP9AP6YJumFQVFTI7Kz15shgMGCHwFvasWSHyTtHrMmyjCiJYJtO/AE/siTTPzjI3n0fsHrVCl577TV7ZSa3bTqRMYpfsSKuVZV4PI5f8bvsz4pTFK29tWbyRdR+RWFiYpLxiXEioXCa+OCA2lpEpmkwPz9PMBB0D7P0+WRU+xDKlA1CRjJC6Pr165RXlPPWm28Qi8V49933kGQfb7zxXQoK8lBV69VZhuDH0AyEtr9DHvolkgKyZH38MuQXRllWXUh84AA3r/eRXf0iCUOgreUGggGRSBa+YJiRoT7UuSnyCkvILy5nPq4ycOsy2dEQFcuWYQg+WlpaKS/OZs3KZRz/6ixTwz2s2P4YA3E/wmAPYQk0BHerpyEILgBNB4y2b1jTNFd5UuNxovn5Q4++8cbf/8d/+IfxhwHgo7F43PWEiDYrthhi0g2HYL0JyO8PcOr0GY4fP8701DStbW1UVVVx+/YwBw4cpMF+FZWqqTScayA7J4dLly7T399Pdk42DQ3nGRoe5lrTNRRFobikhM7OTo4dO8ZnBz4nJzvK9773PSRJTpp87ORsKO/o6GR6eppTp09TX19P1bJl9PT0Uv/115SXl+H3Bzh56jRnzp4hEg5TWVnB+MQE7/7uPWIL1gsUDcOzH9l0zunzoes6n3zyKeNj40Szony8/1PaO7vo6Ozk4qVLVFZUEI1ErMUlWL7xkZFh3n33PeYXFvjxj36Epqn89rf/Slt7O9k52dTW1NDX109nZxe5BeUWxW/7O5Tb/xVZAVECWQSfCNGsCJHClYjMkK0Mo41d5tb1biJVuxD9EbrabiKKAtk5eQSiuYwM9qDOTlJQXEJBcRlzqk5P82WywgqVFWXogkJzaycluQFqKks4efYis6N91D62ldt6GHOgh7BkYooSph0xYwoCjgXL2m9tbcp3PoZhoM3Nsfzppz+se+WVd/72b//WXckPKAPGX3M8Hc5hkqLrhrNlPtkSsk+ePMnFCxd59NFHGB0bY+26tYyOjnLm7FlCoTBjY+NMzUxzramJSCTC9MwMly5dIi8vn3PnGjh9+jQtra309vZSXb2c9vZOPjtwgM6ubmRZ5M03vkdxcUnSHmh3TZYl/IEAV6428v6+D7hxs5mO9k50XWN8YopDX3yBKAhUV1dz+PARLl+5QntbBwUFBWRlZ/Ov//I7RFHglVdeJhgIonmO1DVNE79fQdN1Ptn/GV1d3VRWVXL69FmuO1XfWwAAIABJREFUX7/B0NAQPT29FBcXs27dWpvtW+FbrW1tvPvue4yNj/PDH/yArGiE3/72XxgZHaOwsNBi+YbBoUNfENN8rKiuIdDz9yi3/xHJB4IVmIwsQCQaIVxUC/oo+sIQplRMdl4ewmwTLVebyK56jmBOMR1t15Flkfz8QsLZBYwO9ZGYHiG/qJiC4hLmEyZdt5qIBqCyrABd9NPS0U9RVKasKI+GyzeYnxhkzWObGCWKPtBP2CdgSLay56F+uu2GM3QdTVWtv/PzhPPyxte8+eZ/m1Vc3O/F00MoIRnOg/EYIePxGIcPH6Hh/Hlee/UVysrLuNncjJpQuXz5Mnm5eYiiwIoV1bzwwgt0dHQgyzK3brWyfFkV0zMzXLt2ncqKClatWoUoCMzNz/HVVyfw+Xwoio+iogIeeeQRV9YCi+0qPgVBEPi6/hwHDnxunccSzSISDlFcXExrayslJcVs3ryZEydO0dPTQ2FhITnZOeTm5dHQcJ6x8XEqKiuora1lbm4WxWcZd03TiiuMx+J89PEnXL58mdoVtfT19TEyMkokEiYrK5twOMyLe16gsDD5ytOLly5x5MhR4okEeXl55Bfks2/fB4xNTLDj6afo7xtAVnx0d3UyOatSVVFG+dw/kjPzW0QZRNlSlizwhQkXrUIwxjBit0EqAikbxCA5eVF8sVu0Xj1PTuWzRAuraG+5jixJFBYWE80rYHiwn/jUbQoK8skvzGNOlehouUFYVKkqzsaUg3T2j1IYkSguyOXq9TZiU8OsfmwjY0TQBwcIKSKmJLtvTnCO69DtEDld09ATCf5v3t4ryI7rzPP8nTTXm7rlUTBV8JYOIAESJEVQEj2lltSt7lab6JiI3dl52bd+6YjZh56YiJ5tOzOa2F3FmN6N2G6pW46U6CUSIOgAEt4WbBWqCuX9resz8+zDOWnuLVAtgBtKRKFu5c1782Sef/4/e76PRoMtX//6nw8cOvTDVjx9ISt4dTqWukEx22Z6Zkb1vn36afbt20u9Vmfi9jiGIdi+XS0Q37xxI09/+RC93T14nsf8wgKdHe3Mz8/T1dXJuvXr2Lv3IR584AHOnz9PrVrjob0PUSyu0NXVRaPh8MmxY3QUCqxZ04fjuti2zczMLD9/7XU+/OAjSuUyvb29uI5DpVKhWqtRqZbJZbOMjql1FolkipmZGRzXYWzsNl2dnWzZvJnPTpzk0qVLGIbBxoF+pOdhWRZDw0P85CevMDE5gQQqlTJ7H3qITCbDhg3r6e3tYXh4mO7uHvrW9Kp0s8lJ3njjLfbt28uhpw5x9epVLl66SCaT5YXnn6Ovr4+hoSFSySQ7dj1ENptnXfl7bE38EisG6JQ8y4B0Ok2qayvCm0dWp5BmJ1htYMSQmAhh097RRqwxxNXTx2jf8CRta7Zy9coFLNOgp7uHTKGTqclxKgvjdBZydLZnWXHjXLt6laxZo78nhxnPcnu2SCEl6O4ocG5wmMriNFv37mbOS+NNTZKMGXjCDAsVace122jgNRq4Kyusffzxf9rxx3/8Z3/+53/utOLpnmLBS4uL3zO0W8WI9McImdDA81xc1yOdTuE4LoZh0GjUMUyDmBWjXq+TSqVUvRhP6mxiD8d1mJ9foKOjQzEsAtMymZ2dxbZtcrk8s7MztLW1UalUuTw4yIb164JKprZtMzY2zpGjRxnSrBqPx7AsmzVretm+bRulcpn5+Xl279xJJpvljTfe4uq1q+zZvZuu7m7OnTuH67h0dnWyedNGduzYQT6Xw/M8bMvmk+PHGB0d4+DjjzFya4T29na2b9/O0uKiToB1mJubJ59TtQElknK5QrFYpLu7G8MwmJubo1ar0tHeoTKwG3WqlSpmPEPMTiCv/nuS099FmuHaahNIZ9IkO7chvFlkZRJpduOZORA2HhauNHBcQd2BhuNy+dIIn17pou+pv6QSX8O5M8fYunkrmzZupFqrMHz1PDmryratm5DC5PLwPFO3LrFvY541PV3cWvAYGR0jY5RZXKlw4txVtm9Zz0P7D7JyY4be8Zt0ZFNIwwwqabn1Om69TmO5SNu2rR9u/4M/+HZm48bJO+HpngC4uLj4PVMr+D4AhW8RayY0hIFpWcpzr+Oito5QSFT0wu9C1OxPVHmEKnlBu3I8GTRjcV0Xy1YLiwxUH5JGvUHDaQTZM8IwVHXQ0RFeevklEvE4yWSSTDpDLBbDkx7xeJyJiUlef+NNLl8eZO+DD/DNb31DLR+4NYJl2fT2dAcLk/yKXL47xbItXclLuXhUgXBDJTlI9Dpn5TOTnsQw1f2q11V1UstW3gGn0dCVr1wMK63i0df/guT0f8G0QQow9E86pZgPOYesTIHRhTTzSNNGYiIx8aTAlQLHFTQcSaPhMTg4wqeX86z70l9QSQ1w+vRnbNm0iU0beqlWy9y8doUMy+zZug47luTi7TLTty5z3/oUbW0FJksm4+OTxKQC4flLN9i6ZT1bdt5H4+Yk6+YmaUsncaVUIbt6HbdcJt3be2btCy/8/tonnrjyeXi6JxFcrVa+Fuh+viWsndCIiD9NRwoCyzioxq4jBpHPBFEDXZfEtyd83c51HN18WeK5Krbqt4r312gYhvLz/eLd9/jg6FFefukl7r//fpLJZLDwvK4bWc/NzfOjH/+EWk0x8dOHvkRHRweNep3Ojk5yuSwSVWHBt2D1KAOd00+mcF1VZk65JrzgPf+11Nfml3eTSFxH+fhcz0N6Lp6I4zQkxtBfkphS4DN0RrwpIJ1KkeraBnIeWZ0EswtpteFbJsIwUa27dUaSoUgBYdDR0UbSnGXwxBG61jxIV/9uLg5eAQy68jHachkm5ssU5yZY22bT2xanHutg5PYUtlchHTMw4hmWSjUSljJ+hm+Ng1sj0dvB8kqF2NISlhB4jQZepUKyq+tC5yOP/OHAc89d/lV4unsA/umf7qvWagqABhp8zYZIEKmIRDlCF41+Q/vo/JJsYdBD6ZZ+HUE/+yTYIlGUIOqg06aSiQSDg1f54Q9/xO7dO/nqV76i2EuzjoQgZezd9w7jOA2SqRSdHQUeeeQRVVFAPwCO4+pzS/zlmL6/3X9Qgi0aBoHAYR0cI/30eg1GT6Voqd8KfJ5nYg3/NYmp72LY4XIMU0AqldbgW4DqJBidSLMARgyEFQANYerfBsIwg3nBMOjoLJCOLTB48ij5ju10bdjN5evDIARrcoLutgwTiw5LC9N0ZQ0KKQMn0cXE9DyyXsLERcRSFCs1bL26cGp2HlN4eNkkpaUi6UoV0WiQ7Oi42L579x9u+853zv9LeLr7SIjfMd0PbvoZAUGMVRLOVGRudEzUjsW0c1oDKIovqURzLBbjk2PH+OCDD5VuaYjo3AaRiiDkJSFmxyiulHj7nV8Qj8c4dOgQlmkGq8T8D5umydLSEtevXWdycorSygqPPfooAqFBGg5aBtfli15PlU4IcRXGg5v+Xv0TBaXnaVeF1wy++PR/Dvx8/uSkfLHLPFRvg9EJZhvCiCEMSwPOUiyofbJ+gMAwBJZtErNN7JjJtp0DPPmwYPb0/46YOsmDOzYzNLHIjckSGbvBA1u6qJjtXB6epr4yT3dshc6+AeaqJgsLS9RLi8RicaoNSTxuk04mmJpepLiywmjK5Ga1TCydPp3fvPkPd/zJn5z7teD0awPP37xoPCBUIaP4a9rnHynUU3P58mVOnToZZFD7R3ooPcmO2Xxy/FN++sorlFaK2LaqViru+K1qMw2VoPqLX77LzRvXee7ZZxjo76daq636jOuqXhrbd2yjt7eXF557lu7OrqBzezQNK1QjZHh9+PFdBcjA+dMKOv2YeNLTPzLy2kNKD8+I43om5vDfkJj8T1i+n08bHKlUSut8C1CZ0GI3D2ZcEQECYSjWC1lQx+gNgWGKoC+JbZvYtsXmbRt4+mCclRvfwxn/jAe2rmVopsr1qRpZs8KuDXlqsS5uTBZZWZol3pgn37mGFddipVikXl7Gtg1qdb/yQomZuSLTy2XOC1m3n3ri3+35N//m7K8DJbiXhNRVkA3C+sH/vnj1JwsgmUgyNT3NK6+8yq6dO9m3b5/SifRMq4I7NseOHefHP/4Ja3rX8PgTT2gdSYbJnYQg8BVF0zSZnJ7m4sWLPPXUkzz26KOqXK3vG5RhioDjOpimoboWCTVB1VotCNshZaT+umy6Bv91uAbafy9kSz8OLUGXyw1B6fmryDxPMZ9rYt36WxJT/1GpcsqmUcyX1uBjAarjYHaBWdDOwFDUBr4vX/fz49AY+gEQGBggFSBdDPq3rOfF9BxvH/5/cJ0aD2x8hMGxedKWy8Z8mYHOOMNzXYwvjBNjBddKkW7rYGGqilcpYwjwnAalcpWl5WUWl4vksjmujE3EPhyfegR45deF090D0PNXQUV0msjkrMpdkWDbqgfGz197nUwmw9NPP61FkZos01TZwMeOHePVV39GKpnk5ZdepL29XRXz8XP3AhqMQEJCvVEnl8vyB9/5fXq61eKmeqMeWUqoONZPbfCrHCAlNSdshBNciw8wT4OxVcfTf6KPjbKe2hV57fnpWDI0VEQcKS2sW39LcvLvMGMaUyjmSyZ98C1BZTwQuxh2CDyhlUQMrWdHfnwiECaGFEi9aEwKA0OYSM9kbSHOV3ee45XPvovB/8r9G/dxfbKILRyyzJG3E8ynuliav41bm8VMlIin0izNV3BqFVZWyiwXKzRcSb1exbYs1q3pm9ywZs2lu4HT/0/VsSRS+v1B9B5d0dTS9Ud++e5hxm/f5jvf+Q6FQkHVTdZrR2J2jPPnL/La629iGAbf+tY32LFzB9VKlXhcVSeo1epBtawo+CQgXZU8sGGDXqjuOKtyEnUd1uALQvEZGfMqZiOi30aAGDk2quNF/w7FsAx6sQU6n1TMl5z6WwW+CPMlkymS3duABQU+s0tFOEwbMBCa/aQwQuYjXLsrA7VGL7H0jRJhgGEisaC8RGl6kJhVYl9/mY8Gv49pGGwfeIDhOUEPRerL4wgzi5kuUKlMQHERw1KusOVSldn5ZYqlMql0mva2Nhynzje/+Y3/9nvf/vY/3A1yvjAAZSsrRDyLAkE8HuP0mTMcO3aMJ598gs2bN9Fo1InH1aIhy7SYmZ3l7XfeoVar8sLzz9G/YQMrKyskE0muXLlCvVZj+/YdzewUnEP9Jz0Z6HFCNoMv+CO0iECIiMERAqdF0ocGSdM1S5rFe4u+6ItcvSBJ+jqfiOFJC+vW35Gc/NsgtiukAl86lSLRtRXBElS0wWH5zGcCOhCMEYQ9ZSCC/SWUap+I7jMMpGEhMKG0THn2EotLkyxVMuTynTzYv8TpK68ghGT9+j3cnu/EchcpzY9ipApYiQzlpQpupchyqcJKuYoUBql0mnwuS8yyKLsO+Xx+8dcGjt7u2ggJMu1kVOQ2b/7EJhIJpmdmee+9w7iOy9DQENPT05iWxY2bNzh+/DhDw0OcOHGC6akpHj1wgFKpzH/7H/+DxfkFJqem+H//4R8ZvHIlSM1qtXR8YReASUaMhOg/KYPPqv+9ZpbSOqV/hA8gN9DvZNN70X+hYdEKPqlT6V08NPhG/o7E5N9gWiHzmUJV1Ep2bkWwDJVRDb5CCD4/C0Hoalaa+YSvB/o/kWiU8mCbYJgIYSLKRSrTF5mfn2ClnsEVvXgkKeTi7Oy6zdjgG8wNn6cjZVBL9iCFSWVhEq++giMNFlcqTM4ssLC4TDaboaerg5htB9faaDRid4unL1gjOmL9RkhHSJVyXq1Weeedd1hZWaGzUxXqmZ6e4ejRD1XnzKVF4vE4CMGzzz6DYZq88cab7NyxnVKlwju/+AXdXV28/NLL1Ot1ZudmKRQKQUvWVWNqYeDwTSAQwZExR96XSIRczYpqEwGAA7DKqIWsDZBWd4vUi5GMONKzsUb+I4nJv1HFSM0QNslkkmT3dmhivgKhcthsdIiI+JURAyT4LTRLGoaudmAjSiH4irUMLmuQWEjpID2PjrzFZucWN24cpuBIMoU+5lLdULlJZWmOlarHSqWOJ0xy+bQqnRJtWi1E2NvvLrZ77BW3moPCVHswDYtatcabb7/F2bNn2bdvH4u6G+abb75FuVwhn8/R3d3D3r0Pcf7CBaamppicmkZKSaVa48c/+Sm3b99mz55dnDx1igsXL5JJpfjWt76JZcdW9fENdLzQ4CUyxFYhGhHHEWC26IBhLWoZ6H8yAs4mP1+wz4s4miXSiOFJG2v0P5FsYT6l8yVJdm1DsKjB16HBZ0eA54vTqNUbgjDIFg90Pn2MaWFgQalIZeoCc3PjFGtZxXyejfQcwMMQHoYB3XmB4wwyMhYn2ThAIplmVqRYXr7N9GIZRxr09vZiCBFGdfT9sNT6j2ZW+DW2e25UE9JEyxtCFQ3/8OMPOXf+PAcOHGDXrl288cabFItF8vm8yjiOx3n66UPsfeghenp6OPr+UTZuHOCRhx/GcRzGJ8a1f8/hytWr9K1Zw4MPPMDU9AwzM9M8cN/9SgeSunx5lBEDt0tUR1s9Xtm6gwjQmg9iNft5oUgmBKKnvQSe9PCMGFLaWCP/icTEX2PaMgBfwHxd2xCieAex6yM18hPQe1QER0AYPda0ED74pi8yNz/OcjWDI3rxpK2YT9d1MQSYQmKZku42j8b8WSZmE5j5XcRjFosVl+Vyle7uHkwNPh95ArDsGLYdw7btO8mfX7ndEwBFi67VKvoaToO169bxB9/5DhsH+gGDF55/nng8Rnd3NyOjKoNkTW8vi0uLbN60iYH+fu0wVSUryuUKxZUVbNsmmUyQiCcwDIOxsdskk0lVMw9fZ1PlK3w9TW0h8KJ35c5HtIhdEV6ff2A0put/1vfzBaI3iHV7SBFDyhjWyH8mMfHXWD74hPbzJRMKfEZRM1+XcrWYFn5kI2A6InqeiDIgkX1GAEJhWmpqSytUpy4yP39biV2jDyltPM/RBcx1Jp+QugygJB6D3nwduXic8WKMqugjHrNpy+fJplWFf63RKD0/mVSNuE2TRCLxm2LA1ecJRJZUyQKbN27SVZ7Uk7Zjh6rm6Xouu3fvxvNcajXVNsFxHEzT1EUgK2pglklnZwdSqgyYaq2K9Dw6uzro7ukKndjq5MEvbeCqvwPR2DRQ7mRNr2Jy/6X0v0eGr6P6X8QN4+t8nojheTHsse+SmPgrBT4zFLuphA++FSiPtFi7vq8v1OVW63do8GlDA6F/mwp8QjFfdeYSc/O3NfOtxZMWrhcmREgNPiFVZpFpqOtIJQQ9uRXk8lHGvKdpuBamoVbmIdBtJASpVIK2fJ50OqOJIvmbYUB/lpqAKFHdv3UjmnqjDo7SzYQQVGu6er0QuPopMvwnGFRGia9EQrCcT2cbKNeqEGqRi+MGTuZWESv8sURYTb2MdBqJgK8JpE3+cxke51vQWq+LglGBz9MtqyLMN/ZdEuN/hWnJJp0vlUiQ7N6GMEpQvgVGQWcy+waHEQKPqP7XYmhE9/mfM7TBoplvbk4zn1iLxMbzwv5u/vWI4C/VM88wJJaUZJIm6+UoovQBle5vUHckrlNTPlahXEYdHR3kc3lSqRS2bZHQdQbvZrtnK1jKZlEsfAevoWZQIAIwhiI6NJV9f5uhdzcFOqKb6rISwZIM8vJaRqXHpv8U0XfuTG+hZev/7Q+3STir/72QNULQ+sALwefKONbYd0lO/BWW5QWStFns+sxXAKsdjHgodqOillagGawCo2+cGJr5ys3gc+hTiaoafNo6Ct1S0p8vJY4NJNLwiLMMiThTcxtoGIJ0MsbCYhlQeYmdnZ0UCgWy2SypVBLLsojFYr8ZEexvTdGGFvQoRrlTaE49c4ZQiQdCCN15kaYjV/8ROYmMIJhQz2uCWYujOLSSm8EcjFW/9iKfi1rFHlFxG3YCtSyo1xtIbFwZwxz7LsmJvwzBh7Z2A7Fb0QZHuwZfhPkM/2jfmm2xen0JETChDz7tpA7AN6bAJ/rwiOG6DW2ZN/s+1TV7WrqE980Wi9Q9wYmZQwxVtmOJFaplpWdn0mk6u7poL7SrFXmZDKlUSgHQuns43WObhjvtCicrrHSAApyQgd5g6owXgWB8/DZnzp5j29atbN68OeiqGXyRbD2VBpCIVlCQPq5/9ZB9fx00AUvvACH9Zcchy2l2940L//z+EoJGo0GxuEw6U0AaCczR/0JqXIMvKnaTCZVGb5ShcgtEIbR2/ZSqqJslMDpoEbutIlgXDw+Y7zJzs1HwxZFeI0gEDi5ZRtSL6I2QHpZYpO7A8emnuLK4HduoYRgqqSGZSNLZ1Ul7ezv5fJ50OkU6lSaZTGKaVmBA3s32xVp1RVli9buatPwEU5XtUq/XGBoa5uzZcwwPD1EotPPA/fehkRsAStwJUKuMiRCh0tdnZKAlA1qkan1NG8rNRkar6IbmCWqyfqX+HrXy77333mN2YYWXv/Y7xMf/L+J3YL5Q7JahPKx1vkIz80V1vVbx2xTliBzn63tYUC5p8I1SrKVxRJ/SRR3VmyT64AltLAXXplnRky4mizQcybHJp7g8v5OYVVOl2TxVozGXz1NoK9CWz5PJKuZLJZPEYgkl3u+hzsYXbFYYmf2IvieF0gFtO4ZlqVy92dk5hoeHuXHzJrOzc3R0tvPMs8+we9cuAN3B3CAUBU0nA9/7rTMeomKz+RHwCDojNX1eGw4QojL4cMh2BNENArZr9fUlEnHOnD7NyTMXefqrL5Ga+e/YY3+BaboY+o4qsRsPxW55KASfGSPw8zVZtxE3S5Pl22IFC6EBaEG5TG3qEvNzo9rg6EOKOJ7j4Ek3YrVHajn71+bvky6mXMLR4Ls0v5OYWcPEz9M0SSYTZDMZUuk0qXRKrcxLpUjEE1qN8sLah3ex3T0AdYHEVgL3rU/1MKvKmjdv3uTm0BALCwssLS1j2RbdXd3sf2Q/mzdvxDRNxm6Pkc3lScYTam2HFE2uFLWJgMFaTx69oVHAhW1RZagjRh3Ukf+8CBh9kIbs3uxkTiQSjN++zXvvf8S+/U9yoPszzOF/j2E6ocEhIZGIk+qKiF2jAGaHSiYNrF2TJvbz9bto5GNVqM3X+RTz1aYuMTc3ynI1jSvW4hHHcxtIGRY5Vw+P9vnp/DI/KVZKMFmi4Xocm/wSF+d3EjPrmEJds2kYJJJJ8rm8MjiSSaXPJpMkE0nVv0Rj4h4icfdaH3A186zyyUnJ9Mw0xWKRnu5unn32Gb7y5S8jpUdHRzupZIqz587x01depVwqYZpWBBVSP3sRlhUhMPzvD9sYKOCEzV3CUflf4ZsioX6nQRUlcR90nv8+4bGeJB6LU1xa5vW3fsmaddt4euMg9q1/hyEaAfhEAL7tCKumxC5tGnwtrhYhQj9eU7it1fkcMTYME4QNlRbwGeuQxPC8hirlFohdLwCflKEhgnRBSky5iOO4HJv8EhfmdxEz6xg++EyTdDpNLpejUCiQy+cU6yUSxGPxoA62uKO+9Ottd82ALjRZpyFIRBMIJbD3ob3YB2xidgzTNPjnH/6YSqVCNpdldm6W948eZaC/n87OThynQZM1EZG6UR9NBKPhvtaFSwH5yQgYQ4AFuqD/3ag60m5UWfdFsadcLfFEnNLKCq/8/A2kkeGlPWOkx/8Kl0qwes0Xu6mubRp8Q2Dktdi1W8DXYuVGdcAmNvTdLi3gm76swZcJwOd6vs4XlHINHiB/2lR+j9plsIjjKvBdnFPgMw2ldlimSTaXI5/Pkc1myefbyGQypNMpEsmUNjjUN0pkEybuZrtrBvQbXkZUMGQzIoM3hBC4DeV5P3fuPJOTEzzz1a+QTqV4973DCASHnjqksja05eEhm4EsfREqMA0Tf3VdLGbrNcBCA8rDMk3i8Ri+EW7bNoYhwqc+4GyfZVVrL1UVX+1R2dnquVTvqTXFiwsL/PiV15icrfC1+yfpWvxbPG8lKJehwBdTFQvMGpRvgsgp5jN8nc+MgOpz3C3Cd7VELOPAyeyD7xJzsyMafMrJ7Bd6J/Ijg+Q5Ab4xotnPZAnXcTk++SUuzO3G9sWuBp/qtdxFZ2encjjnc2TSSgeMx2Mq80VAWA3onuB0Dwzo0mKAEDCNvyjd1+E8T2KaBtValdNnzrBj5w42bd7IsWOfcunyZX77W98kl8/RaDQwDVMV4I7aG1KtwY3HYjQaDpVKmXQ6jRAGs7OzxOIxFRf2POxYjFqtxujoKJ2dnSRTKSanppSukkwGqfH++KRUJdQWFhc5eeIUxZVlvvz007iux+CVQe7bs4fFxUUWFhYxLZN33zvK5Wu3+ebeCTY5h6k3lhUp6dueSMQ089WhdBOMHJjtEZ1P63ut1u3nulkigPSdzJUS9Wll7SqxuxYp4riOg5SuAllEbQDf+PACSSKlh5DLuK7DscknFfiMUOczjBB8hUIbmWxWuVpSKVLJBPF4QpXLQyhNRaep36sQvmsAmiH09BbSe1QsKlZWVaTOX7xIqVzmsQMHGLk1yuHDR9i3dy/r16kU+pmZGT784EN27tzJrl27VBhPSoRpEo/FmJiY4ONPjjE3P8emgY0Iw+DcufPkchkS8SQPPngfmzZv4Wc/e42RkVv8q3/1J1y7dp3DR47w8ssvsXXrVlWN3jegpKpbODs7x1tvv8WtkVG6urqo1Ru8/fbbSGDt2rW8+urPmJubI57MMjNf5tntV/nSmsM4jgxWrxlAIh4j1bkNYTWU2BUafIafb98SYmuKbLRYwFGjxIhEOCplatOXmZ8doVhNKbErEhGDw2d538gKScI3QjzPwxLLuJ4C3/n5PdhmA9NQzGeaJvm8Al9boUA2nyObzpBOK1+fHbNVJQzf2vCUfzdUAe/eDP5iKfn+BQcDiDAhCkD1ep2LFy5y3549GIbBK6++GrQv/ecf/pCnnz7E++9/wKmTJ1m/fr2qkqoVYNM0+eyzE7yH742HAAAgAElEQVR35H0y6TSVSoUj7x9lTV8fy8tFypUK9VqNzZs38dFHH3Py5CmefPIJJieneOXVn7Fr1062bN6C03CoVivYusIVWg9cWl6mb+06MpkcuVyODz/6iFu3RnjxxRd4/8hRstkcGzZu49SZKzw1cImXtn2IbUkaXgR8CTsCvutADiwtdo2o2I0AjRa2W/WeBp9oBt/cnA++9Qp8nhP26w1Iz40woG98SKTnYhtlKuUy71zdzYi7m4TtYOjMcEOL3c6uTtoKbeRzOTKZLNl0mlQ6rcAXsHSzbq02n9nvbrs3IwStm0XYzn8ttA4oUaLz8uAVGg2HdevW8qMf/4Th4RHa2wucOnWaQqHAiRMnuXrtKo8+9hjbtm0LarC4rsvRox/wy/cOs2ZNH/39/YyOjfL8888xNqZKzHV3qSqrEvjo409IJJMsLy/x8cfH6OntwTAMhoZucuLkKdrachx66pCqR4NaP7J+/Tr6+zfwk5++ymefncDUNQXff/8o+Xye3/n27zI+vUJs+p/46oaj2JaL491J7DpK5yMHVqe2du1mPY47sJyf2dIa4TB81jSbma+WwjHWIUUSzw2dzIFP1I/2aPAFoTfpYYoV6rUSPzq5jgsL29jS76qqBhIM06SQV+ArFAqBy0UZHWli8VjQBDv0z8tg7HdemPHrbV98UZIejPAVLD0W0zQplUqcO3uOXDbD0aMfcuXKVaSUWkdLMjU1heu5ZDM5ZqanGb41zAP3q0TT5aUllpaX2b17F5MTUwwOXua5Z59lw/p1/PLdd3n84EEWl5a4fPkyy8vLbFi/nkQqhW1ZmKbN1PQEg4NXmJycptBeYGBgU+BgDr00HtKD3bt30d3VRf9AP5OTU9SqVXbs3I1ht9Fe+gED698lEdPg05eYTNgR8F0Hsgp8TVktglVi906O56hu6IPPsKBapT49yPzcCMu1FK5YH4LPc1vAFjU6QheSJx0MWcR163w0doBRdwebNiSxTA/X9ZrErg++TDatwJdJBaWMm9xhLex37/C751hwqFs06X3+24Blm5w+cwbHddi4aROjo6M8++wzLC0ucvDgQYaGh5mamuK++/bQaDhMTk7S3d2tK6t7JJNJnn/uWer1BmfPnaOjvZ3du3exuLTElw8dYtPmTayUSqRTKbLZHAMDG7AsC8u0uHT5MpnhFGvXraOro5POrg5MQ3cdIhRXym/osHXLZrZv24rruPT19oCwqLoJnOH/m8LMf8C2a7gQuO2UzrcVYblQvgFktNhtMThEC/t9nviNgtIwARsqFeozg8zN3WKpksIzNiBFAqkraUUzcpqSC3z3kV4oJbwirlvjs6nHGSw+RE+HixCqKJJpmuTb2ujyxW4+RzabIa31vng8Hsb1m6ZaBKl3AejvEYV3/bHx8fF/vTA/972gUaFhYBhmpFqq+lrLMpmansYQgp7eXlWizFBRDr+WoGmGJo1hGDQcF9f3B6LfFwLbsvA8Sa1eQwhBzLZ1lSvV9M/zPJVRox2wpmliaH+R5+r3tIWonNdeJOLhBZOmWk2ZeCKLGP8BydF/iy2KShUTygBLJLTBYTtQug4iA2antnatkMGikYw7JpZGRXE0n8+CaoX69BXm5oZ1hGM90kjiOrptl9+ZEs1+HoHvL4ztOgi5hOfU+HTqIGdnH8QyHCV2kViGSb4tT3dXN4X2ArlcLhC7mXSaWCyuXFx63gPXa+CwV4XI/fvmNBr0rV33Z729vf/hbvB072tCfJeS3qNrXeEv5XEcl96eXoShElANQ+C6KqXHabgIwwh9V/4jFmS5qMRRR7tl/HZVaMD4639dz6PSaIRef3WAWpfRaERYQo9RQpgLR5MLSTGJgWfkEOM/JDnyv2EZRaXKoZZOJmLa4LA9xXwirV0tWuwarf69iGLuz2QUfDqLOYxyWE3Mt6wNDkQS19Xl3jwX34cJOlOH0MfnM58hi3hulc+mD3J29iEso4FlKJ3PMizybXm6tM4XBZ/PfAiDoNCKniKDMH1VXZIInd73uN1zOpZyHIeKqG+IBJQqVKq976z0vBAkqxNKA822SaH1U/4kvq+p2coOxtE6vDvckPB7/PN7gf5qmCZCWNTcFGLyZyRG/i22sRyAz0CDr2srwpZa50tpnc9nPt/PZ9Jk0a6KckR0vSCZVDNfxWc+H3wbQleLpytz4TOQDK8sMPxCP5/nlPhs6iBn5/ZiGQ6WoeO+hqFWJHZ1Uii0k8vlAqMjmUoSjymDI3CuieiM+HpgyItChq057mX7gm4Y/7fUJOabwv7bfoq+ZkYfZ8JPDtBgIPoxle5k2zGEUJVHkSryAapLZBBOCz7lZ6/4D2N4g7wIC0qpIh/gt1b1iNkxVlaKzBehQ35C+tafYYsFhSm0zheADyhfBZlUOp+IRjiikYvPEbV3inz4aVWVCvVZX+wmtaslYnDIaFqYvlb8QkharfBchLeM65U5Mf0Yp2dD8Hla9cm35enq7Apiu206xBaL2apahfDLTIWSLrzZEcnh32YR+fsetntKRmjSHGXr+WWwU6mDkadW+B+QmDrM5fuwfPAYhkHMtrl27RrvvneYUqlEOp3mxo2bnDh5MmjgHLge/AE0sYIeSdRlID0S8TgjI6N8+umnuK5HKplifn6WH7/6Lh++8X8SG/pTYmIm0PkC8HVuQ9hCgY94i5/P+BzwtQAtcCxr0duk81Wpz15lfnZYM18/iLR2tchg/NG0MJV25rtalD6Gt4znVTg59ShnZh/GMlxs4eJJldXSpsHX3l4gl8vT3l4gn89z4sQJPjl2HFN3Sw+0BZTciSBR7W8B3ReQwPcIQN/xiT+wJi0s1Au18hA1lFUIzGZpaYnh4WFf9QNUlrFt25w4eYof/NM/c+zYcQzD4ObNIf7x+z/g5MlTSoAZokkEhZMS0Y20OEIqtk0kEiwvF3n7nXcYGR0jm80wPT3Fj155i6FrZ9ib+zFZcwIsOwBfPGaR6tiCiEXAZ3SCkSBcu2tGfiIiNprd3KQPtoKvTH3mCvOzQyxXlbUb6HyRNHoPP6tFXbPnu5Q0AIVcxnPLnJg6wOmZRzB95sNnPu1q8cHX0U42k+P48eOcO3+B3t4eTMMIQ5aBCqFf+WK2+VegH97rdm/pWNHX/xL6I3FJpMSyVAHyn//8NT766COEGfYXicVjnDx5iiPvH8XzJAcO7GdxcYl/+qd/pl5v8MTBx4nH4poFfV2oWefzH04/czmuC5SvlEq8+eab3Lhxk3g8zvDwMG+8+RbXb47xyPpR7tu+CTp/F7AVYG2DVPsmRMyE8hWQlrZ2E2F4bBXzRa1dVovjgBkjzDfjM19C6XxGShscbgCuwN3lM72nGNC3iIVXRLolTk4f4NTMwwp8wgtaj7XlcnR1qlT6zs5Oenp6yGQyHDt2jAsXL/HSSy/yyMMP42oDJxrZbdJoWnT8OwLiLrcvtCxTyUxNzhEDQiCDdRuBPqHDa5ZlcuSXR5iYmOTbv/PbusVWg5TuInT808+IxWJs29ZHV1cXP33lVWZm53j5pRfZtXsn9UZDF6zE/+YmncWX8oZQbSGu37jBxMQE16/f5Pbt2+zYuZNypcKrP3+d8YkZtmwosP++jRjdW/CKp8AtE4sbpPLrMWIWVK6CZyrwiWgyaYtr5fOMjqgrplXszlxlfm6YpWoCT/QH4JPSDQu6B9YtBKDzdT4JQhbx3CInpw5wena/Zj430Ply+TxdXV1qHUcuz0pxhZmZGaanprlxc4iXXnqRfXv3Uq1WQzbTL0Rwj1l1z1eh4R5B+IUc0Xem3tAVIwFbF590PVc5iQcH+fCjj/nqV77Mtu3bKJfLxOwYs3NzHDlylHK5TKHQpuO7HzExMcGzzz7DwccfUxXxPQ9/ATyotgyeJ2m4DQyMwEAxTZNiscrg4BUuXLxEaaXE1772Evffdx9vvPkWY6OjrFk7wLNPbqMjNUSt4WGuXMYWkEq1YdgWVG6A56rVa2Z06WSrq8XX8Qj3R8HYCr6K1vnmhliqJHGNDWBk9Oo1N9LQWkYkSOhgDhNnl/DcEqemD3B2/gC25WIZEqSJAWRzOdas6VUpVe0dJBIJDh95nxs3bmCaJnv3PsSePbtpOI1At/7ceW3Z16QWitXv/7rbPTKgNgLCWrZN76kRSuLxOMvLy9y4OcS6tWtJpdO88/YvWL9+nS4Mrora1Go13n33PW7eHKK3t4f9+/dz4fwFbt0a5fGDB3nk4X0aVKrYpetKpHSxLIvFxSVc16G9o0Ppe0L5Fx2nQXt7O7t27uLy4BWefvopvvTkExw+fIRTp07T07uGl158nr7YDerLFWKWAY1FkhZYpgP1UZB1lUwq4gTulSZGawFbk/FB5Pio2K1Qn73G/NwQy5UEntEPRloxn+9g9vz0+ag+q8Gn/X7CW0G6Jc7MHODswmMsLkyzvDhDR0cHsXicnp5u1q9bSyKZYGpqioWFBZLJJOVyGcu2OXjwMb789CFMw8RpOC1LICJbRMeL+BuareJVk//rb1+oNEdT4qjwzQ1ACmKxGNMzM7z11tvcHh9nz+7d2LZNo9Hg61/7GqVyibPnzrFnzx4uX77M6TNnyWVzvPji84yPT3Dh4kUeeOB+ypUK//j97/PlLz+NbdvEY3Ha2vIkk0muXr3Ka6+/ybZtW9i2dSvXb9ygr6+P4eFh+jdsYOvWrbx/9H0GBvp54YXnGR6+xZH3j9LR2cHDjxxAOItUStdJxWNIrwReGWGC21jG8lBZzFJ3i2l61CMZLtDMdK3VDAzfN2gq8M1o8FUTuEY/0khrP5/ugSLDGtOBGyli7UokeCtId5kzs49yam4/E+O3mBofpVypMDu3QCIRJ5vJMj09w8TkJCvFEp706Ovro15vcN+ePTzz1a9gW1bg1PexI0L3cxO8RAR+TRq39KJgvGtB/AXWBUeHqRDon920DOpOgyOHjxCPx/nX//P/xLXr1zn28TFeevEFent7+fu//3uqtRoDA/2cOn0GyzR59tmvUq1WOX78OF9++hDVWo2PPvqYjo5Orl65xvmLF0glk/StWcOmzZt5/8j7VKsVPE/y2utvMD0zQyKeACFIp9JcHhxESvjtb32TSrnM4SNHSCZTrF+/jpMnTzOVX+C5fWmEmUNIA4GH60JdB15M4SFogOGzUVTWtIAvqgM2iWi9gKiF+VxzAIwMXiS2Gw0L3hF8UiK8ZaS7zNnZxzg5s5+RkZvMTo9jWZZuyBMjmUwxPj7O6Ogo7R2dJJJJtm/fxs4dOzh79hybN23i1vAwfWv6sGN2UFwp0PmakbfK/dcMM0FL64S72u5RBMtfiXfbsrh0eZB63eH3fu93KBQKHDnyPqlUmjVr1vDaa69z/cZN/ugP/4CJiQlGR0fZuXMny0tLfPDhR3R2deJJyZkz54jF4uTbcly9do1EPMH8/AJOw+HK1Ws0Gg12797F6NgYc/MLFNoKxONxiisrnL9wkfHxcZ595quM3x7nnV/8gpGRUQptbUxPz9DZUWBbbw3bMpGegxUvYGb24BWPUquDdCHmuVjWEsIXn4Hbxb9Sg2bLtwWEflldDb6FuSGWKzHNfBp8bkuxIO3j8wIxfCfwPcpnUw9zc+gKxaU51vT1sbS4SE9PD8XlFTwpyWQzqumO02DLls188xu/xc2hm0xOTbKwsEB//wbWrVun2ou5bsDmspnfIqCToRUsQvpp3rzfjAj2B+cPTJkdUUelYH5uFiFgZGSUt9/5JTdvDpFJp/mHf/w+jutQaG/nsxMnmZ+bxbIs5ufmGbo5hOM4lFZKjI6M0tXVyfz8POVSmf37H2HjwAA/f+11lpeX6e/fQKlUZnx8grXr1mJZFjt37CCXzfLxJ8cY6O9n48YBLl26zKnTZ9iwYT19fX0sLi7x8P5H6W4zaYz+HNcTqvu4bZLo+zqisgNZG0Y6C7gsAQvYngtOCaQDIqOMieByo4DzncyiBXzXWZgbYqkSV05mI6OyWlxXx25DV1VztCOyis1bAa/I2dkDHJ98mOvXL1NeWWTb1m20FdqwBgZYu3Yt09MzmKbB/gP7adQbLC0v8/C+veSyWXp6enh4315SqRR7du/BsmzdpV6fjmYR7M9z0CnAt4makOD/JVCi4u62L5gPqGchCAKr8zuOw6ZNm7l9e5y333mHVCrFyy+/RDqdYn5ugbVr1zAzO8epU6epVGuk0xnW9K0hkUxQLBYZ6O/nhReeo1qtMjMzSzabpaurC89zefHFF6jXavT1rWFxaYlqpUZ3TzfF4jKZdAbbtti4cSPJZIJ6o8HY6Bie9Fi3dp2OKAmksJm7+R5Z08EwUlimiWmAYSUx2x/F4DEEDqaoY1ICyuCVoDEDpQvg1sGKdjnzQQcKiNpHWClTn7vO/Nwwy5U4rjEARlZnMrsR1gtbX4QsKEOd0CuBt8Tp6Uc4OXsAz6uRTcfYsG4H7YU20ukM3d3dtBcKbN++nVwuSy6XJ5vNqPUwUrJSWqHQ1sYzzzyDECrRw3V0RTI9l8301exu8f2uwdFNKsk9msDcEwD9hS96IHc4otFo0N3dzcsvv0SlUiGdVmUchAED/QOAZN26dczPzTE7M0t7oUAsFiOVUguMenp6SKZSGIbB5s2bcF1P1QeUkjVrwhKxnZ2dGMLAaTToaG/HcRxcxyUej1PXnXwGBvr1mOpIqap5njp5AnvxNB39adXgUKf/g4d0yqrSqGHiGXGElcG0bLB1wsFMEhbfIywejvaHRi1gA8pl6nM3WJgfpliJKfCZWTzXVUXLo+4UQOJG/PW6qr7ngVxBeEucmX6Ez6b3I4RDMibo7x/AEIJUKk1HZwe5vJ/FnCaVUhktpmkGpXQNQ/VHqdfrkZlqMm+hhd3CcKdo+shqFvSP+02vCSFwUyKlL37VftdxVBQilcTzoF6vBZ+JJxLcuDnE4JUrmJZJW1uelWKRRqOB67r09/dTr9VpNBzVtlWdAvCTE2Tr2RGRJE3HaQRREr8lrJSSWCzG6NgEVy58wqFdAsOwtXNcN/zDnwcJ0lGLmLwGuAama0A8B4k+cCU4tZDphO+N98FXoj53nYWFEa3zDSDMrO6NHHbRRKoMFy8oJxIJvUkPZBG8Zc7MPMyn0wdAeMrJjMCUkrSWDIWCiulmc1mdTKoWjwvh+0WjhpP+OwCRdmFAuCRbRiCnqI8wySPCPk2GqG983d12b7HgUFisehpk5ElyXZdGXSnawQkNk3qtxqlTp5jTjanzbXlGx8aYnJzi/vvvo6e3O3hSRfClRBobRrWW6CvdVLDpGLWZhkmtVufjjz8hZSzRVUgjUUWTTNNUax702D2ps6U9ietJHMfDdTxo1EBkkNKAehGchu4cpQfgSSitUJu7xvzCCEs+81l53VHcRfox3aBUWmj5quROX+wWEd4y52b28enUowjhETNcTbaCXC4b5PPl8zkFvkyGTCZNIpEIV641pVbR5GwW+H833zH/sRarbrMMsOcT/z2bv3q7ewBGWbbp3DLyE3lTNL9rWRbTMzNcvHCJRr3Oww/vI51OUS6Xuf+++9i3by+OTjINHLD+N4jw5vi/mhyjTZFxGbAgqMLpc/OLzM7cZnOfqmls6SbSwl/oEXw0mjGt3CEN18Op15EyiSNtvOoiNMoKlE4DHBdKRWrz11hYGGW5EsMzN4LVhuu5qjSu3/cuArjgicXTvkCV1SK8JQW+6UcxhMSOgC+fy9LZ1UVHe7uq3ZzNkc1kyKQzGnxR/bQZWE2uFBGdL1a586R/T5ue5Wa9sHkefkMiWEbGLf0dd3ClN49dHeO6Lqlkkgcfup+enl62bd1CqVSit6eHzs5OkKomdBBbbnFLBedtvpP4rBzJVQ33S2jUG+Tb2nnhK/sp1E/gSoibJqZpYESeEj9XMfgOKZGGBFcgpYM04ziiDad+gZiZwvQAF6S7QnVlgsXiNCvVBNIaQJh5xXqeb+1GmC8wNPSicd3sGm9FMd/sPo5PPwpILEOV0xBCkMvl6OzspF1nMmdyWbIZtY4jZD4Z5lmqDzbfqmAT0RsZ7GrikUBs+/c9hHGAT/87fyPVsfwxhUMAmitaSa1X+GlWQWKCVH6pTCbLC88/D0Cj4ZBIJMhmszTqdRztFgh4VIY306/WpBIY/DYDWgdsBaa++0HWDJBIJOkrgDfvYRqqtIcqMaHozycF6csX/TnhqRG50kGKJK7Zh9uQeGIWy3FALFOvFSmWixp8mzDsNpXV4oZlfP3raUoy0CD0rV3hLXF+di/HpxT4bMPR1VgF2VyLzpfNktELiBLJOKZh3FGkQtSKvVP1sebNx2n03oWOav+bZdNL3wFwt9sXy4aJDKU5648AfOCDQhsphlqwhJQ0HG0NugT9NYIPhynPga5hGgaO4zI7O0cul8OyzKZUf3Vs9OkMn27TjrMwextv+jLtSQU+09RNniPXJFdRrv89QhV39Dxcq4+qY6oECHMWz5NU6lBtpBCxzZh2QRUKipbFjboOAj1QxbQ9z42A7yGOTT6KDMSuAk0umwvy+QLwZdUCokQiidlUG03c+WXkdXhrmt0wgavlDtauAq70i4cFWkvgu/Tu3h9z15jVNcPvsIlgkNFDQliqOi+xWIybN4d47Y03mZ+fx7asCCsQfoeMflq9k0wkuXjxIq+8+iqVSllbr/4JZOSmhiOQUpUHmZqe48THb2O6S8TiKSxLGR6+9RtR+kIdzVPf6Wk90JWqmr9rdVP32ilVYLkkWVyBlUoS7M3YyS7QLo/mivShXy/UA93Q4JCLXJh9iONTjyFR4EMzXz6Xo6u7OyiNq9wtWa3zJXWZtJDFgxkRft+45jlq0qNX3bHVsxoaKwFMm9aBRO77HZHxq7Z7tILDE0fBorWaUC/UQ/IJMBGPc/XqNX70ox8zeOVKcINWPzdRJURNXCKRYPjWMO8dPszatWvJ5/NBrRfhGx+t+o1Q6VqVao333n0PquN0tKXVMlKzWVxFz+obLx5o61UVWnI9qNerNMjRsHeyvAKLRVgqCRqyG8MuAEInjDZZNfp+RRzOnvbzuSsY3jIXZh7k+NRjeEDM8Is0GWSyOV0UPKxYkA2s3WSkP5tsOuOvXCgk4PPLCUWJ5A7Ikp8P4HtB0z27YUKGigykVaGNHJ6IJxgZGeX1N95kuVjk0Je+RHd3lyrF4btPIiQUflSldc3Pz/PTV35GT083z3z1K2pZp6cLhUTFfWREhhDYts3xT08yeusK2/tzWLaNaRqYQVV6EQEe2g0S6mqertjqupJ6vUGtWqFaq+Fkn6Bmb2elYlCpSmq1MtXSHPXaCtKrg1R92PwBRmOsQdFIbwXDW+TC3IMcmzqIJyFmOFrUCbLZDN1dncHajVzOB19ocIQuviaNb9XrZgkTlU8+bazWGZvnsHluW3NlgN9QiV6iQw6nXepwnKF3ykih8EQizvz8Au+88wsmJ6fYv/9h7r//Pp1gKvXidhHoO35LBCFUfZl6vc5rr7+BYQh+6+tfJx6PqzQiET4HQggs08Lz3MB5nUwkuTE0xNEPP2FDu0lfZwJDWKrOoNHMAT5r+9/na7iep7o7ua5Lw3FxHI9Go05D5hDd38ZK3sSrjePKClVp4LlxpRqYEmRFhdECg8bX+ZrB98nk44r5TAU+DGVwdOoFRPm2NnL+ul0NPtP0O4ZGRGFECEQd0FEBEdXxAh078pk7zndUr/ZVHelXlmghobvc7hqAv4oymw0S9dq2VdvWd999j2vXbzAw0M+hp75EKqV8f7atohDS8zBt1a5Lug6WZeu2rPD++x8wPjHBH37n92lra1Pd1vHFv9QFJQVLS0vEbJtkKoltWczNL/DWW+9gAI/sWUsq7iIMM6jMEBU3oZHgW9xq4bvrujiOKhfScDwaDZdGw8Vxa0gszPwuTLkTpIvEwdELgYRhIpwFxNKnQF19py92vaIG30N8MqmZz3RUGr0QZLJZtXSyvZ1cPrpoPENS+/mii+59TSKanhhem0egH0aNvNZ5k8GrXzHDTTpXyzcIv67rXW13DUDfCPEnKfBlitAy8jslmKaJAD744CNOnzlDT3cXX/vaS6zpXcPk1BTpdJqVlRKnTp/WqfgFFhcXeeLgQQzT4ONPPmFqaprx2xN8+cuH2LBhA+VKBYSvZ6nwWrlc5uOPj3Hp8mX27NnNwcceZXDwCu8f/YBSucZv/9azbM5cA1Z02Y7wMYoubJLaReFJVdLDcR0cx8NxXBqupN4IwagmswFeI5xwIfCkhTQMDBFDWB4GFqp4pO7s6S1iSN/V8hgyAj4BZLIZurv8pZMafOm0rtEX+vmi/rkwg4XIdemJCnb4YwzZ3t8tWpi0Watq/Y7mk0QZ9x4k8L3nA0Z/h+lY/m4BhjIAzp8/z8efHCOfz/HCC8+TTqZ4Xa9Oy+dylCsVxsZuq8wMAWvX9jE2fptPP/2MhYVFVopF+gf6eeCB+6nVajpdXZ3Vsixq9TpvvfUOZ8+eRRgGn372GTdu3GBhYZFGo8Hv/v4fsbnHoza2gJXJNDVVDoyNiOh1PbmK9ZyGq9jPdfEC8IV6k5o/9VR6/hOIQDglvEYRXBfPA+EtqEzmmf18Nr1fWbum7+czyGYyysncXiCXz5PL5rTYbQmvEbKcL2ZVWUUFSt81FWXCkCWi8xfAOJxL3+/aqvPdgRiFYSBdN8qKdy2Lv3AkJHwaw/eEkNiWzfz8HB9+9BGJRJxDTx1iZmaG1994EyEE9brqMtTd3UM8ZlPo6aFeq9Hd1c177x1GepKtW7Zw9epVHnn4YTKZDEvLS8F5hTCwTJMPPviQhYVFHn/8cY5/+imFfBu7du3k/PmLtLUV6CjkWZ76iKwlsCy7SS/yjQ7F5gLX8zTwXM18Hg1Hgc9x3EgSAYQL7n0RqHRXoa/fEwKvvoxbnsIUHraxQrUhOTn9JGdnH0DgYuvVawJlcHTpFlgB8wV+vpT4bN8AABA1SURBVITO1mne/KSCMKARidU2CcMoYfxqKemDL8qS0e9oyheUoefjXre7t4JVkWhawd7qtDQMg+HhYebm5tg4MMDo6Cgff3KMWq1GJpMml83w3LPPYpkmvb29HDz4KHWnwbXr1ymXy7iex8VLF7FjMRzX5erVa6jqW+oG+jHla9dvsHfvQwhDkEln+K3f+job1m+gWqkyNj7Jmz//Ad7KGMlUOmI1ilCJRoHPcV2VfdNwaTQ86g2XWt0JxK4XjQ9HFPEgXh35USwKbmUWGtMId5aplQKHR5/jzMyDGMIJYrtCQFY7mdsLBfJtObK5XFClqpX5IOKTk5GIigxZ707g+xzzosmI+Fwj5PNeSO7IjHez3T0D6ifR1wFD5pWBGebn642MjuJ5HuMTE+TzeV588QWuXLnC0M0hnnzyCXbs2M7i4iJr161jw/p1rJRKJBMJ0pk0Fy9eJp/Pce3add54402eePwg69atxXH8BwAVSXFdPvzoQwwh+OY3vk53dxf/+P0fsG79OianF2hL1unpUIUWPRlOnCs9pKcKbbuuSvtyHI+GKwNr13FcXC8aSgt1LyIPXJPvU6hbZBp1KrV5Zld6Gans4ObyZor1NDGzjhAKwMIQZDIZurp0bDefJ6sdzJl0mng8wnz61FFwtbashfDQ4JiW303gWWV0RETv5+h+wTU3Xf+9b1+gVZf6T6cAhM5JqZI+x2+PMzExSSwWZ/euXTzxxEESiQRr1vRyYP9+uru7kFLy2MHHkJ6q1nlg/yMIoaIIA/0DmKZBX98aqtUqW7dsCdw2QoDTaNDZ0cGDDz7A2NgYjz76KFu2bObw4SMAdHa0UyyWOHNtgriY449ffoBaw6VS1RUHPKEiG45y2zRcLXIbLg1XpV+5XphL6LMd0gssLZ99hADTkJgmOJ7HYtFlYq7MyMRGppa3UfEyWMIlYWlrWCrXUzawdnVKVUZHODJRg0NvYtULdcd940Kz8h39+quOb53KyAzKZpBHjZkgRt4qAb8AE36BZZmR/yOqha9DXB68gmGYdHR2snnzJtLpNKVSmVw2SyGfp66TCbyI9zK6RFAI5fzdunkzwjCo1+u4rl90O7xp+/btZd++fdi2ze3b4wwOXqFv7Vpuj4+Ty6Z4Z3CYE2drlGomf/TCNtIJi6VSA8+Tyrr1dTxX63sNn/U8HU7z73Dkij2l55lCYppK5BbLLlOLLrdnXSYXXJbLHpIMlimIGzU/rxOJ8g5ks9mmrBYFPp1YEEmpCnUxEXxHExPr+7V6jmjCiJ9YENlDKIIjLB7MrH/YnajOP3frz2/ADaNyjyIDChhbvTBtk4WFBaamp7Asi3Q6TWdXJ5VqFZA4DYcGcpX4CDnUh7XaU6vX76AQq82TEumoruqmZTI4OIjjuoyMjNDT3U2tXqNUWiYWS/F//OAUN8aW+F++dR/rerIsLJepNZzQ0NAM6LrKUawSbWQw4cqBKzEMxXYSj1LVY2bRZUyDbqmkwnWmAbZlIESYrYNU5UIs2yaby9Le3k5bWxu5XJ5cVjmYfZ3P0vFxguuOxnPDp735lT/OO8/aKnsizO4NmdMfqxce1vItoUS48wF3vd1Ds0JWUW6EAFVl+uFbFJdXcD2XBx+4n0w6TbVa1WlV4RPnd7X09zfRv5T/8vXpG2ZbFjPT05w8dYr5+QU2rF/PgQOP8L3/+t9xXYlteGRTcd4/OcnodJXvPLORA7u7MIB6wwl0vlDf81Pl1UkMIbFNddHl/6+3q9mt47bCHzkcknOla0WSHTlx0xpFKwtNF902bZFuvSjQRZM+Rh+hj9FH6aIIsii6bYGkgdvYaY0idvynH0u6mnt1NcMuSB4ecsaSLQEmYGsuhzNDHh6eP55zuOjw/GWHR7sdvtvv8XLmsDzzMReVFFmskgvmFSV9ThxjLFZXVwPiXcO1a4nqccr3KmUghzjbgRSCTEGRS563FxxnIAKYHI+IqDrkppn0FH9HWqBcsnyzcqljGsjDI6JeWKVVVaFtWzx48A2ePH2CO9vbuHPnTjiImpqxrVsCBW2kUxuO1SOFA0UIgbZtoZTCzp1t3L17F3t7u/jq3r9htMKyO4NtGqyoGvcfPscf//QtfvPxj/Dbj3+IFVuhDWzYu8SHPNPCQUs/xnbR48lhh0e7Z3i812P/2OH0zEEKQFUCug4ddYQPkFJCVQq1rqG1hrUWKysrmK6uYjpNsRvx2FNjDCpZsYXItY3zYMC33/IHOB7nFBQ5qmRsHXCJ149+L//BqGLXDZ65qFzJH5CTYicchJSYnyzwYvcFptNVfPTRzzGZNFgsFsnzJGRQiJpgXuJEOoafcZ8JGFtfDj5Q6fqNG/j0k99h0kywubmBv3z2GQ5eHmJiDVRVQ0iJtj2BdAtASnz+j10cLVfx659t4PvXJbQCFqcdlOwhpb9+ftDh8W6Hx3s9dg97LJYu7DkDVgsmF/rjaWUlUSkf5KS1hjUWxlo01vrDnScTNJPGH3naTNA0lrIZSCmDQTqCIC2uHMFiNu4AMS7bxcWbyYog7Ms1+QRn2ghxaZ+YWhWEgkw+Y7TuErl6L++MQGN2NAlnZ0tYY/GrX/4Ck2aCW7duBcWiYK/seXoLASGOhX8tsBViyylTSeyLlD5QBxDYPzjAP7+6h+5sCSkbSOXPLFnM55isrODGjS28s7GBw6XFn//e4ntrC3z4gcPWusXucY/He57Fvjjs0Z76SVGVgKkFTYI3OYnAXhVUraBrDWMMjDVorIW1DWw4W9daE+5ZWGOgtYHWNWpVk0/iYPoyxOGGlFx+803jNtsQOdJpokG2Higk4R2co7mx7zCCE75DuHhJNfhq6dlinwLi9OEohngK+nKZYlBpVYoRld+V740HVOcTwMEYvx2npXfeXWrSNHj46BEe3P/GewlLidnxDF23xMbmJrZuvo/pdA1d3+HocA97ewf4cjbDvfen2Lm9hf1j4Kj1ppZKAKZOJg4HL9PFUM669uzV2IB0JiKdRzSjfb3RBlpr1FqhVjWUqqHq5JUTKdHARy+TcJjcR+AaKnPJHJF+5wjntXhC7ihKMYIyQGDnBlMeYR4N8UUnXrtcjQK61DlBW1MihFQmzMooM2Nbsc+e7GegpXtUw9gTCCGHlKBSCl9/fR+PHn8L2zQ4OT6G1gY3P/gB1tc30TuHp0+/Qzs7goDD2sTig61bULXB/144KAlolcnjEFKiqiSUqlHXyiOUMWis8Yc32yZdG0/p6lqjDhSurhUFv1dVReeqZB2PRJWzSCbkl6Lbq5kdF1/GRZ2cYrm8HlEBYe1cakFWiuHjeHMJ8IrZsZKxhCFUWEElu+XGThqeyF4HYGibJ6EEOUJyeSl+JBqxv/jyCzx7/hQ33r2Ja9M1XN+6CWMbHB+9xNnpArUSeO/dDUwmPi2Hj//tUBVSu6oqVEoR0nnW6tmqJeSz/m+tUWtN5xgrpVCpClVw/4ouYDEd8ThcXaJ4QNJqEZUykTfN1zWZUfLtxtRuTJtND0e4horsL0NLqmIY6C5F/ABchQUXJDlpZC6YBXjcQFjeAekoroBRMa4B+ydSBBcKZCOZyLkByjrnMG/nODqc4cfb69je3sbmxjqsrrE8naNtWzr1sQvOq1yOqqR3WtBGw2hNSoQNMl0Tzsw1Rge2Gv6qSOWUD/WMx5oKQQf9cfg5IGOf8bpnQTc0MiEIAYbzzClYqf06emdpR+RmMD6t5Xvz/9MeeP7tyyEfcIWwzNgZB+f9yZjMUar/+Yph/hScxTJcBbuMyoZvz+8Nvc9c70/B/P2nn+DDn/wUW+9tYW06xWIxx7Onz/Cfh//FyewEZzGfnfC9qZQP9dTaJ8C01qKZNLDGommYXBcQr6416rpGrRRkyHtNEXZCDJwHklnFFfVjMOPiCd0dwKuExzC+JY4xWR8y6loAOyFWiUyuwLeCBYd+vVUKmMUUZH7gSIHdYIMSCKuYa7K+ZFQAgylKa6zPqQbtxRbU4nSxwO3bt7Gzs4PZbObT0x7sY29/H8fHx+j7HlIKjzhBc9XG2+ka2wSN1RKli9prXeugeKhA5SJrjUjnqer4RKQFFJWxcXep4nfEHcfGzUCaPTG+6gnjcuWihHJqly7d4F5OAAIBcqzdW8uMMKBI0YzCBim4IM+ZLagBp27EEeLDcBcAOmcjhJxCYD73rLZtW5ycnGA+n2O+mAMOSSs1gdIFM0kzadAEmc6YqLnWpO0mhCvkOeoXW4gjPXfFJCbYsdXLxOl0QEw57tg6iDGF8yj/LRgiIVj3/a0xaox8/uI3Sdph+8bJ9sI7hMt4913+rDjWGRcyO3mw8QwDEaiMBfCXiBzIRNACIAhWiIw7UV6X8RPOojxw+xDP4Zw/H81og7V31mhXomkStbNkm/PynArsNSKdN5cg2euyyQyyakipIADySAbYVEf8LOS/nNLENom6p9iVfEEmmZDXZ0s61bvAkglmBbchfOJUkF33eT15hLv8t3hbhmiwDzvHfchAYXF+8CnSLU5Q1Fa51jGgF7QZnmQNTi9zS38xgUEW9Vtq3vPEG5/9mbh+h8KEXQpPCaM8F7MlVFL6I6uIyjFPlCD/oh9+m/EGBqoIGzG4N1pEVK4crUUh+oLCJnDn1wGeGTsO1Bku0IjUcsz9ni/iDCkdqE/poJwUGef/dRcMblgul6AS/oO96+AdPmTYGHAhjwobPdKgo+t6+l0khE2EkpAyAkT4g2r9PiVpigULKIRsVVWw1uBaP4XR2tcFlhqpnKoUpKoor0pKX5ZkU8DFgyq5EwkrRLqLurxNXJQQOVXhcmEmUwUMpMVGHHJEY7ugpKNV+XP8FFOX8uKEdtwclH4nVtzzs4vfqhICD0AnHHrpXZekEHAScQTZVKS0DomVeg+YZI4hgRtJQCcUY2aYFJSUCUwoTUOAp37aGAA+KaYIdTEyTgr/j2Su+BrnvAEXAW0YD+ViXqxOf0q5tZS12AnjI/Dp2RiI4kcxhcGkRL9X8z32fQ5feg/XZh2xc6rJkDVHwPIfPFF84/LmYZk9hOudj/4KEWI+CAdAL2gigYBIgiNkuFsoG57CFRAi+TDHqoSQIctTlIaIpaci4OU/rTVRUsmMwUIkBHNwwdE0fIeAHftdaO9AVpP7MwakIu6V6riTAX9/BMX5UtRQeci/n3YxcjgHykrgjqJRGmccYc6O/b0IH/6u7F9wYXOUaOf1yyUQsJfRlNELAdEH9siQixSRgEgRDlQf2kXew1PIEpfmABiUOHkuo0rZ3mjg58ILUeGbgdLElLiBlXPcHy1s3ktGy8ur7kVYCHLjD2MVkeL2PrtvZgxN19mZykzM4JTWlampRiWCxN7dSD2Qwzy/Luqco10TL4459H0/DN27oCgH7AjgX6/7wPr6+l+7rvuDlNJBwskedCQo+j4oIa+3EF7ZSiK+1PlI29iyZzdHSnH7TTiC9MkZzqU/53X1vAYRRmPf4yMr38uH7cGRNxRghhMOzH70soRijG65oPTwaFeJrutcBQBCiKy/XYcz59Tq6urfLn5fXv4PnAWNbW4ACD4AAAAASUVORK5CYII='/>
<line x1='0.00' y1='78.51' x2='227.88' y2='78.51' style='stroke-width: 4.05; stroke-linecap: square;' />
</g>
</g>
</svg>
<p>If you inspect the SVG above you&rsquo;ll see that rather than being made up of text elements it is a collection of path and image elements.</p>
<p>Again, it is unlikely that many people will use marquee like this. It is much more likely that they will encounter it through ggplot2 in the form of <code>geom_marquee()</code> and <code>element_marquee()</code>. The takeaway, however, is the same - it is now safe to use marquee even when you don&rsquo;t know which graphics device will be used to render the text with.</p>
<h2 id="whats-next">What&rsquo;s Next?
</h2>
<p>Circling back to the starting quote. I&rsquo;m 100% certain I&rsquo;m not done yet. I believe the next big push will be proper support for vertical text in textshaping (it currently only deals with horizontal text). I also have some plans to get marquee to automatically translate the numbers in ordered lists into their proper representation in the script that is being used, so that e.g. &lsquo;3.&rsquo; will be shown as &lsquo;.٣&rsquo; when used with Arabic text.</p>
]]></description>
      <enclosure url="https://posit-open-source.netlify.app/blog/tidyverse/2025/text-rendering-updates/thumbnail-wd.jpg" length="655122" type="image/jpeg" />
    </item>
    <item>
      <title>Contributing to Public Transit Data Analysis and Tooling</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/</link>
      <pubDate>Thu, 19 Dec 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/</guid>
      <dc:creator>Michael Chow</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>Hello! Michael Chow here. In 2025, I&rsquo;ll be focusing on contributing to open source data standards and tooling for public transit. If you work on analytics at a public transit agency, please reach out on <a href="https://www.linkedin.com/in/michael-a-chow/" target="_blank" rel="noopener">linkedin</a>
 or <a href="https://bsky.app/profile/mchow.com" target="_blank" rel="noopener">bluesky</a>
&mdash;I would love to hear about your work, and how I could be useful!</p>
<p>(I will also be at the TRB Annual Meeting 2025 in Washington D.C.)</p>
<p>At this point, you might be wondering three things:</p>
<ul>
<li>why focus on open source in public transit?</li>
<li>why is this on the Great Tables blog?</li>
<li>what are you hoping to contribute?</li>
</ul>
<h2 id="why-focus-on-open-source-in-public-transit">Why focus on open source in public transit?
</h2>
<p>People doing analytics in public transit are active in developing open data standards (like GTFS, GTFS-RT, and TIDES). These open data sources are complex&mdash;they cover schedules that change from week to week, buses moving in realtime, and passenger events. As people like me work more and more on open source tools, we start to lose touch with data analysis in realistic, complex settings. Working on open source transit data is an opportunity for me to ensure my open source tooling work helps people solve real, complex problems.</p>
<p>An inspiration for this angle is the book <a href="https://r4ds.hadley.nz/" target="_blank" rel="noopener">R for Data Science</a>
, which uses realistic datasets&mdash;like NYC flights data&mdash;to teach data analysis using an ecosystem of packages called the Tidyverse.
The Tidyverse packages have dozens of example datasets, and I think this focus on working through examples is part of what made their design so great.</p>
<p>A few years ago, I worked with the Cal-ITP project to build out a warehouse for their GTFS schedule and realtime data. This left a profound impression on me: transit data is perfect for educating on data analyses in R and Python, as well as analytics engineering with tools like dbt or sqlmesh. Many analysts in public transit are querying warehouses, which opens up interesting use-cases with tools like dbplyr (in R) and ibis (in Python).</p>
<p>(I&rsquo;m also inspired by tools like <a href="https://github.com/r-transit/tidytransit" target="_blank" rel="noopener">tidytransit</a>
, and other communities like <a href="https://pharmaverse.org" target="_blank" rel="noopener">pharmaverse.org</a>
.)</p>
<p>Here are some relevant talks:</p>
<ul>
<li><a href="https://youtu.be/MD5sKupHsTQ" target="_blank" rel="noopener">Tidy Transit: Real Life Data Modeling for Public Transportation (Hunter Owens, Cal-ITP)</a>
</li>
<li><a href="https://www.youtube.com/live/EYdb1x1cO9U" target="_blank" rel="noopener">The Accidental Analytics Engineer (Michael Chow)</a>
</li>
</ul>
<h2 id="why-is-this-on-the-great-tables-blog">Why is this on the Great Tables blog?
</h2>
<p>It gives me the opportunity to show off a lot of interesting, transit related tables!</p>
<h3 id="great-tables-data-paris-metro-lines">Great Tables data: Paris metro lines
</h3>
<p>If you&rsquo;ve seen the Great Tables documentation for <code>GT.fmt_image()</code>,
then you&rsquo;ve basked in this beautiful example from our Paris dataset.</p>
<details class="code-fold">
<summary>Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">metro</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">importlib_resources</span> <span class="kn">import</span> <span class="n">files</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">img_paths</span> <span class="o">=</span> <span class="n">files</span><span class="p">(</span><span class="s2">&#34;great_tables&#34;</span><span class="p">)</span> <span class="o">/</span> <span class="s2">&#34;data/metro_images&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">metro_mini</span> <span class="o">=</span> <span class="n">metro</span><span class="p">[[</span><span class="s2">&#34;name&#34;</span><span class="p">,</span> <span class="s2">&#34;lines&#34;</span><span class="p">,</span> <span class="s2">&#34;passengers&#34;</span><span class="p">]]</span><span class="o">.</span><span class="n">head</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;lines&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_paths</span><span class="p">,</span> <span class="n">file_pattern</span><span class="o">=</span><span class="s2">&#34;metro_</span><span class="si">{}</span><span class="s2">.svg&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_integer</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;passengers&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="wtzukvurbn" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#wtzukvurbn table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#wtzukvurbn thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#wtzukvurbn p { margin: 0; padding: 0; }
#wtzukvurbn .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#wtzukvurbn .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#wtzukvurbn .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#wtzukvurbn .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#wtzukvurbn .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#wtzukvurbn .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#wtzukvurbn .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#wtzukvurbn .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#wtzukvurbn .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#wtzukvurbn .gt_column_spanner_outer:first-child { padding-left: 0; }
#wtzukvurbn .gt_column_spanner_outer:last-child { padding-right: 0; }
#wtzukvurbn .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#wtzukvurbn .gt_spanner_row { border-bottom-style: hidden; }
#wtzukvurbn .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#wtzukvurbn .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#wtzukvurbn .gt_from_md&gt; :first-child { margin-top: 0; }
#wtzukvurbn .gt_from_md&gt; :last-child { margin-bottom: 0; }
#wtzukvurbn .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#wtzukvurbn .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#wtzukvurbn .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#wtzukvurbn .gt_row_group_first td { border-top-width: 2px; }
#wtzukvurbn .gt_row_group_first th { border-top-width: 2px; }
#wtzukvurbn .gt_striped { color: #333333; background-color: #F4F4F4; }
#wtzukvurbn .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#wtzukvurbn .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#wtzukvurbn .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#wtzukvurbn .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#wtzukvurbn .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#wtzukvurbn .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#wtzukvurbn .gt_left { text-align: left; }
#wtzukvurbn .gt_center { text-align: center; }
#wtzukvurbn .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#wtzukvurbn .gt_font_normal { font-weight: normal; }
#wtzukvurbn .gt_font_bold { font-weight: bold; }
#wtzukvurbn .gt_font_italic { font-style: italic; }
#wtzukvurbn .gt_super { font-size: 65%; }
#wtzukvurbn .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#wtzukvurbn .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>name</th>
          <th>lines</th>
          <th>passengers</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Argentine</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
          <td>2,079,212</td>
      </tr>
      <tr>
          <td>Bastille</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0YxOTA0MyIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY3OS43MSA1OTIuNzVjMC03OS40ODYtNTguNDItMTU5LjY4LTIwMy4yNy0xNjcuMjVsLTE1LjEzMy0uNzEyIDcuNDE4LTEwMS4zNTFoMTkwLjc4di04Ny45MTNoLTI3OC41MmwtMjEuMDM2IDI3NS40OSA4Mi41NDIuNzEyYzk3LjYxMy45NzkgMTIyLjk3OSA1My4zMTcgMTIyLjk3OSA5MS42NSAwIDYyLjE2LTUxLjYyNyA4NS42MjktOTIuODY2IDg1LjYyOS00NS4xODggMC03NS4wMzctMTYuNjE1LTEwMC42MS0zMy45MTJsLTM4Ljg5NyA4Mi42OWM0MS4wOTMgMjMuMTcyIDg5LjI3NyAzOC4zMzMgMTQ1LjUgMzguMzMzIDEyMC43NzEtLjA0IDIwMS4xMi04Mi4wOCAyMDEuMTItMTgzLjM3Ii8+PC9zdmc+" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0NEQUNDRiIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY4OS4yMSA2MTQuOTJjMC02OS42MTctNDIuNzQyLTExMS44MS05MS41NzMtMTM0Ljg1IDQ5LjU2OC0zMC4xNzUgNzUuMjA2LTY4LjQ1NCA3NS4yMDYtMTE3LjkgMC05MC45ODYtNzcuMzc4LTEzNi44My0xNzAuNDYtMTM2LjgzLTkwLjg3NyAwLTE3MC40MSA2MC45My0xNzAuNDEgMTQ4LjY2IDAgNTQuODAxIDI4LjU0NSA4Ny4wMzEgNzQuMjM1IDExNS41NC01MS4wMjMgMjYuMjk2LTkwLjc3OSA2Ny43MTYtOTAuNzc5IDEzOC4xNSAwIDgwLjM5NyA2Ni42OTMgMTUwLjkwOSAxODQuNTggMTUwLjkwOSAxMDguODYtLjAyIDE4OS4xOS02Mi45NiAxODkuMTktMTYzLjY4TTU3MS40MDkgMzY4LjgzYzAgMzMuMTItMzAuMDIxIDYzLjY4Mi01Ny44MTIgNzYuNTU5LTMzLjcwNS0xNC4yNzItNzcuMzAyLTM3LjYyLTc3LjMwMi04MS4wNTkgMC0zNi42ODkgMjYuMjIxLTYyLjI4NiA2Ny41MjctNjIuMjg2IDQzLjUyOS4wMSA2Ny41OCAyOS45MSA2Ny41OCA2Ni43OWwuMDA3LS4wMDR6bTguMjIgMjU0LjQyYzAgNDIuMDQyLTI3Ljc3IDc3LjM3My03OC4wOTUgNzcuMzczLTUxLjEwMyAwLTc5LjU1LTQxLjQ1OS03OS41NS04NC44OTYgMC00MS4xODggMzQuNTM5LTc1LjcwNSA2OS4wNTgtODkuMzE4IDQ0Ljk5IDIyLjU0IDg4LjU5IDQ4LjggODguNTkgOTYuODVsLS4wMDMtLjAwOXoiLz48L3N2Zz4=" style="height: 2em;vertical-align: middle;" /></span></td>
          <td>8,069,243</td>
      </tr>
      <tr>
          <td>Bérault</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
          <td>2,106,827</td>
      </tr>
      <tr>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzk5RDRERSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTM4Ny41IDc2NC4xMVYyMzQuMDNoLTkyLjM2MWMtMjQuMDkyIDE4LjY5NS04MS4xODkgNTMuODcxLTE0Mi43MyA4My4xMDVsLTMyLjI5MiAxNC45NzQgMzYuMDk2IDgxLjYgMjcuNzc2LTE0LjI2YzE5LjQ1Ni05Ljc0NSA3Mi44MjgtMzcuNDM1IDkwLjc3Ny01MS42MTN2NDE2LjI4aDExMi43Mk04MjEuMjIgNjA2LjkzYzAtNzQuMTUxLTQ0LjI5Ny0xMTcuNTY5LTEwMi44NTktMTI4Ljg1OXYtMS40NjVjNTYuMjY2LTIwLjk5NCA4NS40MjgtNjIuODYzIDg1LjQyOC0xMTcuNTcgMC03MS4xNDMtNjEuNDk1LTEzNC4wNC0xNjkuNTEtMTM0LjA0LTYyLjQ0NyAwLTExMy4zOCAxNy4yNy0xNTkuMTUgNDcuMjE3bDM2LjcxMSA3Ny44NzdjMTcuMjM2LTE0LjIyMSA0OS40NS0zOC4xODYgOTguMzQ2LTM4LjE4NiA1NS41OTMgMCA4MS4wMjkgMjkuOTg1IDgxLjAyOSA2My42OTQgMCA0MC4zMjQtMzIuMjEzIDY1Ljg3NS04NC4xMjEgNjUuODc1SDU1MS41OHY4Ny41OGg1NC44MDFjNTQuMjAzIDAgMTAwLjY0IDE5LjQ0OSAxMDAuNjQgODAuMDk3IDAgNDQuOTItMzguMTk3IDc4LjY3LTk5LjkzMiA3OC42Ny00NC43NzQgMC04MS42MDQtMTcuMjcxLTEwNC4xNy0zNC40NjRsLTQwLjU5NiA4MS42MDFjNDIuNzk0IDIzLjkyNiA4NC4wNjIgMzkuNjEzIDE1Mi4zNyAzOS42MTMgMTIzLjE0OS0uMDExIDIwNi41Mi03NC44ODEgMjA2LjUyLTE2Ny42NWwuMDA3LjAxeiIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
          <td>1,909,005</td>
      </tr>
      <tr>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzAwNjVBRSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY3Ni40NCA3NDAuOTV2LTg4LjcwOUg0NTcuNzZjNi44ODgtMzAuNzEzIDYwLjEzMy03NS4wMzUgODcuMDg0LTk5Ljc1IDYzLjg1NS01Ny45OTcgMTIxLjYyLTk5LjE4OCAxMjEuNjItMTkwLjAxIDAtMTA4LjA1LTg3LjY3OC0xNjAuNjEtMTgwLjc2LTE2MC42MS03MS4zNjYgMC0xMTguNjIgMjAuOTkxLTE2OS43MiA2NS4zNzlsNTUuNzE3IDczLjU4NWMxMi42NTItMTQuMzM1IDQ0Ljk3NS00OC4xMTIgOTEuNDM0LTQ4LjExMiA1Ny43NiAwIDg3Ljc0MiAzNi43NzYgODcuNzQyIDgyLjQ4MiAwIDUxLjIwOS0zOC4wMjMgODcuODU0LTczLjM0NCAxMTguNjMtNzAuNzA5IDYxLjU5LTEzMS40NyAxMTUuNTctMTQ0Ljk0IDE3Ny4yOXY2OS44NjFoMzQzLjg1MSIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzg0QzI4RSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY3Mi4xNiA1NzAuNTZjMC05OS4zMDUtNzAuNTE5LTE1Ny4wMS0xNTcuMTEtMTU3LjAxLTU1Ljk0NyAwLTg5Ljg4NyAyMC4yODctMTA3Ljc5IDM2LjA2OCA2LjY5OS0xMDYuNTIxIDYxLjQzOC0xNTkuODcgMTM0LjQxLTE1OS44NyAyOS43NjggMCA1Ni45NzMgNi43MDEgNzEuMDMxIDEyLjg5MWwxNi42Ni05MC4xMTVjLTIxLjcxMy01LjQxNy00OC45MTYtOC45MzQtNzguODMtOC45MzQtMTY2LjU5IDAtMjUxLjM2IDEyNS44OTEtMjUxLjM2IDMwOS44OTEgMCAxNDAuMzUgNTAuODk1IDI0MC4zMSAxOTMuNTggMjQwLjMxIDEwOC44OS0uMDAxIDE3OS40MS03Ny41NjEgMTc5LjQwOS0xODMuMjMxbS0xMDUuODA5IDExLjI4YzAgNDUuNjI1LTI2LjI1NCA4OC40My03Ny40MDEgODguNDMtNTIuNTc4IDAtODAuOTUzLTQ4Ljc3Mi04MC45NTMtOTkuMTIgMC0xNS42MzggMC0zNS45NTkgNi4wMDQtNDQuOTY4IDEwLjQ3MS0xNi41ODYgMzYuNzk3LTI5LjE4NCA2OS4wNTUtMjkuMTg0IDUwLjkyIDAgODMuMjkgMzUuMTkgODMuMjkgODQuODRsLjAwNS4wMDJ6Ii8+PC9zdmc+" style="height: 2em;vertical-align: middle;" /></span></td>
          <td>4,291,663</td>
      </tr>
  </tbody>
</table>
</div>
<h3 id="amtrak-interactive-route-table">Amtrak interactive route table
</h3>
<p>Our 2022 Annual Posit Table Contest received the most incredible entry&mdash;an interactive table of Amtrak routes.
The table uses the library reactable in R (which we recently <a href="https://github.com/machow/reactable-py" target="_blank" rel="noopener">ported to Python</a>
!).</p>
<p>Here is a link to to <a href="https://joshfangmeier.quarto.pub/table-contest-2022/#sec-table" target="_blank" rel="noopener">the interactive Amtrak table by Josh Fangmeier</a>
. And I&rsquo;ll drop a handy screenshot below.</p>
<img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/amtrak-routes.jpg" style="width:85.0%" data-fig-align="center" />
<p><br><br></p>
<h3 id="cal-itp-trips-table">Cal-ITP trips table
</h3>
<p>Our 2024 contest saw a great set of transit tables submitted by Tiffany Ku at CalTrans (<a href="https://forum.posit.co/t/hourly-transit-service-patterns-table-contest/187805" target="_blank" rel="noopener">submission</a>
, <a href="https://github.com/tiffanychu90/great-tables-contest" target="_blank" rel="noopener">github repo</a>
).
The submission showed service patterns using stop times binned by hour.
It produced these for all California operators!</p>
<p>Here is the reasoning given behind the table:</p>
<blockquote>
<p>We can see what service patterns look like across operators by hour of the day. In one table, we can quickly see a summary snapshot of what this service pattern is and see the type of riders the operator typically serves. Here&rsquo;s the same <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7160583/figure/fig6/" target="_blank" rel="noopener">chart</a>
 made in a <a href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7160583" target="_blank" rel="noopener">paper</a>
 about for transit in Calgary, Canada.</p>
</blockquote>
<img src="https://posit-open-source.netlify.app/blog/great-tables/open-transit-tools/calitp-service-patterns.png" style="width:85.0%" data-fig-align="center" />
<h2 id="what-are-you-hoping-to-contribute">What are you hoping to contribute?
</h2>
<p>I&rsquo;m hoping to focus on two things:</p>
<ul>
<li>Workshops to support R and Python analyst teams (and help me appreciate their needs).</li>
<li>Collaboration on creating open source tools and guides for analyzing transit data.</li>
</ul>
<h3 id="workshops">Workshops
</h3>
<p>Beyond my obvious potential involvement as a table fanatic, I&rsquo;m really interested in making the daily
lives of R and Python users at public transit agencies easier.</p>
<ul>
<li><strong>Workshops on R</strong>. Think Tidyverse, Shiny, Quarto, querying warehouses.</li>
<li><strong>Workshops on Python</strong>. Let&rsquo;s say Polars, Quarto, publishing notebooks, Great Tables, dashboards.</li>
<li><strong>Analytics engineering</strong>. How to get analysts to use your data models 😓.</li>
</ul>
<p>I&rsquo;m open to whatever topics seem most useful, even if they aren&rsquo;t in the list above.</p>
<div class="callout callout-important" role="note" aria-label="Important">
<div class="callout-header">
<span class="callout-title">Scheduling a workshop</span>
</div>
<div class="callout-body">
<p>If you&rsquo;re a public transit agency, reach out on <a href="https://www.linkedin.com/in/michael-a-chow/" target="_blank" rel="noopener">linkedin</a>
 or <a href="https://bsky.app/profile/mchow.com" target="_blank" rel="noopener">bluesky</a>
, and I will send my calendly for scheduling.</p>
</div>
</div>
<h3 id="collaboration">Collaboration
</h3>
<p>I&rsquo;m interested in understanding major challenges analytics teams working on public transit face, and the kind of strategic and tooling support they&rsquo;d most benefit from. If you&rsquo;re working on analytics in public transit, I would love to hear about what you&rsquo;re working on, and the tools you use most.</p>
<p>One topic I&rsquo;ve discussed with a few agencies is <a href="https://wwww.septa.org/news/ghost-bus-ting/" target="_blank" rel="noopener">ghost buses</a>
,
which is when a bus is scheduled but never shows up. This is an interesting analysis because it combines GTFS schedule data with GTFS-RT realtime bus data.</p>
<p>Another is passenger events (e.g. people tapping on or off a bus). This data is challenging because different vendors data record and deliver this data in different ways. This can make it hard for analysts across agencies to discuss analyses&mdash;every analysis is different in its own way.</p>
<h2 id="in-summary">In summary
</h2>
<p>Analytics in public transit is a really neat, impactful area&mdash;with an active community working on open source data standards and tooling. As a data science tool builder on the open source team at Posit, PBC, my mission is to create value and give it away to teams using Python or R for code first data science.
I&rsquo;d love to support open source work in public transit however is most useful.</p>
]]></description>
    </item>
    <item>
      <title>Great Tables `v0.15.0`: Flags, Icons, and Other Formatting Goodies</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.15.0/</link>
      <pubDate>Thu, 19 Dec 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.15.0/</guid>
      <dc:creator>Rich Iannone</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>The development of Great Tables is really moving along these days. We just released version <code>0.15.0</code> and it adds quite a few nice things to the package. The features we&rsquo;ll highlight in this post are:</p>
<ul>
<li>adding flag icons with the new <code>fmt_flag()</code> method</li>
<li>peppering your table cells with Font Awesome icons via <code>fmt_icon()</code></li>
<li>support for displaying accounting notation with four number-based formatting methods</li>
</ul>
<p>Let&rsquo;s look at each of these in turn!</p>
<h3 id="using-fmt_flag-to-incorporate-country-flag-icons">Using <code>fmt_flag()</code> to incorporate country flag icons
</h3>
<p>When tables contain country-level data, having a more visual representation for a country can help the reader more quickly parse the table contents. The new <code>fmt_flag()</code> method makes this easy to accomplish. You just need to have either <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2" target="_blank" rel="noopener">two-letter country codes</a>
 or <a href="https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3" target="_blank" rel="noopener">three-letter country codes</a>
 in a column.</p>
<p>Here&rsquo;s an example where country flags, shown as simplified circular icons, can be added to a table with <code>fmt_flag()</code>:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">peeps</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">peeps_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">peeps</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;dob&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">str</span><span class="o">.</span><span class="n">slice</span><span class="p">(</span><span class="n">offset</span><span class="o">=</span><span class="mi">0</span><span class="p">,</span> <span class="n">length</span><span class="o">=</span><span class="mi">4</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;1988&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;name_given&#34;</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34; &#34;</span> <span class="o">+</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;name_family&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fill_null</span><span class="p">(</span><span class="n">value</span><span class="o">=</span><span class="s2">&#34;&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span><span class="s2">&#34;country&#34;</span><span class="p">,</span> <span class="s2">&#34;name&#34;</span><span class="p">,</span> <span class="s2">&#34;address&#34;</span><span class="p">,</span> <span class="s2">&#34;city&#34;</span><span class="p">,</span> <span class="s2">&#34;state_prov&#34;</span><span class="p">,</span> <span class="s2">&#34;postcode&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">peeps_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">&#34;Our Contacts (Born in 1988)&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_flag</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;country&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_vertical_padding</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="mf">0.5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_label</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">country</span><span class="o">=</span><span class="s2">&#34;&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">name</span><span class="o">=</span><span class="s2">&#34;Name&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">address</span><span class="o">=</span><span class="s2">&#34;Address&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">city</span><span class="o">=</span><span class="s2">&#34;City&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">state_prov</span><span class="o">=</span><span class="s2">&#34;State/Prov.&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">postcode</span><span class="o">=</span><span class="s2">&#34;Zip/Postcode&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="qsceyxxmoo" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#qsceyxxmoo table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#qsceyxxmoo thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#qsceyxxmoo p { margin: 0; padding: 0; }
#qsceyxxmoo .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#qsceyxxmoo .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#qsceyxxmoo .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#qsceyxxmoo .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#qsceyxxmoo .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qsceyxxmoo .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#qsceyxxmoo .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qsceyxxmoo .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#qsceyxxmoo .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#qsceyxxmoo .gt_column_spanner_outer:first-child { padding-left: 0; }
#qsceyxxmoo .gt_column_spanner_outer:last-child { padding-right: 0; }
#qsceyxxmoo .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#qsceyxxmoo .gt_spanner_row { border-bottom-style: hidden; }
#qsceyxxmoo .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#qsceyxxmoo .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#qsceyxxmoo .gt_from_md&gt; :first-child { margin-top: 0; }
#qsceyxxmoo .gt_from_md&gt; :last-child { margin-bottom: 0; }
#qsceyxxmoo .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#qsceyxxmoo .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#qsceyxxmoo .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#qsceyxxmoo .gt_row_group_first td { border-top-width: 2px; }
#qsceyxxmoo .gt_row_group_first th { border-top-width: 2px; }
#qsceyxxmoo .gt_striped { color: #333333; background-color: #F4F4F4; }
#qsceyxxmoo .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#qsceyxxmoo .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#qsceyxxmoo .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#qsceyxxmoo .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#qsceyxxmoo .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#qsceyxxmoo .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; text-align: left; }
#qsceyxxmoo .gt_left { text-align: left; }
#qsceyxxmoo .gt_center { text-align: center; }
#qsceyxxmoo .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#qsceyxxmoo .gt_font_normal { font-weight: normal; }
#qsceyxxmoo .gt_font_bold { font-weight: bold; }
#qsceyxxmoo .gt_font_italic { font-style: italic; }
#qsceyxxmoo .gt_super { font-size: 65%; }
#qsceyxxmoo .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#qsceyxxmoo .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" style="width:100%;" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<colgroup>
<col style="width: 16%" />
<col style="width: 16%" />
<col style="width: 16%" />
<col style="width: 16%" />
<col style="width: 16%" />
<col style="width: 16%" />
</colgroup>
<thead>
<tr class="gt_heading">
<th colspan="6" class="gt_heading gt_title gt_font_normal">Our Contacts (Born in 1988)</th>
</tr>
<tr class="gt_col_headings">
<th id="country" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="name" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Name</th>
<th id="address" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Address</th>
<th id="city" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">City</th>
<th id="state_prov" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">State/Prov.</th>
<th id="postcode" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Zip/Postcode</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
United States
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M256 0h256v64l-32 32 32 32v64l-32 32 32 32v64l-32 32 32 32v64l-256 32L0 448v-64l32-32-32-32v-64z"></path><path fill="#d80027" d="M224 64h288v64H224Zm0 128h288v64H256ZM0 320h512v64H0Zm0 128h512v64H0Z"></path><path fill="#0052b4" d="M0 0h256v256H0Z"></path><path fill="#eee" d="m187 243 57-41h-70l57 41-22-67zm-81 0 57-41H93l57 41-22-67zm-81 0 57-41H12l57 41-22-67zm162-81 57-41h-70l57 41-22-67zm-81 0 57-41H93l57 41-22-67zm-81 0 57-41H12l57 41-22-67Zm162-82 57-41h-70l57 41-22-67Zm-81 0 57-41H93l57 41-22-67zm-81 0 57-41H12l57 41-22-67Z"></path></g>
</svg>
</span></td>
<td class="gt_row gt_left">Martin Bartůněk</td>
<td class="gt_row gt_left">1850 Valley Lane</td>
<td class="gt_row gt_left">Austin</td>
<td class="gt_row gt_left">TX</td>
<td class="gt_row gt_left">78744</td>
</tr>
<tr>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Slovenia
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#0052b4" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z"></path><path fill="#eee" d="M0 0h512v167H0z"></path><path fill="#d80027" d="M0 345h512v167H0z"></path><path fill="#0052b4" d="M222.7 167v-66.8H89V167l67 82.6z"></path><path fill="#eee" d="M89 167v22.2c0 51.1 66.8 66.8 66.8 66.8s66.8-15.7 66.8-66.8V167l-22.3 22.2-44.5-33.4-44.5 33.4z"></path></g>
</svg>
</span></td>
<td class="gt_row gt_left">Feride Šijan</td>
<td class="gt_row gt_left">Tavcarjeva 58</td>
<td class="gt_row gt_left">Sodražica</td>
<td class="gt_row gt_left"></td>
<td class="gt_row gt_left">1317</td>
</tr>
<tr>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Slovenia
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#0052b4" d="m0 167 253.8-19.3L512 167v178l-254.9 32.3L0 345z"></path><path fill="#eee" d="M0 0h512v167H0z"></path><path fill="#d80027" d="M0 345h512v167H0z"></path><path fill="#0052b4" d="M222.7 167v-66.8H89V167l67 82.6z"></path><path fill="#eee" d="M89 167v22.2c0 51.1 66.8 66.8 66.8 66.8s66.8-15.7 66.8-66.8V167l-22.3 22.2-44.5-33.4-44.5 33.4z"></path></g>
</svg>
</span></td>
<td class="gt_row gt_left">Vejsil Crevar</td>
<td class="gt_row gt_left">Gosposka ulica 60</td>
<td class="gt_row gt_left">Novo mesto</td>
<td class="gt_row gt_left"></td>
<td class="gt_row gt_left">8501</td>
</tr>
<tr>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Canada
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0v512h144l112-64 112 64h144V0H368L256 64 144 0Z"></path><path fill="#eee" d="M144 0h224v512H144Z"></path><path fill="#d80027" d="m301 289 44-22-22-11v-22l-45 22 23-44h-23l-22-34-22 33h-23l23 45-45-22v22l-22 11 45 22-12 23h45v33h22v-33h45z"></path></g>
</svg>
</span></td>
<td class="gt_row gt_left">Matilda Bates</td>
<td class="gt_row gt_left">582 Islington Ave</td>
<td class="gt_row gt_left">Toronto</td>
<td class="gt_row gt_left">ON</td>
<td class="gt_row gt_left">M8V 3B6</td>
</tr>
</tbody>
</table>
</div>
<p>This slice of the <code>peeps</code> dataset has country codes in their 3-letter form (i.e., <code>&quot;USA&quot;</code>, <code>&quot;SVN&quot;</code>, and <code>&quot;CAN&quot;</code>) within the <code>country</code> column. So long as they are correct, <code>fmt_flag()</code> will perform the conversion to flag icons. Also, there&rsquo;s a little bit of interactivity here: when hovering over a flag, the country name will appear as a tooltip!</p>
<p>We have the power to display multiple flag icons within a single cell. To make this happen, the country codes need to be combined in a single string where each code is separated by a comma (e.g., <code>&quot;US,DE,GB&quot;</code>). Here&rsquo;s an example that uses a portion of the <code>films</code> dataset:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">google_font</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">films</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">films_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">films</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;director&#34;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;Michael Haneke&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;title&#34;</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34; (&#34;</span> <span class="o">+</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;year&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">cast</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">String</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34;)&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span><span class="s2">&#34;title&#34;</span><span class="p">,</span> <span class="s2">&#34;run_time&#34;</span><span class="p">,</span> <span class="s2">&#34;countries_of_origin&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">films_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_flag</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;countries_of_origin&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="s2">&#34;In Competition Films by Michael Haneke&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_stylize</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_options</span><span class="p">(</span><span class="n">column_labels_hidden</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_table_font</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="s2">&#34;PT Sans&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="viobmltklf" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
#viobmltklf table {
          font-family: 'PT Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#viobmltklf thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#viobmltklf p { margin: 0; padding: 0; }
#viobmltklf .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #004D80; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #004D80; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#viobmltklf .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#viobmltklf .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#viobmltklf .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#viobmltklf .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#viobmltklf .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; }
#viobmltklf .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#viobmltklf .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#viobmltklf .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#viobmltklf .gt_column_spanner_outer:first-child { padding-left: 0; }
#viobmltklf .gt_column_spanner_outer:last-child { padding-right: 0; }
#viobmltklf .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#viobmltklf .gt_spanner_row { border-bottom-style: hidden; }
#viobmltklf .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#viobmltklf .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; vertical-align: middle; }
#viobmltklf .gt_from_md&gt; :first-child { margin-top: 0; }
#viobmltklf .gt_from_md&gt; :last-child { margin-bottom: 0; }
#viobmltklf .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: none; border-top-width: 1px; border-top-color: #89D3FE; border-left-style: none; border-left-width: 1px; border-left-color: #89D3FE; border-right-style: none; border-right-width: 1px; border-right-color: #89D3FE; vertical-align: middle; overflow-x: hidden; }
#viobmltklf .gt_stub { color: #FFFFFF; background-color: #0076BA; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #0076BA; padding-left: 5px; padding-right: 5px; }
#viobmltklf .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#viobmltklf .gt_row_group_first td { border-top-width: 2px; }
#viobmltklf .gt_row_group_first th { border-top-width: 2px; }
#viobmltklf .gt_striped { color: #333333; background-color: #F4F4F4; }
#viobmltklf .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #0076BA; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #0076BA; }
#viobmltklf .gt_grand_summary_row { color: #333333; background-color: #89D3FE; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#viobmltklf .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#viobmltklf .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#viobmltklf .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#viobmltklf .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#viobmltklf .gt_left { text-align: left; }
#viobmltklf .gt_center { text-align: center; }
#viobmltklf .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#viobmltklf .gt_font_normal { font-weight: normal; }
#viobmltklf .gt_font_bold { font-weight: bold; }
#viobmltklf .gt_font_italic { font-style: italic; }
#viobmltklf .gt_super { font-size: 65%; }
#viobmltklf .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#viobmltklf .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="gt_heading">
<th colspan="3" class="gt_heading gt_title gt_font_normal">In Competition Films by Michael Haneke</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Funny Games (1997)</td>
<td class="gt_row gt_left">1h 48m</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Austria
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0h512v167l-23.2 89.7L512 345v167H0V345l29.4-89L0 167z"></path><path fill="#eee" d="M0 167h512v178H0z"></path></g>
</svg>
</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Code Unknown (2000)</td>
<td class="gt_row gt_left gt_striped">1h 58m</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
France
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#0052b4" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Austria
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0h512v167l-23.2 89.7L512 345v167H0V345l29.4-89L0 167z"></path><path fill="#eee" d="M0 167h512v178H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Romania
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#ffda44" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#0052b4" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Germany
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"></path><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"></path><path fill="#333" d="M0 0h512v167H0z"></path></g>
</svg>
</span></td>
</tr>
<tr>
<td class="gt_row gt_left">The Piano Teacher (2001)</td>
<td class="gt_row gt_left">2h 11m</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
France
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#0052b4" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Austria
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0h512v167l-23.2 89.7L512 345v167H0V345l29.4-89L0 167z"></path><path fill="#eee" d="M0 167h512v178H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Germany
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"></path><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"></path><path fill="#333" d="M0 0h512v167H0z"></path></g>
</svg>
</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Caché (2005)</td>
<td class="gt_row gt_left gt_striped">1h 57m</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
France
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#0052b4" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Austria
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0h512v167l-23.2 89.7L512 345v167H0V345l29.4-89L0 167z"></path><path fill="#eee" d="M0 167h512v178H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Germany
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"></path><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"></path><path fill="#333" d="M0 0h512v167H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Italy
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#6da544" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
</span></td>
</tr>
<tr>
<td class="gt_row gt_left">The White Ribbon (2009)</td>
<td class="gt_row gt_left">2h 24m</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Germany
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"></path><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"></path><path fill="#333" d="M0 0h512v167H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Austria
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0h512v167l-23.2 89.7L512 345v167H0V345l29.4-89L0 167z"></path><path fill="#eee" d="M0 167h512v178H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
France
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#0052b4" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Italy
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#6da544" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Canada
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0v512h144l112-64 112 64h144V0H368L256 64 144 0Z"></path><path fill="#eee" d="M144 0h224v512H144Z"></path><path fill="#d80027" d="m301 289 44-22-22-11v-22l-45 22 23-44h-23l-22-34-22 33h-23l23 45-45-22v22l-22 11 45 22-12 23h45v33h22v-33h45z"></path></g>
</svg>
</span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Amour (2012)</td>
<td class="gt_row gt_left gt_striped">2h 7m</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Austria
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0h512v167l-23.2 89.7L512 345v167H0V345l29.4-89L0 167z"></path><path fill="#eee" d="M0 167h512v178H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
France
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#0052b4" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Germany
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"></path><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"></path><path fill="#333" d="M0 0h512v167H0z"></path></g>
</svg>
</span></td>
</tr>
<tr>
<td class="gt_row gt_left">Happy End (2017)</td>
<td class="gt_row gt_left">1h 47m</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
France
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#eee" d="M167 0h178l25.9 252.3L345 512H167l-29.8-253.4z"></path><path fill="#0052b4" d="M0 0h167v512H0z"></path><path fill="#d80027" d="M345 0h167v512H345z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Austria
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#d80027" d="M0 0h512v167l-23.2 89.7L512 345v167H0V345l29.4-89L0 167z"></path><path fill="#eee" d="M0 167h512v178H0z"></path></g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" width="512" height="512" viewbox="0 0 512 512" style="vertical-align:-0.125em;image-rendering:optimizeQuality;height:1em;width:1em;">
<title>
Germany
</title>
<mask id="a"><circle cx="256" cy="256" r="256" fill="#fff"></circle></mask><g mask="url(#a)"><path fill="#ffda44" d="m0 345 256.7-25.5L512 345v167H0z"></path><path fill="#d80027" d="m0 167 255-23 257 23v178H0z"></path><path fill="#333" d="M0 0h512v167H0z"></path></g>
</svg>
</span></td>
</tr>
</tbody>
</table>
</div>
<p>The column <code>countries_of_origin</code> has these combined strings for each of the co-production films, where countries are arranged by decreasing level of contribution (e.g., <code>&quot;FR,AT,RO,DE&quot;</code> in the second row). The <code>fmt_flag()</code> method parses these strings into a sequence of flag icons that are displayed in the order provided. Each of the flags is separated by a space character but you can always change that default separator with the <code>sep=</code> argument.</p>
<h3 id="using-fmt_icon-to-include-font-awesome-icons">Using <code>fmt_icon()</code> to include Font Awesome icons
</h3>
<p>The new <code>fmt_icon()</code> method gives you the ability to easily include Font Awesome icons in a table. It uses a similar input/output scheme as with <code>fmt_flag()</code>: provide the <em>short</em> icon name (e.g., <code>&quot;table&quot;</code>, <code>&quot;music&quot;</code>, <code>&quot;globe&quot;</code>, etc.) or a comma-separated list of them, and <code>fmt_icon()</code> will provide the Font Awesome icon in place. Let&rsquo;s see it in action with an example that uses the <code>metro</code> dataset:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">metro</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">metro_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">metro</span><span class="p">)</span><span class="o">.</span><span class="n">tail</span><span class="p">(</span><span class="mi">10</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">services</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">            <span class="n">pl</span><span class="o">.</span><span class="n">when</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;connect_tramway&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">is_not_null</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">            <span class="o">.</span><span class="n">then</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">lit</span><span class="p">(</span><span class="s2">&#34;train, train-tram&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">            <span class="o">.</span><span class="n">otherwise</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">lit</span><span class="p">(</span><span class="s2">&#34;train&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">        <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span><span class="s2">&#34;name&#34;</span><span class="p">,</span> <span class="s2">&#34;services&#34;</span><span class="p">,</span> <span class="s2">&#34;location&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="s2">&#34;Services Available at Select Stations&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_icon</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;services&#34;</span><span class="p">,</span> <span class="n">sep</span><span class="o">=</span><span class="s2">&#34; / &#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_options</span><span class="p">(</span><span class="n">column_labels_hidden</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;green&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_horizontal_padding</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="mi">3</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_align_table_header</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;left&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="qmrkrluboa" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#qmrkrluboa table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#qmrkrluboa thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#qmrkrluboa p { margin: 0; padding: 0; }
#qmrkrluboa .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #027101; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #027101; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#qmrkrluboa .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#qmrkrluboa .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 15px; padding-right: 15px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#qmrkrluboa .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; border-top-color: #FFFFFF; border-top-width: 0; }
#qmrkrluboa .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qmrkrluboa .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #038901; }
#qmrkrluboa .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #038901; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #038901; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qmrkrluboa .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 15px; padding-right: 15px; overflow-x: hidden; }
#qmrkrluboa .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#qmrkrluboa .gt_column_spanner_outer:first-child { padding-left: 0; }
#qmrkrluboa .gt_column_spanner_outer:last-child { padding-right: 0; }
#qmrkrluboa .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #038901; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#qmrkrluboa .gt_spanner_row { border-bottom-style: hidden; }
#qmrkrluboa .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #038901; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #038901; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#qmrkrluboa .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #038901; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #038901; vertical-align: middle; }
#qmrkrluboa .gt_from_md&gt; :first-child { margin-top: 0; }
#qmrkrluboa .gt_from_md&gt; :last-child { margin-bottom: 0; }
#qmrkrluboa .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; margin: 10px; border-top-style: none; border-top-width: 1px; border-top-color: #CAFFAF; border-left-style: none; border-left-width: 1px; border-left-color: #CAFFAF; border-right-style: none; border-right-width: 1px; border-right-color: #CAFFAF; vertical-align: middle; overflow-x: hidden; }
#qmrkrluboa .gt_stub { color: #FFFFFF; background-color: #038901; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #038901; padding-left: 15px; padding-right: 15px; }
#qmrkrluboa .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 15px; padding-right: 15px; vertical-align: top; }
#qmrkrluboa .gt_row_group_first td { border-top-width: 2px; }
#qmrkrluboa .gt_row_group_first th { border-top-width: 2px; }
#qmrkrluboa .gt_striped { color: #333333; background-color: #F4F4F4; }
#qmrkrluboa .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #038901; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #038901; }
#qmrkrluboa .gt_grand_summary_row { color: #333333; background-color: #CAFFAF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#qmrkrluboa .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#qmrkrluboa .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#qmrkrluboa .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#qmrkrluboa .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 15px; padding-right: 15px; text-align: left; }
#qmrkrluboa .gt_left { text-align: left; }
#qmrkrluboa .gt_center { text-align: center; }
#qmrkrluboa .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#qmrkrluboa .gt_font_normal { font-weight: normal; }
#qmrkrluboa .gt_font_bold { font-weight: bold; }
#qmrkrluboa .gt_font_italic { font-style: italic; }
#qmrkrluboa .gt_super { font-size: 65%; }
#qmrkrluboa .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#qmrkrluboa .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<thead>
<tr class="gt_heading">
<th colspan="3" class="gt_heading gt_title gt_font_normal">Services Available at Select Stations</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Porte de Vanves</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
/
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M86.8 48c-12.2 0-23.6 5.5-31.2 15L42.7 79C34.5 89.3 19.4 91 9 82.7S-3 59.4 5.3 49L18 33C34.7 12.2 60 0 86.8 0H361.2c26.7 0 52 12.2 68.7 33l12.8 16c8.3 10.4 6.6 25.5-3.7 33.7s-25.5 6.6-33.7-3.7L392.5 63c-7.6-9.5-19.1-15-31.2-15H248V96h40c53 0 96 43 96 96V352c0 30.6-14.3 57.8-36.6 75.4l65.5 65.5c7.1 7.1 2.1 19.1-7.9 19.1H365.3c-8.5 0-16.6-3.4-22.6-9.4L288 448H160l-54.6 54.6c-6 6-14.1 9.4-22.6 9.4H43c-10 0-15-12.1-7.9-19.1l65.5-65.5C78.3 409.8 64 382.6 64 352V192c0-53 43-96 96-96h40V48H86.8zM160 160c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H160zm32 192c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm96 32c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32z"></path>
</svg>
</span></td>
<td class="gt_row gt_left">Paris 14th</td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Saint-Denis—Porte de Paris</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
/
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M86.8 48c-12.2 0-23.6 5.5-31.2 15L42.7 79C34.5 89.3 19.4 91 9 82.7S-3 59.4 5.3 49L18 33C34.7 12.2 60 0 86.8 0H361.2c26.7 0 52 12.2 68.7 33l12.8 16c8.3 10.4 6.6 25.5-3.7 33.7s-25.5 6.6-33.7-3.7L392.5 63c-7.6-9.5-19.1-15-31.2-15H248V96h40c53 0 96 43 96 96V352c0 30.6-14.3 57.8-36.6 75.4l65.5 65.5c7.1 7.1 2.1 19.1-7.9 19.1H365.3c-8.5 0-16.6-3.4-22.6-9.4L288 448H160l-54.6 54.6c-6 6-14.1 9.4-22.6 9.4H43c-10 0-15-12.1-7.9-19.1l65.5-65.5C78.3 409.8 64 382.6 64 352V192c0-53 43-96 96-96h40V48H86.8zM160 160c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H160zm32 192c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm96 32c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32z"></path>
</svg>
</span></td>
<td class="gt_row gt_left gt_striped">Saint-Denis</td>
</tr>
<tr>
<td class="gt_row gt_left">Saint-Denis—Université</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
/
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M86.8 48c-12.2 0-23.6 5.5-31.2 15L42.7 79C34.5 89.3 19.4 91 9 82.7S-3 59.4 5.3 49L18 33C34.7 12.2 60 0 86.8 0H361.2c26.7 0 52 12.2 68.7 33l12.8 16c8.3 10.4 6.6 25.5-3.7 33.7s-25.5 6.6-33.7-3.7L392.5 63c-7.6-9.5-19.1-15-31.2-15H248V96h40c53 0 96 43 96 96V352c0 30.6-14.3 57.8-36.6 75.4l65.5 65.5c7.1 7.1 2.1 19.1-7.9 19.1H365.3c-8.5 0-16.6-3.4-22.6-9.4L288 448H160l-54.6 54.6c-6 6-14.1 9.4-22.6 9.4H43c-10 0-15-12.1-7.9-19.1l65.5-65.5C78.3 409.8 64 382.6 64 352V192c0-53 43-96 96-96h40V48H86.8zM160 160c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H160zm32 192c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm96 32c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32z"></path>
</svg>
</span></td>
<td class="gt_row gt_left">Saint-Denis</td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Saint-François-Xavier</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
</span></td>
<td class="gt_row gt_left gt_striped">Paris 7th</td>
</tr>
<tr>
<td class="gt_row gt_left">Varenne</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
</span></td>
<td class="gt_row gt_left">Paris 7th</td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Bibliothèque François Mitterrand</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
/
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M86.8 48c-12.2 0-23.6 5.5-31.2 15L42.7 79C34.5 89.3 19.4 91 9 82.7S-3 59.4 5.3 49L18 33C34.7 12.2 60 0 86.8 0H361.2c26.7 0 52 12.2 68.7 33l12.8 16c8.3 10.4 6.6 25.5-3.7 33.7s-25.5 6.6-33.7-3.7L392.5 63c-7.6-9.5-19.1-15-31.2-15H248V96h40c53 0 96 43 96 96V352c0 30.6-14.3 57.8-36.6 75.4l65.5 65.5c7.1 7.1 2.1 19.1-7.9 19.1H365.3c-8.5 0-16.6-3.4-22.6-9.4L288 448H160l-54.6 54.6c-6 6-14.1 9.4-22.6 9.4H43c-10 0-15-12.1-7.9-19.1l65.5-65.5C78.3 409.8 64 382.6 64 352V192c0-53 43-96 96-96h40V48H86.8zM160 160c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32H160zm32 192c0-17.7-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32s32-14.3 32-32zm96 32c17.7 0 32-14.3 32-32s-14.3-32-32-32s-32 14.3-32 32s14.3 32 32 32z"></path>
</svg>
</span></td>
<td class="gt_row gt_left gt_striped">Paris 13th</td>
</tr>
<tr>
<td class="gt_row gt_left">Cour Saint-Émilion</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
</span></td>
<td class="gt_row gt_left">Paris 12th</td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Olympiades</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
</span></td>
<td class="gt_row gt_left gt_striped">Paris 13th</td>
</tr>
<tr>
<td class="gt_row gt_left">Pont Cardinet</td>
<td class="gt_row gt_left"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
</span></td>
<td class="gt_row gt_left">Paris 17th</td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Saint-Ouen</td>
<td class="gt_row gt_left gt_striped"><span style="white-space:nowrap;">
<svg viewbox="0 0 448 512" preserveaspectratio="none" aria-hidden="true" role="img" class="fa" style="fill-opacity:None;stroke-width:1px;stroke-opacity:None;height:1em;width:0.88em;position:relative;vertical-align:-0.125em;overflow:visible;">
<path d="M96 0C43 0 0 43 0 96V352c0 48 35.2 87.7 81.1 94.9l-46 46C28.1 499.9 33.1 512 43 512H82.7c8.5 0 16.6-3.4 22.6-9.4L160 448H288l54.6 54.6c6 6 14.1 9.4 22.6 9.4H405c10 0 15-12.1 7.9-19.1l-46-46c46-7.1 81.1-46.9 81.1-94.9V96c0-53-43-96-96-96H96zM64 96c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V96zM224 384c-26.5 0-48-21.5-48-48s21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48z"></path>
</svg>
</span></td>
<td class="gt_row gt_left gt_striped">Clichy, Saint-Ouen-sur-Seine</td>
</tr>
</tbody>
</table>
</div>
<p>In the code, we added in the icon names <code>&quot;train&quot;</code> and <code>&quot;train-tram&quot;</code> to the <code>services</code> column, and there could either be just the train icon or the pair that includes the tramway service. We wanted a little separation between the icons in the latter case, so <code>sep=&quot; / &quot;</code> was used to place a slash with spacing between any pair of icons. The icons appear here with a black fill color, but that can be changed with the <code>fill_color=</code> argument (and there are several other arguments for controlling style attributes).</p>
<p>For a list of available icons, their names, and what they look like, check out <a href="https://fontawesome.com/search?m=free&amp;o=r" target="_blank" rel="noopener">this listing on the Font Awesome website</a>
. The icons draw from the Font Awesome &lsquo;free&rsquo; set (2000+ icons in total) but are not obtained via the web. Rather, we use the <a href="https://pypi.org/project/faicons/" target="_blank" rel="noopener">faicons library</a>
 so that this can be done entirely offline (directly using the SVG icons stored within faicons).</p>
<h3 id="accounting-notation-in-select-numeric-formatting-methods">Accounting notation in select numeric formatting methods
</h3>
<p>For certain types of tables, it may be preferable to use accounting notation for numerical figures. This type of notation renders negative values in parentheses while omitting the minus sign. This is often seen for monetary and percentage figures but it&rsquo;s also sensible for plain numbers in the right context. We&rsquo;ve added support for accounting notation in four formatting methods:</p>
<ul>
<li><code>fmt_number()</code></li>
<li><code>fmt_integer()</code></li>
<li><code>fmt_currency()</code></li>
<li><code>fmt_percent()</code></li>
</ul>
<p>Here&rsquo;s a comprehensive example table that demonstrates how this type of formatting looks.</p>
<details class="code-fold">
<summary>Show the code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">df</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;number_type&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;negative&#34;</span><span class="p">,</span> <span class="s2">&#34;positive&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;number&#34;</span><span class="p">:</span> <span class="p">[</span><span class="o">-</span><span class="mf">1.2</span><span class="p">,</span> <span class="mf">23.6</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;integer&#34;</span><span class="p">:</span> <span class="p">[</span><span class="o">-</span><span class="mi">2323</span><span class="p">,</span> <span class="mi">23213</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;currency&#34;</span><span class="p">:</span> <span class="p">[</span><span class="o">-</span><span class="mf">24334.23</span><span class="p">,</span> <span class="mf">7323.253</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;percent&#34;</span><span class="p">:</span> <span class="p">[</span><span class="o">-</span><span class="mf">0.0523</span><span class="p">,</span> <span class="mf">0.363</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span><span class="o">.</span><span class="n">with_columns</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">number_acc</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;number&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="n">integer_acc</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;integer&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="n">currency_acc</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;currency&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="n">percent_acc</span> <span class="o">=</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;percent&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">df</span><span class="p">,</span> <span class="n">rowname_col</span><span class="o">=</span><span class="s2">&#34;number_type&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_number</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;number&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_percent</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;percent&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_integer</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;integer&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_currency</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;currency&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_number</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;number_acc&#34;</span><span class="p">,</span> <span class="n">accounting</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_percent</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;percent_acc&#34;</span><span class="p">,</span> <span class="n">accounting</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_integer</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;integer_acc&#34;</span><span class="p">,</span> <span class="n">accounting</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_currency</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;currency_acc&#34;</span><span class="p">,</span> <span class="n">accounting</span><span class="o">=</span><span class="kc">True</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;default formatting&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">4</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;with accounting notation&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="mi">5</span><span class="p">,</span> <span class="mi">6</span><span class="p">,</span> <span class="mi">7</span><span class="p">,</span> <span class="mi">8</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_label</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">number_acc</span><span class="o">=</span><span class="s2">&#34;number&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">integer_acc</span><span class="o">=</span><span class="s2">&#34;integer&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">currency_acc</span><span class="o">=</span><span class="s2">&#34;currency&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">percent_acc</span><span class="o">=</span><span class="s2">&#34;percent&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="mcjjfgubcc" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#mcjjfgubcc table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#mcjjfgubcc thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#mcjjfgubcc p { margin: 0; padding: 0; }
#mcjjfgubcc .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#mcjjfgubcc .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#mcjjfgubcc .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#mcjjfgubcc .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#mcjjfgubcc .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#mcjjfgubcc .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#mcjjfgubcc .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#mcjjfgubcc .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#mcjjfgubcc .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#mcjjfgubcc .gt_column_spanner_outer:first-child { padding-left: 0; }
#mcjjfgubcc .gt_column_spanner_outer:last-child { padding-right: 0; }
#mcjjfgubcc .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#mcjjfgubcc .gt_spanner_row { border-bottom-style: hidden; }
#mcjjfgubcc .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#mcjjfgubcc .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#mcjjfgubcc .gt_from_md&gt; :first-child { margin-top: 0; }
#mcjjfgubcc .gt_from_md&gt; :last-child { margin-bottom: 0; }
#mcjjfgubcc .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#mcjjfgubcc .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#mcjjfgubcc .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#mcjjfgubcc .gt_row_group_first td { border-top-width: 2px; }
#mcjjfgubcc .gt_row_group_first th { border-top-width: 2px; }
#mcjjfgubcc .gt_striped { color: #333333; background-color: #F4F4F4; }
#mcjjfgubcc .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#mcjjfgubcc .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#mcjjfgubcc .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#mcjjfgubcc .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#mcjjfgubcc .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#mcjjfgubcc .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#mcjjfgubcc .gt_left { text-align: left; }
#mcjjfgubcc .gt_center { text-align: center; }
#mcjjfgubcc .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#mcjjfgubcc .gt_font_normal { font-weight: normal; }
#mcjjfgubcc .gt_font_bold { font-weight: bold; }
#mcjjfgubcc .gt_font_italic { font-style: italic; }
#mcjjfgubcc .gt_super { font-size: 65%; }
#mcjjfgubcc .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#mcjjfgubcc .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th colspan="4" id="default-formatting" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">default formatting</span></th>
<th colspan="4" id="with-accounting-notation" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">with accounting notation</span></th>
</tr>
<tr class="gt_col_headings">
<th id="number" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">number</th>
<th id="integer" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">integer</th>
<th id="currency" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">currency</th>
<th id="percent" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">percent</th>
<th id="number_acc" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">number</th>
<th id="integer_acc" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">integer</th>
<th id="currency_acc" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">currency</th>
<th id="percent_acc" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">percent</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">negative</td>
<td class="gt_row gt_right">−1.20</td>
<td class="gt_row gt_right">−2,323</td>
<td class="gt_row gt_right">−$24,334.23</td>
<td class="gt_row gt_right">−5.23%</td>
<td class="gt_row gt_right">(1.20)</td>
<td class="gt_row gt_right">(2,323)</td>
<td class="gt_row gt_right">($24,334.23)</td>
<td class="gt_row gt_right">(5.23%)</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">positive</td>
<td class="gt_row gt_right">23.60</td>
<td class="gt_row gt_right">23,213</td>
<td class="gt_row gt_right">$7,323.25</td>
<td class="gt_row gt_right">36.30%</td>
<td class="gt_row gt_right">23.60</td>
<td class="gt_row gt_right">23,213</td>
<td class="gt_row gt_right">$7,323.25</td>
<td class="gt_row gt_right">36.30%</td>
</tr>
</tbody>
</table>
</div>
<p>For the formatting in the final four columns, we use <code>accounting=True</code> to get the values into accounting notation. This is only apparent for the negative values (first row) as the positive values won&rsquo;t change their appearance, looking the same as they do when <code>accounting=False</code> (the default).</p>
<h3 id="acknowledgements-and-how-to-contact-us">Acknowledgements and how to contact us
</h3>
<p>We are <em>very</em> grateful for the work that <a href="https://github.com/jrycw" target="_blank" rel="noopener">Jerry Wu</a>
 has done during this release, some of which includes:</p>
<ul>
<li>enhancing the <code>fmt_image()</code> to support <code>http</code>/<code>https</code> schema in the <code>columns=</code> parameter, and writing an <a href="https://posit-dev.github.io/great-tables/blog/rendering-images/" target="_blank" rel="noopener">incredible blog post</a>
 about incorporating images in your tables</li>
<li>improving the <code>save()</code> method, giving it the ability to perform intermediate saves (since the method returns itself)</li>
<li>adding the <code>pipe()</code> method, which operates similarly to that of the Pandas and Polars APIs</li>
<li>all sorts of little QoL fixes</li>
</ul>
<p>We extend our gratitude also to <a href="https://github.com/amol-" target="_blank" rel="noopener">Alessandro Molina</a>
 for adding experimental support for <code>pyarrow.Table</code> inputs in this release.</p>
<p>Finally, we thank <a href="https://github.com/lukemanley" target="_blank" rel="noopener">Luke Manley</a>
 and <a href="https://github.com/glemaitre" target="_blank" rel="noopener">Guillaume Lemaitre</a>
 for their first contributions to the project!</p>
<p>We&rsquo;re always happy to get feedback. There are three good ways to talk to us:</p>
<ol>
<li><a href="https://github.com/posit-dev/great-tables/issues" target="_blank" rel="noopener">GitHub Issues</a>
</li>
<li><a href="https://github.com/posit-dev/great-tables/discussions" target="_blank" rel="noopener">GitHub Discussions</a>
</li>
<li><a href="https://discord.com/invite/Ux7nrcXHVV" target="_blank" rel="noopener">Discord</a>
</li>
</ol>
<p>Don&rsquo;t be shy. We love talking tables (and how we can make them better)!</p>
]]></description>
    </item>
    <item>
      <title>Rendering images anywhere in Great Tables</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/rendering-images/</link>
      <pubDate>Fri, 13 Dec 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/rendering-images/</guid>
      <dc:creator>Jerry Wu</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>Rendering images in Great Tables is straightforward with <code>GT.fmt_image()</code> and <code>vals.fmt_image()</code>.
In this post, we&rsquo;ll explore three key topics:</p>
<ul>
<li>Four examples demonstrating how to render images within the body using <code>GT.fmt_image()</code>.</li>
<li>How to render images anywhere using <code>vals.fmt_image()</code> and <code>html()</code>.</li>
<li>How to manually render images anywhere using <code>html()</code>.</li>
</ul>
<h2 id="rendering-images-in-the-body">Rendering Images in the Body
</h2>
<p><a href="https://posit-dev.github.io/great-tables/reference/GT.fmt_image.html#great_tables.GT.fmt_image" target="_blank" rel="noopener">GT.fmt_image()</a>

is the go-to tool for rendering images within the body of a table. Below, we&rsquo;ll present four examples
corresponding to the cases outlined in the documentation:</p>
<ul>
<li><strong>Case 1</strong>: Local file paths.</li>
<li><strong>Case 2</strong>: Full HTTP/HTTPS URLs.</li>
<li><strong>Case 3</strong>: Image names with the <code>path=</code> argument.</li>
<li><strong>Case 4</strong>: Image names using both the <code>path=</code> and <code>file_pattern=</code> arguments.</li>
</ul>
<div class="callout callout-tip" role="note" aria-label="Tip">
<div class="callout-header">
<span class="callout-title">Finding the Right Case for Your Needs</span>
</div>
<div class="callout-body">
<ul>
<li><strong>Case 1</strong> and <strong>Case 2</strong> work best for data sourced directly from a database.</li>
<li><strong>Case 3</strong> is ideal for users dealing with image names relative to a base directory or URL (e.g., <code>/path/to/images</code>).</li>
<li><strong>Case 4</strong> is tailored for users working with patterned image names (e.g., <code>metro_{}.svg</code>).</li>
</ul>
</div>
</div>
<h3 id="preparations">Preparations
</h3>
<p>For this demonstration, we&rsquo;ll use the first five rows of the built-in <a href="https://posit-dev.github.io/great-tables/reference/data.metro.html#great_tables.data.metro" target="_blank" rel="noopener">metro</a>
 dataset, specifically the <code>name</code> and <code>lines</code> columns.</p>
<p>To ensure a smooth walkthrough, we&rsquo;ll manipulate the <code>data</code> (a Python dictionary) directly. However,
in real-world applications, such operations are more likely performed at the DataFrame level to leverage
the benefits of vectorized operations.</p>
<details class="code-fold">
<summary>Show the Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">vals</span><span class="p">,</span> <span class="n">html</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">importlib_resources</span> <span class="kn">import</span> <span class="n">files</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">pd</span><span class="o">.</span><span class="n">set_option</span><span class="p">(</span><span class="s1">&#39;display.max_colwidth&#39;</span><span class="p">,</span> <span class="mi">150</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">data</span> <span class="o">=</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;name&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Argentine&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Bastille&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Bérault&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Champs-Élysées—Clemenceau&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Charles de Gaulle—Étoile&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;lines&#34;</span><span class="p">:</span> <span class="p">[</span><span class="s2">&#34;1&#34;</span><span class="p">,</span> <span class="s2">&#34;1, 5, 8&#34;</span><span class="p">,</span> <span class="s2">&#34;1&#34;</span><span class="p">,</span> <span class="s2">&#34;1, 13&#34;</span><span class="p">,</span> <span class="s2">&#34;1, 2, 6&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;&#34;&#34;</span><span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="s2">data = {
</span></span></span><span class="line"><span class="cl"><span class="s2">    &#34;name&#34;: [
</span></span></span><span class="line"><span class="cl"><span class="s2">        &#34;Argentine&#34;,
</span></span></span><span class="line"><span class="cl"><span class="s2">        &#34;Bastille&#34;,
</span></span></span><span class="line"><span class="cl"><span class="s2">        &#34;Bérault&#34;,
</span></span></span><span class="line"><span class="cl"><span class="s2">        &#34;Champs-Élysées—Clemenceau&#34;,
</span></span></span><span class="line"><span class="cl"><span class="s2">        &#34;Charles de Gaulle—Étoile&#34;,
</span></span></span><span class="line"><span class="cl"><span class="s2">    ],
</span></span></span><span class="line"><span class="cl"><span class="s2">    &#34;lines&#34;: [&#34;1&#34;, &#34;1, 5, 8&#34;, &#34;1&#34;, &#34;1, 13&#34;, &#34;1, 2, 6&#34;],
</span></span></span><span class="line"><span class="cl"><span class="s2">}</span><span class="se">\
</span></span></span><span class="line"><span class="cl"><span class="s2">&#34;&#34;&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<pre><code>data = {
    &quot;name&quot;: [
        &quot;Argentine&quot;,
        &quot;Bastille&quot;,
        &quot;Bérault&quot;,
        &quot;Champs-Élysées—Clemenceau&quot;,
        &quot;Charles de Gaulle—Étoile&quot;,
    ],
    &quot;lines&quot;: [&quot;1&quot;, &quot;1, 5, 8&quot;, &quot;1&quot;, &quot;1, 13&quot;, &quot;1, 2, 6&quot;],
}
</code></pre>
<p>Attentive readers may have noticed that the values for the key <code>lines</code> are lists of strings, each
containing one or more numbers separated by commas. <code>GT.fmt_image()</code> is specifically designed to
handle such cases, allowing users to render multiple images in a single row.</p>
<h3 id="case-1-local-file-paths">Case 1: Local File Paths
</h3>
<p><strong>Case 1</strong> demonstrates how to simulate a column containing strings representing local file paths. We&rsquo;ll
use images stored in the <code>data/metro_images</code> directory of Great Tables:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">img_local_paths</span> <span class="o">=</span> <span class="n">files</span><span class="p">(</span><span class="s2">&#34;great_tables&#34;</span><span class="p">)</span> <span class="o">/</span> <span class="s2">&#34;data/metro_images&#34;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><dl>
<dt>Line 1</dt>
<dd>These image files follow a patterned naming convention, such as <code>metro_1.svg</code>, <code>metro_2.svg</code>, and so on.</dd>
</dl>
<p>Below is a <code>Pandas</code> DataFrame called <code>metro_mini1</code>, where the <code>case1</code> column contains local file
paths that we want to render as images.</p>
<details class="code-fold">
<summary>Show the Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">metro_mini1</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="o">**</span><span class="n">data</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;case1&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;, &#34;</span><span class="o">.</span><span class="n">join</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">                <span class="nb">str</span><span class="p">((</span><span class="n">img_local_paths</span> <span class="o">/</span> <span class="sa">f</span><span class="s2">&#34;metro_</span><span class="si">{</span><span class="n">item</span><span class="si">}</span><span class="s2">&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">with_suffix</span><span class="p">(</span><span class="s2">&#34;.svg&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">                <span class="k">for</span> <span class="n">item</span> <span class="ow">in</span> <span class="n">row</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s2">&#34;, &#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">            <span class="p">)</span>
</span></span><span class="line"><span class="cl">            <span class="k">for</span> <span class="n">row</span> <span class="ow">in</span> <span class="n">data</span><span class="p">[</span><span class="s2">&#34;lines&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">        <span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">metro_mini1</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
<pre><code>.dataframe tbody tr th {
    vertical-align: top;
}

.dataframe thead th {
    text-align: right;
}
</code></pre>
<p></style></p>
<table>
  <thead>
      <tr>
          <th></th>
          <th>name</th>
          <th>lines</th>
          <th>case1</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>0</td>
          <td>Argentine</td>
          <td>1</td>
          <td>/Users/charlottewickham/Documents/posit/open-source-website/.claude/worktrees/dazzling-nash/content/blog/great-tables/.venv/lib/python3.13/site-pa...</td>
      </tr>
      <tr>
          <td>1</td>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td>/Users/charlottewickham/Documents/posit/open-source-website/.claude/worktrees/dazzling-nash/content/blog/great-tables/.venv/lib/python3.13/site-pa...</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Bérault</td>
          <td>1</td>
          <td>/Users/charlottewickham/Documents/posit/open-source-website/.claude/worktrees/dazzling-nash/content/blog/great-tables/.venv/lib/python3.13/site-pa...</td>
      </tr>
      <tr>
          <td>3</td>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td>/Users/charlottewickham/Documents/posit/open-source-website/.claude/worktrees/dazzling-nash/content/blog/great-tables/.venv/lib/python3.13/site-pa...</td>
      </tr>
      <tr>
          <td>4</td>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td>/Users/charlottewickham/Documents/posit/open-source-website/.claude/worktrees/dazzling-nash/content/blog/great-tables/.venv/lib/python3.13/site-pa...</td>
      </tr>
  </tbody>
</table>
</div>
<div class="callout callout-tip" role="note" aria-label="Tip">
<div class="callout-header">
<span class="callout-title">Use the <code>pathlib</code> Module to Construct Paths</span>
</div>
<div class="callout-body">
<p>Local file paths can vary depending on the operating system, which makes it easy to accidentally
construct invalid paths. A good practice to mitigate this is to use Python&rsquo;s built-in
<a href="https://docs.python.org/3/library/pathlib.html" target="_blank" rel="noopener">pathlib</a>
 module to construct paths first and then
convert them to strings. In this example, <code>img_local_paths</code> is actually an instance of <code>pathlib.Path</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">pathlib</span> <span class="kn">import</span> <span class="n">Path</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nb">isinstance</span><span class="p">(</span><span class="n">img_local_paths</span><span class="p">,</span> <span class="n">Path</span><span class="p">)</span>  <span class="c1"># True</span>
</span></span></code></pre></td></tr></table>
</div>
</div></div>
</div>
<p>The <code>case1</code> column is quite lengthy due to the inclusion of <code>img_local_paths</code>. In <strong>Case 3</strong>, we&rsquo;ll
share a useful trick to avoid repeating the directory name each time&mdash;stay tuned!</p>
<p>For now, let&rsquo;s use <code>GT.fmt_image()</code> to render images by passing <code>&quot;case1&quot;</code> as the first argument:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">GT</span><span class="p">(</span><span class="n">metro_mini1</span><span class="p">)</span><span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;case1&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;case1&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="dgcyxebxzm" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#dgcyxebxzm table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#dgcyxebxzm thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#dgcyxebxzm p { margin: 0; padding: 0; }
#dgcyxebxzm .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#dgcyxebxzm .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#dgcyxebxzm .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#dgcyxebxzm .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#dgcyxebxzm .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#dgcyxebxzm .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#dgcyxebxzm .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#dgcyxebxzm .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#dgcyxebxzm .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#dgcyxebxzm .gt_column_spanner_outer:first-child { padding-left: 0; }
#dgcyxebxzm .gt_column_spanner_outer:last-child { padding-right: 0; }
#dgcyxebxzm .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#dgcyxebxzm .gt_spanner_row { border-bottom-style: hidden; }
#dgcyxebxzm .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#dgcyxebxzm .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#dgcyxebxzm .gt_from_md&gt; :first-child { margin-top: 0; }
#dgcyxebxzm .gt_from_md&gt; :last-child { margin-bottom: 0; }
#dgcyxebxzm .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#dgcyxebxzm .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#dgcyxebxzm .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#dgcyxebxzm .gt_row_group_first td { border-top-width: 2px; }
#dgcyxebxzm .gt_row_group_first th { border-top-width: 2px; }
#dgcyxebxzm .gt_striped { color: #333333; background-color: #F4F4F4; }
#dgcyxebxzm .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#dgcyxebxzm .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#dgcyxebxzm .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#dgcyxebxzm .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#dgcyxebxzm .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#dgcyxebxzm .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#dgcyxebxzm .gt_left { text-align: left; }
#dgcyxebxzm .gt_center { text-align: center; }
#dgcyxebxzm .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#dgcyxebxzm .gt_font_normal { font-weight: normal; }
#dgcyxebxzm .gt_font_bold { font-weight: bold; }
#dgcyxebxzm .gt_font_italic { font-style: italic; }
#dgcyxebxzm .gt_super { font-size: 65%; }
#dgcyxebxzm .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#dgcyxebxzm .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>name</th>
          <th>lines</th>
          <th>case1</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Argentine</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0YxOTA0MyIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY3OS43MSA1OTIuNzVjMC03OS40ODYtNTguNDItMTU5LjY4LTIwMy4yNy0xNjcuMjVsLTE1LjEzMy0uNzEyIDcuNDE4LTEwMS4zNTFoMTkwLjc4di04Ny45MTNoLTI3OC41MmwtMjEuMDM2IDI3NS40OSA4Mi41NDIuNzEyYzk3LjYxMy45NzkgMTIyLjk3OSA1My4zMTcgMTIyLjk3OSA5MS42NSAwIDYyLjE2LTUxLjYyNyA4NS42MjktOTIuODY2IDg1LjYyOS00NS4xODggMC03NS4wMzctMTYuNjE1LTEwMC42MS0zMy45MTJsLTM4Ljg5NyA4Mi42OWM0MS4wOTMgMjMuMTcyIDg5LjI3NyAzOC4zMzMgMTQ1LjUgMzguMzMzIDEyMC43NzEtLjA0IDIwMS4xMi04Mi4wOCAyMDEuMTItMTgzLjM3Ii8+PC9zdmc+" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0NEQUNDRiIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY4OS4yMSA2MTQuOTJjMC02OS42MTctNDIuNzQyLTExMS44MS05MS41NzMtMTM0Ljg1IDQ5LjU2OC0zMC4xNzUgNzUuMjA2LTY4LjQ1NCA3NS4yMDYtMTE3LjkgMC05MC45ODYtNzcuMzc4LTEzNi44My0xNzAuNDYtMTM2LjgzLTkwLjg3NyAwLTE3MC40MSA2MC45My0xNzAuNDEgMTQ4LjY2IDAgNTQuODAxIDI4LjU0NSA4Ny4wMzEgNzQuMjM1IDExNS41NC01MS4wMjMgMjYuMjk2LTkwLjc3OSA2Ny43MTYtOTAuNzc5IDEzOC4xNSAwIDgwLjM5NyA2Ni42OTMgMTUwLjkwOSAxODQuNTggMTUwLjkwOSAxMDguODYtLjAyIDE4OS4xOS02Mi45NiAxODkuMTktMTYzLjY4TTU3MS40MDkgMzY4LjgzYzAgMzMuMTItMzAuMDIxIDYzLjY4Mi01Ny44MTIgNzYuNTU5LTMzLjcwNS0xNC4yNzItNzcuMzAyLTM3LjYyLTc3LjMwMi04MS4wNTkgMC0zNi42ODkgMjYuMjIxLTYyLjI4NiA2Ny41MjctNjIuMjg2IDQzLjUyOS4wMSA2Ny41OCAyOS45MSA2Ny41OCA2Ni43OWwuMDA3LS4wMDR6bTguMjIgMjU0LjQyYzAgNDIuMDQyLTI3Ljc3IDc3LjM3My03OC4wOTUgNzcuMzczLTUxLjEwMyAwLTc5LjU1LTQxLjQ1OS03OS41NS04NC44OTYgMC00MS4xODggMzQuNTM5LTc1LjcwNSA2OS4wNTgtODkuMzE4IDQ0Ljk5IDIyLjU0IDg4LjU5IDQ4LjggODguNTkgOTYuODVsLS4wMDMtLjAwOXoiLz48L3N2Zz4=" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bérault</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzk5RDRERSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTM4Ny41IDc2NC4xMVYyMzQuMDNoLTkyLjM2MWMtMjQuMDkyIDE4LjY5NS04MS4xODkgNTMuODcxLTE0Mi43MyA4My4xMDVsLTMyLjI5MiAxNC45NzQgMzYuMDk2IDgxLjYgMjcuNzc2LTE0LjI2YzE5LjQ1Ni05Ljc0NSA3Mi44MjgtMzcuNDM1IDkwLjc3Ny01MS42MTN2NDE2LjI4aDExMi43Mk04MjEuMjIgNjA2LjkzYzAtNzQuMTUxLTQ0LjI5Ny0xMTcuNTY5LTEwMi44NTktMTI4Ljg1OXYtMS40NjVjNTYuMjY2LTIwLjk5NCA4NS40MjgtNjIuODYzIDg1LjQyOC0xMTcuNTcgMC03MS4xNDMtNjEuNDk1LTEzNC4wNC0xNjkuNTEtMTM0LjA0LTYyLjQ0NyAwLTExMy4zOCAxNy4yNy0xNTkuMTUgNDcuMjE3bDM2LjcxMSA3Ny44NzdjMTcuMjM2LTE0LjIyMSA0OS40NS0zOC4xODYgOTguMzQ2LTM4LjE4NiA1NS41OTMgMCA4MS4wMjkgMjkuOTg1IDgxLjAyOSA2My42OTQgMCA0MC4zMjQtMzIuMjEzIDY1Ljg3NS04NC4xMjEgNjUuODc1SDU1MS41OHY4Ny41OGg1NC44MDFjNTQuMjAzIDAgMTAwLjY0IDE5LjQ0OSAxMDAuNjQgODAuMDk3IDAgNDQuOTItMzguMTk3IDc4LjY3LTk5LjkzMiA3OC42Ny00NC43NzQgMC04MS42MDQtMTcuMjcxLTEwNC4xNy0zNC40NjRsLTQwLjU5NiA4MS42MDFjNDIuNzk0IDIzLjkyNiA4NC4wNjIgMzkuNjEzIDE1Mi4zNyAzOS42MTMgMTIzLjE0OS0uMDExIDIwNi41Mi03NC44ODEgMjA2LjUyLTE2Ny42NWwuMDA3LjAxeiIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzAwNjVBRSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY3Ni40NCA3NDAuOTV2LTg4LjcwOUg0NTcuNzZjNi44ODgtMzAuNzEzIDYwLjEzMy03NS4wMzUgODcuMDg0LTk5Ljc1IDYzLjg1NS01Ny45OTcgMTIxLjYyLTk5LjE4OCAxMjEuNjItMTkwLjAxIDAtMTA4LjA1LTg3LjY3OC0xNjAuNjEtMTgwLjc2LTE2MC42MS03MS4zNjYgMC0xMTguNjIgMjAuOTkxLTE2OS43MiA2NS4zNzlsNTUuNzE3IDczLjU4NWMxMi42NTItMTQuMzM1IDQ0Ljk3NS00OC4xMTIgOTEuNDM0LTQ4LjExMiA1Ny43NiAwIDg3Ljc0MiAzNi43NzYgODcuNzQyIDgyLjQ4MiAwIDUxLjIwOS0zOC4wMjMgODcuODU0LTczLjM0NCAxMTguNjMtNzAuNzA5IDYxLjU5LTEzMS40NyAxMTUuNTctMTQ0Ljk0IDE3Ny4yOXY2OS44NjFoMzQzLjg1MSIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzg0QzI4RSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY3Mi4xNiA1NzAuNTZjMC05OS4zMDUtNzAuNTE5LTE1Ny4wMS0xNTcuMTEtMTU3LjAxLTU1Ljk0NyAwLTg5Ljg4NyAyMC4yODctMTA3Ljc5IDM2LjA2OCA2LjY5OS0xMDYuNTIxIDYxLjQzOC0xNTkuODcgMTM0LjQxLTE1OS44NyAyOS43NjggMCA1Ni45NzMgNi43MDEgNzEuMDMxIDEyLjg5MWwxNi42Ni05MC4xMTVjLTIxLjcxMy01LjQxNy00OC45MTYtOC45MzQtNzguODMtOC45MzQtMTY2LjU5IDAtMjUxLjM2IDEyNS44OTEtMjUxLjM2IDMwOS44OTEgMCAxNDAuMzUgNTAuODk1IDI0MC4zMSAxOTMuNTggMjQwLjMxIDEwOC44OS0uMDAxIDE3OS40MS03Ny41NjEgMTc5LjQwOS0xODMuMjMxbS0xMDUuODA5IDExLjI4YzAgNDUuNjI1LTI2LjI1NCA4OC40My03Ny40MDEgODguNDMtNTIuNTc4IDAtODAuOTUzLTQ4Ljc3Mi04MC45NTMtOTkuMTIgMC0xNS42MzggMC0zNS45NTkgNi4wMDQtNDQuOTY4IDEwLjQ3MS0xNi41ODYgMzYuNzk3LTI5LjE4NCA2OS4wNTUtMjkuMTg0IDUwLjkyIDAgODMuMjkgMzUuMTkgODMuMjkgODQuODRsLjAwNS4wMDJ6Ii8+PC9zdmc+" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
  </tbody>
</table>
</div>
<h3 id="case-2-full-httphttps-urls">Case 2: Full HTTP/HTTPS URLs
</h3>
<p><strong>Case 2</strong> demonstrates how to simulate a column containing strings representing HTTP/HTTPS URLs. We&rsquo;ll
use the same images as in <strong>Case 1</strong>, but this time, retrieve them from the Great Tables GitHub repository:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">img_url_paths</span> <span class="o">=</span> <span class="s2">&#34;https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images&#34;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Below is a <code>Pandas</code> DataFrame called <code>metro_mini2</code>, where the <code>case2</code> column contains
full HTTP/HTTPS URLs that we aim to render as images.</p>
<details class="code-fold">
<summary>Show the Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">metro_mini2</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="o">**</span><span class="n">data</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;case2&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;, &#34;</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="sa">f</span><span class="s2">&#34;</span><span class="si">{</span><span class="n">img_url_paths</span><span class="si">}</span><span class="s2">/metro_</span><span class="si">{</span><span class="n">item</span><span class="si">}</span><span class="s2">.svg&#34;</span> <span class="k">for</span> <span class="n">item</span> <span class="ow">in</span> <span class="n">row</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s2">&#34;, &#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">            <span class="k">for</span> <span class="n">row</span> <span class="ow">in</span> <span class="n">data</span><span class="p">[</span><span class="s2">&#34;lines&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">        <span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">metro_mini2</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
<pre><code>.dataframe tbody tr th {
    vertical-align: top;
}

.dataframe thead th {
    text-align: right;
}
</code></pre>
<p></style></p>
<table>
  <thead>
      <tr>
          <th></th>
          <th>name</th>
          <th>lines</th>
          <th>case2</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>0</td>
          <td>Argentine</td>
          <td>1</td>
          <td><a href="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" target="_blank" rel="noopener">https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg</a>
</td>
      </tr>
      <tr>
          <td>1</td>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td><a href="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" target="_blank" rel="noopener">https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg</a>
, <a href="https://raw.githubusercontent" target="_blank" rel="noopener">https://raw.githubusercontent</a>
...</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Bérault</td>
          <td>1</td>
          <td><a href="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" target="_blank" rel="noopener">https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg</a>
</td>
      </tr>
      <tr>
          <td>3</td>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td><a href="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" target="_blank" rel="noopener">https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg</a>
, <a href="https://raw.githubusercontent" target="_blank" rel="noopener">https://raw.githubusercontent</a>
...</td>
      </tr>
      <tr>
          <td>4</td>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td><a href="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" target="_blank" rel="noopener">https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg</a>
, <a href="https://raw.githubusercontent" target="_blank" rel="noopener">https://raw.githubusercontent</a>
...</td>
      </tr>
  </tbody>
</table>
</div>
<p>The lengthy <code>case2</code> column issue can also be addressed using the trick shared in <strong>Case 3</strong>.</p>
<p>Similarly, we can use <code>GT.fmt_image()</code> to render images by passing <code>&quot;case2&quot;</code> as the first argument:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">GT</span><span class="p">(</span><span class="n">metro_mini2</span><span class="p">)</span><span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;case2&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;case2&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="hhwxtzmocg" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#hhwxtzmocg table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#hhwxtzmocg thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#hhwxtzmocg p { margin: 0; padding: 0; }
#hhwxtzmocg .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#hhwxtzmocg .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#hhwxtzmocg .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#hhwxtzmocg .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#hhwxtzmocg .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#hhwxtzmocg .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#hhwxtzmocg .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#hhwxtzmocg .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#hhwxtzmocg .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#hhwxtzmocg .gt_column_spanner_outer:first-child { padding-left: 0; }
#hhwxtzmocg .gt_column_spanner_outer:last-child { padding-right: 0; }
#hhwxtzmocg .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#hhwxtzmocg .gt_spanner_row { border-bottom-style: hidden; }
#hhwxtzmocg .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#hhwxtzmocg .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#hhwxtzmocg .gt_from_md&gt; :first-child { margin-top: 0; }
#hhwxtzmocg .gt_from_md&gt; :last-child { margin-bottom: 0; }
#hhwxtzmocg .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#hhwxtzmocg .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#hhwxtzmocg .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#hhwxtzmocg .gt_row_group_first td { border-top-width: 2px; }
#hhwxtzmocg .gt_row_group_first th { border-top-width: 2px; }
#hhwxtzmocg .gt_striped { color: #333333; background-color: #F4F4F4; }
#hhwxtzmocg .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#hhwxtzmocg .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#hhwxtzmocg .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#hhwxtzmocg .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#hhwxtzmocg .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#hhwxtzmocg .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#hhwxtzmocg .gt_left { text-align: left; }
#hhwxtzmocg .gt_center { text-align: center; }
#hhwxtzmocg .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#hhwxtzmocg .gt_font_normal { font-weight: normal; }
#hhwxtzmocg .gt_font_bold { font-weight: bold; }
#hhwxtzmocg .gt_font_italic { font-style: italic; }
#hhwxtzmocg .gt_super { font-size: 65%; }
#hhwxtzmocg .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#hhwxtzmocg .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>name</th>
          <th>lines</th>
          <th>case2</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Argentine</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_5.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_8.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bérault</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_13.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_2.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_6.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
  </tbody>
</table>
</div>
<h3 id="case-3-image-names-with-the-path-argument">Case 3: Image Names with the <code>path=</code> Argument
</h3>
<p><strong>Case 3</strong> demonstrates how to use the <code>path=</code> argument to specify images relative to a base directory
or URL. This approach eliminates much of the repetition in file names, offering a solution to the
issues in <strong>Case 1</strong> and <strong>Case 2</strong>.</p>
<p>Below is a <code>Pandas</code> DataFrame called <code>metro_mini3</code>, where the <code>case3</code> column contains file names that
we aim to render as images.</p>
<details class="code-fold">
<summary>Show the Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">metro_mini3</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="p">{</span>
</span></span><span class="line"><span class="cl">        <span class="o">**</span><span class="n">data</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;case3&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;, &#34;</span><span class="o">.</span><span class="n">join</span><span class="p">(</span><span class="sa">f</span><span class="s2">&#34;metro_</span><span class="si">{</span><span class="n">item</span><span class="si">}</span><span class="s2">.svg&#34;</span> <span class="k">for</span> <span class="n">item</span> <span class="ow">in</span> <span class="n">row</span><span class="o">.</span><span class="n">split</span><span class="p">(</span><span class="s2">&#34;, &#34;</span><span class="p">))</span> <span class="k">for</span> <span class="n">row</span> <span class="ow">in</span> <span class="n">data</span><span class="p">[</span><span class="s2">&#34;lines&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">        <span class="p">],</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">metro_mini3</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
<pre><code>.dataframe tbody tr th {
    vertical-align: top;
}

.dataframe thead th {
    text-align: right;
}
</code></pre>
<p></style></p>
<table>
  <thead>
      <tr>
          <th></th>
          <th>name</th>
          <th>lines</th>
          <th>case3</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>0</td>
          <td>Argentine</td>
          <td>1</td>
          <td>metro_1.svg</td>
      </tr>
      <tr>
          <td>1</td>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td>metro_1.svg, metro_5.svg, metro_8.svg</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Bérault</td>
          <td>1</td>
          <td>metro_1.svg</td>
      </tr>
      <tr>
          <td>3</td>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td>metro_1.svg, metro_13.svg</td>
      </tr>
      <tr>
          <td>4</td>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td>metro_1.svg, metro_2.svg, metro_6.svg</td>
      </tr>
  </tbody>
</table>
</div>
<p>Now we can use <code>GT.fmt_image()</code> to render the images by passing <code>&quot;case3&quot;</code> as the first argument and
specifying either <code>img_local_paths</code> or <code>img_url_paths</code> as the <code>path=</code> argument:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="c1"># equivalent to `Case 1`</span>
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini3</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;case3&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_local_paths</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;case3&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># equivalent to `Case 2`</span>
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini3</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;case3&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_url_paths</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;case3&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="kvxidnwcci" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#kvxidnwcci table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#kvxidnwcci thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#kvxidnwcci p { margin: 0; padding: 0; }
#kvxidnwcci .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#kvxidnwcci .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#kvxidnwcci .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#kvxidnwcci .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#kvxidnwcci .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#kvxidnwcci .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#kvxidnwcci .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#kvxidnwcci .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#kvxidnwcci .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#kvxidnwcci .gt_column_spanner_outer:first-child { padding-left: 0; }
#kvxidnwcci .gt_column_spanner_outer:last-child { padding-right: 0; }
#kvxidnwcci .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#kvxidnwcci .gt_spanner_row { border-bottom-style: hidden; }
#kvxidnwcci .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#kvxidnwcci .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#kvxidnwcci .gt_from_md&gt; :first-child { margin-top: 0; }
#kvxidnwcci .gt_from_md&gt; :last-child { margin-bottom: 0; }
#kvxidnwcci .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#kvxidnwcci .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#kvxidnwcci .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#kvxidnwcci .gt_row_group_first td { border-top-width: 2px; }
#kvxidnwcci .gt_row_group_first th { border-top-width: 2px; }
#kvxidnwcci .gt_striped { color: #333333; background-color: #F4F4F4; }
#kvxidnwcci .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#kvxidnwcci .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#kvxidnwcci .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#kvxidnwcci .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#kvxidnwcci .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#kvxidnwcci .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#kvxidnwcci .gt_left { text-align: left; }
#kvxidnwcci .gt_center { text-align: center; }
#kvxidnwcci .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#kvxidnwcci .gt_font_normal { font-weight: normal; }
#kvxidnwcci .gt_font_bold { font-weight: bold; }
#kvxidnwcci .gt_font_italic { font-style: italic; }
#kvxidnwcci .gt_super { font-size: 65%; }
#kvxidnwcci .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#kvxidnwcci .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>name</th>
          <th>lines</th>
          <th>case3</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Argentine</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_5.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_8.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bérault</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_13.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_2.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_6.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
  </tbody>
</table>
</div>
<p>After exploring <strong>Case 1</strong> and <strong>Case 2</strong>, you&rsquo;ll likely appreciate the functionality of the <code>path=</code>
argument. However, manually constructing file names can still be a bit tedious. If your file names
follow a consistent pattern, the <code>file_pattern=</code> argument can simplify the process. Let&rsquo;s see how
this works in <strong>Case 4</strong> below.</p>
<h3 id="case-4-image-names-using-both-the-path-and-file_pattern-arguments">Case 4: Image Names Using Both the <code>path=</code> and <code>file_pattern=</code> Arguments
</h3>
<p><strong>Case 4</strong> demonstrates how to use <code>path=</code> and <code>file_pattern=</code> to specify images with names following
a common pattern. For example, you could use <code>file_pattern=&quot;metro_{}.svg&quot;</code> to reference images like
<code>metro_1.svg</code>, <code>metro_2.svg</code>, and so on.</p>
<p>Below is a <code>Pandas</code> DataFrame called <code>metro_mini4</code>, where the <code>case4</code> column contains a copy of
<code>data[&quot;lines&quot;]</code>, which we aim to render as images.</p>
<details class="code-fold">
<summary>Show the Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">metro_mini4</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">({</span><span class="o">**</span><span class="n">data</span><span class="p">,</span> <span class="s2">&#34;case4&#34;</span><span class="p">:</span> <span class="n">data</span><span class="p">[</span><span class="s2">&#34;lines&#34;</span><span class="p">]})</span>
</span></span><span class="line"><span class="cl"><span class="n">metro_mini4</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
<pre><code>.dataframe tbody tr th {
    vertical-align: top;
}

.dataframe thead th {
    text-align: right;
}
</code></pre>
<p></style></p>
<table>
  <thead>
      <tr>
          <th></th>
          <th>name</th>
          <th>lines</th>
          <th>case4</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>0</td>
          <td>Argentine</td>
          <td>1</td>
          <td>1</td>
      </tr>
      <tr>
          <td>1</td>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td>1, 5, 8</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Bérault</td>
          <td>1</td>
          <td>1</td>
      </tr>
      <tr>
          <td>3</td>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td>1, 13</td>
      </tr>
      <tr>
          <td>4</td>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td>1, 2, 6</td>
      </tr>
  </tbody>
</table>
</div>
<p>First, define a string pattern to illustrate the file naming convention, using <code>{}</code> to indicate the
variable portion:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">file_pattern</span> <span class="o">=</span> <span class="s2">&#34;metro_</span><span class="si">{}</span><span class="s2">.svg&#34;</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Next, pass <code>&quot;case4&quot;</code> as the first argument, along with <code>img_local_paths</code> or <code>img_url_paths</code> as the
<code>path=</code> argument, and <code>file_pattern</code> as the <code>file_pattern=</code> argument. This allows <code>GT.fmt_image()</code>
to render the images:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="c1"># equivalent to `Case 1`</span>
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini4</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;case4&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_local_paths</span><span class="p">,</span> <span class="n">file_pattern</span><span class="o">=</span><span class="n">file_pattern</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;case4&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c1"># equivalent to `Case 2`</span>
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini4</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;case4&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_url_paths</span><span class="p">,</span> <span class="n">file_pattern</span><span class="o">=</span><span class="n">file_pattern</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;case4&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="jgicjuqcmb" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#jgicjuqcmb table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#jgicjuqcmb thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#jgicjuqcmb p { margin: 0; padding: 0; }
#jgicjuqcmb .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#jgicjuqcmb .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#jgicjuqcmb .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#jgicjuqcmb .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#jgicjuqcmb .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#jgicjuqcmb .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#jgicjuqcmb .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#jgicjuqcmb .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#jgicjuqcmb .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#jgicjuqcmb .gt_column_spanner_outer:first-child { padding-left: 0; }
#jgicjuqcmb .gt_column_spanner_outer:last-child { padding-right: 0; }
#jgicjuqcmb .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#jgicjuqcmb .gt_spanner_row { border-bottom-style: hidden; }
#jgicjuqcmb .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#jgicjuqcmb .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#jgicjuqcmb .gt_from_md&gt; :first-child { margin-top: 0; }
#jgicjuqcmb .gt_from_md&gt; :last-child { margin-bottom: 0; }
#jgicjuqcmb .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#jgicjuqcmb .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#jgicjuqcmb .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#jgicjuqcmb .gt_row_group_first td { border-top-width: 2px; }
#jgicjuqcmb .gt_row_group_first th { border-top-width: 2px; }
#jgicjuqcmb .gt_striped { color: #333333; background-color: #F4F4F4; }
#jgicjuqcmb .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#jgicjuqcmb .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#jgicjuqcmb .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#jgicjuqcmb .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#jgicjuqcmb .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#jgicjuqcmb .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#jgicjuqcmb .gt_left { text-align: left; }
#jgicjuqcmb .gt_center { text-align: center; }
#jgicjuqcmb .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#jgicjuqcmb .gt_font_normal { font-weight: normal; }
#jgicjuqcmb .gt_font_bold { font-weight: bold; }
#jgicjuqcmb .gt_font_italic { font-style: italic; }
#jgicjuqcmb .gt_super { font-size: 65%; }
#jgicjuqcmb .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#jgicjuqcmb .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>name</th>
          <th>lines</th>
          <th>case4</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Argentine</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_5.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_8.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bérault</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_13.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_2.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_6.svg" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
  </tbody>
</table>
</div>
<details class="callout callout-warning" role="note" aria-label="Warning">
<summary class="callout-header">
<span class="callout-title">Using <code>file_pattern=</code> Independently</span>
</summary>
<div class="callout-body">
<p>The <code>file_pattern=</code> argument is typically used in conjunction with the <code>path=</code> argument, but this
is not a strict rule. If your local file paths or HTTP/HTTPS URLs follow a pattern, you can use
<code>file_pattern=</code> alone without <code>path=</code>. This allows you to include the shared portion of the file
paths or URLs directly in <code>file_pattern</code>, as shown below:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">file_pattern</span> <span class="o">=</span> <span class="nb">str</span><span class="p">(</span><span class="n">img_local_paths</span> <span class="o">/</span> <span class="s2">&#34;metro_</span><span class="si">{}</span><span class="s2">.svg&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini4</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;case4&#34;</span><span class="p">,</span> <span class="n">file_pattern</span><span class="o">=</span><span class="n">file_pattern</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;case4&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="luuirbqqsy" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#luuirbqqsy table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#luuirbqqsy thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#luuirbqqsy p { margin: 0; padding: 0; }
#luuirbqqsy .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#luuirbqqsy .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#luuirbqqsy .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#luuirbqqsy .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#luuirbqqsy .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#luuirbqqsy .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#luuirbqqsy .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#luuirbqqsy .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#luuirbqqsy .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#luuirbqqsy .gt_column_spanner_outer:first-child { padding-left: 0; }
#luuirbqqsy .gt_column_spanner_outer:last-child { padding-right: 0; }
#luuirbqqsy .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#luuirbqqsy .gt_spanner_row { border-bottom-style: hidden; }
#luuirbqqsy .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#luuirbqqsy .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#luuirbqqsy .gt_from_md&gt; :first-child { margin-top: 0; }
#luuirbqqsy .gt_from_md&gt; :last-child { margin-bottom: 0; }
#luuirbqqsy .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#luuirbqqsy .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#luuirbqqsy .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#luuirbqqsy .gt_row_group_first td { border-top-width: 2px; }
#luuirbqqsy .gt_row_group_first th { border-top-width: 2px; }
#luuirbqqsy .gt_striped { color: #333333; background-color: #F4F4F4; }
#luuirbqqsy .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#luuirbqqsy .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#luuirbqqsy .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#luuirbqqsy .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#luuirbqqsy .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#luuirbqqsy .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#luuirbqqsy .gt_left { text-align: left; }
#luuirbqqsy .gt_center { text-align: center; }
#luuirbqqsy .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#luuirbqqsy .gt_font_normal { font-weight: normal; }
#luuirbqqsy .gt_font_bold { font-weight: bold; }
#luuirbqqsy .gt_font_italic { font-style: italic; }
#luuirbqqsy .gt_super { font-size: 65%; }
#luuirbqqsy .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#luuirbqqsy .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>name</th>
          <th>lines</th>
          <th>case4</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Argentine</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bastille</td>
          <td>1, 5, 8</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0YxOTA0MyIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY3OS43MSA1OTIuNzVjMC03OS40ODYtNTguNDItMTU5LjY4LTIwMy4yNy0xNjcuMjVsLTE1LjEzMy0uNzEyIDcuNDE4LTEwMS4zNTFoMTkwLjc4di04Ny45MTNoLTI3OC41MmwtMjEuMDM2IDI3NS40OSA4Mi41NDIuNzEyYzk3LjYxMy45NzkgMTIyLjk3OSA1My4zMTcgMTIyLjk3OSA5MS42NSAwIDYyLjE2LTUxLjYyNyA4NS42MjktOTIuODY2IDg1LjYyOS00NS4xODggMC03NS4wMzctMTYuNjE1LTEwMC42MS0zMy45MTJsLTM4Ljg5NyA4Mi42OWM0MS4wOTMgMjMuMTcyIDg5LjI3NyAzOC4zMzMgMTQ1LjUgMzguMzMzIDEyMC43NzEtLjA0IDIwMS4xMi04Mi4wOCAyMDEuMTItMTgzLjM3Ii8+PC9zdmc+" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0NEQUNDRiIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY4OS4yMSA2MTQuOTJjMC02OS42MTctNDIuNzQyLTExMS44MS05MS41NzMtMTM0Ljg1IDQ5LjU2OC0zMC4xNzUgNzUuMjA2LTY4LjQ1NCA3NS4yMDYtMTE3LjkgMC05MC45ODYtNzcuMzc4LTEzNi44My0xNzAuNDYtMTM2LjgzLTkwLjg3NyAwLTE3MC40MSA2MC45My0xNzAuNDEgMTQ4LjY2IDAgNTQuODAxIDI4LjU0NSA4Ny4wMzEgNzQuMjM1IDExNS41NC01MS4wMjMgMjYuMjk2LTkwLjc3OSA2Ny43MTYtOTAuNzc5IDEzOC4xNSAwIDgwLjM5NyA2Ni42OTMgMTUwLjkwOSAxODQuNTggMTUwLjkwOSAxMDguODYtLjAyIDE4OS4xOS02Mi45NiAxODkuMTktMTYzLjY4TTU3MS40MDkgMzY4LjgzYzAgMzMuMTItMzAuMDIxIDYzLjY4Mi01Ny44MTIgNzYuNTU5LTMzLjcwNS0xNC4yNzItNzcuMzAyLTM3LjYyLTc3LjMwMi04MS4wNTkgMC0zNi42ODkgMjYuMjIxLTYyLjI4NiA2Ny41MjctNjIuMjg2IDQzLjUyOS4wMSA2Ny41OCAyOS45MSA2Ny41OCA2Ni43OWwuMDA3LS4wMDR6bTguMjIgMjU0LjQyYzAgNDIuMDQyLTI3Ljc3IDc3LjM3My03OC4wOTUgNzcuMzczLTUxLjEwMyAwLTc5LjU1LTQxLjQ1OS03OS41NS04NC44OTYgMC00MS4xODggMzQuNTM5LTc1LjcwNSA2OS4wNTgtODkuMzE4IDQ0Ljk5IDIyLjU0IDg4LjU5IDQ4LjggODguNTkgOTYuODVsLS4wMDMtLjAwOXoiLz48L3N2Zz4=" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Bérault</td>
          <td>1</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzk5RDRERSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTM4Ny41IDc2NC4xMVYyMzQuMDNoLTkyLjM2MWMtMjQuMDkyIDE4LjY5NS04MS4xODkgNTMuODcxLTE0Mi43MyA4My4xMDVsLTMyLjI5MiAxNC45NzQgMzYuMDk2IDgxLjYgMjcuNzc2LTE0LjI2YzE5LjQ1Ni05Ljc0NSA3Mi44MjgtMzcuNDM1IDkwLjc3Ny01MS42MTN2NDE2LjI4aDExMi43Mk04MjEuMjIgNjA2LjkzYzAtNzQuMTUxLTQ0LjI5Ny0xMTcuNTY5LTEwMi44NTktMTI4Ljg1OXYtMS40NjVjNTYuMjY2LTIwLjk5NCA4NS40MjgtNjIuODYzIDg1LjQyOC0xMTcuNTcgMC03MS4xNDMtNjEuNDk1LTEzNC4wNC0xNjkuNTEtMTM0LjA0LTYyLjQ0NyAwLTExMy4zOCAxNy4yNy0xNTkuMTUgNDcuMjE3bDM2LjcxMSA3Ny44NzdjMTcuMjM2LTE0LjIyMSA0OS40NS0zOC4xODYgOTguMzQ2LTM4LjE4NiA1NS41OTMgMCA4MS4wMjkgMjkuOTg1IDgxLjAyOSA2My42OTQgMCA0MC4zMjQtMzIuMjEzIDY1Ljg3NS04NC4xMjEgNjUuODc1SDU1MS41OHY4Ny41OGg1NC44MDFjNTQuMjAzIDAgMTAwLjY0IDE5LjQ0OSAxMDAuNjQgODAuMDk3IDAgNDQuOTItMzguMTk3IDc4LjY3LTk5LjkzMiA3OC42Ny00NC43NzQgMC04MS42MDQtMTcuMjcxLTEwNC4xNy0zNC40NjRsLTQwLjU5NiA4MS42MDFjNDIuNzk0IDIzLjkyNiA4NC4wNjIgMzkuNjEzIDE1Mi4zNyAzOS42MTMgMTIzLjE0OS0uMDExIDIwNi41Mi03NC44ODEgMjA2LjUyLTE2Ny42NWwuMDA3LjAxeiIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
      <tr>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
          <td><span style="white-space:nowrap;"><img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iI0ZFQ0UwMCIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIyMUUyMCIgZD0iTTU3Ny4wMjYgNzYzLjk4N1YyMzQuMDIyaC05Mi4zNTJjLTIzLjkzOCAxOC43MTQtODEuMDE3IDU0LjAyNi0xNDIuNTY1IDgzLjI2NWwtMzIuMjg3IDE1LjE0NyAzNi4wMTQgODEuMDQyIDI3Ljk0Ni0xNC4zOGMxOS4zNzgtOS42MTEgNzIuNjE3LTM3LjM1NyA5MC42OC01MS43djQxNi41OTFoMTEyLjU2NCIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzAwNjVBRSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTY3Ni40NCA3NDAuOTV2LTg4LjcwOUg0NTcuNzZjNi44ODgtMzAuNzEzIDYwLjEzMy03NS4wMzUgODcuMDg0LTk5Ljc1IDYzLjg1NS01Ny45OTcgMTIxLjYyLTk5LjE4OCAxMjEuNjItMTkwLjAxIDAtMTA4LjA1LTg3LjY3OC0xNjAuNjEtMTgwLjc2LTE2MC42MS03MS4zNjYgMC0xMTguNjIgMjAuOTkxLTE2OS43MiA2NS4zNzlsNTUuNzE3IDczLjU4NWMxMi42NTItMTQuMzM1IDQ0Ljk3NS00OC4xMTIgOTEuNDM0LTQ4LjExMiA1Ny43NiAwIDg3Ljc0MiAzNi43NzYgODcuNzQyIDgyLjQ4MiAwIDUxLjIwOS0zOC4wMjMgODcuODU0LTczLjM0NCAxMTguNjMtNzAuNzA5IDYxLjU5LTEzMS40NyAxMTUuNTctMTQ0Ljk0IDE3Ny4yOXY2OS44NjFoMzQzLjg1MSIvPjwvc3ZnPg==" style="height: 2em;vertical-align: middle;" /> <img src="https://posit-open-source.netlify.app/blog/great-tables/rendering-images/data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgdmlld0JveD0iMCAwIDEwNTAgMTA1MCIgc3R5bGU9ImhlaWdodDoxZW07d2lkdGg6MS4xM2VtO3ZlcnRpY2FsLWFsaWduOi0wLjEyNWVtO21hcmdpbi1sZWZ0OmF1dG87bWFyZ2luLXJpZ2h0OmF1dG87Zm9udC1zaXplOmluaGVyaXQ7b3ZlcmZsb3c6dmlzaWJsZTtwb3NpdGlvbjpyZWxhdGl2ZTsiPjxjaXJjbGUgZmlsbD0iIzg0QzI4RSIgY3g9IjUwMCIgY3k9IjUwMCIgcj0iNTAwIi8+PHBhdGggZmlsbD0iIzIzMUYyMCIgZD0iTTY3Mi4xNiA1NzAuNTZjMC05OS4zMDUtNzAuNTE5LTE1Ny4wMS0xNTcuMTEtMTU3LjAxLTU1Ljk0NyAwLTg5Ljg4NyAyMC4yODctMTA3Ljc5IDM2LjA2OCA2LjY5OS0xMDYuNTIxIDYxLjQzOC0xNTkuODcgMTM0LjQxLTE1OS44NyAyOS43NjggMCA1Ni45NzMgNi43MDEgNzEuMDMxIDEyLjg5MWwxNi42Ni05MC4xMTVjLTIxLjcxMy01LjQxNy00OC45MTYtOC45MzQtNzguODMtOC45MzQtMTY2LjU5IDAtMjUxLjM2IDEyNS44OTEtMjUxLjM2IDMwOS44OTEgMCAxNDAuMzUgNTAuODk1IDI0MC4zMSAxOTMuNTggMjQwLjMxIDEwOC44OS0uMDAxIDE3OS40MS03Ny41NjEgMTc5LjQwOS0xODMuMjMxbS0xMDUuODA5IDExLjI4YzAgNDUuNjI1LTI2LjI1NCA4OC40My03Ny40MDEgODguNDMtNTIuNTc4IDAtODAuOTUzLTQ4Ljc3Mi04MC45NTMtOTkuMTIgMC0xNS42MzggMC0zNS45NTkgNi4wMDQtNDQuOTY4IDEwLjQ3MS0xNi41ODYgMzYuNzk3LTI5LjE4NCA2OS4wNTUtMjkuMTg0IDUwLjkyIDAgODMuMjkgMzUuMTkgODMuMjkgODQuODRsLjAwNS4wMDJ6Ii8+PC9zdmc+" style="height: 2em;vertical-align: middle;" /></span></td>
      </tr>
  </tbody>
</table>
</div>
</div>
</details>
<p><strong>Case 4</strong> is undoubtedly one of the most powerful features of Great Tables. While mastering it may
take some practice, we hope this example helps you render images effortlessly and effectively.</p>
<h2 id="rendering-images-anywhere">Rendering Images Anywhere
</h2>
<p>While <code>GT.fmt_image()</code> is primarily designed for rendering images in the table body, what if you
need to display images in other locations, such as the header? In such cases, you can turn to the versatile
<a href="https://posit-dev.github.io/great-tables/reference/vals.fmt_image.html#great_tables.vals.fmt_image" target="_blank" rel="noopener">vals.fmt_image()</a>
.</p>
<p><code>vals.fmt_image()</code> is a hidden gem in Great Tables. Its usage is similar to <code>GT.fmt_image()</code>, but
instead of working directly with DataFrame columns, it lets you pass a string or a list of strings
as the first argument, returning a list of strings, each representing an image. You can then wrap
these strings with <a href="https://posit-dev.github.io/great-tables/reference/html.html#great_tables.html" target="_blank" rel="noopener">html()</a>
,
allowing Great Tables to render the images anywhere in the table.</p>
<h3 id="preparations-1">Preparations
</h3>
<p>We will create a <code>Pandas</code> DataFrame named <code>metro_mini</code> using the <code>data</code> dictionary. This will be used
for demonstration in the following examples:</p>
<details class="code-fold">
<summary>Show the Code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">metro_mini</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">(</span><span class="n">data</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">metro_mini</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div>
<style scoped>
    .dataframe tbody tr th:only-of-type {
        vertical-align: middle;
    }
<pre><code>.dataframe tbody tr th {
    vertical-align: top;
}

.dataframe thead th {
    text-align: right;
}
</code></pre>
<p></style></p>
<table>
  <thead>
      <tr>
          <th></th>
          <th>name</th>
          <th>lines</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>0</td>
          <td>Argentine</td>
          <td>1</td>
      </tr>
      <tr>
          <td>1</td>
          <td>Bastille</td>
          <td>1, 5, 8</td>
      </tr>
      <tr>
          <td>2</td>
          <td>Bérault</td>
          <td>1</td>
      </tr>
      <tr>
          <td>3</td>
          <td>Champs-Élysées&mdash;Clemenceau</td>
          <td>1, 13</td>
      </tr>
      <tr>
          <td>4</td>
          <td>Charles de Gaulle&mdash;Étoile</td>
          <td>1, 2, 6</td>
      </tr>
  </tbody>
</table>
</div>
<h3 id="single-image">Single Image
</h3>
<p>This example shows how to render a valid URL as an image in the title of the table header:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_logo_url</span> <span class="o">=</span> <span class="s2">&#34;https://posit-dev.github.io/great-tables/assets/GT_logo.svg&#34;</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">_gt_logo</span><span class="p">,</span> <span class="o">*</span><span class="n">_</span> <span class="o">=</span> <span class="n">vals</span><span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="n">gt_logo_url</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">100</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">gt_logo</span> <span class="o">=</span> <span class="n">html</span><span class="p">(</span><span class="n">_gt_logo</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;lines&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_url_paths</span><span class="p">,</span> <span class="n">file_pattern</span><span class="o">=</span><span class="s2">&#34;metro_</span><span class="si">{}</span><span class="s2">.svg&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="n">gt_logo</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;lines&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span><span class="n">style</span><span class="o">=</span><span class="mi">4</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s2">&#34;gray&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><dl>
<dt>Line 3</dt>
<dd><code>vals.fmt_image()</code> returns a list of strings. Here, we use tuple unpacking to extract the first
item from the list.</dd>
</dl>
<div id="etigezwzmx" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#etigezwzmx table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#etigezwzmx thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#etigezwzmx p { margin: 0; padding: 0; }
#etigezwzmx .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 3px; border-top-color: #D5D5D5; border-right-style: solid; border-right-width: 3px; border-right-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: #D5D5D5; border-left-style: solid; border-left-width: 3px; border-left-color: #D5D5D5; }
#etigezwzmx .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#etigezwzmx .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#etigezwzmx .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#etigezwzmx .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#etigezwzmx .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; }
#etigezwzmx .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#etigezwzmx .gt_col_heading { color: #FFFFFF; background-color: #5F5F5F; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#etigezwzmx .gt_column_spanner_outer { color: #FFFFFF; background-color: #5F5F5F; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#etigezwzmx .gt_column_spanner_outer:first-child { padding-left: 0; }
#etigezwzmx .gt_column_spanner_outer:last-child { padding-right: 0; }
#etigezwzmx .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#etigezwzmx .gt_spanner_row { border-bottom-style: hidden; }
#etigezwzmx .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#etigezwzmx .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; vertical-align: middle; }
#etigezwzmx .gt_from_md&gt; :first-child { margin-top: 0; }
#etigezwzmx .gt_from_md&gt; :last-child { margin-bottom: 0; }
#etigezwzmx .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: dashed; border-top-width: 1px; border-top-color: #D5D5D5; border-left-style: dashed; border-left-width: 1px; border-left-color: #D5D5D5; border-right-style: dashed; border-right-width: 1px; border-right-color: #D5D5D5; vertical-align: middle; overflow-x: hidden; }
#etigezwzmx .gt_stub { color: #333333; background-color: #929292; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: dashed; border-right-width: 2px; border-right-color: #D5D5D5; padding-left: 5px; padding-right: 5px; }
#etigezwzmx .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#etigezwzmx .gt_row_group_first td { border-top-width: 2px; }
#etigezwzmx .gt_row_group_first th { border-top-width: 2px; }
#etigezwzmx .gt_striped { color: #333333; background-color: #F4F4F4; }
#etigezwzmx .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; }
#etigezwzmx .gt_grand_summary_row { color: #FFFFFF; background-color: #5F5F5F; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#etigezwzmx .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#etigezwzmx .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#etigezwzmx .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#etigezwzmx .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#etigezwzmx .gt_left { text-align: left; }
#etigezwzmx .gt_center { text-align: center; }
#etigezwzmx .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#etigezwzmx .gt_font_normal { font-weight: normal; }
#etigezwzmx .gt_font_bold { font-weight: bold; }
#etigezwzmx .gt_font_italic { font-style: italic; }
#etigezwzmx .gt_super { font-size: 65%; }
#etigezwzmx .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#etigezwzmx .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="2" class="gt_heading gt_title gt_font_normal"><span style="white-space:nowrap;"><img src="https://posit-dev.github.io/great-tables/assets/GT_logo.svg" style="height: 100px;vertical-align: middle;" /></span></th>
</tr>
<tr class="gt_col_headings">
<th id="name" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">name</th>
<th id="lines" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">lines</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Argentine</td>
<td class="gt_row gt_right"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Bastille</td>
<td class="gt_row gt_right gt_striped"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_5.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_8.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left">Bérault</td>
<td class="gt_row gt_right"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Champs-Élysées—Clemenceau</td>
<td class="gt_row gt_right gt_striped"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_13.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left">Charles de Gaulle—Étoile</td>
<td class="gt_row gt_right"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_2.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_6.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
</tbody>
</table>
</div>
<h3 id="multiple-images">Multiple Images
</h3>
<p>This example demonstrates how to render two valid URLs as images in the title and subtitle of the
table header:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">metro_logo_url</span> <span class="o">=</span> <span class="s2">&#34;https://raw.githubusercontent.com/rstudio/gt/master/images/dataset_metro.svg&#34;</span>
</span></span><span class="line"><span class="cl"><span class="n">logo_urls</span> <span class="o">=</span> <span class="p">[</span><span class="n">gt_logo_url</span><span class="p">,</span> <span class="n">metro_logo_url</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">_gt_logo</span><span class="p">,</span> <span class="n">_metro_logo</span> <span class="o">=</span> <span class="n">vals</span><span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="n">logo_urls</span><span class="p">,</span> <span class="n">height</span><span class="o">=</span><span class="mi">100</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">gt_logo</span><span class="p">,</span> <span class="n">metro_logo</span> <span class="o">=</span> <span class="n">html</span><span class="p">(</span><span class="n">_gt_logo</span><span class="p">),</span> <span class="n">html</span><span class="p">(</span><span class="n">_metro_logo</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;lines&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_url_paths</span><span class="p">,</span> <span class="n">file_pattern</span><span class="o">=</span><span class="s2">&#34;metro_</span><span class="si">{}</span><span class="s2">.svg&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span><span class="n">title</span><span class="o">=</span><span class="n">gt_logo</span><span class="p">,</span> <span class="n">subtitle</span><span class="o">=</span><span class="n">metro_logo</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;lines&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span><span class="n">style</span><span class="o">=</span><span class="mi">4</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s2">&#34;gray&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><dl>
<dt>Line 4</dt>
<dd>Note that if you need to render images with different <code>height</code> or <code>width</code>, you might need to make
two separate calls to <code>vals.fmt_image()</code>.</dd>
</dl>
<div id="wcioyichwi" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#wcioyichwi table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#wcioyichwi thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#wcioyichwi p { margin: 0; padding: 0; }
#wcioyichwi .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 3px; border-top-color: #D5D5D5; border-right-style: solid; border-right-width: 3px; border-right-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 3px; border-bottom-color: #D5D5D5; border-left-style: solid; border-left-width: 3px; border-left-color: #D5D5D5; }
#wcioyichwi .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#wcioyichwi .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#wcioyichwi .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#wcioyichwi .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#wcioyichwi .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; }
#wcioyichwi .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#wcioyichwi .gt_col_heading { color: #FFFFFF; background-color: #5F5F5F; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#wcioyichwi .gt_column_spanner_outer { color: #FFFFFF; background-color: #5F5F5F; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#wcioyichwi .gt_column_spanner_outer:first-child { padding-left: 0; }
#wcioyichwi .gt_column_spanner_outer:last-child { padding-right: 0; }
#wcioyichwi .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#wcioyichwi .gt_spanner_row { border-bottom-style: hidden; }
#wcioyichwi .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#wcioyichwi .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; vertical-align: middle; }
#wcioyichwi .gt_from_md&gt; :first-child { margin-top: 0; }
#wcioyichwi .gt_from_md&gt; :last-child { margin-bottom: 0; }
#wcioyichwi .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: dashed; border-top-width: 1px; border-top-color: #D5D5D5; border-left-style: dashed; border-left-width: 1px; border-left-color: #D5D5D5; border-right-style: dashed; border-right-width: 1px; border-right-color: #D5D5D5; vertical-align: middle; overflow-x: hidden; }
#wcioyichwi .gt_stub { color: #333333; background-color: #929292; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: dashed; border-right-width: 2px; border-right-color: #D5D5D5; padding-left: 5px; padding-right: 5px; }
#wcioyichwi .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#wcioyichwi .gt_row_group_first td { border-top-width: 2px; }
#wcioyichwi .gt_row_group_first th { border-top-width: 2px; }
#wcioyichwi .gt_striped { color: #333333; background-color: #F4F4F4; }
#wcioyichwi .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D5D5D5; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D5D5D5; }
#wcioyichwi .gt_grand_summary_row { color: #FFFFFF; background-color: #5F5F5F; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#wcioyichwi .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#wcioyichwi .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#wcioyichwi .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#wcioyichwi .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#wcioyichwi .gt_left { text-align: left; }
#wcioyichwi .gt_center { text-align: center; }
#wcioyichwi .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#wcioyichwi .gt_font_normal { font-weight: normal; }
#wcioyichwi .gt_font_bold { font-weight: bold; }
#wcioyichwi .gt_font_italic { font-style: italic; }
#wcioyichwi .gt_super { font-size: 65%; }
#wcioyichwi .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#wcioyichwi .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="2" class="gt_heading gt_title gt_font_normal"><span style="white-space:nowrap;"><img src="https://posit-dev.github.io/great-tables/assets/GT_logo.svg" style="height: 100px;vertical-align: middle;" /></span></th>
</tr>
<tr class="gt_heading">
<th colspan="2" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/rstudio/gt/master/images/dataset_metro.svg" style="height: 100px;vertical-align: middle;" /></span></th>
</tr>
<tr class="gt_col_headings">
<th id="name" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">name</th>
<th id="lines" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">lines</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left">Argentine</td>
<td class="gt_row gt_right"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Bastille</td>
<td class="gt_row gt_right gt_striped"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_5.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_8.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left">Bérault</td>
<td class="gt_row gt_right"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left gt_striped">Champs-Élysées—Clemenceau</td>
<td class="gt_row gt_right gt_striped"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_13.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
<tr>
<td class="gt_row gt_left">Charles de Gaulle—Étoile</td>
<td class="gt_row gt_right"><span style="white-space:nowrap;"><img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_1.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_2.svg" style="height: 2em;vertical-align: middle;" /> <img src="https://raw.githubusercontent.com/posit-dev/great-tables/refs/heads/main/great_tables/data/metro_images/metro_6.svg" style="height: 2em;vertical-align: middle;" /></span></td>
</tr>
</tbody>
</table>
</div>
<h2 id="manually-rendering-images-anywhere">Manually Rendering Images Anywhere
</h2>
<p>Remember, you can always use <code>html()</code> to manually construct your desired output. For example, the
previous table can be created without relying on <code>vals.fmt_image()</code> like this:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">metro_mini</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_image</span><span class="p">(</span><span class="s2">&#34;lines&#34;</span><span class="p">,</span> <span class="n">path</span><span class="o">=</span><span class="n">img_url_paths</span><span class="p">,</span> <span class="n">file_pattern</span><span class="o">=</span><span class="s2">&#34;metro_</span><span class="si">{}</span><span class="s2">.svg&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span><span class="o">=</span><span class="n">html</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;&lt;img src=&#34;</span><span class="si">{</span><span class="n">gt_logo_url</span><span class="si">}</span><span class="s1">&#34; height=&#34;100&#34;&gt;&#39;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">subtitle</span><span class="o">=</span><span class="n">html</span><span class="p">(</span><span class="sa">f</span><span class="s1">&#39;&lt;img src=&#34;</span><span class="si">{</span><span class="n">metro_logo_url</span><span class="si">}</span><span class="s1">&#34; height=&#34;100&#34;&gt;&#39;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;right&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;lines&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_stylize</span><span class="p">(</span><span class="n">style</span><span class="o">=</span><span class="mi">4</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s2">&#34;gray&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Alternatively, you can manually encode the image using Python&rsquo;s built-in
<a href="https://docs.python.org/3/library/base64.html" target="_blank" rel="noopener">base64</a>
 module, specify the appropriate MIME type
and HTML attributes, and then wrap it in <code>html()</code> to display the table.</p>
<h2 id="final-words">Final Words
</h2>
<p>In this post, we focused on the most common use cases for rendering images in Great Tables, deliberately
avoiding excessive DataFrame operations. Including such details could have overwhelmed the post with
examples of string manipulations and the complexities of working with various DataFrame libraries.</p>
<p>We hope you found this guide helpful and enjoyed the structured approach. Until next time, happy
table creation with Great Tables!</p>
<div class="callout callout-note" role="note" aria-label="Note">
<div class="callout-header">
<span class="callout-title">Appendix: Related PRs</span>
</div>
<div class="callout-body">
<p>If you&rsquo;re interested in the recent enhancements we&rsquo;ve made to image rendering, be sure to check out
<a href="https://github.com/posit-dev/great-tables/pull/444" target="_blank" rel="noopener">#444</a>
,
<a href="https://github.com/posit-dev/great-tables/pull/451" target="_blank" rel="noopener">#451</a>
 and
<a href="https://github.com/posit-dev/great-tables/pull/520" target="_blank" rel="noopener">#520</a>
 for all the details.</p>
</div>
</div>
]]></description>
    </item>
    <item>
      <title>Great Tables: Generating LaTeX Output for PDF</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/latex-output-tables/</link>
      <pubDate>Wed, 13 Nov 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/latex-output-tables/</guid>
      <dc:creator>Rich Iannone</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>We&rsquo;ve been doing quite a bit of work on getting <strong>Great Tables</strong> to produce LaTeX table code and <code>v0.14.0</code> introduces the <code>as_latex()</code> method to make this possible. For those publishing workflows involving LaTeX documents, it&rsquo;s useful to have a reproducible solution for generating data tables as native LaTeX tables.</p>
<p>In this post, we will go over the following:</p>
<ul>
<li>generating LaTeX table code: how we handle the different parts of a table</li>
<li>rendering to PDF with Quarto: integrating LaTeX table code into PDFs</li>
<li>current limitations and roadmap: what has been implemented, and what is left</li>
</ul>
<h2 id="generating-a-latex-table-with-great-tables">Generating a LaTeX table with Great Tables
</h2>
<p>We can use the <code>GT.as_latex()</code> method to generate LaTeX table code. This code includes important structural pieces like titles, spanners, and value formatting. For example, here&rsquo;s a simple table output as LaTeX code:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">gtcars</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gtcars_pl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">gtcars</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span><span class="s2">&#34;mfr&#34;</span><span class="p">,</span> <span class="s2">&#34;model&#34;</span><span class="p">,</span> <span class="s2">&#34;hp&#34;</span><span class="p">,</span> <span class="s2">&#34;trq&#34;</span><span class="p">,</span> <span class="s2">&#34;mpg_c&#34;</span><span class="p">,</span> <span class="s2">&#34;msrp&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">gtcars</span><span class="p">[[</span><span class="s2">&#34;mfr&#34;</span><span class="p">,</span> <span class="s2">&#34;model&#34;</span><span class="p">,</span> <span class="s2">&#34;hp&#34;</span><span class="p">,</span> <span class="s2">&#34;trq&#34;</span><span class="p">,</span> <span class="s2">&#34;msrp&#34;</span><span class="p">]]</span><span class="o">.</span><span class="n">head</span><span class="p">(</span><span class="mi">5</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span><span class="o">=</span><span class="s2">&#34;Some Cars from the gtcars Dataset&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">subtitle</span><span class="o">=</span><span class="s2">&#34;Five Cars are shown here&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">label</span><span class="o">=</span><span class="s2">&#34;Make and Model&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;mfr&#34;</span><span class="p">,</span> <span class="s2">&#34;model&#34;</span><span class="p">],</span>
</span></span><span class="line"><span class="cl">        <span class="nb">id</span><span class="o">=</span><span class="s2">&#34;make_model&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">label</span><span class="o">=</span><span class="s2">&#34;Performance&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;hp&#34;</span><span class="p">,</span> <span class="s2">&#34;trq&#34;</span><span class="p">,</span> <span class="s2">&#34;msrp&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">label</span><span class="o">=</span><span class="s2">&#34;Everything but the cost&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;mfr&#34;</span><span class="p">,</span> <span class="s2">&#34;model&#34;</span><span class="p">,</span> <span class="s2">&#34;hp&#34;</span><span class="p">,</span> <span class="s2">&#34;trq&#34;</span><span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_integer</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;hp&#34;</span><span class="p">,</span> <span class="s2">&#34;trq&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_currency</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;msrp&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_source_note</span><span class="p">(</span><span class="s2">&#34;Cars are all 2015 models.&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_source_note</span><span class="p">(</span><span class="s2">&#34;Horsepower and Torque values are estimates.&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="n">gt_tbl</span><span class="o">.</span><span class="n">as_latex</span><span class="p">())</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-latex" data-lang="latex"><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>table<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\caption*</span><span class="nb">{</span>
</span></span><span class="line"><span class="cl"><span class="nb">{</span><span class="k">\large</span> Some Cars from the gtcars Dataset<span class="nb">}</span> <span class="k">\\</span>
</span></span><span class="line"><span class="cl"><span class="nb">{</span><span class="k">\small</span> Five Cars are shown here<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="nb">}</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\fontsize</span><span class="nb">{</span>12.0pt<span class="nb">}{</span>14.4pt<span class="nb">}</span><span class="k">\selectfont</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>tabular*<span class="nb">}{</span><span class="k">\linewidth</span><span class="nb">}{</span>@<span class="nb">{</span><span class="k">\extracolsep</span><span class="nb">{</span><span class="k">\fill</span><span class="nb">}}</span>llrrr<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\toprule</span>
</span></span><span class="line"><span class="cl"><span class="k">\multicolumn</span><span class="nb">{</span>4<span class="nb">}{</span>c<span class="nb">}{</span>Everything but the cost<span class="nb">}</span> <span class="nb">&amp;</span>  <span class="k">\\</span>
</span></span><span class="line"><span class="cl"><span class="k">\cmidrule</span>(lr)<span class="nb">{</span>1-4<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\multicolumn</span><span class="nb">{</span>2<span class="nb">}{</span>c<span class="nb">}{</span>Make and Model<span class="nb">}</span> <span class="nb">&amp;</span> <span class="k">\multicolumn</span><span class="nb">{</span>3<span class="nb">}{</span>c<span class="nb">}{</span>Performance<span class="nb">}</span> <span class="k">\\</span>
</span></span><span class="line"><span class="cl"><span class="k">\cmidrule</span>(lr)<span class="nb">{</span>1-2<span class="nb">}</span> <span class="k">\cmidrule</span>(lr)<span class="nb">{</span>3-5<span class="nb">}</span>
</span></span><span class="line"><span class="cl">mfr <span class="nb">&amp;</span> model <span class="nb">&amp;</span> hp <span class="nb">&amp;</span> trq <span class="nb">&amp;</span> msrp <span class="k">\\</span>
</span></span><span class="line"><span class="cl"><span class="k">\midrule\addlinespace</span><span class="na">[2.5pt]</span>
</span></span><span class="line"><span class="cl">Ford <span class="nb">&amp;</span> GT <span class="nb">&amp;</span> 647 <span class="nb">&amp;</span> 550 <span class="nb">&amp;</span> <span class="k">\$</span>447,000.00 <span class="k">\\</span>
</span></span><span class="line"><span class="cl">Ferrari <span class="nb">&amp;</span> 458 Speciale <span class="nb">&amp;</span> 597 <span class="nb">&amp;</span> 398 <span class="nb">&amp;</span> <span class="k">\$</span>291,744.00 <span class="k">\\</span>
</span></span><span class="line"><span class="cl">Ferrari <span class="nb">&amp;</span> 458 Spider <span class="nb">&amp;</span> 562 <span class="nb">&amp;</span> 398 <span class="nb">&amp;</span> <span class="k">\$</span>263,553.00 <span class="k">\\</span>
</span></span><span class="line"><span class="cl">Ferrari <span class="nb">&amp;</span> 458 Italia <span class="nb">&amp;</span> 562 <span class="nb">&amp;</span> 398 <span class="nb">&amp;</span> <span class="k">\$</span>233,509.00 <span class="k">\\</span>
</span></span><span class="line"><span class="cl">Ferrari <span class="nb">&amp;</span> 488 GTB <span class="nb">&amp;</span> 661 <span class="nb">&amp;</span> 561 <span class="nb">&amp;</span> <span class="k">\$</span>245,400.00 <span class="k">\\</span>
</span></span><span class="line"><span class="cl"><span class="k">\bottomrule</span>
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>tabular*<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\begin</span><span class="nb">{</span>minipage<span class="nb">}{</span><span class="k">\linewidth</span><span class="nb">}</span>
</span></span><span class="line"><span class="cl">Cars are all 2015 models.<span class="k">\\</span>
</span></span><span class="line"><span class="cl">Horsepower and Torque values are estimates.<span class="k">\\</span>
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>minipage<span class="nb">}</span>
</span></span><span class="line"><span class="cl"><span class="k">\end</span><span class="nb">{</span>table<span class="nb">}</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>The returned LaTeX table code shows how some of Great Tables&rsquo; structural components are represented in LaTeX. Note these three important pieces of LaTeX code:</p>
<ul>
<li><code>\caption*{</code> produces our title and subtitle (line 2)</li>
<li>the <code>\multicolumn{</code> statements produce spanners (i.e., labels on top of multiple column labels) (line 11)</li>
<li>the values in the data are escaped, using <code>\</code> (e.g., <code>\$</code> represents a literal dollar sign) (line 17)</li>
</ul>
<p>A frequent issue with any programmatic generation of LaTeX table code is LaTeX escaping. Not doing so can lead to LaTeX rendering errors, potentially breaking an entire publishing workflow. Great Tables will automatically escape characters in LaTeX, limiting such errors.</p>
<h2 id="using-latex-output-from-great-tables-in-quarto">Using LaTeX output from Great Tables in Quarto
</h2>
<p>Producing LaTeX table code is especially handy when using <a href="https://quarto.org" target="_blank" rel="noopener">Quarto</a>
 to generate PDF documents. Quarto is a tool for publishing documents, websites, books, etc., with an emphasis on running Python code. It uses the .qmd file format, which is a superset of Markdown (.md).</p>
<p>Here&rsquo;s an example .qmd file with these pieces in place:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">format: pdf
</span></span><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Using Great Tables in a Quarto PDF document.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">``<span class="sb">`{python}
</span></span></span><span class="line"><span class="cl"><span class="sb">#| output: asis
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">from great_tables import GT, exibble
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">gt_tbl = GT(exibble)
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">print(gt_tbl.as_latex())
</span></span></span><span class="line"><span class="cl"><span class="sb">`</span>``
</span></span></code></pre></td></tr></table>
</div>
</div><p>Notice that in the .qmd above we needed to have the following pieces to generate a PDF:</p>
<ol>
<li>set <code>&quot;format: pdf&quot;</code> in YAML header</li>
<li>set <code>&quot;output: asis&quot;</code> in the code cell that&rsquo;s outputting LaTeX table code</li>
<li>use the <code>as_latex()</code> method on a GT object and <code>print()</code> the text</li>
</ol>
<p>The example above used a very simple table, but here&rsquo;s the table from the previous example rendered to PDF in Quarto:</p>
<details>
<summary>
.qmd content
</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">format: pdf
</span></span><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">Example using the <span class="sb">`gtcars`</span> dataset.
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">``<span class="sb">`{python}
</span></span></span><span class="line"><span class="cl"><span class="sb">#| output: asis
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">from great_tables import GT
</span></span></span><span class="line"><span class="cl"><span class="sb">from great_tables.data import gtcars
</span></span></span><span class="line"><span class="cl"><span class="sb">import polars as pl
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">gtcars_pl = (
</span></span></span><span class="line"><span class="cl"><span class="sb">    pl.from_pandas(gtcars)
</span></span></span><span class="line"><span class="cl"><span class="sb">    .select([&#34;mfr&#34;, &#34;model&#34;, &#34;hp&#34;, &#34;trq&#34;, &#34;mpg_c&#34;, &#34;msrp&#34;])
</span></span></span><span class="line"><span class="cl"><span class="sb">)
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">gt_tbl = (
</span></span></span><span class="line"><span class="cl"><span class="sb">    GT(
</span></span></span><span class="line"><span class="cl"><span class="sb">        gtcars[[&#34;mfr&#34;, &#34;model&#34;, &#34;hp&#34;, &#34;trq&#34;, &#34;msrp&#34;]].head(5),
</span></span></span><span class="line"><span class="cl"><span class="sb">    )
</span></span></span><span class="line"><span class="cl"><span class="sb">    .tab_header(
</span></span></span><span class="line"><span class="cl"><span class="sb">        title=&#34;Some Cars from the gtcars Dataset&#34;,
</span></span></span><span class="line"><span class="cl"><span class="sb">        subtitle=&#34;Five Cars are shown here&#34;
</span></span></span><span class="line"><span class="cl"><span class="sb">    )
</span></span></span><span class="line"><span class="cl"><span class="sb">    .tab_spanner(
</span></span></span><span class="line"><span class="cl"><span class="sb">        label=&#34;Make and Model&#34;,
</span></span></span><span class="line"><span class="cl"><span class="sb">        columns=[&#34;mfr&#34;, &#34;model&#34;],
</span></span></span><span class="line"><span class="cl"><span class="sb">        id=&#34;make_model&#34;
</span></span></span><span class="line"><span class="cl"><span class="sb">    )
</span></span></span><span class="line"><span class="cl"><span class="sb">    .tab_spanner(
</span></span></span><span class="line"><span class="cl"><span class="sb">        label=&#34;Performance&#34;,
</span></span></span><span class="line"><span class="cl"><span class="sb">        columns=[&#34;hp&#34;, &#34;trq&#34;]
</span></span></span><span class="line"><span class="cl"><span class="sb">    )
</span></span></span><span class="line"><span class="cl"><span class="sb">    .tab_spanner(
</span></span></span><span class="line"><span class="cl"><span class="sb">        label=&#34;Everything but the cost&#34;,
</span></span></span><span class="line"><span class="cl"><span class="sb">        columns=[&#34;mfr&#34;, &#34;model&#34;, &#34;hp&#34;, &#34;trq&#34;]
</span></span></span><span class="line"><span class="cl"><span class="sb">    )
</span></span></span><span class="line"><span class="cl"><span class="sb">    .fmt_integer(columns=[&#34;hp&#34;, &#34;trq&#34;])
</span></span></span><span class="line"><span class="cl"><span class="sb">    .fmt_currency(columns=&#34;msrp&#34;)
</span></span></span><span class="line"><span class="cl"><span class="sb">    .tab_source_note(&#34;Cars are all 2015 models.&#34;)
</span></span></span><span class="line"><span class="cl"><span class="sb">    .tab_source_note(&#34;Horsepower and Torque values are estimates.&#34;)
</span></span></span><span class="line"><span class="cl"><span class="sb">    .tab_options(table_width=&#34;600pt&#34;)
</span></span></span><span class="line"><span class="cl"><span class="sb">)
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">print(gt_tbl.as_latex())
</span></span></span><span class="line"><span class="cl"><span class="sb">`</span>``
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/great-tables/latex-output-tables/gtcars_latex_table.png"
      alt="" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>If you&rsquo;d like to experiment with Great Tables&rsquo; LaTeX rendering, you can get the text of a working .qmd file in the details below. Make sure your installation of Quarto is <a href="https://quarto.org/docs/get-started/" target="_blank" rel="noopener">up to date</a>
 and that you have Great Tables upgraded to <code>v0.14.0</code>.</p>
<h2 id="current-limitations-of-latex-table-output">Current limitations of LaTeX table output
</h2>
<p>The <code>as_latex()</code> method is still experimental and has some limitations. The following table lists the work epics that have been done and those planned:</p>
<div id="frhhzxfsek" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible&display=swap');
#frhhzxfsek table {
          font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#frhhzxfsek thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#frhhzxfsek p { margin: 0; padding: 0; }
#frhhzxfsek .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: 450px; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#frhhzxfsek .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#frhhzxfsek .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#frhhzxfsek .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#frhhzxfsek .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#frhhzxfsek .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#frhhzxfsek .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#frhhzxfsek .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 18px; font-weight: bolder; text-transform: uppercase; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#frhhzxfsek .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 18px; font-weight: bolder; text-transform: uppercase; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#frhhzxfsek .gt_column_spanner_outer:first-child { padding-left: 0; }
#frhhzxfsek .gt_column_spanner_outer:last-child { padding-right: 0; }
#frhhzxfsek .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#frhhzxfsek .gt_spanner_row { border-bottom-style: hidden; }
#frhhzxfsek .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; text-transform: uppercase; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#frhhzxfsek .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#frhhzxfsek .gt_from_md&gt; :first-child { margin-top: 0; }
#frhhzxfsek .gt_from_md&gt; :last-child { margin-bottom: 0; }
#frhhzxfsek .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#frhhzxfsek .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 80%; font-weight: bolder; text-transform: uppercase; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#frhhzxfsek .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#frhhzxfsek .gt_row_group_first td { border-top-width: 2px; }
#frhhzxfsek .gt_row_group_first th { border-top-width: 2px; }
#frhhzxfsek .gt_striped { color: #333333; background-color: #F4F4F4; }
#frhhzxfsek .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#frhhzxfsek .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#frhhzxfsek .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#frhhzxfsek .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#frhhzxfsek .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#frhhzxfsek .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#frhhzxfsek .gt_left { text-align: left; }
#frhhzxfsek .gt_center { text-align: center; }
#frhhzxfsek .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#frhhzxfsek .gt_font_normal { font-weight: normal; }
#frhhzxfsek .gt_font_bold { font-weight: bold; }
#frhhzxfsek .gt_font_italic { font-style: italic; }
#frhhzxfsek .gt_super { font-size: 65%; }
#frhhzxfsek .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#frhhzxfsek .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table>
  <thead>
      <tr>
          <th>LaTeX Support</th>
          <th>status</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>Escaping</td>
          <td>✅</td>
      </tr>
      <tr>
          <td>Most <code>fmt_*()</code> methods</td>
          <td>✅</td>
      </tr>
      <tr>
          <td><code>as_latex()</code> table code generation</td>
          <td>✅</td>
      </tr>
      <tr>
          <td><code>tab_stub()</code> for row and group labels</td>
          <td>🚧</td>
      </tr>
      <tr>
          <td><code>md()</code> to render Markdown to LaTeX</td>
          <td>🚧</td>
      </tr>
      <tr>
          <td>Implementation of Units Notation</td>
          <td>🚧</td>
      </tr>
      <tr>
          <td>Allow <code>fmt_markdown()</code>, <code>fmt_units()</code>, <code>fmt_image()</code>, and <code>fmt_nanoplot()</code></td>
          <td>🚧</td>
      </tr>
      <tr>
          <td><code>sub_missing()</code> and <code>sub_zero()</code> methods</td>
          <td>🚧</td>
      </tr>
      <tr>
          <td><code>tab_style()</code> method</td>
          <td>🚧</td>
      </tr>
  </tbody>
</table>
</div>
<p>Some of these TODOs are short-term, notably the ones dealing with the use of the table stub and row groups. We plan to address this soon but having those structural components in a table currently will raise an error when using <code>as_latex()</code>.</p>
<p>We don&rsquo;t yet see an obvious solution for Markdown-to-LaTeX conversion. We depend on the <code>commonmark</code> library to perform Markdown-to-HTML transformation but the library doesn&rsquo;t support LaTeX output.</p>
<p>Styling a LaTeX table is currently not possible. Having a <code>tab_style()</code> statement in your GT code and subsequently using <code>as_latex()</code> won&rsquo;t raise an error, but it will warn and essentially no-op. Many of the options available in <code>tab_options()</code> are those that perform styling</p>
<p>As development continues, we will work to expand the capabilities of the <code>as_latex()</code> method to reduce these limitations and more clearly document what is and is not supported.</p>
<h2 id="lets-latex">Let&rsquo;s LaTeX!
</h2>
<p>While this is an early preview of a new rendering capability in Great Tables, we are optimistic that it can be greatly improved in due course. If you&rsquo;re experimenting with this feature, please let us know about any problems you bump into by using the Great Tables <a href="https://github.com/posit-dev/great-tables/issues" target="_blank" rel="noopener">issue tracker</a>
.</p>
<p>The goal is to make LaTeX output dependable, work within several common LaTeX-publishing workflows, and be fully featured enough to make this table-making route in LaTeX preferable to other solutions in this space.</p>
]]></description>
    </item>
    <item>
      <title>Version 0.14.0</title>
      <link>https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/</link>
      <pubDate>Thu, 07 Nov 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/</guid><description><![CDATA[<details class="code-fold">
<summary>Code - Imports</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">pandas</span> <span class="k">as</span> <span class="nn">pd</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">plotnine</span> <span class="kn">import</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">   <span class="n">aes</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="n">ggplot</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="n">geom_point</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="n">geom_text</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="n">scale_x_datetime</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="n">theme</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="n">theme_set</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">   <span class="n">theme_matplotlib</span><span class="p">,</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="n">theme_set</span><span class="p">(</span><span class="n">theme_matplotlib</span><span class="p">());</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<img src="https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/images/logo-512.png" class="float-end" style="width:20.0%" data-fig-alt="plotnine logo" />
<p>We are happy to announce the release of plotnine v0.14! This version requires <em>python 3.10 or later</em>, a change aligned with <a href="https://numpy.org/neps/nep-0029-deprecation_policy.html#support-table" target="_blank" rel="noopener">NumPy&rsquo;s deprecation policy</a>
.</p>
<p>This release also introduces our new hex logo!</p>
<h2 id="no-more-print-for-plots">No More <code>print</code> for Plots
</h2>
<p>One of the most significant updates in v0.14 is the removal of <code>print</code> as a way to render plot objects. Starting with v0.13, we began deprecating this approach, encouraging users to transition to <code>ggplot.show()</code> for displaying plots.</p>
<p>Now, <code>print</code> on a plot object will simply return the display size (in pixels) rather than rendering the plot.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">({</span><span class="s2">&#34;x&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">],</span> <span class="s2">&#34;y&#34;</span><span class="p">:</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span> <span class="p">]})</span>
</span></span><span class="line"><span class="cl"><span class="n">p</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">   <span class="n">ggplot</span><span class="p">(</span><span class="n">data</span><span class="p">,</span> <span class="n">aes</span><span class="p">(</span><span class="s2">&#34;x&#34;</span><span class="p">,</span> <span class="s2">&#34;y&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">   <span class="o">+</span> <span class="n">geom_point</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">   <span class="o">+</span> <span class="n">theme</span><span class="p">(</span><span class="n">figure_size</span><span class="o">=</span><span class="p">(</span><span class="mi">4</span><span class="p">,</span> <span class="mi">2</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="n">p</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;There is no figure above this output sentence.&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><pre><code>&lt;ggplot: (384 x 192)&gt;
There is no figure above this output sentence.
</code></pre>
<p>In environments with <code>retina</code> output, the exact pixel-size dimensions of the image will be double the display size.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">p</span><span class="o">.</span><span class="n">show</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="nb">print</span><span class="p">(</span><span class="s2">&#34;There is a figure above this output sentence.&#34;</span><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><img src="https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/index_files/figure-markdown_strict/use-show-output-1.png" id="use-show" width="384" height="192" />
<pre><code>There is a figure above this output sentence.
</code></pre>
<h2 id="enhancements">Enhancements
</h2>
<p>If you have worked with scales and passed in parameters, you might have encountered an inconvenience: your IDE could not provide meaningful suggestions. Previously, scales used <code>**kwargs</code> to capture common parameters, making it challenging for IDEs to offer specific guidance. With around <a href="https://plotnine.org/reference/#scales" target="_blank" rel="noopener">100 scales</a>
, each with subtle differences, we handled these parameters dynamically to avoid extensive duplication while also generating docstrings automatically.</p>
<p>With Python &gt;= 3.10, we have converted scales to <code>dataclasses</code> and leveraged finer controls over <a href="https://docs.python.org/3.10/library/dataclasses.html#dataclasses.KW_ONLY" target="_blank" rel="noopener">keyword-only parameters</a>
. This allows us to provide explicit signatures and enables the documentation system to automatically include inherited docstrings for parameters. For example, where an IDE previously displayed something like this:</p>
<img src="https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/images/scale-signature-old.png" style="width:75.0%" data-fig-align="center" data-fig-alt="Old Scale Signature IDE Hint" />
<p>it will now display:</p>
<img src="https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/images/scale-signature-new.png" style="width:75.0%" data-fig-align="center" data-fig-alt="New Scale Signature IDE Hint" />
<h2 id="datetimes-and-timedeltas">Datetimes and Timedeltas
</h2>
<p>Working with datetimes can be challenging (sometimes even <a href="https://ondata.blog/articles/nine-circles-of-hell-time-in-python/" target="_blank" rel="noopener">hellish</a>
), but we aim to simplify this experience for you. In Python, there are three main types of datetime objects you are likely to encounter:</p>
<ol>
<li><a href="https://docs.python.org/3/library/datetime.html#datetime-objects" target="_blank" rel="noopener"><code>datetime.datetime</code></a>
 from the standard library</li>
<li><a href="https://pandas.pydata.org/docs/reference/api/pandas.Timestamp.html" target="_blank" rel="noopener"><code>pandas.Timestamp</code></a>
 from pandas</li>
<li><a href="https://numpy.org/devdocs/reference/arrays.datetime.html#basic-datetimes" target="_blank" rel="noopener"><code>numpy.datetime64</code></a>
 from numpy</li>
</ol>
<p>Each of these types covers different ranges and resolutions. The standard library&rsquo;s <code>datetime</code> has the smallest range, with a constant millisecond (ms) resolution; pandas offers a middle ground with a larger range and nanosecond (ns) resolution; and numpy provides varying resolutions (from years to attoseconds) with different ranges for each resolution. These differences mean that these types are not always directly interchangeable, though we work to make them feel that way. Since our data is stored in a dataframe, any datetime values are converted to the pandas type, which then stores values as numpy types!</p>
<p>Arithmetic operations on each datetime type yield corresponding timedelta types also with their unique resolutions. Certain ranges can exceed valid limits&mdash;for example, the range of <code>pandas.Timestamp</code> cannot be represented as a timedelta. This means there are edge cases. But you should not be too worried unless your desired time resolution is dictacted by the <a href="https://en.wikipedia.org/wiki/2011_OPERA_faster-than-light_neutrino_anomaly" target="_blank" rel="noopener">vagaries</a>
 of sub-atomic particles.</p>
<p>In this release, you can now expand the limits of datetime and timedelta scales with additional constants.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">datetime</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;x&#34;</span><span class="p">:</span> <span class="p">[</span><span class="n">datetime</span><span class="o">.</span><span class="n">datetime</span><span class="p">(</span><span class="mi">2024</span><span class="p">,</span> <span class="mi">8</span><span class="p">,</span> <span class="n">i</span><span class="p">)</span> <span class="k">for</span> <span class="n">i</span> <span class="ow">in</span> <span class="nb">range</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">6</span><span class="p">)],</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;y&#34;</span><span class="p">:</span> <span class="nb">range</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">ggplot</span><span class="p">(</span><span class="n">data</span><span class="p">,</span> <span class="n">aes</span><span class="p">(</span><span class="s2">&#34;x&#34;</span><span class="p">,</span> <span class="s2">&#34;y&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">+</span> <span class="n">geom_point</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="o">+</span> <span class="n">scale_x_datetime</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">expand</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="n">datetime</span><span class="o">.</span><span class="n">timedelta</span><span class="p">(</span><span class="n">days</span><span class="o">=</span><span class="mi">1</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">+</span> <span class="n">theme</span><span class="p">(</span><span class="n">figure_size</span><span class="o">=</span><span class="p">(</span><span class="mi">6</span><span class="p">,</span> <span class="mi">4</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><img src="https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/index_files/figure-markdown_strict/expanding-with-a-timedelta-output-1.png" id="expanding-with-a-timedelta" width="576" height="384" />
<p>You can also set the limits through the coordinate system.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">coord_cartesian</span><span class="p">(</span><span class="n">xlim</span><span class="o">=</span><span class="p">(</span><span class="n">datetime</span><span class="p">(</span><span class="mi">1999</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">),</span> <span class="n">datetime</span><span class="p">(</span><span class="mi">2006</span><span class="p">,</span> <span class="mi">1</span><span class="p">,</span> <span class="mi">1</span><span class="p">)))</span>
</span></span></code></pre></td></tr></table>
</div>
</div><p>Beyond datetime and timezone scales, this robustness now applies to any scale created for data types that are not strictly numeric.</p>
<h2 id="integration-with-quarto">Integration with Quarto
</h2>
<p>plotnine now recognizes <a href="https://quarto.org/docs/computations/execution-options.html#figure-options" target="_blank" rel="noopener">figure options</a>
 specified in the meta section of a Quarto document. These options control the size and format of output images, including <code>fig-dpi</code>, <code>fig-width</code>, <code>fig-height</code>, and <code>fig-format</code>.</p>
<p>While these Quarto options are set as defaults, you can still override them for any specific plot. For example:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">title: &#34;Plotnine Playing well with Quarto&#34;
</span></span><span class="line"><span class="cl">fig-dpi: 100
</span></span><span class="line"><span class="cl">fig-width: 6
</span></span><span class="line"><span class="cl">fig-height: 4
</span></span><span class="line"><span class="cl">fig-format: retina
</span></span><span class="line"><span class="cl">---
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl">``<span class="sb">`{python}
</span></span></span><span class="line"><span class="cl"><span class="sb">#| label: using-quarto-figure-options
</span></span></span><span class="line"><span class="cl"><span class="sb">from pandas import pd
</span></span></span><span class="line"><span class="cl"><span class="sb">from plotnine import aes, geom_point, ggplot, theme
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">data = pd.DataFrame({&#34;x&#34;: range(5), &#34;y&#34;: range(5)})
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">(
</span></span></span><span class="line"><span class="cl"><span class="sb">  ggplot(data, aes(&#34;x&#34;, &#34;y&#34;))
</span></span></span><span class="line"><span class="cl"><span class="sb">  + geom_point()
</span></span></span><span class="line"><span class="cl"><span class="sb">)
</span></span></span><span class="line"><span class="cl"><span class="sb">`</span>`<span class="sb">`
</span></span></span><span class="line"><span class="cl"><span class="sb">
</span></span></span><span class="line"><span class="cl"><span class="sb">`</span>`<span class="sb">`{python}
</span></span></span><span class="line"><span class="cl"><span class="sb">#| label: overriding-quarto-figure-options
</span></span></span><span class="line"><span class="cl"><span class="sb">(
</span></span></span><span class="line"><span class="cl"><span class="sb">  ggplot(data, aes(&#34;x&#34;, &#34;y&#34;))
</span></span></span><span class="line"><span class="cl"><span class="sb">  + geom_point()
</span></span></span><span class="line"><span class="cl"><span class="sb">  + theme(figure_size=(4, 3))
</span></span></span><span class="line"><span class="cl"><span class="sb">)
</span></span></span><span class="line"><span class="cl"><span class="sb">`</span>``
</span></span></code></pre></td></tr></table>
</div>
</div><p>Note that, at the moment using these options at the chunk level has no effect.</p>
<h2 id="font-aesthetics">Font Aesthetics
</h2>
<p>In theory, aesthetics represent any properties we can perceive; in practice, only those we can see and vary predictably can be useful aesthetics. Previously, text attributes like <code>family</code>, <code>fontweight</code>, <code>fontstyle</code>, and <code>fontvariant</code> were parameters but not aesthetics, meaning you could not map variables to them. Not anymore, these attributes of a text are now aesthetics!</p>
<p><code>fontweight</code> controls the boldness of text. It accepts any number in the range <code>[0, 1000]</code>, with common levels being <em>normal</em> (400) and <em>bold</em> (700). Some fonts provide multiple levels of boldness, with up to nine variations, typically at intervals like <code>[100, 200, 300, 400, 500, 600, 700, 800, 900]</code>. A given numeric weight will be mapped to the nearest available level.</p>
<p>For instance, here is an example comparing two fonts: <code>Helvetica</code>, which doesn&rsquo;t have multiple weight levels (the one on your system may differ), and <code>Open Sans</code> (again, the one on your system may differ), which does.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">mizani.bounds</span> <span class="kn">import</span> <span class="n">rescale</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">data</span> <span class="o">=</span> <span class="n">pd</span><span class="o">.</span><span class="n">DataFrame</span><span class="p">({</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;x&#34;</span><span class="p">:</span> <span class="nb">range</span><span class="p">(</span><span class="mi">5</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;y&#34;</span><span class="p">:</span> <span class="nb">range</span><span class="p">(</span><span class="mi">5</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;w&#34;</span><span class="p">:</span> <span class="n">rescale</span><span class="p">(</span><span class="nb">range</span><span class="p">(</span><span class="mi">5</span><span class="p">),</span> <span class="n">to</span><span class="o">=</span><span class="p">(</span><span class="mi">0</span><span class="p">,</span> <span class="mi">1000</span><span class="p">)),</span>
</span></span><span class="line"><span class="cl">    <span class="s2">&#34;label&#34;</span><span class="p">:</span> <span class="s2">&#34;Zero One Two Three Four&#34;</span><span class="o">.</span><span class="n">split</span><span class="p">()</span>
</span></span><span class="line"><span class="cl"><span class="p">})</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">ggplot</span><span class="p">(</span><span class="n">data</span><span class="p">,</span> <span class="n">aes</span><span class="p">(</span><span class="s2">&#34;x&#34;</span><span class="p">,</span> <span class="n">label</span><span class="o">=</span><span class="s2">&#34;label&#34;</span><span class="p">,</span> <span class="n">fontweight</span><span class="o">=</span><span class="s2">&#34;w&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">+</span> <span class="n">geom_text</span><span class="p">(</span><span class="n">aes</span><span class="p">(</span><span class="n">y</span><span class="o">=</span><span class="s2">&#34;y&#34;</span><span class="p">),</span> <span class="n">family</span><span class="o">=</span><span class="s2">&#34;Helvetica&#34;</span><span class="p">,</span> <span class="n">colour</span><span class="o">=</span><span class="s2">&#34;red&#34;</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="mi">16</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">+</span> <span class="n">geom_text</span><span class="p">(</span><span class="n">aes</span><span class="p">(</span><span class="n">y</span><span class="o">=</span><span class="s2">&#34;y-.25&#34;</span><span class="p">),</span> <span class="n">family</span><span class="o">=</span><span class="s2">&#34;Open Sans&#34;</span><span class="p">,</span> <span class="n">colour</span><span class="o">=</span><span class="s2">&#34;green&#34;</span><span class="p">,</span> <span class="n">size</span><span class="o">=</span><span class="mi">16</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><img src="https://posit-open-source.netlify.app/blog/plotnine/version-0.14.0/index_files/figure-markdown_strict/variable-font-weight-output-1.png" id="variable-font-weight" width="768" height="480" />
<p>Note that, there is no scale for <code>fontweight</code> so we had to explicitly scale the value to the expected range. Currently you should expect at most 9 levels of bold variations, but pending better support, completely <a href="https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts" target="_blank" rel="noopener">variable fonts</a>
 are now a thing and will allow continuous variation on the range <code>[0, 1000]</code>.</p>
<p>Note that there is no scale for <code>fontweight</code>, so values must be explicitly scaled to the expected range. And, you can expect a maximum of 9 levels of bold variations. However, with the growing support for <a href="https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts" target="_blank" rel="noopener">variable fonts</a>
, continuous variation across the full <code>[0, 1000]</code> range may be possible.</p>
]]></description>
    </item>
    <item>
      <title>Great Tables `v0.13.0`: Applying styles to all table locations</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.13.0/</link>
      <pubDate>Thu, 10 Oct 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.13.0/</guid>
      <dc:creator>Rich Iannone</dc:creator>
      <dc:creator>Michael Chow</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>We did something in Great Tables (<code>0.13.0</code>) that&rsquo;ll make your tables that much more customizable: super <em>fine-grained</em> ways of setting styles throughout the table. Before you were largely constrained to styling through the following strategies:</p>
<ol>
<li>use a limited set of styles (e.g., background color, font weight, etc.) to different table locations like the stub, the column labels, etc., through <code>tab_options()</code></li>
<li>use <code>tab_style()</code> with a larger set of styling options for the table body cells (specified by <code>loc.body()</code>)</li>
</ol>
<p>In <code>v0.13.0</code>, we can target much more than just the table body! Here is the expanded set of <code>loc.*()</code> methods along with the locations that they can target.</p>
<p><div class="not-prose"><figure>
    <img class="h-auto max-w-full rounded-lg"
      src="https://posit-open-source.netlify.app/blog/great-tables/introduction-0.13.0/GT-locations-map.png"
      alt="" 
      loading="lazy"
    >
  </figure></div>
</p>
<p>This augmentation of the <code>loc</code> module to include all locations in the table means that there won&rsquo;t be a spot in the table to which you can&rsquo;t add styling. This is terrific because it gives you free rein to fully customize the look of your table.</p>
<p>Let&rsquo;s make a table and see how this new feature could be used.</p>
<h3 id="starting-things-off-with-a-big-gt-table">Starting things off with a big GT table
</h3>
<p>The table we&rsquo;ll make uses the <code>nuclides</code> dataset (available in the <code>great_tables.data</code> module). Through use of the <code>tab_*()</code> methods, quite a few table components (hence <em>locations</em>) will be added. We have hidden the code here because it is quite lengthy but you&rsquo;re encouraged to check it out to glean some interesting GT tricks.</p>
<details class="code-fold">
<summary>Show the code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span><span class="lnt">17
</span><span class="lnt">18
</span><span class="lnt">19
</span><span class="lnt">20
</span><span class="lnt">21
</span><span class="lnt">22
</span><span class="lnt">23
</span><span class="lnt">24
</span><span class="lnt">25
</span><span class="lnt">26
</span><span class="lnt">27
</span><span class="lnt">28
</span><span class="lnt">29
</span><span class="lnt">30
</span><span class="lnt">31
</span><span class="lnt">32
</span><span class="lnt">33
</span><span class="lnt">34
</span><span class="lnt">35
</span><span class="lnt">36
</span><span class="lnt">37
</span><span class="lnt">38
</span><span class="lnt">39
</span><span class="lnt">40
</span><span class="lnt">41
</span><span class="lnt">42
</span><span class="lnt">43
</span><span class="lnt">44
</span><span class="lnt">45
</span><span class="lnt">46
</span><span class="lnt">47
</span><span class="lnt">48
</span><span class="lnt">49
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">md</span><span class="p">,</span> <span class="n">style</span><span class="p">,</span> <span class="n">loc</span><span class="p">,</span> <span class="n">google_font</span>
</span></span><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables.data</span> <span class="kn">import</span> <span class="n">nuclides</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars</span> <span class="k">as</span> <span class="nn">pl</span>
</span></span><span class="line"><span class="cl"><span class="kn">import</span> <span class="nn">polars.selectors</span> <span class="k">as</span> <span class="nn">cs</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">nuclides_mini</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">pl</span><span class="o">.</span><span class="n">from_pandas</span><span class="p">(</span><span class="n">nuclides</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">filter</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;element&#34;</span><span class="p">)</span> <span class="o">==</span> <span class="s2">&#34;C&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;nuclide&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">str</span><span class="o">.</span><span class="n">replace</span><span class="p">(</span><span class="sa">r</span><span class="s2">&#34;[0-9]+$&#34;</span><span class="p">,</span> <span class="s2">&#34;&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">(</span><span class="n">mass_number</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;z&#34;</span><span class="p">)</span> <span class="o">+</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;n&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">with_columns</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">isotope</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">concat_str</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;element&#34;</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34;-&#34;</span> <span class="o">+</span> <span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;mass_number&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">cast</span><span class="p">(</span><span class="n">pl</span><span class="o">.</span><span class="n">String</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">select</span><span class="p">([</span><span class="s2">&#34;isotope&#34;</span><span class="p">,</span> <span class="s2">&#34;atomic_mass&#34;</span><span class="p">,</span> <span class="s2">&#34;half_life&#34;</span><span class="p">,</span> <span class="s2">&#34;isospin&#34;</span><span class="p">,</span> <span class="s2">&#34;decay_1&#34;</span><span class="p">,</span> <span class="s2">&#34;decay_2&#34;</span><span class="p">,</span> <span class="s2">&#34;decay_3&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">nuclides_mini</span><span class="p">,</span> <span class="n">rowname_col</span><span class="o">=</span><span class="s2">&#34;isotope&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span><span class="o">=</span><span class="s2">&#34;Isotopes of Carbon&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">subtitle</span><span class="o">=</span><span class="s2">&#34;There are two stable isotopes of carbon and twelve that are unstable.&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_spanner</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;Decay Mode&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;decay&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_source_note</span><span class="p">(</span><span class="n">md</span><span class="p">(</span><span class="s2">&#34;Data obtained from the *nuclides* dataset.&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_stubhead</span><span class="p">(</span><span class="n">label</span><span class="o">=</span><span class="s2">&#34;Isotope&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_scientific</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;half_life&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">fmt_number</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">columns</span><span class="o">=</span><span class="s2">&#34;atomic_mass&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">decimals</span><span class="o">=</span><span class="mi">4</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">scale_by</span><span class="o">=</span><span class="mi">1</span> <span class="o">/</span> <span class="mf">1e6</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">sub_missing</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;half_life&#34;</span><span class="p">,</span> <span class="n">missing_text</span><span class="o">=</span><span class="n">md</span><span class="p">(</span><span class="s2">&#34;**STABLE**&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">sub_missing</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;decay&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_label</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">atomic_mass</span><span class="o">=</span><span class="s2">&#34;Atomic Mass&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">half_life</span><span class="o">=</span><span class="s2">&#34;Half Life, s&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">isospin</span><span class="o">=</span><span class="s2">&#34;Isospin&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">decay_1</span><span class="o">=</span><span class="s2">&#34;1&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">decay_2</span><span class="o">=</span><span class="s2">&#34;2&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">decay_3</span><span class="o">=</span><span class="s2">&#34;3&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_align</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;center&#34;</span><span class="p">,</span> <span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="n">cs</span><span class="o">.</span><span class="n">starts_with</span><span class="p">(</span><span class="s2">&#34;decay&#34;</span><span class="p">),</span> <span class="s2">&#34;isospin&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_align_table_header</span><span class="p">(</span><span class="n">align</span><span class="o">=</span><span class="s2">&#34;left&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_table_font</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="s2">&#34;IBM Plex Sans&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_vertical_padding</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="mf">0.5</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_horizontal_padding</span><span class="p">(</span><span class="n">scale</span><span class="o">=</span><span class="mi">2</span><span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="eesrsbynwg" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#eesrsbynwg table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#eesrsbynwg thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#eesrsbynwg p { margin: 0; padding: 0; }
#eesrsbynwg .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#eesrsbynwg .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#eesrsbynwg .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#eesrsbynwg .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#eesrsbynwg .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#eesrsbynwg .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#eesrsbynwg .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#eesrsbynwg .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#eesrsbynwg .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#eesrsbynwg .gt_column_spanner_outer:first-child { padding-left: 0; }
#eesrsbynwg .gt_column_spanner_outer:last-child { padding-right: 0; }
#eesrsbynwg .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#eesrsbynwg .gt_spanner_row { border-bottom-style: hidden; }
#eesrsbynwg .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#eesrsbynwg .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#eesrsbynwg .gt_from_md&gt; :first-child { margin-top: 0; }
#eesrsbynwg .gt_from_md&gt; :last-child { margin-bottom: 0; }
#eesrsbynwg .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#eesrsbynwg .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#eesrsbynwg .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#eesrsbynwg .gt_row_group_first td { border-top-width: 2px; }
#eesrsbynwg .gt_row_group_first th { border-top-width: 2px; }
#eesrsbynwg .gt_striped { color: #333333; background-color: #F4F4F4; }
#eesrsbynwg .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#eesrsbynwg .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#eesrsbynwg .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#eesrsbynwg .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#eesrsbynwg .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#eesrsbynwg .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#eesrsbynwg .gt_left { text-align: left; }
#eesrsbynwg .gt_center { text-align: center; }
#eesrsbynwg .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#eesrsbynwg .gt_font_normal { font-weight: normal; }
#eesrsbynwg .gt_font_bold { font-weight: bold; }
#eesrsbynwg .gt_font_italic { font-style: italic; }
#eesrsbynwg .gt_super { font-size: 65%; }
#eesrsbynwg .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#eesrsbynwg .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-8</td>
<td class="gt_row gt_right">8.0376</td>
<td class="gt_row gt_right">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-9</td>
<td class="gt_row gt_right">9.0310</td>
<td class="gt_row gt_right">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-10</td>
<td class="gt_row gt_right">10.0169</td>
<td class="gt_row gt_right">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-11</td>
<td class="gt_row gt_right">11.0114</td>
<td class="gt_row gt_right">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-12</td>
<td class="gt_row gt_right">12.0000</td>
<td class="gt_row gt_right"><strong>STABLE</strong></td>
<td class="gt_row gt_center">0</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-13</td>
<td class="gt_row gt_right">13.0034</td>
<td class="gt_row gt_right"><strong>STABLE</strong></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-14</td>
<td class="gt_row gt_right">14.0032</td>
<td class="gt_row gt_right">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-15</td>
<td class="gt_row gt_right">15.0106</td>
<td class="gt_row gt_right">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-16</td>
<td class="gt_row gt_right">16.0147</td>
<td class="gt_row gt_right">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-17</td>
<td class="gt_row gt_right">17.0226</td>
<td class="gt_row gt_right">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-18</td>
<td class="gt_row gt_right">18.0268</td>
<td class="gt_row gt_right">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-19</td>
<td class="gt_row gt_right">19.0348</td>
<td class="gt_row gt_right">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-20</td>
<td class="gt_row gt_right">20.0403</td>
<td class="gt_row gt_right">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-22</td>
<td class="gt_row gt_right">22.0576</td>
<td class="gt_row gt_right">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>This table will serve as a great starting point for demonstrating all the things you can now do with <code>tab_style()</code>. And the following checklist will serve as a rough plan for how we will style the table:</p>
<ul>
<li>use <code>loc.body()</code> to emphasize isotope half-life values</li>
<li>employ <code>loc.stub()</code> to draw attention to isotope names (and also point out the &lsquo;STABLE&rsquo; rows)</li>
<li>use <code>style.css()</code> for creating custom CSS styles (e.g., to indent row labels for stable isotopes)</li>
<li>work with composite locations and style the whole header and footer quite simply</li>
<li>set the default table body fill with <code>tab_options()</code></li>
</ul>
<p>Really this&rsquo;ll be <code>tab_style()</code> like you&rsquo;ve never seen it before, so let&rsquo;s get on with it.</p>
<h3 id="styling-the-body">Styling the body
</h3>
<p>First, we&rsquo;ll use <code>loc.body()</code> to emphasize half life values in two ways:</p>
<ul>
<li>Make the values in the <code>atomic_mass</code> and <code>half_life</code> use a monospace font.</li>
<li>fill the background of isotopes with STABLE half lives to be PaleTurquoise.</li>
</ul>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="s2">&#34;IBM Plex Mono&#34;</span><span class="p">)),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;atomic_mass&#34;</span><span class="p">,</span> <span class="s2">&#34;half_life&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="p">[</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;Navy&#34;</span><span class="p">),</span> <span class="n">style</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;PaleTurquoise&#34;</span><span class="p">)],</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="s2">&#34;half_life&#34;</span><span class="p">,</span> <span class="n">rows</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;half_life&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">is_not_null</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="ygetgyulbv" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#ygetgyulbv table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#ygetgyulbv thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#ygetgyulbv p { margin: 0; padding: 0; }
#ygetgyulbv .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#ygetgyulbv .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#ygetgyulbv .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#ygetgyulbv .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#ygetgyulbv .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#ygetgyulbv .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#ygetgyulbv .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#ygetgyulbv .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#ygetgyulbv .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#ygetgyulbv .gt_column_spanner_outer:first-child { padding-left: 0; }
#ygetgyulbv .gt_column_spanner_outer:last-child { padding-right: 0; }
#ygetgyulbv .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#ygetgyulbv .gt_spanner_row { border-bottom-style: hidden; }
#ygetgyulbv .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#ygetgyulbv .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#ygetgyulbv .gt_from_md&gt; :first-child { margin-top: 0; }
#ygetgyulbv .gt_from_md&gt; :last-child { margin-bottom: 0; }
#ygetgyulbv .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#ygetgyulbv .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#ygetgyulbv .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#ygetgyulbv .gt_row_group_first td { border-top-width: 2px; }
#ygetgyulbv .gt_row_group_first th { border-top-width: 2px; }
#ygetgyulbv .gt_striped { color: #333333; background-color: #F4F4F4; }
#ygetgyulbv .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#ygetgyulbv .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#ygetgyulbv .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#ygetgyulbv .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#ygetgyulbv .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#ygetgyulbv .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#ygetgyulbv .gt_left { text-align: left; }
#ygetgyulbv .gt_center { text-align: center; }
#ygetgyulbv .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#ygetgyulbv .gt_font_normal { font-weight: normal; }
#ygetgyulbv .gt_font_bold { font-weight: bold; }
#ygetgyulbv .gt_font_italic { font-style: italic; }
#ygetgyulbv .gt_super { font-size: 65%; }
#ygetgyulbv .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#ygetgyulbv .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono"><strong>STABLE</strong></td>
<td class="gt_row gt_center">0</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono"><strong>STABLE</strong></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>Note these important pieces in the code:</p>
<ul>
<li>setting monospace font: we used <a href="https://posit-dev.github.io/great-tables/reference/google_font.html" target="_blank" rel="noopener"><code>google_font()</code></a>
 (added in the previous release) to apply the monospaced font IBM Plex Mono.</li>
<li>filling unstable half lives to turquoise: because the half life cells with the value STABLE are actually missing in the underlying data, and filled in using <code>GT.sub_missing()</code>, we used the polars expression <code>pl.col(&quot;half_life&quot;).is_not_null()</code> to target everything that isn&rsquo;t STABLE.</li>
</ul>
<p>This is mainly a reminder that Polars expressions are quite something. And targeting cells in the body with <code>loc.body(rows=...)</code> can be powerful by extension.</p>
<h3 id="dont-forget-the-stub">Don&rsquo;t forget the stub!
</h3>
<p>We mustn&rsquo;t forget the stub. It&rsquo;s a totally separate location, being off to the side and having the important responsibility of holding the row labels. Here, we are going to do two things:</p>
<ol>
<li>Change the fill color (to &lsquo;Linen&rsquo;) and make the text bold for the <em>entire stub</em></li>
<li>Highlight the rows where we have stable isotopes (the extent is both for the stub and the body cells)</li>
</ol>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span><span class="lnt">16
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="p">[</span><span class="n">style</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;Linen&#34;</span><span class="p">),</span> <span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">weight</span><span class="o">=</span><span class="s2">&#34;bold&#34;</span><span class="p">)],</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">stub</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;LightCyan&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">(</span><span class="n">rows</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;half_life&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">is_null</span><span class="p">()),</span>
</span></span><span class="line"><span class="cl">            <span class="n">loc</span><span class="o">.</span><span class="n">stub</span><span class="p">(</span><span class="n">rows</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;half_life&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">is_null</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">        <span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="tnrmqwhifq" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#tnrmqwhifq table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#tnrmqwhifq thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#tnrmqwhifq p { margin: 0; padding: 0; }
#tnrmqwhifq .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#tnrmqwhifq .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#tnrmqwhifq .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#tnrmqwhifq .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#tnrmqwhifq .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#tnrmqwhifq .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#tnrmqwhifq .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#tnrmqwhifq .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#tnrmqwhifq .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#tnrmqwhifq .gt_column_spanner_outer:first-child { padding-left: 0; }
#tnrmqwhifq .gt_column_spanner_outer:last-child { padding-right: 0; }
#tnrmqwhifq .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#tnrmqwhifq .gt_spanner_row { border-bottom-style: hidden; }
#tnrmqwhifq .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#tnrmqwhifq .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#tnrmqwhifq .gt_from_md&gt; :first-child { margin-top: 0; }
#tnrmqwhifq .gt_from_md&gt; :last-child { margin-bottom: 0; }
#tnrmqwhifq .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#tnrmqwhifq .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#tnrmqwhifq .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#tnrmqwhifq .gt_row_group_first td { border-top-width: 2px; }
#tnrmqwhifq .gt_row_group_first th { border-top-width: 2px; }
#tnrmqwhifq .gt_striped { color: #333333; background-color: #F4F4F4; }
#tnrmqwhifq .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#tnrmqwhifq .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#tnrmqwhifq .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#tnrmqwhifq .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#tnrmqwhifq .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#tnrmqwhifq .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#tnrmqwhifq .gt_left { text-align: left; }
#tnrmqwhifq .gt_center { text-align: center; }
#tnrmqwhifq .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#tnrmqwhifq .gt_font_normal { font-weight: normal; }
#tnrmqwhifq .gt_font_bold { font-weight: bold; }
#tnrmqwhifq .gt_font_italic { font-style: italic; }
#tnrmqwhifq .gt_super { font-size: 65%; }
#tnrmqwhifq .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#tnrmqwhifq .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">0</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">1/2</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>For task #1, a simple <code>.tab_style(..., locations=loc.stub())</code> targeted the entire stub.</p>
<p>Task #2 is more interesting. Like <code>loc.body()</code>, <code>loc.stub()</code> has a <code>rows=</code> argument that can target specific rows with Polars expressions. We used the same Polars expression as in the previous section to target those rows that belong to the stable isotopes.</p>
<p>We&rsquo;ve dressed up the stub so that it is that much more prominent. And that linen-colored stub goes so well with the light-cyan rows, representative of carbon-12 and carbon-13!</p>
<h3 id="using-custom-style-rules-with-the-new-stylecss">Using custom style rules with the new <code>style.css()</code>
</h3>
<p>Aside from decking out the <code>loc</code> module with all manner of location methods, we&rsquo;ve added a little something to the <code>style</code> module: <code>style.css()</code>! What&rsquo;s it for? It lets you supply style declarations to its single <code>rule=</code> argument.</p>
<p>As an example, I might want to indent some text in one or more table cells. You can&rsquo;t really do that with the <code>style.text()</code> method since it doesn&rsquo;t have an <code>indent=</code> argument. So, in Great Tables <code>0.13.0</code> you can manually indent the row label text for the &lsquo;STABLE&rsquo; rows using a CSS style rule:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span><span class="n">rule</span><span class="o">=</span><span class="s2">&#34;text-indent: 4px;&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">stub</span><span class="p">(</span><span class="n">rows</span><span class="o">=</span><span class="n">pl</span><span class="o">.</span><span class="n">col</span><span class="p">(</span><span class="s2">&#34;half_life&#34;</span><span class="p">)</span><span class="o">.</span><span class="n">is_null</span><span class="p">())</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="djqlttujdh" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#djqlttujdh table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#djqlttujdh thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#djqlttujdh p { margin: 0; padding: 0; }
#djqlttujdh .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#djqlttujdh .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#djqlttujdh .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#djqlttujdh .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#djqlttujdh .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#djqlttujdh .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#djqlttujdh .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#djqlttujdh .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#djqlttujdh .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#djqlttujdh .gt_column_spanner_outer:first-child { padding-left: 0; }
#djqlttujdh .gt_column_spanner_outer:last-child { padding-right: 0; }
#djqlttujdh .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#djqlttujdh .gt_spanner_row { border-bottom-style: hidden; }
#djqlttujdh .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#djqlttujdh .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#djqlttujdh .gt_from_md&gt; :first-child { margin-top: 0; }
#djqlttujdh .gt_from_md&gt; :last-child { margin-bottom: 0; }
#djqlttujdh .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#djqlttujdh .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#djqlttujdh .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#djqlttujdh .gt_row_group_first td { border-top-width: 2px; }
#djqlttujdh .gt_row_group_first th { border-top-width: 2px; }
#djqlttujdh .gt_striped { color: #333333; background-color: #F4F4F4; }
#djqlttujdh .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#djqlttujdh .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#djqlttujdh .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#djqlttujdh .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#djqlttujdh .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#djqlttujdh .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#djqlttujdh .gt_left { text-align: left; }
#djqlttujdh .gt_center { text-align: center; }
#djqlttujdh .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#djqlttujdh .gt_font_normal { font-weight: normal; }
#djqlttujdh .gt_font_bold { font-weight: bold; }
#djqlttujdh .gt_font_italic { font-style: italic; }
#djqlttujdh .gt_super { font-size: 65%; }
#djqlttujdh .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#djqlttujdh .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">0</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">1/2</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>We targeted the cells in the stub that corresponded to the stable isotopes (carbon-12 and -13) with a Polars expression (same one as in the previous code cell) and now we have a 4px indentation of the &lsquo;C-12&rsquo; and &lsquo;C-13&rsquo; text! This new bonus functionality really allows almost any type of styling possible, provided you have those CSS skillz.</p>
<h3 id="the-combined-location-helpers-loccolumn_header-and-locfooter">The <em>combined</em> location helpers: <code>loc.column_header()</code> and <code>loc.footer()</code>
</h3>
<p>Look, I know we brought up the expression <em>fine-grained</em> before&mdash;right in the first paragraph&mdash;but sometimes you need just the opposite. There are lots of little locations in a GT table and some make for logical groupings. To that end, we have the concept of <em>combined</em> location helpers.</p>
<p>Let&rsquo;s set a grey background fill on the stubhead, column header, and footer:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="p">[</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">v_align</span><span class="o">=</span><span class="s2">&#34;middle&#34;</span><span class="p">),</span> <span class="n">style</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;#EEEEEE&#34;</span><span class="p">)],</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="p">[</span><span class="n">loc</span><span class="o">.</span><span class="n">stubhead</span><span class="p">(),</span> <span class="n">loc</span><span class="o">.</span><span class="n">column_header</span><span class="p">(),</span> <span class="n">loc</span><span class="o">.</span><span class="n">footer</span><span class="p">()]</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="dgixsmcplv" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#dgixsmcplv table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#dgixsmcplv thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#dgixsmcplv p { margin: 0; padding: 0; }
#dgixsmcplv .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#dgixsmcplv .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#dgixsmcplv .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#dgixsmcplv .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#dgixsmcplv .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#dgixsmcplv .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#dgixsmcplv .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#dgixsmcplv .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#dgixsmcplv .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#dgixsmcplv .gt_column_spanner_outer:first-child { padding-left: 0; }
#dgixsmcplv .gt_column_spanner_outer:last-child { padding-right: 0; }
#dgixsmcplv .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#dgixsmcplv .gt_spanner_row { border-bottom-style: hidden; }
#dgixsmcplv .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#dgixsmcplv .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#dgixsmcplv .gt_from_md&gt; :first-child { margin-top: 0; }
#dgixsmcplv .gt_from_md&gt; :last-child { margin-bottom: 0; }
#dgixsmcplv .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#dgixsmcplv .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#dgixsmcplv .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#dgixsmcplv .gt_row_group_first td { border-top-width: 2px; }
#dgixsmcplv .gt_row_group_first th { border-top-width: 2px; }
#dgixsmcplv .gt_striped { color: #333333; background-color: #F4F4F4; }
#dgixsmcplv .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#dgixsmcplv .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#dgixsmcplv .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#dgixsmcplv .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#dgixsmcplv .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#dgixsmcplv .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#dgixsmcplv .gt_left { text-align: left; }
#dgixsmcplv .gt_center { text-align: center; }
#dgixsmcplv .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#dgixsmcplv .gt_font_normal { font-weight: normal; }
#dgixsmcplv .gt_font_bold { font-weight: bold; }
#dgixsmcplv .gt_font_italic { font-style: italic; }
#dgixsmcplv .gt_super { font-size: 65%; }
#dgixsmcplv .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#dgixsmcplv .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">0</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">1/2</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote" style="vertical-align: middle; background-color: #EEEEEE">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>The <a href="https://posit-dev.github.io/great-tables/reference/loc.column_header.html" target="_blank" rel="noopener"><code>loc.column_header()</code></a>
 location always targets both <code>loc.column_labels()</code> and <code>loc.spanner_labels()</code>.</p>
<p>A good strategy for your tables would be to style with combined location helpers first and then drill into the specific cells of those super locations with more fine-grained styles in a later <code>tab_style()</code> call.</p>
<h3 id="styling-the-title-and-the-subtitle">Styling the title and the subtitle
</h3>
<p>Although it really doesn&rsquo;t appear to have separate locations, the table header (produced by way of <code>tab_header()</code>) can have two of them: the title and the subtitle (the latter is optional). These can be targeted via <code>loc.title()</code> and <code>loc.subtitle()</code>. Let&rsquo;s focus in on the title location and set an aliceblue background fill on the title, along with some font and border adjustments.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="p">[</span>
</span></span><span class="line"><span class="cl">            <span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">size</span><span class="o">=</span><span class="s2">&#34;24px&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">            <span class="n">style</span><span class="o">.</span><span class="n">fill</span><span class="p">(</span><span class="n">color</span><span class="o">=</span><span class="s2">&#34;aliceblue&#34;</span><span class="p">),</span>
</span></span><span class="line"><span class="cl">            <span class="n">style</span><span class="o">.</span><span class="n">borders</span><span class="p">(</span><span class="n">sides</span><span class="o">=</span><span class="s2">&#34;bottom&#34;</span><span class="p">,</span> <span class="n">color</span><span class="o">=</span><span class="s2">&#34;#BFDFF6&#34;</span><span class="p">,</span> <span class="n">weight</span><span class="o">=</span><span class="s2">&#34;2px&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">        <span class="p">],</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">title</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="epdokuzzpb" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#epdokuzzpb table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#epdokuzzpb thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#epdokuzzpb p { margin: 0; padding: 0; }
#epdokuzzpb .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#epdokuzzpb .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#epdokuzzpb .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#epdokuzzpb .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#epdokuzzpb .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#epdokuzzpb .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#epdokuzzpb .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#epdokuzzpb .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#epdokuzzpb .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#epdokuzzpb .gt_column_spanner_outer:first-child { padding-left: 0; }
#epdokuzzpb .gt_column_spanner_outer:last-child { padding-right: 0; }
#epdokuzzpb .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#epdokuzzpb .gt_spanner_row { border-bottom-style: hidden; }
#epdokuzzpb .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#epdokuzzpb .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#epdokuzzpb .gt_from_md&gt; :first-child { margin-top: 0; }
#epdokuzzpb .gt_from_md&gt; :last-child { margin-bottom: 0; }
#epdokuzzpb .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#epdokuzzpb .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#epdokuzzpb .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#epdokuzzpb .gt_row_group_first td { border-top-width: 2px; }
#epdokuzzpb .gt_row_group_first th { border-top-width: 2px; }
#epdokuzzpb .gt_striped { color: #333333; background-color: #F4F4F4; }
#epdokuzzpb .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#epdokuzzpb .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#epdokuzzpb .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#epdokuzzpb .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#epdokuzzpb .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#epdokuzzpb .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#epdokuzzpb .gt_left { text-align: left; }
#epdokuzzpb .gt_center { text-align: center; }
#epdokuzzpb .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#epdokuzzpb .gt_font_normal { font-weight: normal; }
#epdokuzzpb .gt_font_bold { font-weight: bold; }
#epdokuzzpb .gt_font_italic { font-style: italic; }
#epdokuzzpb .gt_super { font-size: 65%; }
#epdokuzzpb .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#epdokuzzpb .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal" style="font-size: 24px; background-color: aliceblue; border-bottom: 2px solid #BFDFF6">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">0</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">1/2</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote" style="vertical-align: middle; background-color: #EEEEEE">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>Looks good. Notice that the title location is separate from the subtitle one, the background fill reveals the extent of its area.</p>
<p>A subtitle is an optional part of the header. We do have one in our table example, so let&rsquo;s style that as well. The <code>style.css()</code> method will be used to give the subtitle text some additional top and bottom padding, and, we&rsquo;ll put in a fancy background involving a linear gradient.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">css</span><span class="p">(</span><span class="n">rule</span><span class="o">=</span><span class="s2">&#34;padding-top: 5px;&#34;</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;padding-bottom: 5px;&#34;</span>
</span></span><span class="line"><span class="cl">            <span class="s2">&#34;background-image: linear-gradient(120deg, #d4fc79 0%, #96f6a1 100%);&#34;</span>
</span></span><span class="line"><span class="cl">        <span class="p">),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">subtitle</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="qdreuqjuhy" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
#qdreuqjuhy table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#qdreuqjuhy thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#qdreuqjuhy p { margin: 0; padding: 0; }
#qdreuqjuhy .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#qdreuqjuhy .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#qdreuqjuhy .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#qdreuqjuhy .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#qdreuqjuhy .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qdreuqjuhy .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#qdreuqjuhy .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qdreuqjuhy .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#qdreuqjuhy .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#qdreuqjuhy .gt_column_spanner_outer:first-child { padding-left: 0; }
#qdreuqjuhy .gt_column_spanner_outer:last-child { padding-right: 0; }
#qdreuqjuhy .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#qdreuqjuhy .gt_spanner_row { border-bottom-style: hidden; }
#qdreuqjuhy .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#qdreuqjuhy .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#qdreuqjuhy .gt_from_md&gt; :first-child { margin-top: 0; }
#qdreuqjuhy .gt_from_md&gt; :last-child { margin-bottom: 0; }
#qdreuqjuhy .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#qdreuqjuhy .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#qdreuqjuhy .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#qdreuqjuhy .gt_row_group_first td { border-top-width: 2px; }
#qdreuqjuhy .gt_row_group_first th { border-top-width: 2px; }
#qdreuqjuhy .gt_striped { color: #333333; background-color: #F4F4F4; }
#qdreuqjuhy .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#qdreuqjuhy .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#qdreuqjuhy .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#qdreuqjuhy .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#qdreuqjuhy .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#qdreuqjuhy .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#qdreuqjuhy .gt_left { text-align: left; }
#qdreuqjuhy .gt_center { text-align: center; }
#qdreuqjuhy .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#qdreuqjuhy .gt_font_normal { font-weight: normal; }
#qdreuqjuhy .gt_font_bold { font-weight: bold; }
#qdreuqjuhy .gt_font_italic { font-style: italic; }
#qdreuqjuhy .gt_super { font-size: 65%; }
#qdreuqjuhy .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#qdreuqjuhy .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal" style="font-size: 24px; background-color: aliceblue; border-bottom: 2px solid #BFDFF6">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border" style="padding-top: 5px; padding-bottom: 5px; background-image: linear-gradient(120deg, #d4fc79 0%, #96f6a1 100%)">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">0</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">1/2</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote" style="vertical-align: middle; background-color: #EEEEEE">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>None of what was done above could be done prior to <code>v0.13.0</code>. The <code>style.css()</code> method makes this all possible.</p>
<p>The combined location helper for the title and the subtitle locations is <code>loc.header()</code>. As mentioned before, it can be used as a shorthand for <code>locations=[loc.title(), loc_subtitle()]</code> and it&rsquo;s useful here where we want to change the font for the title and subtitle text.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span><span class="lnt">9
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="s2">&#34;IBM Plex Serif&#34;</span><span class="p">)),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">header</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="ukzjaozmxn" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif&display=swap');
#ukzjaozmxn table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#ukzjaozmxn thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#ukzjaozmxn p { margin: 0; padding: 0; }
#ukzjaozmxn .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#ukzjaozmxn .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#ukzjaozmxn .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#ukzjaozmxn .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: #FFFFFF; border-top-width: 0; }
#ukzjaozmxn .gt_heading { background-color: #FFFFFF; text-align: left; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#ukzjaozmxn .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#ukzjaozmxn .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#ukzjaozmxn .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#ukzjaozmxn .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#ukzjaozmxn .gt_column_spanner_outer:first-child { padding-left: 0; }
#ukzjaozmxn .gt_column_spanner_outer:last-child { padding-right: 0; }
#ukzjaozmxn .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#ukzjaozmxn .gt_spanner_row { border-bottom-style: hidden; }
#ukzjaozmxn .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#ukzjaozmxn .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#ukzjaozmxn .gt_from_md&gt; :first-child { margin-top: 0; }
#ukzjaozmxn .gt_from_md&gt; :last-child { margin-bottom: 0; }
#ukzjaozmxn .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#ukzjaozmxn .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#ukzjaozmxn .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#ukzjaozmxn .gt_row_group_first td { border-top-width: 2px; }
#ukzjaozmxn .gt_row_group_first th { border-top-width: 2px; }
#ukzjaozmxn .gt_striped { color: #333333; background-color: #F4F4F4; }
#ukzjaozmxn .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#ukzjaozmxn .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#ukzjaozmxn .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#ukzjaozmxn .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#ukzjaozmxn .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#ukzjaozmxn .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#ukzjaozmxn .gt_left { text-align: left; }
#ukzjaozmxn .gt_center { text-align: center; }
#ukzjaozmxn .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#ukzjaozmxn .gt_font_normal { font-weight: normal; }
#ukzjaozmxn .gt_font_bold { font-weight: bold; }
#ukzjaozmxn .gt_font_italic { font-style: italic; }
#ukzjaozmxn .gt_super { font-size: 65%; }
#ukzjaozmxn .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#ukzjaozmxn .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal" style="font-family: IBM Plex Serif; font-size: 24px; background-color: aliceblue; border-bottom: 2px solid #BFDFF6">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border" style="font-family: IBM Plex Serif; padding-top: 5px; padding-bottom: 5px; background-image: linear-gradient(120deg, #d4fc79 0%, #96f6a1 100%)">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">0</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">1/2</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote" style="vertical-align: middle; background-color: #EEEEEE">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>Though the order of things matters when setting styles via <code>tab_style()</code>, it&rsquo;s not a problem here to set a style for the combined &lsquo;header&rsquo; location after doing so for the &rsquo;title&rsquo; and &lsquo;subtitle&rsquo; locations because the &lsquo;font&rsquo; attribute <em>wasn&rsquo;t</em> set by <code>tab_style()</code> for those smaller locations.</p>
<h3 id="how-tab_style-fits-in-with-tab_options">How <code>tab_style()</code> fits in with <code>tab_options()</code>
</h3>
<p>When it comes to styling, you can use <code>tab_options()</code> for some of the basics and use <code>tab_style()</code> for the more demanding styling tasks. And you could combine the usage of both in your table. Let&rsquo;s set a default honeydew background fill on the body values:</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="n">gt_tbl</span><span class="o">.</span><span class="n">tab_options</span><span class="p">(</span><span class="n">table_background_color</span><span class="o">=</span><span class="s2">&#34;HoneyDew&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="vidwnzshpq" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif&display=swap');
#vidwnzshpq table {
          font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#vidwnzshpq thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#vidwnzshpq p { margin: 0; padding: 0; }
#vidwnzshpq .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: HoneyDew; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#vidwnzshpq .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#vidwnzshpq .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; border-bottom-color: HoneyDew; border-bottom-width: 0; }
#vidwnzshpq .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 1px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; border-top-color: HoneyDew; border-top-width: 0; }
#vidwnzshpq .gt_heading { background-color: HoneyDew; text-align: left; border-bottom-color: HoneyDew; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#vidwnzshpq .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#vidwnzshpq .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#vidwnzshpq .gt_col_heading { color: #333333; background-color: HoneyDew; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 3px; padding-left: 10px; padding-right: 10px; overflow-x: hidden; }
#vidwnzshpq .gt_column_spanner_outer { color: #333333; background-color: HoneyDew; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#vidwnzshpq .gt_column_spanner_outer:first-child { padding-left: 0; }
#vidwnzshpq .gt_column_spanner_outer:last-child { padding-right: 0; }
#vidwnzshpq .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 2px; padding-bottom: 2px; overflow-x: hidden; display: inline-block; width: 100%; }
#vidwnzshpq .gt_spanner_row { border-bottom-style: hidden; }
#vidwnzshpq .gt_group_heading { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; color: #333333; background-color: HoneyDew; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#vidwnzshpq .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: HoneyDew; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#vidwnzshpq .gt_from_md&gt; :first-child { margin-top: 0; }
#vidwnzshpq .gt_from_md&gt; :last-child { margin-bottom: 0; }
#vidwnzshpq .gt_row { padding-top: 4px; padding-bottom: 4px; padding-left: 10px; padding-right: 10px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#vidwnzshpq .gt_stub { color: #333333; background-color: HoneyDew; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; }
#vidwnzshpq .gt_stub_row_group { color: #333333; background-color: HoneyDew; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 10px; padding-right: 10px; vertical-align: top; }
#vidwnzshpq .gt_row_group_first td { border-top-width: 2px; }
#vidwnzshpq .gt_row_group_first th { border-top-width: 2px; }
#vidwnzshpq .gt_striped { color: #333333; background-color: #F4F4F4; }
#vidwnzshpq .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#vidwnzshpq .gt_grand_summary_row { color: #333333; background-color: HoneyDew; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#vidwnzshpq .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#vidwnzshpq .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#vidwnzshpq .gt_sourcenotes { color: #333333; background-color: HoneyDew; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#vidwnzshpq .gt_sourcenote { font-size: 90%; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; padding-right: 10px; text-align: left; }
#vidwnzshpq .gt_left { text-align: left; }
#vidwnzshpq .gt_center { text-align: center; }
#vidwnzshpq .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#vidwnzshpq .gt_font_normal { font-weight: normal; }
#vidwnzshpq .gt_font_bold { font-weight: bold; }
#vidwnzshpq .gt_font_italic { font-style: italic; }
#vidwnzshpq .gt_super { font-size: 65%; }
#vidwnzshpq .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#vidwnzshpq .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_title gt_font_normal" style="font-family: IBM Plex Serif; font-size: 24px; background-color: aliceblue; border-bottom: 2px solid #BFDFF6">Isotopes of Carbon</th>
</tr>
<tr class="gt_heading">
<th colspan="7" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border" style="font-family: IBM Plex Serif; padding-top: 5px; padding-bottom: 5px; background-image: linear-gradient(120deg, #d4fc79 0%, #96f6a1 100%)">There are two stable isotopes of carbon and twelve that are unstable.</th>
</tr>
<tr class="gt_col_headings gt_spanner_row">
<th rowspan="2" id="Isotope" class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isotope</th>
<th rowspan="2" id="atomic_mass" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Atomic Mass</th>
<th rowspan="2" id="half_life" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Half Life, s</th>
<th rowspan="2" id="isospin" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">Isospin</th>
<th colspan="3" id="Decay-Mode" class="gt_center gt_columns_top_border gt_column_spanner_outer" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="colgroup"><span class="gt_column_spanner">Decay Mode</span></th>
</tr>
<tr class="gt_col_headings">
<th id="decay_1" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">1</th>
<th id="decay_2" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">2</th>
<th id="decay_3" class="gt_col_heading gt_columns_bottom_border gt_center" data-quarto-table-cell-role="th" style="vertical-align: middle; background-color: #EEEEEE" scope="col">3</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-8</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">8.0376</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">3.51 × 10<sup>−21</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">2P</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-9</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">9.0310</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.26 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">B+P</td>
<td class="gt_row gt_center">B+A</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-10</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">10.0169</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>1</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-11</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">11.0114</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.22 × 10<sup>3</sup></td>
<td class="gt_row gt_center">1/2</td>
<td class="gt_row gt_center">EC+B+</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-12</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">12.0000</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">0</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold; background-color: LightCyan; text-indent: 4px">C-13</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan">13.0034</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; background-color: LightCyan"><strong>STABLE</strong></td>
<td class="gt_row gt_center" style="background-color: LightCyan">1/2</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
<td class="gt_row gt_center" style="background-color: LightCyan">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-14</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">14.0032</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.80 × 10<sup>11</sup></td>
<td class="gt_row gt_center">1</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-15</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">15.0106</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">2.45</td>
<td class="gt_row gt_center">3/2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">—</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-16</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">16.0147</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">7.47 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">2</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-17</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.0226</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.93 × 10<sup>−1</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-18</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">18.0268</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">9.20 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">3</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">—</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-19</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">19.0348</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">4.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-20</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">20.0403</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">1.63 × 10<sup>−2</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th" style="background-color: Linen; font-weight: bold">C-22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">22.0576</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono; color: Navy; background-color: PaleTurquoise">6.10 × 10<sup>−3</sup></td>
<td class="gt_row gt_center">None</td>
<td class="gt_row gt_center">B-</td>
<td class="gt_row gt_center">B-N</td>
<td class="gt_row gt_center">B-2N</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="7" class="gt_sourcenote" style="vertical-align: middle; background-color: #EEEEEE">Data obtained from the <em>nuclides</em> dataset.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>In the example, we asked for the HoneyDew background fill on the entire table with <code>tab_options()</code>. However, even though <code>tab_options()</code> was used after those <code>tab_style()</code> invocations, the &lsquo;HoneyDew&rsquo; background color was only applied to the locations that didn&rsquo;t have a background color set through <code>tab_style(). The important takeaway here is that the precedence (or priority) is *always* given to</code>tab_style()`, regardless of the order of invocation.</p>
<h3 id="wrapping-up">Wrapping up
</h3>
<p>We&rsquo;d like to thank <a href="https://github.com/timkpaine" target="_blank" rel="noopener">Tim Paine</a>
 for getting the expanded <code>loc</code> work off the ground. Additionally, we are grateful to <a href="https://github.com/jrycw" target="_blank" rel="noopener">Jerry Wu</a>
 for his contributions to the <code>v0.13.0</code> release of the package.</p>
<p>We&rsquo;d be very pleased to receive comments or suggestions on the new functionality. <a href="https://github.com/posit-dev/great-tables/issues" target="_blank" rel="noopener">GitHub Issues</a>
 or <a href="https://github.com/posit-dev/great-tables/discussions" target="_blank" rel="noopener">GitHub Discussions</a>
 are both fine venues for getting in touch with us. Finally, if ever you want to talk about tables with us, you&rsquo;re always welcome to jump into our <a href="https://discord.com/invite/Ux7nrcXHVV" target="_blank" rel="noopener">Discord Server</a>
.</p>
]]></description>
    </item>
    <item>
      <title>Great Tables `v0.12.0`: Google Fonts and zebra stripes</title>
      <link>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.12.0/</link>
      <pubDate>Mon, 30 Sep 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/great-tables/introduction-0.12.0/</guid>
      <dc:creator>Rich Iannone</dc:creator><description><![CDATA[<script src="https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js" integrity="sha384-c9c+LnTbwQ3aujuU7ULEPVvgLs+Fn6fJUvIGTsuu1ZcCf11fiEubah0ttpca4ntM sha384-6V1/AdqZRWk1KAlWbKBlGhN7VG4iE/yAZcO6NZPMF8od0vukrvr0tg4qY6NSrItx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha384-ZvpUoO/+PpLXR1lu4jmpXWu80pZlYUAfxl5NsBMWOEPSjUn/6Z/hRTt8+pR6L4N2" crossorigin="anonymous" data-relocate-top="true"></script>
<script type="application/javascript">define('jquery', [],function() {return window.jQuery;})</script>
<p>In Great Tables <code>0.12.0</code> we focused on adding options for customizing the appearance of a table. In this post, we&rsquo;ll present two new features:</p>
<ul>
<li>using typefaces from Google Fonts via <code>tab_style()</code> and <code>opt_table_font()</code></li>
<li>adding table striping via <code>tab_options()</code> and <code>opt_row_striping()</code></li>
</ul>
<p>Let&rsquo;s have a look at how these new features can be used!</p>
<h3 id="using-fonts-from-google-fonts">Using fonts from Google Fonts
</h3>
<p>Google Fonts is a free service that allows use of hosted typefaces in your own websites. In Great Tables, we added the <code>google_font()</code> helper function to easily incorporate such fonts in your tables. There are two ways to go about this:</p>
<ol>
<li>use <code>google_font()</code> with <code>opt_table_font()</code> to set a Google Font for the entire table</li>
<li>invoke <code>google_font()</code> within <code>tab_style(styles=style.text(font=...))</code> to set the font within a location</li>
</ol>
<p>Let&rsquo;s start with this small table that uses the default set of fonts for the entire table.</p>
<details class="code-fold">
<summary>Show the code</summary>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt"> 1
</span><span class="lnt"> 2
</span><span class="lnt"> 3
</span><span class="lnt"> 4
</span><span class="lnt"> 5
</span><span class="lnt"> 6
</span><span class="lnt"> 7
</span><span class="lnt"> 8
</span><span class="lnt"> 9
</span><span class="lnt">10
</span><span class="lnt">11
</span><span class="lnt">12
</span><span class="lnt">13
</span><span class="lnt">14
</span><span class="lnt">15
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">exibble</span><span class="p">,</span> <span class="n">style</span><span class="p">,</span> <span class="n">loc</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span> <span class="o">=</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">GT</span><span class="p">(</span><span class="n">exibble</span><span class="o">.</span><span class="n">head</span><span class="p">(),</span> <span class="n">rowname_col</span><span class="o">=</span><span class="s2">&#34;row&#34;</span><span class="p">,</span> <span class="n">groupname_col</span><span class="o">=</span><span class="s2">&#34;group&#34;</span><span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">cols_hide</span><span class="p">(</span><span class="n">columns</span><span class="o">=</span><span class="p">[</span><span class="s2">&#34;char&#34;</span><span class="p">,</span> <span class="s2">&#34;fctr&#34;</span><span class="p">,</span> <span class="s2">&#34;date&#34;</span><span class="p">,</span> <span class="s2">&#34;time&#34;</span><span class="p">])</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_header</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">title</span><span class="o">=</span><span class="s2">&#34;A small piece of the exibble dataset&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">subtitle</span><span class="o">=</span><span class="s2">&#34;Displaying the first five rows (of eight)&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_source_note</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">source_note</span><span class="o">=</span><span class="s2">&#34;This dataset is included in Great Tables.&#34;</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="n">gt_tbl</span>
</span></span></code></pre></td></tr></table>
</div>
</div></details>
<div id="qwmdcpmegn" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#qwmdcpmegn table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#qwmdcpmegn thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#qwmdcpmegn p { margin: 0; padding: 0; }
#qwmdcpmegn .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#qwmdcpmegn .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#qwmdcpmegn .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#qwmdcpmegn .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#qwmdcpmegn .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qwmdcpmegn .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#qwmdcpmegn .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#qwmdcpmegn .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#qwmdcpmegn .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#qwmdcpmegn .gt_column_spanner_outer:first-child { padding-left: 0; }
#qwmdcpmegn .gt_column_spanner_outer:last-child { padding-right: 0; }
#qwmdcpmegn .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#qwmdcpmegn .gt_spanner_row { border-bottom-style: hidden; }
#qwmdcpmegn .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#qwmdcpmegn .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#qwmdcpmegn .gt_from_md&gt; :first-child { margin-top: 0; }
#qwmdcpmegn .gt_from_md&gt; :last-child { margin-bottom: 0; }
#qwmdcpmegn .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#qwmdcpmegn .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#qwmdcpmegn .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#qwmdcpmegn .gt_row_group_first td { border-top-width: 2px; }
#qwmdcpmegn .gt_row_group_first th { border-top-width: 2px; }
#qwmdcpmegn .gt_striped { color: #333333; background-color: #F4F4F4; }
#qwmdcpmegn .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#qwmdcpmegn .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#qwmdcpmegn .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#qwmdcpmegn .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#qwmdcpmegn .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#qwmdcpmegn .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#qwmdcpmegn .gt_left { text-align: left; }
#qwmdcpmegn .gt_center { text-align: center; }
#qwmdcpmegn .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#qwmdcpmegn .gt_font_normal { font-weight: normal; }
#qwmdcpmegn .gt_font_bold { font-weight: bold; }
#qwmdcpmegn .gt_font_italic { font-style: italic; }
#qwmdcpmegn .gt_super { font-size: 65%; }
#qwmdcpmegn .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#qwmdcpmegn .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">A small piece of the exibble dataset</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Displaying the first five rows (of eight)</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="num" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">num</th>
<th id="datetime" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">datetime</th>
<th id="currency" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">currency</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_a</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_1</td>
<td class="gt_row gt_right">0.1111</td>
<td class="gt_row gt_right">2018-01-01 02:22</td>
<td class="gt_row gt_right">49.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_2</td>
<td class="gt_row gt_right">2.222</td>
<td class="gt_row gt_right">2018-02-02 14:33</td>
<td class="gt_row gt_right">17.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_3</td>
<td class="gt_row gt_right">33.33</td>
<td class="gt_row gt_right">2018-03-03 03:44</td>
<td class="gt_row gt_right">1.39</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_4</td>
<td class="gt_row gt_right">444.4</td>
<td class="gt_row gt_right">2018-04-04 15:55</td>
<td class="gt_row gt_right">65100.0</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_b</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_5</td>
<td class="gt_row gt_right">5550.0</td>
<td class="gt_row gt_right">2018-05-05 04:00</td>
<td class="gt_row gt_right">1325.81</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="4" class="gt_sourcenote">This dataset is included in Great Tables.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>Now, with <code>opt_table_font()</code> + <code>google_font()</code>, we&rsquo;ll change the table&rsquo;s font to one from Google Fonts. I like <a href="https://fonts.google.com/noto/specimen/Noto&#43;Serif" target="_blank" rel="noopener"><code>Noto Serif</code></a>
 so let&rsquo;s use that here!</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="kn">from</span> <span class="nn">great_tables</span> <span class="kn">import</span> <span class="n">GT</span><span class="p">,</span> <span class="n">exibble</span><span class="p">,</span> <span class="n">style</span><span class="p">,</span> <span class="n">loc</span><span class="p">,</span> <span class="n">google_font</span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">opt_table_font</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="s2">&#34;Noto Serif&#34;</span><span class="p">))</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="opnlnkumof" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');
#opnlnkumof table {
          font-family: 'Noto Serif', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#opnlnkumof thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#opnlnkumof p { margin: 0; padding: 0; }
#opnlnkumof .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#opnlnkumof .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#opnlnkumof .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#opnlnkumof .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#opnlnkumof .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#opnlnkumof .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#opnlnkumof .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#opnlnkumof .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#opnlnkumof .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#opnlnkumof .gt_column_spanner_outer:first-child { padding-left: 0; }
#opnlnkumof .gt_column_spanner_outer:last-child { padding-right: 0; }
#opnlnkumof .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#opnlnkumof .gt_spanner_row { border-bottom-style: hidden; }
#opnlnkumof .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#opnlnkumof .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#opnlnkumof .gt_from_md&gt; :first-child { margin-top: 0; }
#opnlnkumof .gt_from_md&gt; :last-child { margin-bottom: 0; }
#opnlnkumof .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#opnlnkumof .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#opnlnkumof .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#opnlnkumof .gt_row_group_first td { border-top-width: 2px; }
#opnlnkumof .gt_row_group_first th { border-top-width: 2px; }
#opnlnkumof .gt_striped { color: #333333; background-color: #F4F4F4; }
#opnlnkumof .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#opnlnkumof .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#opnlnkumof .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#opnlnkumof .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#opnlnkumof .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#opnlnkumof .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#opnlnkumof .gt_left { text-align: left; }
#opnlnkumof .gt_center { text-align: center; }
#opnlnkumof .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#opnlnkumof .gt_font_normal { font-weight: normal; }
#opnlnkumof .gt_font_bold { font-weight: bold; }
#opnlnkumof .gt_font_italic { font-style: italic; }
#opnlnkumof .gt_super { font-size: 65%; }
#opnlnkumof .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#opnlnkumof .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">A small piece of the exibble dataset</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Displaying the first five rows (of eight)</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="num" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">num</th>
<th id="datetime" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">datetime</th>
<th id="currency" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">currency</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_a</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_1</td>
<td class="gt_row gt_right">0.1111</td>
<td class="gt_row gt_right">2018-01-01 02:22</td>
<td class="gt_row gt_right">49.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_2</td>
<td class="gt_row gt_right">2.222</td>
<td class="gt_row gt_right">2018-02-02 14:33</td>
<td class="gt_row gt_right">17.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_3</td>
<td class="gt_row gt_right">33.33</td>
<td class="gt_row gt_right">2018-03-03 03:44</td>
<td class="gt_row gt_right">1.39</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_4</td>
<td class="gt_row gt_right">444.4</td>
<td class="gt_row gt_right">2018-04-04 15:55</td>
<td class="gt_row gt_right">65100.0</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_b</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_5</td>
<td class="gt_row gt_right">5550.0</td>
<td class="gt_row gt_right">2018-05-05 04:00</td>
<td class="gt_row gt_right">1325.81</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="4" class="gt_sourcenote">This dataset is included in Great Tables.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>Looking good! And we don&rsquo;t have to apply the font to the entire table. We might just wanted to use a Google Font in the table body. For that use case, <code>tab_style()</code> is the preferred method. Here&rsquo;s an example that uses the <a href="https://fonts.google.com/specimen/IBM&#43;Plex&#43;Mono" target="_blank" rel="noopener"><code>IBM Plex Mono</code></a>
 typeface.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_style</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">style</span><span class="o">=</span><span class="n">style</span><span class="o">.</span><span class="n">text</span><span class="p">(</span><span class="n">font</span><span class="o">=</span><span class="n">google_font</span><span class="p">(</span><span class="n">name</span><span class="o">=</span><span class="s2">&#34;IBM Plex Mono&#34;</span><span class="p">)),</span>
</span></span><span class="line"><span class="cl">        <span class="n">locations</span><span class="o">=</span><span class="n">loc</span><span class="o">.</span><span class="n">body</span><span class="p">()</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="iyvfcbcbmw" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
#iyvfcbcbmw table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#iyvfcbcbmw thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#iyvfcbcbmw p { margin: 0; padding: 0; }
#iyvfcbcbmw .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#iyvfcbcbmw .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#iyvfcbcbmw .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#iyvfcbcbmw .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#iyvfcbcbmw .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#iyvfcbcbmw .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#iyvfcbcbmw .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#iyvfcbcbmw .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#iyvfcbcbmw .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#iyvfcbcbmw .gt_column_spanner_outer:first-child { padding-left: 0; }
#iyvfcbcbmw .gt_column_spanner_outer:last-child { padding-right: 0; }
#iyvfcbcbmw .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#iyvfcbcbmw .gt_spanner_row { border-bottom-style: hidden; }
#iyvfcbcbmw .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#iyvfcbcbmw .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#iyvfcbcbmw .gt_from_md&gt; :first-child { margin-top: 0; }
#iyvfcbcbmw .gt_from_md&gt; :last-child { margin-bottom: 0; }
#iyvfcbcbmw .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#iyvfcbcbmw .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#iyvfcbcbmw .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#iyvfcbcbmw .gt_row_group_first td { border-top-width: 2px; }
#iyvfcbcbmw .gt_row_group_first th { border-top-width: 2px; }
#iyvfcbcbmw .gt_striped { color: #333333; background-color: #F4F4F4; }
#iyvfcbcbmw .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#iyvfcbcbmw .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#iyvfcbcbmw .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#iyvfcbcbmw .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#iyvfcbcbmw .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#iyvfcbcbmw .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#iyvfcbcbmw .gt_left { text-align: left; }
#iyvfcbcbmw .gt_center { text-align: center; }
#iyvfcbcbmw .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#iyvfcbcbmw .gt_font_normal { font-weight: normal; }
#iyvfcbcbmw .gt_font_bold { font-weight: bold; }
#iyvfcbcbmw .gt_font_italic { font-style: italic; }
#iyvfcbcbmw .gt_super { font-size: 65%; }
#iyvfcbcbmw .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#iyvfcbcbmw .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">A small piece of the exibble dataset</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Displaying the first five rows (of eight)</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="num" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">num</th>
<th id="datetime" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">datetime</th>
<th id="currency" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">currency</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_a</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_1</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">0.1111</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">2018-01-01 02:22</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">49.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_2</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">2.222</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">2018-02-02 14:33</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">17.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_3</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">33.33</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">2018-03-03 03:44</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">1.39</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_4</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">444.4</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">2018-04-04 15:55</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">65100.0</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_b</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_5</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">5550.0</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">2018-05-05 04:00</td>
<td class="gt_row gt_right" style="font-family: IBM Plex Mono">1325.81</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="4" class="gt_sourcenote">This dataset is included in Great Tables.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>Nice! And it&rsquo;s refreshing to see tables with fonts different from default set, as good as it might be. We kept the <code>google_font()</code> helper function as simple as possible, requiring only the font name in its <code>name=</code> argument. There are hundreds of fonts hosted on <a href="https://fonts.google.com" target="_blank" rel="noopener">Google Fonts</a>
 so look through the site, experiment, and find the fonts that you think look best in your tables!</p>
<h3 id="striping-rows-in-your-table">Striping rows in your table
</h3>
<p>Some people like having row striping (a.k.a. zebra stripes) in their display tables. We also know that some <a href="https://www.darkhorseanalytics.com/blog/clear-off-the-table/" target="_blank" rel="noopener">advise against the practice</a>
. We understand it&rsquo;s a controversial table issue, however, we also want to give you the creative freedom to just include the stripes. To that end, we now have that option in the package. There are two ways to enable this look:</p>
<ol>
<li>invoking <code>opt_row_striping()</code> to quickly set row stripes in the table body</li>
<li>using some combination of three <code>row_striping_*</code> arguments in <code>tab_options()</code></li>
</ol>
<p>Let&rsquo;s use that example table with <code>opt_row_striping()</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="n">gt_tbl</span><span class="o">.</span><span class="n">opt_row_striping</span><span class="p">()</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="adsisobill" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#adsisobill table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#adsisobill thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#adsisobill p { margin: 0; padding: 0; }
#adsisobill .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#adsisobill .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#adsisobill .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#adsisobill .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#adsisobill .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#adsisobill .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#adsisobill .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#adsisobill .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#adsisobill .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#adsisobill .gt_column_spanner_outer:first-child { padding-left: 0; }
#adsisobill .gt_column_spanner_outer:last-child { padding-right: 0; }
#adsisobill .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#adsisobill .gt_spanner_row { border-bottom-style: hidden; }
#adsisobill .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#adsisobill .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#adsisobill .gt_from_md&gt; :first-child { margin-top: 0; }
#adsisobill .gt_from_md&gt; :last-child { margin-bottom: 0; }
#adsisobill .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#adsisobill .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#adsisobill .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#adsisobill .gt_row_group_first td { border-top-width: 2px; }
#adsisobill .gt_row_group_first th { border-top-width: 2px; }
#adsisobill .gt_striped { color: #333333; background-color: #F4F4F4; }
#adsisobill .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#adsisobill .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#adsisobill .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#adsisobill .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#adsisobill .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#adsisobill .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#adsisobill .gt_left { text-align: left; }
#adsisobill .gt_center { text-align: center; }
#adsisobill .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#adsisobill .gt_font_normal { font-weight: normal; }
#adsisobill .gt_font_bold { font-weight: bold; }
#adsisobill .gt_font_italic { font-style: italic; }
#adsisobill .gt_super { font-size: 65%; }
#adsisobill .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#adsisobill .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">A small piece of the exibble dataset</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Displaying the first five rows (of eight)</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="num" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">num</th>
<th id="datetime" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">datetime</th>
<th id="currency" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">currency</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_a</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_1</td>
<td class="gt_row gt_right">0.1111</td>
<td class="gt_row gt_right">2018-01-01 02:22</td>
<td class="gt_row gt_right">49.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_2</td>
<td class="gt_row gt_right gt_striped">2.222</td>
<td class="gt_row gt_right gt_striped">2018-02-02 14:33</td>
<td class="gt_row gt_right gt_striped">17.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_3</td>
<td class="gt_row gt_right">33.33</td>
<td class="gt_row gt_right">2018-03-03 03:44</td>
<td class="gt_row gt_right">1.39</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_4</td>
<td class="gt_row gt_right gt_striped">444.4</td>
<td class="gt_row gt_right gt_striped">2018-04-04 15:55</td>
<td class="gt_row gt_right gt_striped">65100.0</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_b</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_5</td>
<td class="gt_row gt_right">5550.0</td>
<td class="gt_row gt_right">2018-05-05 04:00</td>
<td class="gt_row gt_right">1325.81</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="4" class="gt_sourcenote">This dataset is included in Great Tables.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>It&rsquo;s somewhat subtle but there is an alternating, slightly gray background (starting on the <code>&quot;row_2&quot;</code> row). The color is <code>#808080</code> but with an alpha (transparency) value of <code>0.05</code>.</p>
<p>If this is not exactly what you want, there is an alternative to this. The <code>tab_options()</code> method has three new arguments:</p>
<ul>
<li><code>row_striping_background_color</code>: color to use for row striping</li>
<li><code>row_striping_include_stub</code>: should striping include cells in the stub?</li>
<li><code>row_striping_include_table_body</code>: should striping include cells in the body?</li>
</ul>
<p>With these new options, we can choose to stripe the <em>entire</em> row (stub cells + body cells) and use a darker color like <code>&quot;lightblue&quot;</code>.</p>
<div class="highlight"><div class="chroma">
<table class="lntable"><tr><td class="lntd">
<pre tabindex="0" class="chroma"><code><span class="lnt">1
</span><span class="lnt">2
</span><span class="lnt">3
</span><span class="lnt">4
</span><span class="lnt">5
</span><span class="lnt">6
</span><span class="lnt">7
</span><span class="lnt">8
</span></code></pre></td>
<td class="lntd">
<pre tabindex="0" class="chroma"><code class="language-python" data-lang="python"><span class="line"><span class="cl"><span class="p">(</span>
</span></span><span class="line"><span class="cl">    <span class="n">gt_tbl</span>
</span></span><span class="line"><span class="cl">    <span class="o">.</span><span class="n">tab_options</span><span class="p">(</span>
</span></span><span class="line"><span class="cl">        <span class="n">row_striping_background_color</span><span class="o">=</span><span class="s2">&#34;lightblue&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">row_striping_include_stub</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="n">row_striping_include_table_body</span><span class="o">=</span><span class="kc">True</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">)</span>
</span></span></code></pre></td></tr></table>
</div>
</div><div id="zogjwuunac" style="padding-left:0px;padding-right:0px;padding-top:10px;padding-bottom:10px;overflow-x:auto;overflow-y:auto;width:auto;height:auto;">
<style>
#zogjwuunac table {
          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Fira Sans', 'Droid Sans', Arial, sans-serif;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
<p>#zogjwuunac thead, tbody, tfoot, tr, td, th { border-style: none; }
tr { background-color: transparent; }
#zogjwuunac p { margin: 0; padding: 0; }
#zogjwuunac .gt_table { display: table; border-collapse: collapse; line-height: normal; margin-left: auto; margin-right: auto; color: #333333; font-size: 16px; font-weight: normal; font-style: normal; background-color: #FFFFFF; width: auto; border-top-style: solid; border-top-width: 2px; border-top-color: #A8A8A8; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #A8A8A8; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; }
#zogjwuunac .gt_caption { padding-top: 4px; padding-bottom: 4px; }
#zogjwuunac .gt_title { color: #333333; font-size: 125%; font-weight: initial; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; border-bottom-color: #FFFFFF; border-bottom-width: 0; }
#zogjwuunac .gt_subtitle { color: #333333; font-size: 85%; font-weight: initial; padding-top: 3px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-top-color: #FFFFFF; border-top-width: 0; }
#zogjwuunac .gt_heading { background-color: #FFFFFF; text-align: center; border-bottom-color: #FFFFFF; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#zogjwuunac .gt_bottom_border { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#zogjwuunac .gt_col_headings { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; }
#zogjwuunac .gt_col_heading { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; overflow-x: hidden; }
#zogjwuunac .gt_column_spanner_outer { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: normal; text-transform: inherit; padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 4px; }
#zogjwuunac .gt_column_spanner_outer:first-child { padding-left: 0; }
#zogjwuunac .gt_column_spanner_outer:last-child { padding-right: 0; }
#zogjwuunac .gt_column_spanner { border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: bottom; padding-top: 5px; padding-bottom: 5px; overflow-x: hidden; display: inline-block; width: 100%; }
#zogjwuunac .gt_spanner_row { border-bottom-style: hidden; }
#zogjwuunac .gt_group_heading { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; text-align: left; }
#zogjwuunac .gt_empty_group_heading { padding: 0.5px; color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; vertical-align: middle; }
#zogjwuunac .gt_from_md&gt; :first-child { margin-top: 0; }
#zogjwuunac .gt_from_md&gt; :last-child { margin-bottom: 0; }
#zogjwuunac .gt_row { padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; margin: 10px; border-top-style: solid; border-top-width: 1px; border-top-color: #D3D3D3; border-left-style: none; border-left-width: 1px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 1px; border-right-color: #D3D3D3; vertical-align: middle; overflow-x: hidden; }
#zogjwuunac .gt_stub { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; }
#zogjwuunac .gt_stub_row_group { color: #333333; background-color: #FFFFFF; font-size: 100%; font-weight: initial; text-transform: inherit; border-right-style: solid; border-right-width: 2px; border-right-color: #D3D3D3; padding-left: 5px; padding-right: 5px; vertical-align: top; }
#zogjwuunac .gt_row_group_first td { border-top-width: 2px; }
#zogjwuunac .gt_row_group_first th { border-top-width: 2px; }
#zogjwuunac .gt_striped { color: #333333; background-color: lightblue; }
#zogjwuunac .gt_table_body { border-top-style: solid; border-top-width: 2px; border-top-color: #D3D3D3; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: #D3D3D3; }
#zogjwuunac .gt_grand_summary_row { color: #333333; background-color: #FFFFFF; text-transform: inherit; padding-top: 8px; padding-bottom: 8px; padding-left: 5px; padding-right: 5px; }
#zogjwuunac .gt_first_grand_summary_row_bottom { border-top-style: double; border-top-width: 6px; border-top-color: #D3D3D3; }
#zogjwuunac .gt_last_grand_summary_row_top { border-bottom-style: double; border-bottom-width: 6px; border-bottom-color: #D3D3D3; }
#zogjwuunac .gt_sourcenotes { color: #333333; background-color: #FFFFFF; border-bottom-style: none; border-bottom-width: 2px; border-bottom-color: #D3D3D3; border-left-style: none; border-left-width: 2px; border-left-color: #D3D3D3; border-right-style: none; border-right-width: 2px; border-right-color: #D3D3D3; }
#zogjwuunac .gt_sourcenote { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; text-align: left; }
#zogjwuunac .gt_left { text-align: left; }
#zogjwuunac .gt_center { text-align: center; }
#zogjwuunac .gt_right { text-align: right; font-variant-numeric: tabular-nums; }
#zogjwuunac .gt_font_normal { font-weight: normal; }
#zogjwuunac .gt_font_bold { font-weight: bold; }
#zogjwuunac .gt_font_italic { font-style: italic; }
#zogjwuunac .gt_super { font-size: 65%; }
#zogjwuunac .gt_footnote_marks { font-size: 75%; vertical-align: 0.4em; position: initial; }
#zogjwuunac .gt_asterisk { font-size: 100%; vertical-align: 0; }</p>
<p></style></p>
<table class="gt_table" data-quarto-postprocess="true" data-quarto-disable-processing="false" data-quarto-bootstrap="false">
<thead>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_title gt_font_normal">A small piece of the exibble dataset</th>
</tr>
<tr class="gt_heading">
<th colspan="4" class="gt_heading gt_subtitle gt_font_normal gt_bottom_border">Displaying the first five rows (of eight)</th>
</tr>
<tr class="gt_col_headings">
<th class="gt_col_heading gt_columns_bottom_border gt_left" data-quarto-table-cell-role="th" scope="col"></th>
<th id="num" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">num</th>
<th id="datetime" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">datetime</th>
<th id="currency" class="gt_col_heading gt_columns_bottom_border gt_right" data-quarto-table-cell-role="th" scope="col">currency</th>
</tr>
</thead>
<tbody class="gt_table_body">
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_a</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_1</td>
<td class="gt_row gt_right">0.1111</td>
<td class="gt_row gt_right">2018-01-01 02:22</td>
<td class="gt_row gt_right">49.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub gt_striped" data-quarto-table-cell-role="th">row_2</td>
<td class="gt_row gt_right gt_striped">2.222</td>
<td class="gt_row gt_right gt_striped">2018-02-02 14:33</td>
<td class="gt_row gt_right gt_striped">17.95</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_3</td>
<td class="gt_row gt_right">33.33</td>
<td class="gt_row gt_right">2018-03-03 03:44</td>
<td class="gt_row gt_right">1.39</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub gt_striped" data-quarto-table-cell-role="th">row_4</td>
<td class="gt_row gt_right gt_striped">444.4</td>
<td class="gt_row gt_right gt_striped">2018-04-04 15:55</td>
<td class="gt_row gt_right gt_striped">65100.0</td>
</tr>
<tr class="gt_group_heading_row">
<td colspan="4" class="gt_group_heading" data-quarto-table-cell-role="th">grp_b</td>
</tr>
<tr>
<td class="gt_row gt_left gt_stub" data-quarto-table-cell-role="th">row_5</td>
<td class="gt_row gt_right">5550.0</td>
<td class="gt_row gt_right">2018-05-05 04:00</td>
<td class="gt_row gt_right">1325.81</td>
</tr>
</tbody><tfoot class="gt_sourcenotes">
<tr>
<td colspan="4" class="gt_sourcenote">This dataset is included in Great Tables.</td>
</tr>
</tfoot>
&#10;</table>
</div>
<p>These alternating fills can be a good idea in some table display circumstances. Now, you can make that call and the functionality is there to support your decision.</p>
<h3 id="wrapping-up">Wrapping up
</h3>
<p>We are excited that this new functionality is now available in Great Tables. As ever, please let us know through <a href="https://github.com/posit-dev/great-tables/issues" target="_blank" rel="noopener">GitHub Issues</a>
 whether you ran into problems with any feature (new or old), or, if you have suggestions for further improvement!</p>
]]></description>
    </item>
    <item>
      <title>patchwork 1.3.0</title>
      <link>https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/</link>
      <pubDate>Fri, 13 Sep 2024 00:00:00 +0000</pubDate>
      <guid>https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/</guid>
      <dc:creator>Thomas Lin Pedersen</dc:creator><description><![CDATA[<!--
TODO:
* [x] Look over / edit the post's title in the yaml
* [x] Edit (or delete) the description; note this appears in the Twitter card
* [x] Pick category and tags (see existing with [`hugodown::tidy_show_meta()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html))
* [x] Find photo & update yaml metadata
* [x] Create `thumbnail-sq.jpg`; height and width should be equal
* [x] Create `thumbnail-wd.jpg`; width should be >5x height
* [x] [`hugodown::use_tidy_thumbnails()`](https://rdrr.io/pkg/hugodown/man/use_tidy_post.html)
* [x] Add intro sentence, e.g. the standard tagline for the package
* [x] [`usethis::use_tidy_thanks()`](https://usethis.r-lib.org/reference/use_tidy_thanks.html)
-->
<p>I&rsquo;m excited to present <a href="https://patchwork.data-imaginist.com" target="_blank" rel="noopener">patchwork</a>
 1.3.0, our package for creating multifigure plot compositions. This versions adds table support and improves support for &ldquo;free&quot;ing components to span across multiple grid cells.</p>
<p>You can install patchwork from CRAN with:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://rdrr.io/r/utils/install.packages.html'>install.packages</a></span><span class='o'>(</span><span class='s'>"patchwork"</span><span class='o'>)</span></span></code></pre>
</div>
<p>You can see a full list of changes in the <a href="https://patchwork.data-imaginist.com/news/index.html" target="_blank" rel="noopener">release notes</a>
</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='kr'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='o'>(</span><span class='nv'><a href='https://patchwork.data-imaginist.com'>patchwork</a></span><span class='o'>)</span></span>
<span><span class='kr'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='o'>(</span><span class='nv'><a href='https://ggplot2.tidyverse.org'>ggplot2</a></span><span class='o'>)</span></span>
<span><span class='kr'><a href='https://rdrr.io/r/base/library.html'>library</a></span><span class='o'>(</span><span class='nv'><a href='https://gt.rstudio.com'>gt</a></span><span class='o'>)</span></span></code></pre>
</div>
<h2 id="tables-are-figures-too">Tables are figures too
</h2>
<p>The new and shiny feature of the release is that patchwork now has native support for gt objects, making it possible to compose beautifully formatted tables together with your figures. This has been made possible through Teun Van den Brand&rsquo;s effort to provide grob output to gt. While this means that you can now pass in gt objects to <a href="https://patchwork.data-imaginist.com/reference/wrap_elements.html" target="_blank" rel="noopener"><code>wrap_elements()</code></a>
 in the same way as other supported data types, it also goes one step further, using the semantics of the table design to add table specific formatting options through the new <a href="https://patchwork.data-imaginist.com/reference/wrap_table.html" target="_blank" rel="noopener"><code>wrap_table()</code></a>
 function.</p>
<p>But let&rsquo;s take a step back and see how the simplest support works in reality:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>airquality</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_path.html'>geom_line</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>x <span class='o'>=</span> <span class='nv'>Day</span>, y <span class='o'>=</span> <span class='nv'>Temp</span>, colour <span class='o'>=</span> <span class='nv'>month.name</span><span class='o'>[</span><span class='nv'>Month</span><span class='o'>]</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>labs</a></span><span class='o'>(</span>colour <span class='o'>=</span> <span class='s'>"Month"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>aq</span> <span class='o'>&lt;-</span> <span class='nv'>airquality</span><span class='o'>[</span><span class='nf'><a href='https://rdrr.io/r/base/sample.html'>sample</a></span><span class='o'>(</span><span class='nf'><a href='https://rdrr.io/r/base/nrow.html'>nrow</a></span><span class='o'>(</span><span class='nv'>airquality</span><span class='o'>)</span>, <span class='m'>10</span><span class='o'>)</span>, <span class='o'>]</span></span>
<span><span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://gt.rstudio.com/reference/gt.html'>gt</a></span><span class='o'>(</span><span class='nv'>aq</span><span class='o'>)</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/labs.html'>ggtitle</a></span><span class='o'>(</span><span class='s'>"Sample of the dataset"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-2-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>A few things can be gathered already from this small example. Tables can have titles (and subtitles, captions, and tags) like regular plots (in that sense they behave like <a href="https://patchwork.data-imaginist.com/reference/wrap_elements.html" target="_blank" rel="noopener"><code>wrap_elements()</code></a>
 output). Also, and this is perhaps more interesting, patchwork is aware that the first row is special (a header row), and thus places that on top of the panel area so that the plot region of the left plot is aligned with the body of the table, not the full table.</p>
<p>Lastly, we see that tables often have a fixed size, contrary to plots which can shrink and expand based on how much room they have. Because of this, our table is overflowing it&rsquo;s region in the plot above creating a not-so-great look.</p>
<p>Let&rsquo;s see how we can use <a href="https://patchwork.data-imaginist.com/reference/wrap_table.html" target="_blank" rel="noopener"><code>wrap_table()</code></a>
 to control some of these behaviors. First, while we could decrease the font size in the table to make it smaller, we could also allow it some more space instead. We could do this by using <code>plot_layout(widths = ...)</code> but it would require a fair amount of guessing on our side to get it just right. Thankfully, patchwork is smart enough to figure it out for us and we can instruct it to do so using the <code>space</code> argument in <a href="https://patchwork.data-imaginist.com/reference/wrap_table.html" target="_blank" rel="noopener"><code>wrap_table()</code></a>
. Setting it to <code>&quot;free_y&quot;</code> instructs it to fix the width to the table width but keep the height free:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/wrap_table.html'>wrap_table</a></span><span class='o'>(</span><span class='nv'>aq</span>, space <span class='o'>=</span> <span class='s'>"free_y"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-3-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Setting <code>space</code> to <code>&quot;fixed&quot;</code> would constrain both the width and the height of the area it occupies. Since we only have a single row in our layout this would leave us with some empty horizontal space:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/wrap_table.html'>wrap_table</a></span><span class='o'>(</span><span class='nv'>aq</span>, space <span class='o'>=</span> <span class='s'>"fixed"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-4-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>If the space is fixed in the y direction and the table has any source notes or footnotes, these will behave like the column header and be placed outside the panel area depending on the <code>panel</code> setting</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>aq_footer</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://gt.rstudio.com/reference/gt.html'>gt</a></span><span class='o'>(</span><span class='nv'>aq</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://gt.rstudio.com/reference/tab_source_note.html'>tab_source_note</a></span><span class='o'>(</span><span class='s'>"This is not part of the table body"</span><span class='o'>)</span></span>
<span><span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/wrap_table.html'>wrap_table</a></span><span class='o'>(</span><span class='nv'>aq_footer</span>, space <span class='o'>=</span> <span class='s'>"fixed"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-5-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>While the space argument is great for making the composition look good and the table well placed in the whole, it can also serve a different purpose of making sure that rows (or columns) are aligned with the axis of a plot. There are no facilities to ensure that the breaks order matches between plots and tables so that is the responsibility of the user, but otherwise this is a great way to use tables to directly augment a plot:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p2</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>airquality</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>x <span class='o'>=</span> <span class='nv'>month.name</span><span class='o'>[</span><span class='nv'>Month</span><span class='o'>]</span>, y <span class='o'>=</span> <span class='nv'>Temp</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>axis.text.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span>, axis.title.x <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_blank</a></span><span class='o'>(</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_discrete.html'>scale_x_discrete</a></span><span class='o'>(</span>expand <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='m'>0</span>, <span class='m'>0.5</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='c'># Construct our table</span></span>
<span><span class='nv'>table</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/cbind.html'>rbind</a></span><span class='o'>(</span></span>
<span>  <span class='nf'><a href='https://rdrr.io/r/base/tapply.html'>tapply</a></span><span class='o'>(</span><span class='nv'>airquality</span><span class='o'>$</span><span class='nv'>Temp</span>, <span class='nv'>airquality</span><span class='o'>$</span><span class='nv'>Month</span>, <span class='nv'>max</span><span class='o'>)</span>,</span>
<span>  <span class='nf'><a href='https://rdrr.io/r/base/tapply.html'>tapply</a></span><span class='o'>(</span><span class='nv'>airquality</span><span class='o'>$</span><span class='nv'>Temp</span>, <span class='nv'>airquality</span><span class='o'>$</span><span class='nv'>Month</span>, <span class='nv'>median</span><span class='o'>)</span>,</span>
<span>  <span class='nf'><a href='https://rdrr.io/r/base/tapply.html'>tapply</a></span><span class='o'>(</span><span class='nv'>airquality</span><span class='o'>$</span><span class='nv'>Temp</span>, <span class='nv'>airquality</span><span class='o'>$</span><span class='nv'>Month</span>, <span class='nv'>min</span><span class='o'>)</span></span>
<span><span class='o'>)</span></span>
<span><span class='nf'><a href='https://rdrr.io/r/base/colnames.html'>colnames</a></span><span class='o'>(</span><span class='nv'>table</span><span class='o'>)</span> <span class='o'>&lt;-</span> <span class='nv'>month.name</span><span class='o'>[</span><span class='m'>5</span><span class='o'>:</span><span class='m'>9</span><span class='o'>]</span></span>
<span><span class='nv'>table</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://rdrr.io/r/base/data.frame.html'>data.frame</a></span><span class='o'>(</span></span>
<span>  Measure <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"Max"</span>, <span class='s'>"Median"</span>, <span class='s'>"Min"</span><span class='o'>)</span>,</span>
<span>  <span class='nv'>table</span></span>
<span><span class='o'>)</span></span>
<span><span class='nv'>table</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://gt.rstudio.com/reference/gt.html'>gt</a></span><span class='o'>(</span><span class='nv'>table</span>, rowname_col <span class='o'>=</span> <span class='s'>"Measure"</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://gt.rstudio.com/reference/cols_width.html'>cols_width</a></span><span class='o'>(</span><span class='nf'><a href='https://tidyselect.r-lib.org/reference/starts_with.html'>contains</a></span><span class='o'>(</span><span class='nv'>month.name</span><span class='o'>)</span> <span class='o'>~</span> <span class='nf'><a href='https://gt.rstudio.com/reference/px.html'>px</a></span><span class='o'>(</span><span class='m'>100</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://gt.rstudio.com/reference/cols_align.html'>cols_align</a></span><span class='o'>(</span>align <span class='o'>=</span> <span class='s'>"center"</span><span class='o'>)</span> <span class='o'>|&gt;</span></span>
<span>  <span class='nf'><a href='https://gt.rstudio.com/reference/cols_align.html'>cols_align</a></span><span class='o'>(</span>align <span class='o'>=</span> <span class='s'>"right"</span>, columns <span class='o'>=</span> <span class='s'>"Measure"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nv'>p2</span> <span class='o'>/</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/wrap_table.html'>wrap_table</a></span><span class='o'>(</span><span class='nv'>table</span>, space <span class='o'>=</span> <span class='s'>"fixed"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-6-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Circling back, there was another argument to <a href="https://patchwork.data-imaginist.com/reference/wrap_table.html" target="_blank" rel="noopener"><code>wrap_table()</code></a>
 we didn&rsquo;t get into yet. In the plot above, we see that the row names are conveniently aligned with the axis rather than the panel of the plot above, in the same way as the headers where placed outside the panel area. This is a nice default and generally makes sense for the semantics of a table, but you might want something different. The <code>panel</code> argument allows you to control this exact behavior. It takes <code>&quot;body&quot;</code>, <code>&quot;full&quot;</code>, <code>&quot;rows&quot;</code>, or <code>&quot;cols&quot;</code> which indicate what portion of the table should be inside the panel area. The default is <code>&quot;body&quot;</code> which places row and column names outside the panel. <code>&quot;full&quot;</code>, on the contrary, places everything inside, while <code>&quot;rows&quot;</code> and <code>&quot;cols&quot;</code> are half versions that allows you to keep either column <em>or</em> row names outside the panel respectively.</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='c'># Place all rows (including the header row) inside the panel area</span></span>
<span><span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/wrap_table.html'>wrap_table</a></span><span class='o'>(</span><span class='nv'>aq</span>, panel <span class='o'>=</span> <span class='s'>"rows"</span>, space <span class='o'>=</span> <span class='s'>"free_y"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-7-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Just like the tables support ggplot2-like titles, they also support tags, meaning that patchworks auto-tagging works as expected. It can be turned off using the <code>ignore_tag</code> argument but often you&rsquo;d want to treat it as a figure in the figure text:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>+</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/wrap_table.html'>wrap_table</a></span><span class='o'>(</span><span class='nv'>aq</span>, panel <span class='o'>=</span> <span class='s'>"rows"</span>, space <span class='o'>=</span> <span class='s'>"free_y"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/plot_annotation.html'>plot_annotation</a></span><span class='o'>(</span>tag_levels <span class='o'>=</span> <span class='s'>"A"</span><span class='o'>)</span> <span class='o'>&amp;</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/theme.html'>theme</a></span><span class='o'>(</span>plot.tag <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>element_text</a></span><span class='o'>(</span>margin <span class='o'>=</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/element.html'>margin</a></span><span class='o'>(</span><span class='m'>0</span>, <span class='m'>6</span>, <span class='m'>6</span>, <span class='m'>0</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-8-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="accesibility">Accesibility
</h3>
<p>We truly believe that the features laid out above will be a boon for augmenting your data visualisation with data that can be read precisely at a glance. However, we would be remiss to not note how tables that are part of a patchwork visualisation doesn&rsquo;t have the same accessibility featurees as a gt table included directly in e.g. an HTML output. This is because graphics are rasterised into a PNG file and thus looses all semantical information that is inherent in a table. This should be kept in mind when providing Alt text for your figures so you ensure they are legible for everyone.</p>
<h3 id="future">Future
</h3>
<p>The support on the patchwork end is likely done at this point, but the conversion to grobs that has been added to gt is still somewhat young and will improve over time. It is likely that markdown formatting (through marquee) and other niceties will get added, leading to even more power in composing tables with plots using patchwork as the glue between them. As with the <a href="https://quarto.org/docs/blog/posts/2024-07-02-beautiful-tables-in-typst/" target="_blank" rel="noopener">support for gt in typst</a>
 the support for gt in patchwork is part of our larger effort to bring the power of gt to more environments and create a single unified solution to table styling.</p>
<h2 id="with-freedom-comes-great-responsibility">With freedom comes great responsibility
</h2>
<p>The second leg of this release concerns the <a href="https://patchwork.data-imaginist.com/reference/free.html" target="_blank" rel="noopener"><code>free()</code></a>
 function which was introduced in the last release. I devoted a whole section of my posit::conf talk this year to talk about <a href="https://patchwork.data-imaginist.com/reference/free.html" target="_blank" rel="noopener"><code>free()</code></a>
 and how it was a good thing to say no to requests for functionality until you have a solution that fits into your API and doesn&rsquo;t add clutter. I really like how the API for <a href="https://patchwork.data-imaginist.com/reference/free.html" target="_blank" rel="noopener"><code>free()</code></a>
 turned out but I also knew it could do more. In this release it delivers on those promises with two additional arguments.</p>
<h3 id="which-side">Which side?
</h3>
<p>As it were, <a href="https://patchwork.data-imaginist.com/reference/free.html" target="_blank" rel="noopener"><code>free()</code></a>
 could only be used to completely turn off alignment of a plot, e.g. like below:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mtcars</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_bar.html'>geom_bar</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>y <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/factor.html'>factor</a></span><span class='o'>(</span><span class='nv'>gear</span><span class='o'>)</span>, fill <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/factor.html'>factor</a></span><span class='o'>(</span><span class='nv'>gear</span><span class='o'>)</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_discrete.html'>scale_y_discrete</a></span><span class='o'>(</span></span>
<span>    <span class='s'>""</span>,</span>
<span>    labels <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"3 gears are often enough"</span>,</span>
<span>               <span class='s'>"But, you know, 4 is a nice number"</span>,</span>
<span>               <span class='s'>"I would def go with 5 gears in a modern car"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span><span class='nv'>p2</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mtcars</span><span class='o'>)</span> <span class='o'>+</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_point.html'>geom_point</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span><span class='nv'>mpg</span>, <span class='nv'>disp</span><span class='o'>)</span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>p1</span><span class='o'>)</span> <span class='o'>/</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-9-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>We can see that panel alignment has been turned off both to the left and to the right (and top and bottom if it were visible). But perhaps you are only interested in un-aligning the left side, keeping the legend to the right of both plots. Now you can, thanks to the <code>side</code> argument which takes a string containing one or more of the <code>t</code>, <code>r</code>, <code>b</code>, and <code>l</code> characters to indicate which sides to apply the freeing to (default is <code>&quot;trbl&quot;</code> meaning &ldquo;target all sides&rdquo;).</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>p1</span>, side <span class='o'>=</span> <span class='s'>"l"</span><span class='o'>)</span> <span class='o'>/</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-10-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Freeing works inside nested patchworks, where you can target various sides at various levels:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p3</span> <span class='o'>&lt;-</span> <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/ggplot.html'>ggplot</a></span><span class='o'>(</span><span class='nv'>mtcars</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/geom_boxplot.html'>geom_boxplot</a></span><span class='o'>(</span><span class='nf'><a href='https://ggplot2.tidyverse.org/reference/aes.html'>aes</a></span><span class='o'>(</span>y <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/factor.html'>factor</a></span><span class='o'>(</span><span class='nv'>gear</span><span class='o'>)</span>, <span class='nv'>disp</span><span class='o'>)</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nf'><a href='https://ggplot2.tidyverse.org/reference/scale_discrete.html'>scale_y_discrete</a></span><span class='o'>(</span></span>
<span>    <span class='s'>""</span>,</span>
<span>    labels <span class='o'>=</span> <span class='nf'><a href='https://rdrr.io/r/base/c.html'>c</a></span><span class='o'>(</span><span class='s'>"... and 3"</span>,</span>
<span>               <span class='s'>"4 of them"</span>,</span>
<span>               <span class='s'>"5 gears"</span><span class='o'>)</span></span>
<span>  <span class='o'>)</span></span>
<span></span>
<span></span>
<span><span class='nv'>nested</span> <span class='o'>&lt;-</span> <span class='nv'>p2</span> <span class='o'>/</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>p1</span>, side <span class='o'>=</span> <span class='s'>"l"</span><span class='o'>)</span></span>
<span></span>
<span><span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>nested</span>, side <span class='o'>=</span> <span class='s'>"r"</span><span class='o'>)</span> <span class='o'>/</span></span>
<span>  <span class='nv'>p3</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-11-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<h3 id="what-does-freeing-means-anyway">What does &ldquo;freeing&rdquo; means anyway?
</h3>
<p>While being able to target specific sides is pretty great in and off itself, we are not done yet. After being able to <em>not</em> align panels the most requested feature was the possibility of moving the axis title closer to the axis text if alignment had pushed it apart. Consider again our unfreed patchwork:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>/</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-12-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>While we can &ldquo;fix&rdquo; it by letting the top panel stretch, another way to improve upon it would be to move the dangling y-axis title of the bottom plot closer to the axis. Enter the <code>type</code> argument to <a href="https://patchwork.data-imaginist.com/reference/free.html" target="_blank" rel="noopener"><code>free()</code></a>
 which informs patchwork how to not align the input. The default (<code>&quot;panel&quot;</code>) works just as <a href="https://patchwork.data-imaginist.com/reference/free.html" target="_blank" rel="noopener"><code>free()</code></a>
 always has, but the other two values opens up some new nifty goodies. Setting <code>type = &quot;label&quot;</code> does exactly what we discussed above, freeing the label from alignment so it sticks together with the axis and axis text:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>/</span></span>
<span>  <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>p2</span>, type <span class='o'>=</span> <span class='s'>"label"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-13-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>The other type is <code>&quot;space&quot;</code> which works slightly different. Using this you tell patchwork to not reserve any space for what the side(s) contain. This is perfect in situation where you already have empty space next to it that can fit the content. Consider this plot:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://patchwork.data-imaginist.com/reference/plot_spacer.html'>plot_spacer</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span> <span class='nv'>p1</span> <span class='o'>+</span></span>
<span>  <span class='nv'>p2</span> <span class='o'>+</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-14-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Ugh, the axis text of the top plot pushes everything apart even though there is ample of space for it in the empty region on the left. This is where <code>type = &quot;space&quot;</code> comes in handy:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://patchwork.data-imaginist.com/reference/plot_spacer.html'>plot_spacer</a></span><span class='o'>(</span><span class='o'>)</span> <span class='o'>+</span> <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>p1</span>, type <span class='o'>=</span> <span class='s'>"space"</span>, side <span class='o'>=</span> <span class='s'>"l"</span><span class='o'>)</span> <span class='o'>+</span></span>
<span>  <span class='nv'>p2</span> <span class='o'>+</span> <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-15-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>Of course, such power comes with the responsibility of you ensuring there is actually space for it &mdash; otherwise it will escape out of the figure area:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>p1</span>, type <span class='o'>=</span> <span class='s'>"space"</span>, side <span class='o'>=</span> <span class='s'>"l"</span><span class='o'>)</span> <span class='o'>/</span></span>
<span>  <span class='nv'>p2</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-16-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>All the different types of freeing can be stacked on top of each other so you can have a plot that keeps the left axis label together with the axis while also stretches the right side to take up empty space:</p>
<div class="highlight">
<pre class='chroma'><code class='language-r' data-lang='r'><span><span class='nv'>p1</span> <span class='o'>/</span></span>
<span>  <span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nf'><a href='https://patchwork.data-imaginist.com/reference/free.html'>free</a></span><span class='o'>(</span><span class='nv'>p2</span>, <span class='s'>"panel"</span>, <span class='s'>"r"</span><span class='o'>)</span>, <span class='s'>"label"</span>, <span class='s'>"l"</span><span class='o'>)</span></span>
</code></pre>
<img src="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/figs/unnamed-chunk-17-1.png" width="700px" style="display: block; margin: auto;" />
</div>
<p>But as always, don&rsquo;t go overboard. If you find yourself needing to use an elaborate combination of stacked <a href="https://patchwork.data-imaginist.com/reference/free.html" target="_blank" rel="noopener"><code>free()</code></a>
 calls there is a good chance that something with your core composition needs rethinking.</p>
<h2 id="the-rest">The rest
</h2>
<p>The above are the clear highlights of this release. It also contains the standard bug fixes &mdash; especially in the area of axis collecting which was introduced in the last release and came with a bunch of edge cases that were unaccounted for. There is also a new utility function: <a href="https://rdrr.io/r/base/merge.html" target="_blank" rel="noopener"><code>merge()</code></a>
 which is an alternative to the <code>-</code> operator that I don&rsquo;t think many users understood or used. It allows you to merge all plots together into a nested patchwork so that the right hand side is added to a new composition.</p>
<h2 id="acknowledgements">Acknowledgements
</h2>
<p>Thank you to all people who have contributed issues, code and comments to this release:</p>
<p><a href="https://github.com/BenVolpe94" target="_blank" rel="noopener">@BenVolpe94</a>
, <a href="https://github.com/daniellembecker" target="_blank" rel="noopener">@daniellembecker</a>
, <a href="https://github.com/dchiu911" target="_blank" rel="noopener">@dchiu911</a>
, <a href="https://github.com/ericKuo722" target="_blank" rel="noopener">@ericKuo722</a>
, <a href="https://github.com/Fan-iX" target="_blank" rel="noopener">@Fan-iX</a>
, <a href="https://github.com/IndrajeetPatil" target="_blank" rel="noopener">@IndrajeetPatil</a>
, <a href="https://github.com/jack-davison" target="_blank" rel="noopener">@jack-davison</a>
, <a href="https://github.com/karchern" target="_blank" rel="noopener">@karchern</a>
, <a href="https://github.com/laresbernardo" target="_blank" rel="noopener">@laresbernardo</a>
, <a href="https://github.com/marchtaylor" target="_blank" rel="noopener">@marchtaylor</a>
, <a href="https://github.com/mariadelmarq" target="_blank" rel="noopener">@mariadelmarq</a>
, <a href="https://github.com/Maschette" target="_blank" rel="noopener">@Maschette</a>
, <a href="https://github.com/michaeltopper1" target="_blank" rel="noopener">@michaeltopper1</a>
, <a href="https://github.com/mkoohafkan" target="_blank" rel="noopener">@mkoohafkan</a>
, <a href="https://github.com/n-kall" target="_blank" rel="noopener">@n-kall</a>
, <a href="https://github.com/person-c" target="_blank" rel="noopener">@person-c</a>
, <a href="https://github.com/pettyalex" target="_blank" rel="noopener">@pettyalex</a>
, <a href="https://github.com/petzi53" target="_blank" rel="noopener">@petzi53</a>
, <a href="https://github.com/phispu" target="_blank" rel="noopener">@phispu</a>
, <a href="https://github.com/psychelzh" target="_blank" rel="noopener">@psychelzh</a>
, <a href="https://github.com/rinivarg" target="_blank" rel="noopener">@rinivarg</a>
, <a href="https://github.com/selkamand" target="_blank" rel="noopener">@selkamand</a>
, <a href="https://github.com/Soham6298" target="_blank" rel="noopener">@Soham6298</a>
, <a href="https://github.com/svraka" target="_blank" rel="noopener">@svraka</a>
, <a href="https://github.com/teng-gao" target="_blank" rel="noopener">@teng-gao</a>
, <a href="https://github.com/teunbrand" target="_blank" rel="noopener">@teunbrand</a>
, <a href="https://github.com/thomasp85" target="_blank" rel="noopener">@thomasp85</a>
, <a href="https://github.com/timz0605" target="_blank" rel="noopener">@timz0605</a>
, <a href="https://github.com/wish1832" target="_blank" rel="noopener">@wish1832</a>
, and <a href="https://github.com/Yunuuuu" target="_blank" rel="noopener">@Yunuuuu</a>
.</p>
]]></description>
      <enclosure url="https://posit-open-source.netlify.app/blog/tidyverse/2024/patchwork-1-3-0/thumbnail-wd.jpg" length="540015" type="image/jpeg" />
    </item>
  </channel>
</rss>
