{"id":12388,"date":"2019-06-30T10:26:03","date_gmt":"2019-06-30T15:26:03","guid":{"rendered":"https:\/\/rud.is\/b\/?p=12388"},"modified":"2019-07-09T10:15:58","modified_gmt":"2019-07-09T15:15:58","slug":"make-refreshing-segmented-column-charts-with-ggchicklet","status":"publish","type":"post","link":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/","title":{"rendered":"Make Refreshing Segmented Column Charts with {ggchicklet}"},"content":{"rendered":"<p>The first U.S. Democratic debates of the 2020 election season were held over two nights this past week due to the daft number of candidates running for POTUS. The spiffy @NYTgraphics folks took the tallies of time spent blathering by each speaker\/topic and made rounded rectangle segmented bar charts ordered by the time the blathering was performed (these aren&#8217;t really debates, they&#8217;re loosely-prepared for performances) which I have dubbed &#8220;chicklet&#8221; charts due to a vague resemblance to the semi-popular gum\/candy.<\/p>\n<p>You can see each day&#8217;s live, javascript-created NYTimes charts here:<\/p>\n<ul>\n<li><a href=\"https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006581096.embedded.html\">https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006581096.embedded.html<\/a><\/li>\n<li><a href=\"https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006584572.embedded.html\">https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006584572.embedded.html<\/a><\/li>\n<\/ul>\n<p>and this is a PNG snapshot of one of them:<\/p>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12396\" data-permalink=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/nytimes\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?fit=800%2C449&amp;ssl=1\" data-orig-size=\"800,449\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"nytimes\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?fit=510%2C286&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=510%2C286&#038;ssl=1\" alt=\"nytimes chicklet chart for debate day 1\" width=\"510\" height=\"286\" class=\"aligncenter size-full wp-image-12396\" srcset=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?w=800&amp;ssl=1 800w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=150%2C84&amp;ssl=1 150w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=300%2C168&amp;ssl=1 300w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=768%2C431&amp;ssl=1 768w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=530%2C297&amp;ssl=1 530w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=500%2C281&amp;ssl=1 500w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=400%2C225&amp;ssl=1 400w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/nytimes.png?resize=200%2C112&amp;ssl=1 200w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>I liked the chicklet aesthetic enough to make a new {ggplot2} <code>geom_chicklet()<\/code> to help folks make them. To save some blog bytes, you can read how to install the package over at <a href=\"https:\/\/cinc.rud.is\/web\/packages\/ggchicklet\/\">https:\/\/cinc.rud.is\/web\/packages\/ggchicklet\/<\/a>.<\/p>\n<h3>Making Chicklet Charts<\/h3>\n<p>Since the @NYTimes chose to use javascript to make their chart they also kinda made the data available (view the source of both of the aforelinked URLs) which I&#8217;ve wrangled a bit and put into the {ggchicklet} package. We&#8217;ll use it to progress from producing basic bars to crunching out chicklets and compare all the candidates across both days.<\/p>\n<p>While the @Nytimes chart(s) provide a great deal of information, most media outlets focused on how much blather time each candidate managed to get. We do not need anything fancier than a bar chart or table to do that:<\/p>\n<pre><code class=\"language-r\">library(hrbrthemes)\nlibrary(ggchicklet)\nlibrary(tidyverse)\n\ndata(\"debates2019\")\n\ncount(debates2019, speaker, wt=elapsed, sort=TRUE) %&gt;%\n  mutate(speaker = fct_reorder(speaker, n, sum, .desc=FALSE)) %&gt;%\n  mutate(speaker = fct_inorder(speaker) %&gt;% fct_rev()) %&gt;%\n  ggplot(aes(speaker,n)) +\n  geom_col() +\n  scale_y_comma(position = \"right\") +\n  coord_flip() +\n  labs(x = NULL, y = \"Minutes Spoken\") +\n  theme_ipsum_rc(grid=\"X\")\n<\/code><\/pre>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12389\" data-permalink=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/chicklet-01-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?fit=1920%2C1536&amp;ssl=1\" data-orig-size=\"1920,1536\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chicklet-01-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?fit=510%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=510%2C408&#038;ssl=1\" alt=\"ordered blather time chart for each spaker\" width=\"510\" height=\"408\" class=\"aligncenter size-full wp-image-12389\" srcset=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=150%2C120&amp;ssl=1 150w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=300%2C240&amp;ssl=1 300w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=768%2C614&amp;ssl=1 768w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=530%2C424&amp;ssl=1 530w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=500%2C400&amp;ssl=1 500w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=1200%2C960&amp;ssl=1 1200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=400%2C320&amp;ssl=1 400w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=800%2C640&amp;ssl=1 800w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?resize=200%2C160&amp;ssl=1 200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?w=1020&amp;ssl=1 1020w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-01-1.png?w=1530&amp;ssl=1 1530w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>If we want to see the same basic view but include how much time each speaker spent on each topic, we can also do that without much effort:<\/p>\n<pre><code class=\"language-r\">count(debates2019, speaker, topic, wt=elapsed, sort=TRUE) %&gt;%\n  mutate(speaker = fct_reorder(speaker, n, sum, .desc=FALSE)) %&gt;%\n  ggplot(aes(speaker, n , fill = topic)) +\n  geom_col() +\n  scale_y_comma(position = \"right\") +\n  ggthemes::scale_fill_tableau(\"Tableau 20\", name = NULL) +\n  coord_flip() +\n  labs(x = NULL, y = \"Minutes Spoken\") +\n  theme_ipsum_rc(grid=\"X\") +\n  theme(legend.position = \"bottom\")\n<\/code><\/pre>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12390\" data-permalink=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/chicklet-02-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?fit=1920%2C1536&amp;ssl=1\" data-orig-size=\"1920,1536\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chicklet-02-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?fit=510%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=510%2C408&#038;ssl=1\" alt=\"time spent per topic per speaker\" width=\"510\" height=\"408\" class=\"aligncenter size-full wp-image-12390\" srcset=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=150%2C120&amp;ssl=1 150w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=300%2C240&amp;ssl=1 300w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=768%2C614&amp;ssl=1 768w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=530%2C424&amp;ssl=1 530w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=500%2C400&amp;ssl=1 500w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=1200%2C960&amp;ssl=1 1200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=400%2C320&amp;ssl=1 400w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=800%2C640&amp;ssl=1 800w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?resize=200%2C160&amp;ssl=1 200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?w=1020&amp;ssl=1 1020w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-02-1.png?w=1530&amp;ssl=1 1530w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>By default <code>geom_col()<\/code> is going to use the <code>fill<\/code> aesthetic to group the bars and use the default sort order to stack them together.<\/p>\n<p>We can also get a broken out view by not doing the <code>count()<\/code> and just letting the segments group together and use a white bar outline to keep them distinct:<\/p>\n<pre><code class=\"language-r\">debates2019 %&gt;%\n  mutate(speaker = fct_reorder(speaker, elapsed, sum, .desc=FALSE)) %&gt;%\n  ggplot(aes(speaker, elapsed, fill = topic)) +\n  geom_col(color = \"white\") +\n  scale_y_comma(position = \"right\") +\n  ggthemes::scale_fill_tableau(\"Tableau 20\", name = NULL) +\n  coord_flip() +\n  labs(x = NULL, y = \"Minutes Spoken\") +\n  theme_ipsum_rc(grid=\"X\") +\n  theme(legend.position = \"bottom\")\n<\/code><\/pre>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12391\" data-permalink=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/chicklet-03-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?fit=1920%2C1536&amp;ssl=1\" data-orig-size=\"1920,1536\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chicklet-03-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?fit=510%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=510%2C408&#038;ssl=1\" alt=\"grouped distinct topics\" width=\"510\" height=\"408\" class=\"aligncenter size-full wp-image-12391\" srcset=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=150%2C120&amp;ssl=1 150w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=300%2C240&amp;ssl=1 300w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=768%2C614&amp;ssl=1 768w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=530%2C424&amp;ssl=1 530w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=500%2C400&amp;ssl=1 500w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=1200%2C960&amp;ssl=1 1200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=400%2C320&amp;ssl=1 400w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=800%2C640&amp;ssl=1 800w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?resize=200%2C160&amp;ssl=1 200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?w=1020&amp;ssl=1 1020w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-03-1.png?w=1530&amp;ssl=1 1530w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>While I liked the rounded rectangle aesthetic, I also really liked how the @nytimes ordered the segments by when the topics occurred during the debate. For other types of chicklet charts you don&#8217;t need the grouping variable to be a time-y whime-y column, just try to use something that has a sane ordering characteristic to it:<\/p>\n<pre><code class=\"language-r\">debates2019 %&gt;%\n  mutate(speaker = fct_reorder(speaker, elapsed, sum, .desc=FALSE)) %&gt;%\n  ggplot(aes(speaker, elapsed, group = timestamp, fill = topic)) +\n  geom_col(color = \"white\", position = position_stack(reverse = TRUE)) +\n  scale_y_comma(position = \"right\") +\n  ggthemes::scale_fill_tableau(\"Tableau 20\", name = NULL) +\n  coord_flip() +\n  labs(x = NULL, y = \"Minutes Spoken\") +\n  theme_ipsum_rc(grid=\"X\") +\n  theme(legend.position = \"bottom\")\n<\/code><\/pre>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12392\" data-permalink=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/chicklet-04-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?fit=1920%2C1536&amp;ssl=1\" data-orig-size=\"1920,1536\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chicklet-04-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?fit=510%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=510%2C408&#038;ssl=1\" alt=\"distinct topics ordered by when blathered abt during each debate\" width=\"510\" height=\"408\" class=\"aligncenter size-full wp-image-12392\" srcset=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=150%2C120&amp;ssl=1 150w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=300%2C240&amp;ssl=1 300w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=768%2C614&amp;ssl=1 768w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=530%2C424&amp;ssl=1 530w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=500%2C400&amp;ssl=1 500w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=1200%2C960&amp;ssl=1 1200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=400%2C320&amp;ssl=1 400w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=800%2C640&amp;ssl=1 800w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?resize=200%2C160&amp;ssl=1 200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?w=1020&amp;ssl=1 1020w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-04-1.png?w=1530&amp;ssl=1 1530w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>That last chart is about as far as you could go to reproduce the @nytimes look-and-feel without jumping through some serious gg-hoops.<\/p>\n<p>I had made a rounded rectangle hidden geom to make rounded-corner tiles for the <a href=\"https:\/\/git.rud.is\/hrbrmstr\/statebins\"><code>{statebins} package<\/code><\/a> so making a version of <code>ggplot2::geom_col()<\/code> (which I also added to {ggplot2}) was pretty straightforward. There are some key differences in the defaults of <code>geom_chicklet()<\/code>:<\/p>\n<ul>\n<li>a &#8220;<code>white<\/code>&#8221; stroke for the chicklet\/segment (<code>geom_col()<\/code> has <code>NA<\/code> for the stroke)<\/li>\n<li>automatic reversing of the <code>group<\/code> order (<code>geom_col()<\/code> uses the standard sort order)<\/li>\n<li>radius setting of <code>unit(3, \"px\")<\/code> (change this as you need)<\/li>\n<li>chicklet legend geom (b\/c they aren&#8217;t bars or points)<\/li>\n<\/ul>\n<p>You likely just want to see it in action, so here it is without further adieu:<\/p>\n<pre><code class=\"language-r\">debates2019 %&gt;%\n  mutate(speaker = fct_reorder(speaker, elapsed, sum, .desc=FALSE)) %&gt;%\n  ggplot(aes(speaker, elapsed, group = timestamp, fill = topic)) +\n  geom_chicklet(width = 0.75) +\n  scale_y_continuous(\n    expand = c(0, 0.0625),\n    position = \"right\",\n    breaks = seq(0, 14, 2),\n    labels = c(0, sprintf(\"%d min.\", seq(2, 14, 2)))\n  ) +\n  ggthemes::scale_fill_tableau(\"Tableau 20\", name = NULL) +\n  coord_flip() +\n  labs(\n    x = NULL, y = NULL, fill = NULL,\n    title = \"How Long Each Candidate Spoke\",\n    subtitle = \"Nights 1 &amp; 2 of the June 2019 Democratic Debates\",\n    caption = \"Each bar segment represents the length of a candidate\u2019s response to a question.\\n\\nOriginals &lt;https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006581096.embedded.html?&gt;\\n&lt;https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006584572.embedded.html?&gt;\\nby @nytimes Weiyi Cai, Jason Kao, Jasmine C. Lee, Alicia Parlapiano and Jugal K. Patel\\n\\n#rstats reproduction by @hrbrmstr\"\n  ) +\n  theme_ipsum_rc(grid=\"X\") +\n  theme(axis.text.x = element_text(color = \"gray60\", size = 10)) +\n  theme(legend.position = \"bottom\")\n<\/code><\/pre>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12394\" data-permalink=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/chicklet-06-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?fit=1920%2C1536&amp;ssl=1\" data-orig-size=\"1920,1536\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chicklet-06-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?fit=510%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=510%2C408&#038;ssl=1\" alt=\"chiclet chart with all the topics\" width=\"510\" height=\"408\" class=\"aligncenter size-full wp-image-12394\" srcset=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=150%2C120&amp;ssl=1 150w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=300%2C240&amp;ssl=1 300w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=768%2C614&amp;ssl=1 768w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=530%2C424&amp;ssl=1 530w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=500%2C400&amp;ssl=1 500w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=1200%2C960&amp;ssl=1 1200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=400%2C320&amp;ssl=1 400w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=800%2C640&amp;ssl=1 800w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?resize=200%2C160&amp;ssl=1 200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?w=1020&amp;ssl=1 1020w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-06-1.png?w=1530&amp;ssl=1 1530w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<p>Yes, I upped the ggplot2 tweaking a bit to get closer to the @nytimes (FWIW I like the Y gridlines, YMMV) but didn&#8217;t have to do much else to replace <code>geom_col()<\/code> with <code>geom_chicket()<\/code>. You&#8217;ll need to play with the segment <code>width<\/code> value depending on the size of your own, different plots to get the best look (just like you do with any other geom).<\/p>\n<p>Astute, intrepid readers will note that the above chart has all the topics whereas the @nytimes just has a few. We can do the grouping of non-salient topics into an &#8220;Other&#8221; category with <code>forcats::fct_other()<\/code> and make a manual fill scale from the values <strike>stolen from<\/strike>used in homage from the @nytimes:<\/p>\n<pre><code class=\"language-r\">debates2019 %&gt;%\n  mutate(speaker = fct_reorder(speaker, elapsed, sum, .desc=FALSE)) %&gt;%\n  mutate(topic = fct_other(\n    topic,\n    c(\"Immigration\", \"Economy\", \"Climate Change\", \"Gun Control\", \"Healthcare\", \"Foreign Policy\"))\n  ) %&gt;%\n  ggplot(aes(speaker, elapsed, group = timestamp, fill = topic)) +\n  geom_chicklet(width = 0.75) +\n  scale_y_continuous(\n    expand = c(0, 0.0625),\n    position = \"right\",\n    breaks = seq(0, 14, 2),\n    labels = c(0, sprintf(\"%d min.\", seq(2, 14, 2)))\n  ) +\n  scale_fill_manual(\n    name = NULL,\n    values = c(\n      \"Immigration\" = \"#ae4544\",\n      \"Economy\" = \"#d8cb98\",\n      \"Climate Change\" = \"#a4ad6f\",\n      \"Gun Control\" = \"#cc7c3a\",\n      \"Healthcare\" = \"#436f82\",\n      \"Foreign Policy\" = \"#7c5981\",\n      \"Other\" = \"#cccccc\"\n    ),\n    breaks = setdiff(unique(debates2019$topic), \"Other\")\n  ) +\n  guides(\n    fill = guide_legend(nrow = 1)\n  ) +\n  coord_flip() +\n  labs(\n    x = NULL, y = NULL, fill = NULL,\n    title = \"How Long Each Candidate Spoke\",\n    subtitle = \"Nights 1 &amp; 2 of the June 2019 Democratic Debates\",\n    caption = \"Each bar segment represents the length of a candidate\u2019s response to a question.\\n\\nOriginals &lt;https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006581096.embedded.html?&gt;\\n&lt;https:\/\/www.nytimes.com\/interactive\/2019\/admin\/100000006584572.embedded.html?&gt;\\nby @nytimes Weiyi Cai, Jason Kao, Jasmine C. Lee, Alicia Parlapiano and Jugal K. Patel\\n\\n#rstats reproduction by @hrbrmstr\"\n  ) +\n  theme_ipsum_rc(grid=\"X\") +\n  theme(axis.text.x = element_text(color = \"gray60\", size = 10)) +\n  theme(legend.position = \"top\")\n<\/code><\/pre>\n<p><a href=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" data-attachment-id=\"12395\" data-permalink=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/chicklet-07-1\/\" data-orig-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&amp;ssl=1\" data-orig-size=\"1920,1536\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"chicklet-07-1\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=510%2C408&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=510%2C408&#038;ssl=1\" alt=\"final chicklet chart\" width=\"510\" height=\"408\" class=\"aligncenter size-full wp-image-12395\" srcset=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?w=1920&amp;ssl=1 1920w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=150%2C120&amp;ssl=1 150w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=300%2C240&amp;ssl=1 300w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=768%2C614&amp;ssl=1 768w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=530%2C424&amp;ssl=1 530w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=500%2C400&amp;ssl=1 500w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=1200%2C960&amp;ssl=1 1200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=400%2C320&amp;ssl=1 400w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=800%2C640&amp;ssl=1 800w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?resize=200%2C160&amp;ssl=1 200w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?w=1020&amp;ssl=1 1020w, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?w=1530&amp;ssl=1 1530w\" sizes=\"auto, (max-width: 510px) 100vw, 510px\" \/><\/a><\/p>\n<h3>FIN<\/h3>\n<p>Remember, you can find out how to install {ggchicklet} and also where you can file issues or PRs over at <a href=\"https:\/\/cinc.rud.is\/web\/packages\/ggchicklet\/\">https:\/\/cinc.rud.is\/web\/packages\/ggchicklet\/<\/a>. The package has full documentation, including a vignette, but if any usage help is lacking, definitely file an issue.<\/p>\n<p>If you use the package, don&#8217;t hesitate to share your creations in a comment or on Twitter so other folks can see how to use the package in different contexts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The first U.S. Democratic debates of the 2020 election season were held over two nights this past week due to the daft number of candidates running for POTUS. The spiffy @NYTgraphics folks took the tallies of time spent blathering by each speaker\/topic and made rounded rectangle segmented bar charts ordered by the time the blathering [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":12395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[753,91],"tags":[],"class_list":["post-12388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ggplot","category-r"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Make Refreshing Segmented Column Charts with {ggchicklet} - rud.is<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Refreshing Segmented Column Charts with {ggchicklet} - rud.is\" \/>\n<meta property=\"og:description\" content=\"The first U.S. Democratic debates of the 2020 election season were held over two nights this past week due to the daft number of candidates running for POTUS. The spiffy @NYTgraphics folks took the tallies of time spent blathering by each speaker\/topic and made rounded rectangle segmented bar charts ordered by the time the blathering [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/\" \/>\n<meta property=\"og:site_name\" content=\"rud.is\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-30T15:26:03+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-07-09T15:15:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1536\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"hrbrmstr\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"hrbrmstr\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/\"},\"author\":{\"name\":\"hrbrmstr\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"headline\":\"Make Refreshing Segmented Column Charts with {ggchicklet}\",\"datePublished\":\"2019-06-30T15:26:03+00:00\",\"dateModified\":\"2019-07-09T15:15:58+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/\"},\"wordCount\":710,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/chicklet-07-1.png?fit=1920%2C1536&ssl=1\",\"articleSection\":[\"ggplot\",\"R\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/\",\"name\":\"Make Refreshing Segmented Column Charts with {ggchicklet} - rud.is\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/chicklet-07-1.png?fit=1920%2C1536&ssl=1\",\"datePublished\":\"2019-06-30T15:26:03+00:00\",\"dateModified\":\"2019-07-09T15:15:58+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/chicklet-07-1.png?fit=1920%2C1536&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/chicklet-07-1.png?fit=1920%2C1536&ssl=1\",\"width\":1920,\"height\":1536,\"caption\":\"final chicklet chart\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/2019\\\/06\\\/30\\\/make-refreshing-segmented-column-charts-with-ggchicklet\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rud.is\\\/b\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Refreshing Segmented Column Charts with {ggchicklet}\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#website\",\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/\",\"name\":\"rud.is\",\"description\":\"&quot;In God we trust. All others must bring data&quot;\",\"publisher\":{\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rud.is\\\/b\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/rud.is\\\/b\\\/#\\\/schema\\\/person\\\/d7cb7487ab0527447f7fda5c423ff886\",\"name\":\"hrbrmstr\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\",\"width\":460,\"height\":460,\"caption\":\"hrbrmstr\"},\"logo\":{\"@id\":\"https:\\\/\\\/i0.wp.com\\\/rud.is\\\/b\\\/wp-content\\\/uploads\\\/2023\\\/10\\\/ukr-shield.png?fit=460%2C460&ssl=1\"},\"description\":\"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7\",\"sameAs\":[\"http:\\\/\\\/rud.is\"],\"url\":\"https:\\\/\\\/rud.is\\\/b\\\/author\\\/hrbrmstr\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Make Refreshing Segmented Column Charts with {ggchicklet} - rud.is","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/","og_locale":"en_US","og_type":"article","og_title":"Make Refreshing Segmented Column Charts with {ggchicklet} - rud.is","og_description":"The first U.S. Democratic debates of the 2020 election season were held over two nights this past week due to the daft number of candidates running for POTUS. The spiffy @NYTgraphics folks took the tallies of time spent blathering by each speaker\/topic and made rounded rectangle segmented bar charts ordered by the time the blathering [&hellip;]","og_url":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/","og_site_name":"rud.is","article_published_time":"2019-06-30T15:26:03+00:00","article_modified_time":"2019-07-09T15:15:58+00:00","og_image":[{"width":1920,"height":1536,"url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&ssl=1","type":"image\/png"}],"author":"hrbrmstr","twitter_card":"summary_large_image","twitter_misc":{"Written by":"hrbrmstr","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#article","isPartOf":{"@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/"},"author":{"name":"hrbrmstr","@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"headline":"Make Refreshing Segmented Column Charts with {ggchicklet}","datePublished":"2019-06-30T15:26:03+00:00","dateModified":"2019-07-09T15:15:58+00:00","mainEntityOfPage":{"@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/"},"wordCount":710,"commentCount":2,"publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"image":{"@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&ssl=1","articleSection":["ggplot","R"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/","url":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/","name":"Make Refreshing Segmented Column Charts with {ggchicklet} - rud.is","isPartOf":{"@id":"https:\/\/rud.is\/b\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#primaryimage"},"image":{"@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&ssl=1","datePublished":"2019-06-30T15:26:03+00:00","dateModified":"2019-07-09T15:15:58+00:00","breadcrumb":{"@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#primaryimage","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&ssl=1","width":1920,"height":1536,"caption":"final chicklet chart"},{"@type":"BreadcrumbList","@id":"https:\/\/rud.is\/b\/2019\/06\/30\/make-refreshing-segmented-column-charts-with-ggchicklet\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rud.is\/b\/"},{"@type":"ListItem","position":2,"name":"Make Refreshing Segmented Column Charts with {ggchicklet}"}]},{"@type":"WebSite","@id":"https:\/\/rud.is\/b\/#website","url":"https:\/\/rud.is\/b\/","name":"rud.is","description":"&quot;In God we trust. All others must bring data&quot;","publisher":{"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rud.is\/b\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/rud.is\/b\/#\/schema\/person\/d7cb7487ab0527447f7fda5c423ff886","name":"hrbrmstr","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","contentUrl":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1","width":460,"height":460,"caption":"hrbrmstr"},"logo":{"@id":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2023\/10\/ukr-shield.png?fit=460%2C460&ssl=1"},"description":"Don't look at me\u2026I do what he does \u2014 just slower. #rstats avuncular \u2022 ?Resistance Fighter \u2022 Cook \u2022 Christian \u2022 [Master] Chef des Donn\u00e9es de S\u00e9curit\u00e9 @ @rapid7","sameAs":["http:\/\/rud.is"],"url":"https:\/\/rud.is\/b\/author\/hrbrmstr\/"}]}},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2019\/06\/chicklet-07-1.png?fit=1920%2C1536&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p23idr-3dO","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":5050,"url":"https:\/\/rud.is\/b\/2017\/02\/15\/ggalt-0-4-0-now-on-cran\/","url_meta":{"origin":12388,"position":0},"title":"ggalt 0.4.0 now on CRAN","author":"hrbrmstr","date":"2017-02-15","format":false,"excerpt":"I'm uncontainably excited to report that the ggplot2 extension package ggalt is now on CRAN. The absolute best part of this package is the R community members who contributed suggestions and new geoms, stats, annotations and integration features. This release would not be possible without the PRs from: Ben Bolker\u2026","rel":"","context":"In &quot;ggplot&quot;","block_context":{"text":"ggplot","link":"https:\/\/rud.is\/b\/category\/ggplot\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/02\/RStudio-1.png?fit=1200%2C510&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/02\/RStudio-1.png?fit=1200%2C510&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/02\/RStudio-1.png?fit=1200%2C510&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/02\/RStudio-1.png?fit=1200%2C510&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/02\/RStudio-1.png?fit=1200%2C510&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":2385,"url":"https:\/\/rud.is\/b\/2013\/03\/19\/interactive-slopegraphs-with-processing\/","url_meta":{"origin":12388,"position":1},"title":"Interactive Slopegraphs With Processing","author":"hrbrmstr","date":"2013-03-19","format":false,"excerpt":"Given my [obsession](http:\/\/rud.is\/b\/?s=slopegraphs) with slopegraphs, I'm not sure how I missed this [post](http:\/\/neoformix.com\/2013\/ObesitySlopegraph.html) back in late February by @JeffClark that includes a very nicely executed [interactive sloepgraph](http:\/\/neoformix.com\/Projects\/ObesitySlope\/) on the global obesity problem. He used [Processing](http:\/\/processing.org\/) & [Processing JS](http:\/\/processingjs.org\/) to build the visualization and I think it illustrates how well animation\/interaction\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3585,"url":"https:\/\/rud.is\/b\/2015\/08\/04\/achieve-charting-zen-with-taucharts\/","url_meta":{"origin":12388,"position":2},"title":"Achieve Charting Zen With TauCharts","author":"hrbrmstr","date":"2015-08-04","format":false,"excerpt":"There was some chatter on the twitters this week about a relatively new D3-based charting library called [TauCharts](http:\/\/taucharts.com\/) (also @taucharts). The API looked pretty clean and robust, so I started working on an htmlwidget for it and was quickly joined by the Widget Master himself, @timelyportfolio. TauCharts definitely has a\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6255,"url":"https:\/\/rud.is\/b\/2017\/09\/15\/its-a-fake-%f0%9f%93%a6-revisiting-trust-in-foss-ecosystems\/","url_meta":{"origin":12388,"position":3},"title":"It&#8217;s a FAKE (?)! Revisiting Trust In FOSS Ecosystems","author":"hrbrmstr","date":"2017-09-15","format":false,"excerpt":"I've blathered about trust before 1 2, but said blatherings were in a \"what if\" context. Unfortunately, the if has turned into a when, which begged for further blathering on a recent FOSS ecosystem cybersecurity incident. The gg_spiffy @thomasp85 linked to a post by the SK-CSIRT detailing the discovery and\u2026","rel":"","context":"In &quot;R&quot;","block_context":{"text":"R","link":"https:\/\/rud.is\/b\/category\/r\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/09\/download_counts_per_day-1.png?fit=1200%2C818&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/09\/download_counts_per_day-1.png?fit=1200%2C818&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/09\/download_counts_per_day-1.png?fit=1200%2C818&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/09\/download_counts_per_day-1.png?fit=1200%2C818&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2017\/09\/download_counts_per_day-1.png?fit=1200%2C818&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3325,"url":"https:\/\/rud.is\/b\/2015\/03\/18\/making-waffle-charts-in-r-with-the-new-waffle-package\/","url_meta":{"origin":12388,"position":4},"title":"Making waffle charts in R (with the new &#8216;waffle&#8217; package)","author":"hrbrmstr","date":"2015-03-18","format":false,"excerpt":"NOTE: The waffle package (sans JavaScript-y goodness) is up on CRAN so you can do an install.packages(\"waffle\") and library(waffle) vs the devtools dance. My disdain for pie charts is fairly well-known, but I do concede that there are times one needs to communicate parts of a whole graphically verses using\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2770,"url":"https:\/\/rud.is\/b\/2013\/10\/27\/alternative-to-grouped-bar-charts-in-r\/","url_meta":{"origin":12388,"position":5},"title":"Alternative to Grouped Bar Charts in R","author":"hrbrmstr","date":"2013-10-27","format":false,"excerpt":"The #spiffy @dseverski gave me this posit the other day: Hey, @hrbrmstr, doughnut chart aside, how would you approach the first graph at http:\/\/t.co\/zjHoHRVOeo? Bump chart? Trend line? Leave as is?\u2014 David F. Severski (@dseverski) October 25, 2013 and, I obliged shortly thereafter, but figured I'd toss a post up\u2026","rel":"","context":"In &quot;Charts &amp; Graphs&quot;","block_context":{"text":"Charts &amp; Graphs","link":"https:\/\/rud.is\/b\/category\/charts-graphs\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2013\/10\/remake.png?fit=656%2C320&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2013\/10\/remake.png?fit=656%2C320&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/rud.is\/b\/wp-content\/uploads\/2013\/10\/remake.png?fit=656%2C320&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/12388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/comments?post=12388"}],"version-history":[{"count":0,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/posts\/12388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media\/12395"}],"wp:attachment":[{"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/media?parent=12388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/categories?post=12388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rud.is\/b\/wp-json\/wp\/v2\/tags?post=12388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}