Examples | Flourish | Data Visualization & Storytelling

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content="Browse a collection of stunning data visualization examples made with Flourish. See how interactive visuals bring data to life – perfect for any project or presentation.">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@f_l_o_u_r_i_s_h"> <meta name="twitter:image" content="https://flourish.studio/images/generic-meta-tag.png"> <meta name="twitter:title" content="Examples"> <meta name="twitter:description" content="Browse a collection of stunning data visualization examples made with Flourish. See how interactive visuals bring data to life – perfect for any project or presentation."> <meta name="twitter:creator" content="@f_l_o_u_r_i_s_h"> <meta property="og:title" content="Examples"> <meta property="og:image" content="https://flourish.studio/images/generic-meta-tag.png"> <meta property="og:type" content="website"> <meta property="og:description" content="Browse a collection of stunning data visualization examples made with Flourish. See how interactive visuals bring data to life – perfect for any project or presentation."> <meta property="og:site_name" content="Flourish"> <meta property="fb:app_id" content="102649676918117"> <title>Examples | Flourish | Data Visualization & Storytelling</title> <script src="https://cdn-au.onetrust.com/consent/c7f22011-a5da-4a30-8750-4cb18703c00d/OtAutoBlock.js" type="text/javascript"></script> <script src="https://cdn-au.onetrust.com/consent/c7f22011-a5da-4a30-8750-4cb18703c00d/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="c7f22011-a5da-4a30-8750-4cb18703c00d"></script> <script type="text/javascript">function OptanonWrapper() { }</script> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-44635456-19', 'auto'); ga('send', 'pageview'); // If called, calls the callback immediately. // If not called within `timeout` milliseconds, calls callback. // Alsp prevents double-calling. function createFunctionWithTimeout(callback, timeout) { var called = false; function fn() { if (!called) { called = true; callback(); } } setTimeout(fn, timeout || 1000); // default is 1000ms return fn; } var trackOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': createFunctionWithTimeout(function() { document.location = url; }) }); }, trackEmailClick = function(address_type) { ga('send', 'event', { eventCategory: 'click', eventAction: 'email', eventLabel: address_type }); }, trackFormSubmit = function(label, method, path, params) { ga('send', 'event', { eventCategory: 'outbound', eventAction: 'click', eventLabel: label, hitCallback: createFunctionWithTimeout(function() { params = params || {}; // params is optional var form = document.createElement('form'); form.setAttribute('method', method); form.setAttribute('action', path); for (var key in params) { if (params.hasOwnProperty(key)) { var hiddenField = document.createElement('input'); hiddenField.setAttribute('type', 'hidden'); hiddenField.setAttribute('name', key); hiddenField.setAttribute('value', params[key]); form.appendChild(hiddenField); } } document.body.appendChild(form); form.submit(); }) }); }; </script> <script src="https://www.googleoptimize.com/optimize.js?id=OPT-MLMV2BQ"></script>  <script src="/js/d3-dispatch.js"></script> <script src="/js/d3-interpolate.js"></script> <script src="/js/d3-selection.js"></script> <script src="/js/d3-timer.js"></script> <script src="/js/d3-transition.js"></script> <link rel="alternate" href="/atom.xml" title="Flourish" type="application/atom+xml"> <link href="/highlight.css?3e9f1d3cf8a99ebe7f3f230bae0e7d41" rel="stylesheet"> <link href="/style.css?20112024" rel="stylesheet">  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PBJJP4J');</script>  <meta name="generator" content="Hexo 6.2.0"></head> <body onclick class="is-static">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PBJJP4J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="row header not-logged-in"> <div class="row-inner"> <a href="/" class="logo clickable menu-item"> <img data-target="home" id="logo" src="/images/Flourish_Logo_Black_small.png" alt="Flourish logo"> </a> <div class="menu-holder"> <h2 class="hamburger menu-item mobile-nav"><i class="fa fa-bars"></i><i class="fa fa-close"></i></h2> <div class="menu desktop-nav"> <div class="dropdown-menu sub-menu" id="main-menu"> <div class="dropdown-menu-item-wrapper"> <a class="dropdown-menu-item" href="/examples"><h1 data-section="examples" class="menu-item">Examples</h1></a> </div> <div class="dropdown-menu-item-wrapper"> <div class="dropdown-menu-item has-dropdown" aria-haspopup="true" href="/solutions"><h1 data-section="solutions" class="menu-item">Solutions</h1></div> <div class="dropdown-menu-contents"> <div class="dropdown-menu-section"> <div class="menu-section-header"><strong>Industry</strong></div> <a href="/solutions/financial-services">Financial Services</a> <a href="/solutions/professional-services">Professional Services</a> <a href="/solutions/newsrooms">Newsrooms</a> <a href="/solutions/marketing">Marketing</a> <a href="/solutions/not-for-profit">Nonprofits</a> <a href="/solutions/government">Government</a> <a href="/solutions/education">Education</a> </div> <div class="dropdown-menu-section"> <div class="menu-section-header"><strong>Use cases</strong></div> <a href="/resources/elections">Elections and polling</a> <a href="/resources/sports">Sports and competitions</a> <a href="/visualisations/maps">Maps</a> <a href="/resources/visualize-survey-data">Survey responses</a> <a href="/visualisations/scrollytelling">Scrollytelling</a> </div> </div> </div> <div class="dropdown-menu-item-wrapper"> <div class="dropdown-menu-item has-dropdown" aria-haspopup="true" href="/resources"><h1 data-section="resources" class="menu-item">Resources</h1></div> <div class="dropdown-menu-contents"> <div class="dropdown-menu-section"> <div class="menu-section-header"><strong>Explore</strong></div> <a href="/blog">Blog</a> <a href="/visualisations">Chart guides</a> <a href="/whats-new">What's new</a> </div> <div class="dropdown-menu-section"> <div class="menu-section-header"><strong>Learn</strong></div> <a href="https://helpcenter.flourish.studio/hc/en-us" target="_blank">Help docs</a> <a href="/resources/webinar">Webinars</a> <a href="/resources/training">Training</a> <a href="/resources/datasets">Datasets</a> <a href="/accessibility">Accessibility</a> </div> <div class="dropdown-menu-section"> <div class="menu-section-header"><strong>Develop</strong></div> <a href="/experts">Experts network</a> <a href="https://developers.flourish.studio/" target="_blank">Flourish for developers</a> </div> </div> </div> <div class="dropdown-menu-item-wrapper"> <a class="dropdown-menu-item" href="/pricing"><h1 data-section="pricing" class="menu-item">Pricing</h1></a> </div> </div> <div id="account-menu"> <a class="btn log-in-link" target="_blank" rel="noopener" href="https://app.flourish.studio/login" onclick="trackOutboundLink('https://app.flourish.studio/login'); return false;">Log in</a> <a class="btn sign-up-link" target="_blank" rel="noopener" href="https://app.flourish.studio/register" onclick="trackOutboundLink('https://app.flourish.studio/register'); return false;">Sign up</a> </div> </div> </div> </div> </div> <div class="content"> <div class="row static"> <div class="page page-examples" id="page-examples"> <div class="page-header"> <div class="row-inner"> <h1>Examples</h1> <h2>Explore dynamic templates and interactive visuals that bring your own data stories to life</h2> </div> </div> <div class="page-content-container"> <div class="row-inner"> <script> window.Flourish = {}; </script> <script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script> <div class="scroll-note"> <p class="scroll-note-inner">Scroll to see more <i class="fa fa-arrow-right"></i></p> </div> <div class="slideshow"><div class="slideshow-thumbnails-outer"><ul class="slideshow-thumbnails card-container"><li class="card small selected" data-preview-id="story/1767962"> <div class="card-photo" style="background-image: url(/images/examples/bar-chart-race-new.png)"></div> <div class="card-body"> <p class="card-title">Bar Chart Race</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-bar-chart-race"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/1768225"> <div class="card-photo" style="background-image: url(/images/examples/magic-charts.png)"></div> <div class="card-body"> <p class="card-title">Magic charts</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-line-bar-pie"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/1774037"> <div class="card-photo" style="background-image: url(/images/examples/3d-maps.png)"></div> <div class="card-body"> <p class="card-title">Animated 3D Maps</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-time-map"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/1767986"> <div class="card-photo" style="background-image: url(/images/examples/survey-new.png)"></div> <div class="card-body"> <p class="card-title">Survey data</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-survey"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small upgrade-btn" data-preview-id="story/1775472"> <div class="card-photo" style="background-image: url(/images/examples/timelines.png); border-top-width: 1.5px; border-top-color: #EAA22D;"></div> <div class="card-body"> <p class="card-title">Interactive timelines</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-timeline"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/84612"> <div class="card-photo" style="background-image: url(/images/examples/scatter-new.png)"></div> <div class="card-body"> <p class="card-title">Violins and beeswarms</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-scatter"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/14884"> <div class="card-photo" style="background-image: url(/images/examples/hierarchy-new.png)"></div> <div class="card-body"> <p class="card-title">Zoomable hierarchies</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-hierarchy"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/1768944"> <div class="card-photo" style="background-image: url(/images/blog/marker-map.jpg)"></div> <div class="card-body"> <p class="card-title">Story maps</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-3d-marker-map"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/1773640"> <div class="card-photo" style="background-image: url(/images/examples/line-chart-race.png)"></div> <div class="card-body"> <p class="card-title">Line Chart Race</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-horserace"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small upgrade-btn" data-preview-id="story/1774113"> <div class="card-photo" style="background-image: url(/images/examples/data-explorer-banner.png); border-top-width: 1.5px; border-top-color: #EAA22D;"></div> <div class="card-body"> <p class="card-title">Data Explorer</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-data-explorer"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/1769068"> <div class="card-photo" style="background-image: url(/images/examples/chords-new.png)"></div> <div class="card-body"> <p class="card-title">Chord diagrams</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-chord-diagram"><i class="fa fa-external-link"></i> Make your own</a> </div> </li>  <li class="card small upgrade-btn" data-preview-id="story/1775285"> <div class="card-photo" style="background-image: url(/images/examples/marimekko.png); border-top-width: 1.5px; border-top-color: #EAA22D;"></div> <div class="card-body"> <p class="card-title">Marimekko charts</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-marimekko"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="visualisation/12091296"> <div class="card-photo" style="background-image: url(/images/examples/3d-map.png)"></div> <div class="card-body"> <p class="card-title">Mapping events</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-time-map"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/1770112"> <div class="card-photo" style="background-image: url(/images/examples/word-cloud.png)"></div> <div class="card-body"> <p class="card-title">Word clouds</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-word-cloud"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> <li class="card small" data-preview-id="story/23224"> <div class="card-photo" style="background-image: url(/images/examples/globe.jpg)"></div> <div class="card-body"> <p class="card-title">Connections Globe</p> </div> <div class="card-actions"> <a class="btn primary small" target="_blank" rel="noopener" href="https://app.flourish.studio/templates#template-connections-globe"><i class="fa fa-external-link"></i> Make your own</a> </div> </li> </ul></div><div class="slideshow-preview"><div class="flourish-embed"></div></div></div> <h2>More examples and templates</h2> <ul class="content-examples card-container masonry"> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/visualisations/scrollytelling"> <div class="card-photo" style="background-image: url(/images/examples/scrollytelling-example.png)"></div> <div class="card-body"> <p class="card-title text-bold">Scrollytelling</p> <p class="card-subtitle">Create immersive digital experiences and bring your data to life with our no-code scrollytelling solution</p> </div> </a></li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/data-explorer-template/"> <div class="card-photo" style="background-image: url(/images/examples/data-explorer.png)"></div> <div class="card-body"> <p class="card-title text-bold">Data Explorer</p> <p class="card-subtitle">Morph between various chart and map types to create rich and compelling data stories</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="/visualisations/sankey-charts"> <div class="card-photo" style="background-image: url(/images/examples/sankey.jpg)"></div> <div class="card-body"> <p class="card-title text-bold">Animated flows</p> <p class="card-subtitle">Responsive, interactive Sankey diagrams made easy</p> </div> </a></li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/introducing-marimekko-charts/"> <div class="card-photo" style="background-image: url(/images/blog/marimekko-banner.png)"></div> <div class="card-body"> <p class="card-title text-bold">Marimekko charts</p> <p class="card-subtitle">Compare magnitude and part-to-whole with our Marimekko template</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/masters-john-snow/"> <div class="card-photo" style="background-image: url(/images/examples/cholera-master.png)"></div> <div class="card-body"> <p class="card-title text-bold">John Snow's cholera map</p> <p class="card-subtitle">We recreated a pivotal project in the history of mapping and epidemiology – see how we did it here</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/audio-talkie-visualisation-data-stories/"> <div class="card-photo" style="background-image: url(/images/blog/play-button.png)"></div> <div class="card-body"> <p class="card-title text-bold">Audio-driven storytelling</p> <p class="card-subtitle">Enhance your data story with "Talkies" – interactive presentations with audio</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://demos.flourish.studio/namehistory/"> <div class="card-photo" style="background-image: url(/images/examples/namehistory.jpg)"></div> <div class="card-body"> <p class="card-title text-bold">Name history</p> <p class="card-subtitle">Explore 150 years of baby names in the UK. Made with the Flourish API</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/airbnb-istanbul/"> <div class="card-photo" style="background-image: url(/images/blog/point-map.jpg)"></div> <div class="card-body"> <p class="card-title text-bold">Interactive map stories</p> <p class="card-subtitle">See how we visualized the jaw-dropping rise of Airbnb in Istanbul</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/resources/elections/"> <div class="card-photo" style="background-image: url(/images/examples/elections-2022.png)"></div> <div class="card-body"> <p class="card-title text-bold">Elections data</p> <p class="card-subtitle">Learn how you can bring elections data to life with interactive graphics</p> </div> </a></li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/line-chart-race-updates/"> <div class="card-photo" style="background-image: url(/images/examples/linechartrace.jpg)"></div> <div class="card-body"> <p class="card-title text-bold">Plotting competitors</p> <p class="card-subtitle">A “racing” line chart template with images and ranks view</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/responsive-interactive-timeline/"> <div class="card-photo" style="background-image: url(/images/examples/timeline.png)"></div> <div class="card-body"> <p class="card-title text-bold">Interactive timelines</p> <p class="card-subtitle">Visualize key events with responsive timelines</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/introducing-spike-maps/"> <div class="card-photo" style="background-image: url(/images/examples/spike-maps.png)"></div> <div class="card-body"> <p class="card-title text-bold">Spike maps</p> <p class="card-subtitle">Our powerful Projection Map template allows you to plot data as circles or spikes</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/animated-gauge-visualization/"> <div class="card-photo" style="background-image: url(/images/blog/gauge-banner.png)"></div> <div class="card-body"> <p class="card-title text-bold">Interactive gauge visualizations</p> <p class="card-subtitle">Track everything from KPIs to elections data with our Gauge template</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/love-island-data-analysis/"> <div class="card-photo" style="background-image: url(/images/examples/love-island.png)"></div> <div class="card-body"> <p class="card-title text-bold">Dating shows: an analysis</p> <p class="card-subtitle">We dived deep into Love Island statistics to learn how long Reality TV couples last</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/all-i-want-christmas-mariah-billboard-data/"> <div class="card-photo" style="background-image: url(/images/blog/mariah-banner.png)"></div> <div class="card-body"> <p class="card-title text-bold">All I want for Christmas… is data 🎵</p> <p class="card-subtitle">We visualized the search trends behind the most streamed Christmas song</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/masters-web-dubois/"> <div class="card-photo" style="background-image: url(/images/examples/dubois-master.png)"></div> <div class="card-body"> <p class="card-title text-bold">19th century graphs – with Flourish!</p> <p class="card-subtitle">We went back in time and recreated W.E.B. Du Bois’ data portraits from the late 19th century</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/resources/sports/"> <div class="card-photo" style="background-image: url(/images/blog/world-cup-banner.png)"></div> <div class="card-body"> <p class="card-title text-bold">Visualize football and sports data</p> <p class="card-subtitle">See creative data visualization ideas for your EUROs, World Cup and Olympic Games coverage </p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/choosing-the-right-map-type-for-your-data/"> <div class="card-photo" style="background-image: url(/images/examples/map-types.png)"></div> <div class="card-body"> <p class="card-title text-bold">How to choose the right map?</p> <p class="card-subtitle">From 3D to symbol maps, use our interactive map templates to visualize geospatial data</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="/covid/"> <div class="card-photo" style="background-image: url(/images/examples/covid.png)"></div> <div class="card-body"> <p class="card-title text-bold">COVID-19 graphics</p> <p class="card-subtitle">A selection of live-updating graphics tracking COVID-19</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/visualizing-data-15th-century-bookshop/"> <div class="card-photo" style="background-image: url(/images/blog/oxford-book-banner.png)"></div> <div class="card-body"> <p class="card-title text-bold">Exploring a 15th century bookshop</p> <p class="card-subtitle">A collaborative project with the University of Oxford analyzing the data behind 13,000 books</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/visualizing-wimbledon-2022/"> <div class="card-photo" style="background-image: url(/images/examples/wimbledon.png)"></div> <div class="card-body"> <p class="card-title text-bold">Wimbledon in eight charts</p> <p class="card-subtitle">From tie breaks to ticket costs, see our visual analysis of the Wimbledon tournament</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/3d-map-heatmap/"> <div class="card-photo" style="background-image: url(/images/examples/heatmaps.png)"></div> <div class="card-body"> <p class="card-title text-bold">Animated 3D Maps</p> <p class="card-subtitle">Heatmaps? Extruded regions? Line layer? The 3D Map template has them all</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/visualizing-our-2022-reads/"> <div class="card-photo" style="background-image: url(/images/blog/books-blog-banner.png)"></div> <div class="card-body"> <p class="card-title text-bold">Visualizing some of our reads</p> <p class="card-subtitle">We combined our love for reading with our passion for data visualization – check it out!</p> </div> </a> </li> <li class="card clickable"> <a target="_blank" href="https://flourish.studio/blog/cop26-conference-visualization/"> <div class="card-photo" style="background-image: url(/images/examples/cop-26.png)"></div> <div class="card-body"> <p class="card-title text-bold">Visualizing COP26 climate conference</p> <p class="card-subtitle">See how our users covered the UN climate change conference</p> </div> </a> </li> </ul>          <script> Flourish.addAnalyticsListener(function (event) { var action = event.action; // Set a category for the event so you can identify that this was an engagement // with a Flourish var category = "examples_scroll"; // Set a label so you can identify what was engaged with. var label = event.story_id ? ("Flourish story " + event.story_id) : ("Flourish visualisation " + event.visualisation_id); var parameters = { hitType: 'event', eventCategory: category, eventLabel: label, eventAction: action }; // Copy everything apart from the action name to the parameters for (var key of Object.keys(event)) { if (event.hasOwnProperty(key) && key !== "action") { parameters[key] = event[key]; } } // Send the event to Google Analytics ga('send', parameters); }) </script>   </div> </div> </div> </div> </div> <div class="row footer"> <div class="row-contents"> <div class="row-inner"> <div class="footer-container">  <div class="footer-section company"> <h4>Company</h4> <ul> <li><a href="/company">About us</a></li> <li><a target="_blank" rel="noopener" href="https://www.lifeatcanva.com/en/locations/united-kingdom/">Careers</a></li> <li><a href="/security">Security</a></li> <li><a href="/pricing">Pricing</a></li> <li><a href="/terms">Terms</a></li> <li><a href="/privacy">Privacy policy</a></li> <li><a href="/resources/faq">FAQs</a></li> </ul> </div>  <div class="footer-section explore"> <h4>Explore</h4> <ul> <li><a href="/examples">Examples</a></li> <li><a href="/resources/elections">Elections & polls</a></li> <li><a href="/resources/sports">Sports & competitions</a></li> <li><a href="/visualisations/maps">Interactive maps</a></li> <li><a href="/resources/visualize-survey-data">Survey responses</a></li> <li><a href="/visualisations/scrollytelling">Scrollytelling</a></li> <li><a href="/visualisations">Chart guides</a></li> <li><a href="/blog">Blog</a></li> </ul> </div>  <div class="footer-section solutions"> <h4>Solutions</h4> <ul> <li><a href="/solutions/financial-services">Financial services</a></li> <li><a href="/solutions/professional-services">Professional services</a></li> <li><a href="/solutions/newsrooms">Newsrooms</a></li> <li><a href="/solutions/marketing">Marketing</a></li> <li><a href="/solutions/not-for-profit">Nonprofits</a></li> <li><a href="/solutions/government">Government</a></li> <li><a href="/solutions/education">Education</a></li> </ul> </div>  <div class="footer-section resources"> <h4>Resources</h4> <ul> <li><a href="/whats-new">What's new</a></li> <li><a target="_blank" rel="noopener" href="https://help.flourish.studio/">Help docs</a></li> <li><a href="/resources/training">Training</a></li> <li><a href="/resources/webinar">Webinars</a></li> <li><a href="/resources/datasets">Datasets</a></li> <li><a href="/accessibility">Accessibility</a></li> <li><a href="/experts">Experts network</a></li> <li><a href="https://flourish.studio/developers">For developers</a></li> </ul> </div>  <div class="footer-section company-info"> <h4>Flourish</h4> <p class="break-text">Flourish is a registered trademark of <span>Canva UK Operations Ltd, UK</span></p> <p>company 08825531</p> <p>33 Hoxton Square</p> <p>London N1 6NN</p> </div> </div> </div>  <div class="footer-container-black"> <div class="row-inner"> <div class="footer-section stay-in-touch"> <h4>Stay in touch</h4> <div class="footer-row-items"> <div class="btn-social-container"> <a href="/newsletter"><div class="footer-btn">Subscribe to our newsletter</div></a> <div class="social-links"> <a target="_blank" rel="noopener" href="https://x.com/f_l_o_u_r_i_s_h" aria-label="X"><img class="icon" src="/images/icons/x-logo.svg"></a> <a target="_blank" rel="noopener" href="https://www.instagram.com/madewithflourish/" aria-label="instagram"><img class="icon" src="/images/icons/instagram-logo.svg"></a> <a target="_blank" rel="noopener" href="https://www.linkedin.com/company/f-l-o-u-r-i-s-h" aria-label="LinkedIn"><img class="icon" src="/images/icons/linkedin-logo.svg"></a> <a target="_blank" rel="noopener" href="https://www.youtube.com/channel/UCWTf4OgEH_MiDvfmjPdkTxg" aria-label="YouTube"><img class="icon" src="/images/icons/youtube-logo.svg"></a> </div> </div> <div class="footer-credit"> <p>© 2024 Flourish, a Canva UK Operations Limited brand. All rights reserved.</p> </div> </div> </div> </div> </div> </div> </div> </div> <script src="/js/script.js?0faceefc032ab10252303efc87a295d8"></script> <script src="/js/store-inbound-fields.js"></script> </body> </html>

CINXE.COM

Examples | Flourish | Data Visualization & Storytelling