<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Interactive on Visual Cinnamon</title><link>https://www.visualcinnamon.com/categories/interactive/</link><description>Recent content in Interactive on Visual Cinnamon</description><generator>Hugo</generator><language>en-us</language><lastBuildDate>Fri, 16 Oct 2026 12:30:53 +0200</lastBuildDate><atom:link href="https://www.visualcinnamon.com/categories/interactive/index.xml" rel="self" type="application/rss+xml"/><item><title>Top 39 Actors</title><link>https://www.visualcinnamon.com/portfolio/graffu-actors/</link><pubDate>Fri, 16 Oct 2026 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/graffu-actors/</guid><description>&lt;p&gt;I had the chance to create a fun, whimsical interactive visualization for Graffu, a platform dedicated to sharing stories focused on people of color. The article centers on &lt;strong&gt;showing the set of actors&lt;/strong&gt; the writer was most familiar with, sorted by &lt;strong&gt;how profitable the movies they starred in were&lt;/strong&gt;. I felt the topic was a wonderful fit for a more playful approach, so I leaned into a cinema theme—using pieces of popcorn to visualize each movie, paired with retro 3D glasses (for the color palette as well) and classic popcorn buckets. It turned the final article into an inviting, joyful piece that&amp;rsquo;s fun to read and explore.&lt;/p&gt;</description></item><item><title>RéciTAC</title><link>https://www.visualcinnamon.com/portfolio/recitac/</link><pubDate>Fri, 05 Jun 2026 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/recitac/</guid><description>&lt;p&gt;I was approached by the &lt;a href="https://www.ofi.ca/tca/about"&gt;Transforming Climate Action&lt;/a&gt; program, a team of researchers from four Canadian universities (Dalhousie University, Université du Québec à Rimouski, Université Laval, and Memorial University) working together to support just and equitable climate adaption, advance responsible marine carbon dioxide removal science and reduce critical uncertainty in the climate system. The team overseeing the massive project was looking for &lt;strong&gt;a visual way to show how the researchers were connected through collaborations&lt;/strong&gt; across various projects. The &lt;a href="https://transforming-climate-action.github.io/ReciTAC/"&gt;resulting network&lt;/a&gt; is an &lt;strong&gt;inviting and playful&lt;/strong&gt; way to &lt;strong&gt;encourage exploration and discovery&lt;/strong&gt; of the people and projects within the program. Visitors can hover and click on nodes to discover details, filter by discipline or project, and more.&lt;/p&gt;</description></item><item><title>Searching for Birds</title><link>https://www.visualcinnamon.com/portfolio/searching-for-birds/</link><pubDate>Thu, 12 Feb 2026 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/searching-for-birds/</guid><description>&lt;p&gt;&lt;a href="https://searchingforbirds.visualcinnamon.com"&gt;&amp;ldquo;Searching for Birds&amp;rdquo;&lt;/a&gt; is an &lt;strong&gt;interactive data storytelling project&lt;/strong&gt; created for &lt;strong&gt;Google Trends&lt;/strong&gt; that transforms millions of search queries into a visually rich exploration of how people connect with birds. Combining Google Trends data with various public datasets, I designed a &lt;strong&gt;fully bespoke visual language of illustrated birds, playful metaphors, and custom interactive charts&lt;/strong&gt; that invite users to explore patterns across nearly 700 species. It blends rigorous analysis, crafted illustration, and thoughtful UX to turn complex data into an engaging, memorable experience for both birders and anybody even remotely interested in birds.&lt;/p&gt;</description></item><item><title>Visualizing Neglect</title><link>https://www.visualcinnamon.com/portfolio/visualizing-neglect/</link><pubDate>Fri, 30 Jan 2026 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/visualizing-neglect/</guid><description>&lt;p&gt;&lt;a href="https://endfund.org/visualizing-neglect/"&gt;&amp;ldquo;Visualizing Neglect&amp;rdquo;&lt;/a&gt; is an &lt;strong&gt;interactive data-driven article&lt;/strong&gt; created for the The END Fund, &lt;strong&gt;exploring the global burden of neglected tropical diseases (NTDs)&lt;/strong&gt;. These diseases affect around 1.5 billion people worldwide, many of them children, causing lifelong physical, cognitive, and economic harm. Despite their enormous impact, NTDs remain underfunded and underreported—hence the term neglected. The project’s goal was to transform relatively dry public-health data into an experience that makes the scale of the problem, and the progress toward solving it, both understandable and emotionally resonant.&lt;/p&gt;</description></item><item><title>GitHub Commit History Timeline</title><link>https://www.visualcinnamon.com/portfolio/orca-github-commits/</link><pubDate>Tue, 28 Jan 2025 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/orca-github-commits/</guid><description>&lt;p&gt;Through the &lt;a href="https://builders.mozilla.org/"&gt;Builders program&lt;/a&gt; (previously MIECO) of Mozilla, I collaborated with Adam Bouhenguel to create &lt;strong&gt;an interactive visualization that shows the entire commit history of a GitHub repository&lt;/strong&gt;. It includes an option to highlight those contributors that have been awarded with ORCA. (The &lt;a href="https://future.mozilla.org/projects/open-retrospective-compensation-agreement/"&gt;Open Retrospective Compensation Agreement (ORCA)&lt;/a&gt;, conceived by Adam, is a simple agreement for businesses to share revenue with the open source contributors who make that revenue possible.) This visual is created to work for any GitHub repository and includes documentation on how to prepare the data and load the visual for other repositories than the default of &lt;em&gt;pdf.js&lt;/em&gt;.&lt;/p&gt;</description></item><item><title>The GitHub Top Contributor Network</title><link>https://www.visualcinnamon.com/portfolio/orca-top-contributors/</link><pubDate>Mon, 27 Jan 2025 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/orca-top-contributors/</guid><description>&lt;p&gt;Through the &lt;a href="https://builders.mozilla.org/"&gt;Builders program&lt;/a&gt; (previously MIECO) of Mozilla, I collaborated with Adam Bouhenguel, to create an elaborate visualization that &lt;strong&gt;shows the top contributors of any GitHub repository&lt;/strong&gt; and especially highlight those that have been awarded with ORCA. The &lt;a href="https://future.mozilla.org/projects/open-retrospective-compensation-agreement/"&gt;Open Retrospective Compensation Agreement (ORCA)&lt;/a&gt;, conceived by Adam, is a simple agreement for businesses to share revenue with the open source contributors who make that revenue possible. The network shows how top contributors to a certain repository are connected to the (other) repositories that they have made commits to, thereby &lt;strong&gt;showing how providing compensation to these contributors could have a ripple effect throughout the open source community&lt;/strong&gt;.&lt;/p&gt;</description></item><item><title>Gravitational Waves</title><link>https://www.visualcinnamon.com/portfolio/gravitational-waves/</link><pubDate>Tue, 26 Jan 2021 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/gravitational-waves/</guid><description>&lt;p&gt;First discovered in 2015, LIGO and Virgo have since detected 50 &lt;strong&gt;gravitational wave&lt;/strong&gt; events. These ripples through space time itself are caused by the &lt;strong&gt;violent collisions of black holes&lt;/strong&gt; (and/or neutron stars) dating back billions of years. To celebrate the release of the 2nd catalog of mergers &lt;em&gt;Science News&lt;/em&gt; asked me to &lt;strong&gt;create an interactive data visualization revealing each event&lt;/strong&gt; together with a companion for their printed magazine. We wanted to &lt;strong&gt;make the interactive part more special than a static visual&lt;/strong&gt;. The final visual includes &lt;strong&gt;sound&lt;/strong&gt; bites for some mergers. Hovering over a merger starts a tiny (physics based) &lt;strong&gt;animation&lt;/strong&gt; of the merger. Clicking on any merger shows a &lt;strong&gt;pop-up modal&lt;/strong&gt; with a lot more detailed information, such as a map of the sky that shows the rough location of where the gravitational waves originated from.&lt;/p&gt;</description></item><item><title>Why Do Cats and Dogs ...?</title><link>https://www.visualcinnamon.com/portfolio/why-do-cats-and-dogs/</link><pubDate>Mon, 15 Apr 2019 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/why-do-cats-and-dogs/</guid><description>&lt;p&gt;In &lt;strong&gt;Why do cats &amp;amp; dogs &amp;hellip;?&lt;/strong&gt; the viewer can explore the most popular questions asked on Google that start with &lt;em&gt;&amp;ldquo;why does/are/is my/a cat(s)/dog(s)&amp;rdquo;&lt;/em&gt;. &lt;strong&gt;What do people most want to know about these two pets?&lt;/strong&gt; What &amp;ldquo;strange&amp;rdquo; behavior is asked so often that it appears to actually be quite normal behavior perhaps. What&amp;rsquo;s up with cats and cucumbers, while dogs have a fascination with poop. This dataviz-driven exploration takes you through the most interesting and funny insights found in the data in several highly interactive visuals that work well on both desktop and mobile sizes.&lt;/p&gt;</description></item><item><title>alis_ OS</title><link>https://www.visualcinnamon.com/portfolio/alis-os/</link><pubDate>Thu, 31 Jan 2019 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/alis-os/</guid><description>&lt;p&gt;alis_ was looking for a way to &lt;strong&gt;visualize the services running&lt;/strong&gt; on their custom &lt;em&gt;alis_ OS&lt;/em&gt;. To reveal if the OS was running well, which tasks were failing. But also to show the dependencies of services having created new services and so on. And to have a clear differentiation between their domains. Finally, the final visual was going to be &lt;strong&gt;used both for management &lt;em&gt;and&lt;/em&gt; marketing purposes&lt;/strong&gt; and thus had to be really effective, still look good, and on brand. After a longer design phase to investigate what forms revealed the insights, I developed a custom chart for them to implement as a prototype into their systems.&lt;/p&gt;</description></item><item><title>Intangible Cultural Heritage</title><link>https://www.visualcinnamon.com/portfolio/intangible-cultural-heritage/</link><pubDate>Thu, 20 Dec 2018 11:15:47 +0100</pubDate><guid>https://www.visualcinnamon.com/portfolio/intangible-cultural-heritage/</guid><description>&lt;p&gt;Since 2003 UNESCO safeguards an ever growing list of our Intangible Cultural Heritage and these days there are almost 500 unique cultural elements inscribed on the list. Four interactive and unique visuals help people understand and discover their cultural heritage, and how this is connected to other cultures through connections such as regions, countries, World Heritage Sites and concepts such as &lt;em&gt;Family&lt;/em&gt;, &lt;em&gt;Trees&lt;/em&gt;, &lt;em&gt;Dance&lt;/em&gt;, and more.&lt;/p&gt;&#10;&lt;figure class='portfolio__img-full-width' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2018/intangible-cultural-heritage/intangible_cultural_heritage_laptop_detail_1.png' alt='The final &amp;#39;Constellation&amp;#39; visual revealing all connections between our ICH' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;figure class='portfolio__img-full-width' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2018/intangible-cultural-heritage/intangible_cultural_heritage_detail_2.png' alt='The visual that focuses on how all the ICH elements are connected to biomes' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;video class='portfolio__video_full_width' autoplay loop playsinline muted &gt;&lt;source src='https://www.visualcinnamon.com/img/portfolio/2018/intangible-cultural-heritage/intangible_cultural_heritage_laptop_animation.mp4' type="video/mp4"&gt;&lt;/video&gt;&#10;&lt;figure class='portfolio__img-full-width' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2018/intangible-cultural-heritage/intangible_cultural_heritage_detail_1.png' alt='The visual that focuses on the ICH elements under threat' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;figure class='portfolio__img-full-width' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2018/intangible-cultural-heritage/intangible_cultural_heritage_laptop_detail_2.png' alt='The visual that focuses on how all the ICH elements are connected to the 5 upper domains' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;div class="portfolio__highlight" style='background-color: #E55D12' &gt;&lt;p&gt;In March I was approached by UNESCO to help them visualize Intangible Cultural Heritage (ICH) in such as way as to help people understand the connections that exist between them. They had already been creating the data set of connections in the year before that.&lt;/p&gt;</description></item><item><title>Culture Mapping</title><link>https://www.visualcinnamon.com/portfolio/scenariodna/</link><pubDate>Wed, 19 Dec 2018 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/scenariodna/</guid><description>&lt;p&gt;The client, scenarioDNA, has a (patented) data-driven method that addresses the study of people and their ideologies over time. The best way to understand &lt;strong&gt;where ideas are going&lt;/strong&gt; is to see where they live in the context of near neighbors and contrasting ideologies. They had an existing interactive tool that let their users explore the data and insights. However, this tool was perceived as being too dense and complex to understand. ScenarioDNA asked me to create a new version that would hold true to their patented approach, encourage users to explore, and be understandable. I &lt;strong&gt;created a fully functional visual prototype&lt;/strong&gt;, based on their &lt;em&gt;Food &amp;amp; Beverage&lt;/em&gt; dataset, and design for the surrounding UX elements.&lt;/p&gt;</description></item><item><title>Figures in the Sky</title><link>https://www.visualcinnamon.com/portfolio/figures-in-the-stars/</link><pubDate>Tue, 17 Jul 2018 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/figures-in-the-stars/</guid><description>&lt;p&gt;No matter where you are on Earth, we all look up to the same sky during the dark nights. You might see a different section of it depending on your exact location, time &amp;amp; season, nevertheless the stars have fascinated humans across time and continents. Our own creativity combined with stories about local legends and myths have created a diverse set of different constellations. And even though the stars don&amp;rsquo;t change, people have found many different shapes in the same sky. This interactive visual story looks into &lt;strong&gt;the differences &amp;amp; similarities between the constellations that 28 cultures&lt;/strong&gt;, spread across time and across the World, &lt;strong&gt;have seen in the stars&lt;/strong&gt;.&lt;/p&gt;</description></item><item><title>An Ode to Cardcaptor Sakura</title><link>https://www.visualcinnamon.com/portfolio/cardcaptor-sakura/</link><pubDate>Sat, 23 Dec 2017 14:52:04 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/cardcaptor-sakura/</guid><description>&lt;p&gt;Cardcaptor Sakura is one of the most beautiful and adorable manga series ever created and this project is my ode to the wonderful series. CCS was written and illustrated by the manga artist group CLAMP between 1996 and 2000, but is still extremely popular today. &lt;strong&gt;This visualization brings together several different aspects of the series&lt;/strong&gt;; the main characters, the chapters, relationships and the wonderful cover art of each of the 50 chapters. By visually connecting these different aspects of Cardcaptor Sakura, fans can get a more nuanced understanding of the events that happen throughout the series.&lt;/p&gt;</description></item><item><title>Bussed out</title><link>https://www.visualcinnamon.com/portfolio/bussed-out/</link><pubDate>Sat, 23 Dec 2017 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/bussed-out/</guid><description>&lt;p&gt;&lt;strong&gt;How America moves its homeless&lt;/strong&gt; | Each year, US cities give thousands of homeless people one-way bus tickets out of town. An 18-month nationwide investigation by the Guardian reveals, for the first time, what really happens at journey’s end. There are several data visualizations in this article. Many of which are created in a &lt;em&gt;Scrollytelling&lt;/em&gt; style, where scrolling down the page will trigger animations in the data visualizations. Through these visualizations, video, photography, and of course, text, the article explains the impact of the homeless moving around the US. Both from the perspective of the homeless and the cities that are sending them away.&lt;/p&gt;</description></item><item><title>The Freedom of Expression</title><link>https://www.visualcinnamon.com/portfolio/the-freedom-of-expression/</link><pubDate>Thu, 14 Dec 2017 16:34:27 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/the-freedom-of-expression/</guid><description>&lt;p&gt;Article 19&amp;rsquo;s new Expression Agenda (XpA) metric gives a comprehensive picture of the state of freedom of expression and information internationally in 2016. The metric examines 350 aspects of democracy in 172 countries to provide an analysis that captures the challenges and complexity of the freedom expression across the world. By examining freedom of expression through this holistic approach, a far deeper understanding can be achieved of the benefits, risks and global trends that impact on the ability of everyone to raise their voice and be heard, regardless of sex, gender, ethnicity, race or religion.&lt;/p&gt;</description></item><item><title>Beautiful in English</title><link>https://www.visualcinnamon.com/portfolio/beautiful-in-english/</link><pubDate>Wed, 24 May 2017 09:43:48 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/beautiful-in-english/</guid><description>&lt;p&gt;&lt;strong&gt;Beautiful in English&lt;/strong&gt; let&amp;rsquo;s the viewer dive into the most popular words translated into English through Google Translate. It focuses specifically on nouns and adjectives. From the most translated word being &lt;em&gt;beautiful&lt;/em&gt;, to the most translated word per language, the top 10 per language and finally the similarities between all languages. See which languages seem related through the words they both translate. But also how culture defines unique words, such a &lt;em&gt;gentleman&lt;/em&gt; for the French.&lt;/p&gt;</description></item><item><title>Hacking the Visual Norm</title><link>https://www.visualcinnamon.com/2017/03/hacking-the-visual-norm/</link><pubDate>Sat, 18 Mar 2017 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2017/03/hacking-the-visual-norm/</guid><description>&lt;p&gt;I created the &lt;em&gt;Hacking the Visual Norm&lt;/em&gt; talk for the &lt;a href="https://fronteers.nl/congres/2016"&gt;Fronteers Conference&lt;/a&gt;, held in Amsterdam on October 6 &amp;amp; 7th 2016. During the talk I try to &lt;strong&gt;show several ways that you can go beyond the norm in the visualization of data&lt;/strong&gt;. I use examples from both a business environment (things I made for &lt;a href="https://www.adyen.com/"&gt;Adyen&lt;/a&gt; or Deloitte) and personal projects. It revolves around &lt;strong&gt;Combining, Re-using, Designing &amp;amp; Hacking&lt;/strong&gt; your visuals into something more effective and engaging.&lt;/p&gt;</description></item><item><title>All the Fights in Dragon Ball Z</title><link>https://www.visualcinnamon.com/portfolio/fights-dragon-ball-z/</link><pubDate>Tue, 31 Jan 2017 22:20:44 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/fights-dragon-ball-z/</guid><description>&lt;p&gt;Dive into all 200 fights that happened during Dragon Ball Z. Starting with the first fight between Picollo and Raditz, each fight is represented by a cluster of circles. Swooshing lines representing a particular character makes it easier to understand their fighting patterns. By hovering over a fight you get more insight into the what happened and who was fighting whom. Seeing the overview of all the fights in this manner reveals interesting insights that might&amp;rsquo;ve been hidden otherwise. Such as Goku, the main protagonist. He appears in most fights overall, however he&amp;rsquo;s still missing in action for very large periods of time, due to being dead (twice) or sick/recovering from injuries.&lt;/p&gt;</description></item><item><title>Royal Constellations</title><link>https://www.visualcinnamon.com/portfolio/royal-constellations/</link><pubDate>Wed, 12 Oct 2016 22:19:30 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/royal-constellations/</guid><description>&lt;p&gt;Royal &amp;amp; aristocratic families are known for their fondness of marrying within their own clique. This leads to very interesting &amp;amp; entangled family trees which the &lt;em&gt;Royal Constellations&lt;/em&gt; visual tries to convey. Dive into the web of family relations to see how all 10 of the current hereditary &lt;strong&gt;royal leaders of Europe can be connected to each other through their ancestors&lt;/strong&gt;. By hovering and clicking on one of the 3000 &lt;em&gt;stars&lt;/em&gt;, each of which represent a person, the web reveals aspects such as &lt;em&gt;6-degrees of separation&lt;/em&gt; and &lt;em&gt;shortest paths&lt;/em&gt; between two people.&lt;/p&gt;</description></item><item><title>Olympic feathers</title><link>https://www.visualcinnamon.com/portfolio/olympic-feathers/</link><pubDate>Sat, 13 Aug 2016 15:30:32 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/olympic-feathers/</guid><description>&lt;p&gt;&lt;strong&gt;More than 5000 Olympic events have had a winner in the Summer Olympics since the first games of 1896&lt;/strong&gt;. In &lt;em&gt;Olympic Feathers&lt;/em&gt; you can investigate how each of these medals has been won in the 56 different sporting disciplines that have competed at the games, of which 41 are still held at Rio 2016. To see patterns appear in certain sports, such as weightlifting going from mostly European medals to Asian countries during the recent Olympic Games, or get a sense of the number of events that each sport has and when women events were finally added to each sport. &lt;strong&gt;This visualization shows the entire history&lt;/strong&gt; and lets the viewer decide what they want to focus on.&lt;/p&gt;</description></item><item><title>The Words in the Lord of the Rings</title><link>https://www.visualcinnamon.com/portfolio/words-lord-of-the-rings/</link><pubDate>Sun, 31 Jul 2016 13:07:30 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/words-lord-of-the-rings/</guid><description>&lt;p&gt;In more than 11 hours of the &lt;em&gt;Lord of the Rings&lt;/em&gt; trilogy all characters combined speak approximately 32,000 words. The 9 members of the Fellowship alone take up about 17,000 of these words, a bit more than half. In this visualization you can find out &lt;strong&gt;how many words a member has spoken at each different location throughout the trilogy&lt;/strong&gt;. Did you realize how much Sam truly spoke. Or that Legolas said even less than Boromir!&lt;/p&gt;</description></item><item><title>Brushable and interactive bar chart in d3.js</title><link>https://www.visualcinnamon.com/2016/07/brush-bar-chart-d3/</link><pubDate>Mon, 25 Jul 2016 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2016/07/brush-bar-chart-d3/</guid><description>&lt;p&gt;I wanted to share something I recently build with d3.js which might be useful for other people as well; &lt;strong&gt;a bar chart in which you can &amp;ldquo;brush&amp;rdquo;&lt;/strong&gt;. Handy for when you have a lot of categories/bars to show with limited space, but you don&amp;rsquo;t want to only show the top X. By using the &lt;em&gt;brush&lt;/em&gt; technique, &lt;strong&gt;you give the choice to the user&lt;/strong&gt;. They can decide which portion of the bars to see, only the top 5, bottom 10, 20 in the middle, or all at once.&lt;/p&gt;</description></item><item><title>Data-based orientations for gradients in a d3.js chord diagram</title><link>https://www.visualcinnamon.com/2016/06/orientation-gradient-d3-chord-diagram/</link><pubDate>Mon, 13 Jun 2016 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2016/06/orientation-gradient-d3-chord-diagram/</guid><description>&lt;p&gt;In this blog, I&amp;rsquo;ll show you &lt;strong&gt;how to add a color gradient to the chords of a d3.js Chord Diagram&lt;/strong&gt;. This comes in handy when there is no net difference in the chords. But you can apply the technique to any gradient that you want to orient based on data. We&amp;rsquo;re going to look at the collaborations between Avengers. With all those cameo&amp;rsquo;s happening in the MCU, I wanted to know how often two Avengers had appeared in a movie together. This results in a symmetrical dataset since, if Thor appeared in a movie together with Hawkeye, the reverse is true as well.&lt;/p&gt;</description></item><item><title>Animate a gradient to imitate a flow in a d3.js</title><link>https://www.visualcinnamon.com/2016/05/animate-gradient-imitate-flow-d3/</link><pubDate>Mon, 16 May 2016 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2016/05/animate-gradient-imitate-flow-d3/</guid><description>&lt;p&gt;We&amp;rsquo;re picking up right where I left you in my blog on &lt;a href="https://www.visualcinnamon.com/2015/08/stretched-chord/"&gt;Hacking a Chord diagram to visualize a Flow&lt;/a&gt; where I turned a Chord Diagram into a more circular flow diagram. Even with the chords now having been turned into a &amp;ldquo;bat-plot&amp;rdquo; I still wanted to emphasize more that we were dealing with a flow from left to right, from Education to Occupation. So, I thought, why not try to use a gradient and animate a movement/flow towards the right.&lt;/p&gt;</description></item><item><title>Learnings from a d3.js addict on starting with canvas</title><link>https://www.visualcinnamon.com/2015/11/learnings-from-a-d3-js-addict-on-starting-with-canvas/</link><pubDate>Mon, 16 Nov 2015 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2015/11/learnings-from-a-d3-js-addict-on-starting-with-canvas/</guid><description>&lt;p&gt;In this blog I&amp;rsquo;d like to take you through my learnings from last week when I finally started with canvas. I hope that, after reading this blog, I will have convinced you that canvas is a really good visualization option if you need better performance than d3.js can give you and that &lt;strong&gt;it&amp;rsquo;s actually not that difficult to learn canvas&lt;/strong&gt;.&lt;/p&gt;</description></item><item><title>A different look for the d3.js radar chart</title><link>https://www.visualcinnamon.com/2015/10/different-look-d3-radar-chart/</link><pubDate>Mon, 19 Oct 2015 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2015/10/different-look-d3-radar-chart/</guid><description>&lt;p&gt;A bit more than 2 years ago I wrote a small blog about &lt;a href="https://www.visualcinnamon.com/2013/09/making-d3-radar-chart-look-bit-better/"&gt;making the d3.js radar chart look a little better&lt;/a&gt;. I know that opinions are diverse about the usefulness of these types of charts. But I can&amp;rsquo;t deny that I personally have a love for circular charts. I even keep a Pinterest board specifically for circular data visualizations.&lt;/p&gt;&#10;&lt;p&gt;Since that chart in the blog from over 2 years ago I haven&amp;rsquo;t created another radar chart, until a small project came by right before the start of the summer. And apparently, it was about time for another &lt;strong&gt;redesign&lt;/strong&gt;.&lt;/p&gt;</description></item><item><title>Hacking a chord diagram to visualize a flow</title><link>https://www.visualcinnamon.com/2015/08/stretched-chord/</link><pubDate>Fri, 28 Aug 2015 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2015/08/stretched-chord/</guid><description>&lt;p&gt;In this blog post I&amp;rsquo;ll explain how you can hack a chord diagram to shape it into a more &lt;strong&gt;circular looking sankey-like flow chart&lt;/strong&gt;. Why not just take a regular sankey to visualize the flow? Well, the visualization was meant for use in the media to engage the viewers. Therefore, I wanted to create something visually different. In the end it appears that I just wanted to challenge myself and dive into the d3 source code (for the first time).&lt;/p&gt;</description></item><item><title>Using a d3 voronoi grid to improve a chart's interactive experience</title><link>https://www.visualcinnamon.com/2015/07/voronoi/</link><pubDate>Thu, 02 Jul 2015 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2015/07/voronoi/</guid><description>&lt;p&gt;In this tutorial, I&amp;rsquo;ll show you how you can add an invisible voronoi grid over a scatterplot which will improve the experience of the viewer when hovering over the plot. And I&amp;rsquo;ve actually updated this tutorial in August 2016 when Franck Lebeau came with a great improvement on the final step.&lt;/p&gt;</description></item><item><title>The top 10 babynames</title><link>https://www.visualcinnamon.com/portfolio/babynames/</link><pubDate>Sun, 24 May 2015 16:24:54 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/babynames/</guid><description>&lt;p&gt;Each year almost 4 million babies are born in the US. Although thinking of 4 million unique names is pretty difficult, theoretically it is not impossible. Nonetheless, there are always many babies given the same name. For example, in 2013 more than 18,000 boys were named Noah and more than 21,000 girls named Sophia, the most popular boy and girl name of that year. &lt;em&gt;The top 10 baby names since 1880&lt;/em&gt; shows the &lt;strong&gt;top 10 names given to babies per year and per gender since 1880&lt;/strong&gt;. You can investigate any of the ±50 and 90 unique boy and girl names, respectively, that have entered the top 10 in the last 135 years and &lt;strong&gt;see their rise and fall&lt;/strong&gt;.&lt;/p&gt;</description></item><item><title>Visualizing Millions of People on the Move</title><link>https://www.visualcinnamon.com/portfolio/urbanization/</link><pubDate>Tue, 31 Mar 2015 17:34:47 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/urbanization/</guid><description>&lt;p&gt;Societies are shifting from having a rural nature to a more and more urban nature. We face the opportunity to set the course of urbanization on a more sustainable and equitable path. This visualization is based on data on urbanization in East Asia between 2000 and 2010 collected by the World Bank using Satellite images and population models. It aims to &lt;strong&gt;provide you with a clear view on the magnitude of changes that can happen in only one decade&lt;/strong&gt; and challenges you to think about the impact on the following years.&lt;/p&gt;</description></item><item><title>The Top 2000 songs distributed by year of release</title><link>https://www.visualcinnamon.com/2015/01/the-top-2000-equalizer-songs/</link><pubDate>Sat, 03 Jan 2015 00:00:00 +0000</pubDate><guid>https://www.visualcinnamon.com/2015/01/the-top-2000-equalizer-songs/</guid><description>&lt;p&gt;At the end of the year there are several traditions, like presents and Christmas trees. For me, and quite a few other Dutch people, there are two radio related traditions. In the week before Christmas my radio is almost always on to listen to Serious Request (a charity event), and from Christmas day to 23:59 on New Year&amp;rsquo;s Eve the radio is still on 24/7, but now to listen to the Top 2000.&lt;/p&gt;</description></item><item><title>Switching between phone brands</title><link>https://www.visualcinnamon.com/portfolio/phone-brand-switching/</link><pubDate>Sat, 13 Dec 2014 17:40:45 +0000</pubDate><guid>https://www.visualcinnamon.com/portfolio/phone-brand-switching/</guid><description>&lt;p&gt;For the Dutch version of the Deloitte Global Mobile Consumer Survey, Deloitte asked 2000 residents of the Netherlands about their &lt;strong&gt;mobile phone behavior&lt;/strong&gt;. The respondents gave information about the brand of their current main phone, and the brand of their previous main phone, and their answers are visualized in this data story.&lt;/p&gt;&#10;&lt;figure class='portfolio__img-full-width' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2014/phone-brand-switching/phone_brand_switching_laptop_detail_1.png' alt='Explaining what the &amp;#39;hills&amp;#39; mean' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;div class="portfolio__award" style='background-color: #10218b' &gt;&#10; &lt;a href='http://www.informationisbeautifulawards.com/showcase/754-phone-brand-switching' &gt;&#10; &lt;p class="note script"&gt;&lt;span style='color: #10218b' &gt;award&lt;/span&gt;&lt;/p&gt;&#10; &lt;h4&gt;Information is Beautiful Awards&lt;/h4&gt;&#10; &amp;ldquo;Switching between phone brands&amp;rdquo; was shortlisted in the &lt;em&gt;Data journalism&lt;/em&gt; category of 2015&amp;rsquo;s Kantar Information is Beautiful awards.&#10; &lt;/a&gt;&#10;&lt;/div&gt;&#10;&lt;div class='portfolio__side_award_image' style='background-image: url(/img/portfolio/2014/phone-brand-switching/iib_shortlist_badge.png);'&gt;&#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2014/phone-brand-switching/iib_shortlist_badge.png' style="visibility: hidden;" /&gt;&#10;&lt;/div&gt;&#10;&lt;figure class='portfolio__img-full-width' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2014/phone-brand-switching/phone_brand_switching_detail_1.png' alt='Hovering over a brand arc highlights all the chords connected to it' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;figure class='portfolio__img-half-width-left' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2014/phone-brand-switching/phone_brand_switching_detail_2.png' alt='The scene after all outer arcs have been revealed' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;figure class='portfolio__img-half-width-right' &gt;&#10; &#10; &lt;img src='https://www.visualcinnamon.com/img/portfolio/2014/phone-brand-switching/phone_brand_switching_detail_3.png' alt='Explaining what the &amp;#39;hills&amp;#39; mean' loading="lazy"&gt;&#10; &#10; &#10;&lt;/figure&gt;&#10;&#10;&lt;div class="portfolio__highlight" style='background-color: #10218b' &gt;&lt;p&gt;After viewing a talk by Michael Freeman on the Strata conference in Barcelona at the end of November 2014 on &lt;em&gt;Storytelling with data&lt;/em&gt; I was inspired to try and tackle one of the visualizations I have most trouble with in terms of explaining to an audience; a &lt;em&gt;chord diagram&lt;/em&gt;. I set up the chord diagram piece by piece, explaining what each section means and how it all comes together to tell the story about phone brand switching.&lt;/p&gt;</description></item></channel></rss>