Visualize sports data

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <meta name="description" content="Explore sports data visualization with Flourish: intuitive templates for turning stats into compelling data stories, covering everything from football to the Olympics.">  <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/training/sports-data-meta-tag.png"> <meta name="twitter:title" content="Visualize sports data"> <meta name="twitter:description" content="Explore sports data visualization with Flourish: intuitive templates for turning stats into compelling data stories, covering everything from football to the Olympics."> <meta name="twitter:creator" content="@f_l_o_u_r_i_s_h"> <meta property="og:title" content="Visualize sports data"> <meta property="og:image" content="https://flourish.studio/images/training/sports-data-meta-tag.png"> <meta property="og:type" content="website"> <meta property="og:description" content="Explore sports data visualization with Flourish: intuitive templates for turning stats into compelling data stories, covering everything from football to the Olympics."> <meta property="og:site_name" content="Flourish"> <meta property="fb:app_id" content="102649676918117"> <title>Visualize sports data</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> (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'); 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; }) }); }; var trackEmailClick = function(address_type) { ga('send', 'event', { eventCategory: 'click', eventAction: 'email', eventLabel: address_type }); }; var trackFormSubmit = function(label, method, path, params) { ga('send', 'event', { eventCategory: 'outbound', eventAction: 'click', eventLabel: label, hitCallback: createFunctionWithTimeout(function() { params = params || {}; 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>(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> <script type="text/javascript"> (function () { const LOG_STYLES = { title: "color: #2563eb; font-weight: bold; font-size: 12px;", success: "color: #059669; font-weight: bold;", error: "color: #dc2626; font-weight: bold;", info: "color: #737373; font-size: 11px;" }; function logEvent(event_type, properties, context = []) { if (!false) return; console.group( `%c[SnowplowAnalytics]: ${event_type} (${new Date().toUTCString()})`, LOG_STYLES.title ); const tableData = [ ...Object.entries(properties).map(([key, value]) => ({ key, value, source: "event" })), ...context.flatMap(ctx => Object.entries(ctx.data).map(([key, value]) => ({ key, value, source: `context: ${ctx.schema}` })) ) ].reduce((acc, {key, value, source}) => { acc[key] = {value, source}; return acc; }, {}); console.table(tableData, ["value", "source"]); console.groupEnd(); } function initializeSnowplow() { try { // https://docs.snowplow.io/docs/sources/trackers/javascript-trackers/web-tracker/quick-start-guide/ // sp.js is called 9e10734c6f18ce57.js ;(function (p, l, o, w, i, n, g) { if (!p[i]) { p.GlobalSnowplowNamespace = p.GlobalSnowplowNamespace || []; p.GlobalSnowplowNamespace.push(i); p[i] = function () { (p[i].q = p[i].q || []).push(arguments) }; p[i].q = p[i].q || []; n = l.createElement(o); g = l.getElementsByTagName(o)[0]; n.async = 1; n.src = w; g.parentNode.insertBefore(n, g) } }(window, document, "script", "/js/9e10734c6f18ce57.js", "snowplow")); window.snowplow('newTracker', 'sp1', 'https://api.canva.com/_spi/ae/snowplow/5f60f4dc-c844-41b5-9da7-ab8d39e5f475', { appId: 'flourish', platform: 'web', cookieDomain: 'flourish.studio', contexts: { webPage: true, session: true, browser: true, }, stateStorageStrategy: 'cookieAndLocalStorage', referrerPolicy: 'no-referrer-when-downgrade', credentials: 'omit', eventMethod: 'post' }); window.snowplow('addPlugin', "https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-client-hints@latest/dist/index.umd.min.js", ["snowplowClientHints", "ClientHintsPlugin"] ); window.snowplow('addPlugin', "https://cdn.jsdelivr.net/npm/@snowplow/browser-plugin-ga-cookies@latest/dist/index.umd.min.js", ["snowplowGaCookies", "GaCookiesPlugin"], [{ ga4: true, ua: false, ga4MeasurementId: "G-KW52XHYN9H" }] ); window.sp = { trackInteraction: function (properties) { window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:studio.flourish/flourish_interacted/jsonschema/1-0-0', data: properties } }); logEvent('flourish_interacted', properties); }, trackFormInteraction: function (properties) { window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:studio.flourish/flourish_form_interacted/jsonschema/1-0-0', data: properties } }); logEvent('flourish_form_interacted', properties); }, }; // GA Duplicate Events (function () { const trackGAEvent = function (properties) { const eventData = { category: "ga4_event", action: properties.action || properties.event || 'unknown' }; window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:com.snowplowanalytics.snowplow/unstruct_event/jsonschema/1-0-0', data: { schema: 'iglu:com.google.analytics.measurement-protocol/event/jsonschema/1-0-0', data: eventData } }, context: [{ schema: 'iglu:com.google.analytics.measurement-protocol/hit/jsonschema/1-0-0', data: {type: "event"} }] }); logEvent('ga_duplicator', eventData); }; if (window.dataLayer && Array.isArray(window.dataLayer)) { const originalDataLayerPush = Array.prototype.push; window.dataLayer.push = function (...args) { args.forEach(arg => { if (Array.isArray(arg) && arg[0] === "event") { const [_, eventName, eventParams] = arg; trackGAEvent({ ...eventParams, category: "ga4_event", action: eventName, }); } else if (typeof arg === "object" && arg !== null && "event" in arg) { const {event, ...params} = arg; trackGAEvent({ ...params, category: "ga4_event", action: event, }); } }); return originalDataLayerPush.apply(window.dataLayer, args); }; } const original_gtag = window.gtag; window.gtag = (...args) => { if (original_gtag) { original_gtag.apply(window, args); } const [command, action, parameters] = args; if (command === "set" || command === "consent") { return; } if (command === "event") { trackGAEvent({ ...parameters, category: "ga4_event", action, }); } }; })(); let pageLoadTime = Date.now(); let pageScrollDepth = 0; let scrollTimeout; let isUnloading = false; function trackClosed(action) { const properties = { seconds_on_page: Math.round((Date.now() - pageLoadTime) / 1000).toString(), page_scroll_depth: pageScrollDepth.toString(), action: action }; window.snowplow('trackSelfDescribingEvent', { event: { schema: 'iglu:studio.flourish/flourish_closed/jsonschema/1-0-0', data: properties } }); logEvent('flourish_closed', properties); } function updateScrollDepth() { const html = document.documentElement; const currentScrollDepth = Math.round( (html.scrollTop / (html.scrollHeight - html.clientHeight)) * 100 ); pageScrollDepth = Math.max(pageScrollDepth, currentScrollDepth); } window.addEventListener("scroll", () => { clearTimeout(scrollTimeout); scrollTimeout = setTimeout(updateScrollDepth, 100); }); window.addEventListener("beforeunload", () => { isUnloading = true; trackClosed("window_close"); }); document.addEventListener("visibilitychange", () => { if (document.visibilityState === "hidden" && !isUnloading) { trackClosed("tab_hidden"); } else if (document.visibilityState === "visible") { isUnloading = false; pageLoadTime = Date.now(); window.snowplow('trackPageView'); logEvent('page_view', {url: window.location.pathname}); } }); window.snowplow('trackPageView'); logEvent('page_view', {url: window.location.pathname}); } catch (error) { console.error('%c[SnowplowAnalytics] Error:', LOG_STYLES.error, error); } } window.OptanonWrapper = function () { if (!window.Optanon?.IsAlertBoxClosedAndValid()) return; if (window.OnetrustActiveGroups?.includes('C0002')) { initializeSnowplow(); } }; if (window.OnetrustActiveGroups?.includes('C0002')) { initializeSnowplow(); } })(); </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"> <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> <script> /** * Safely get the nearest element matching a selector */ const findClosestElement = (element, selector) => { if (!element || !element.closest) { return null; } try { return element.closest(selector); } catch (error) { console.warn('Error finding closest element:', error); return null; } } /** * Get data from the closest parent with specified attribute */ const getInheritedData = (element, attribute) => { try { const dataAttr = `data-${attribute}`; let current = element; while (current && current.nodeType === Node.ELEMENT_NODE) { if (current.hasAttribute(dataAttr)) { return current.getAttribute(dataAttr); } current = current.parentElement; } return null; } catch (error) { console.warn('Failed to get inherited data:', error); return null; } } /** * Initialize auto-tracking */ const initAutoTracking = () => { try { // Track clicks document.addEventListener('click', (e) => { if (!e?.target instanceof Element) return; const element = findClosestElement(e.target, '[data-track]'); if (!element) return; const trackType = element.dataset.track; if (trackType === 'true') { FlourishAnalytics.track(element); } else { FlourishAnalytics.track(element, { section_group: trackType }); } }); } catch (error) { console.warn('Failed to initialize auto-tracking:', error); } }; const initializeTracking = () => { initAutoTracking(); }; /** * Get all tracking data for an element */ const getTrackingData = (element) => { try { // Ensure we're working with a DOM element if (!(element instanceof Element)) { console.warn('Invalid element provided to getTrackingData'); return {}; } // Derive component name let component = element.dataset.component; if (!component) { if (element.tagName === 'A' && element.href) { // For links, use the last URL segment const path = element.getAttribute('href').replace(/\/$/, ''); const lastPart = path.split('/').pop(); component = lastPart || 'page'; } else if (element.tagName === 'BUTTON') { // For buttons, use text content or fallback const text = element.textContent?.trim().toLowerCase().replace(/[^a-z0-9]+/g, '_'); component = text || 'button'; } else { // Fallback for other elements component = element.id || 'interaction'; } } // Find closest container with section info let section = element.dataset.section; if (!section) { // Look for standard section containers const sectionContainer = element.closest('[class*="section"],[class*="container"],[id*="section"],[id*="container"]'); if (sectionContainer) { section = sectionContainer.id || sectionContainer.className.split(' ')[0] || 'main'; } else { section = 'main'; } } return { section: section, section_id: element.dataset.sectionId || getInheritedData(element, 'section-id'), section_group: element.dataset.sectionGroup || getInheritedData(element, 'section-group'), component: component, component_id: element.dataset.componentId || getInheritedData(element, 'component-id') }; } catch (error) { console.warn('Failed to get tracking data:', error); return {}; } } window.FlourishAnalytics = { // Track an interaction track: function (element, overrides = {}) { try { if (!window?.sp?.trackInteraction) { console.warn('Analytics tracking is not available'); return; } // Ensure we have a valid element if (!(element instanceof Element)) { console.warn('Invalid element provided to track'); return; } const params = { ...getTrackingData(element), interaction_type: overrides.interaction_type || 'click', ...overrides }; if (params.section && params.component) { window.sp.trackInteraction(params); } else { console.warn('Missing required tracking fields:', { section: params.section, component: params.component }); } } catch (error) { console.warn('Failed to track interaction:', error); } }, // For general clicks/interactions trackClick: function (element, options = {}) { this.track(element, { interaction_type: 'click', ...options }); }, // For form interactions trackForm: function (form, action = 'submit', options = {}) { if (!(form instanceof Element)) return; const formData = { form_id: form.id || undefined, form_name: form.getAttribute('name') || undefined, form_action: action, ...options }; window.sp.trackFormInteraction(formData); }, }; // Initialize auto-tracking initializeTracking(); </script>  <div class="row header not-logged-in" data-section="header"> <div class="row-inner">  <a href="/" class="logo clickable menu-item" data-track="click" data-component="logo"> <img id="logo" src="/images/Flourish_Logo_Black_small.png" alt="Flourish logo"> </a> <div class="menu-holder"> <h2 class="hamburger menu-item mobile-nav" tabindex="0"><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" data-track="click" data-component="examples"> <h1 class="menu-item">Examples</h1> </a> </div> <div class="dropdown-menu-item-wrapper"> <div class="dropdown-menu-item has-dropdown" data-track="click" data-component="solutions" tabindex="0" 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" data-section-group="solutions"> <div class="menu-section-header"><strong>Industry</strong></div> <a href="/solutions/financial-services" data-track="click" data-component="financial">Financial Services</a> <a href="/solutions/professional-services" data-track="click" data-component="professional">Professional Services</a> <a href="/solutions/newsrooms" data-track="click" data-component="newsrooms">Newsrooms</a> <a href="/solutions/marketing" data-track="click" data-component="marketing">Marketing</a> <a href="/solutions/not-for-profit" data-track="click" data-component="nonprofit">Nonprofits</a> <a href="/solutions/government" data-track="click" data-component="government">Government</a> <a href="/solutions/education" data-track="click" data-component="education">Education</a> </div> <div class="dropdown-menu-section" data-section-group="use_cases"> <div class="menu-section-header"><strong>Use cases</strong></div> <a href="/resources/elections" data-track="click" data-component="elections">Elections and polling</a> <a href="/resources/sports" data-track="click" data-component="sports">Sports and competitions</a> <a href="/visualisations/maps" data-track="click" data-component="maps">Maps</a> <a href="/resources/visualize-survey-data" data-track="click" data-component="survey">Survey responses</a> <a href="/visualisations/scrollytelling" data-track="click" data-component="scrollytelling">Scrollytelling</a> </div> </div> </div> <div class="dropdown-menu-item-wrapper"> <div class="dropdown-menu-item has-dropdown" tabindex="0" aria-haspopup="true" href="/resources"><h1 data-section="resources" data-track="click" data-component="resources" class="menu-item">Resources</h1></div> <div class="dropdown-menu-contents"> <div class="dropdown-menu-section" data-section-group="resources"> <div class="menu-section-header"><strong>Explore</strong></div> <a href="/blog" data-track="click" data-component="blog">Blog</a> <a href="/visualisations" data-track="click" data-component="chart_guides">Chart guides</a> <a href="/whats-new" data-track="click" data-component="whats_new">What's new</a> </div> <div class="dropdown-menu-section" data-section-group="resources"> <div class="menu-section-header"><strong>Learn</strong></div> <a href="https://helpcenter.flourish.studio/hc/en-us" target="_blank" data-track="click" data-component="help_docs">Help docs</a> <a href="/resources/webinar" data-track="click" data-component="webinars">Webinars</a> <a href="/resources/training" data-track="click" data-component="training">Training</a> <a href="/resources/datasets" data-track="click" data-component="datasets">Datasets</a> <a href="/accessibility" data-track="click" data-component="accessibility">Accessibility</a> </div> <div class="dropdown-menu-section" data-section-group="resources"> <div class="menu-section-header"><strong>Develop</strong></div> <a href="/experts" data-track="click" data-component="experts">Experts network</a> <a href="https://developers.flourish.studio/" target="_blank" data-track="click" data-component="developers">Flourish for developers</a> </div> </div> </div> <div class="dropdown-menu-item-wrapper"> <a class="dropdown-menu-item" href="/pricing" data-track="click" data-component="pricing"> <h1 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" data-track="click" data-component="login">Log in</a> <a class="btn sign-up-link" target="_blank" rel="noopener" href="https://app.flourish.studio/register" data-track="click" data-component="signup">Sign up</a> </div> </div> </div> </div> </div> <div class="content"> <div class="row static"> <div class="page page-guide" id="page-sports"> <script> window.Flourish = {}; </script> <div class="page-header"> <div class="row-inner"> <div class="header-container"> <div class="guide-header-container"> <h1> Visualize sports data </h1> </div> <h2>Bring every game to life with dynamic sports visualizations and insightful data storytelling</h2> <div class="header-cta"> <a target="_blank" rel="noopener" href="https://app.flourish.studio/register"><div class="btn">Get started now</div></a> </div> </div> </div> </div> <div class="page-content-container"> <div class="row-inner"> <p>Sports are full of statistics, ready to tell exciting stories – and with Flourish's intuitive, ready-to-use templates, you can effortlessly bring these narratives to light. Discover our range of sports visualizations, designed for journalists and fans alike, who are keen to turn data from events like the Super Bowl, EUROs and the World Cup, league football, and the Olympics into compelling stories.</p> <div class="fl-table-of-contents"> <p>Jump to:</p> <ul> <li><a href="#superbowl">Visualize NFL stats</a></li><li><a href="#football-league">Visualize football leagues</a> </li><li><a href="#olympics-data">Visualize the Olympics</a> </li><li><a href="#text-images">Visualize text and images</a> </li><li><a href="#resources">More resources</a></li> </ul> </div> <h2 class="extra-padding">Visualize NFL data without coding</h2>   <div class="viz-desktop"> <div class="flourish-embed" data-src="story/2872626?654906"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> </div> <div class="viz-mobile"> <div class="flourish-embed" data-src="story/2872626?654906"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> </div> <p>Gain a deeper understanding of every football match with Flourish. Whether it's the Super Bowl's game-winning drive, an NFL playbook breakdown, or the tactical genius of the Premier League and EUROs, our <a href="https://app.flourish.studio/templates#template-sports" target="_blank"><b>Sports template</b></a> turns the complex world of team formations and tactics into vibrant, animated stories.</p> <p>From precision passes to game-winning touchdowns, bring every moment to life with <b>animated trail lines</b> in story mode. Set your <a href="https://helpcenter.flourish.studio/hc/en-us/articles/8761537726479-How-to-set-a-story-to-autoplay" target="_blank">Flourish story to autoplay</a> for a seamless, play-by-play breakdown – just like the animation above.</p> <p><a href="https://app.flourish.studio/templates#template-sports" target="_blank"><div class="btn">Create your own</div></a></p> <h2 class="extra-padding" id="superbowl">Bring your Super Bowl LIX reporting to life</h2> <p>The Super Bowl is an event like no other – and with these templates, your data stories can truly stand out! Explore a wide range of chart options, from intuitive <b>Tournament charts</b> to data-rich <b>line charts</b>, perfect for analyzing game statistics. With Flourish, offering your readers a historical tournament overview or delving deep into analytical insights is completely within your control.</p> <figure class="full"> <div class="flourish-embed flourish-tournament" data-src="visualisation/21464562?654906"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script><noscript><img src="https://public.flourish.studio/visualisation/21462978/thumbnail" width="100%" alt="Tournament visualization showing the 2025 NFL Playoffs" /></noscript></div> </figure> <p><a href="https://app.flourish.studio/templates#template-tournament" target="_blank"><div class="btn">Create your own</div></a></p> <p>The tournament chart, also known as a tournament bracket, is a fan-favorite tool for visualizing the thrilling journey of teams in a knockout-style competition. It's an essential visualization for fans, analysts, and enthusiasts who want to track the progress of their favorite teams from the initial rounds all the way to the finals.</p> <p>This template is designed to <b>map out any single-elimination tournament</b> in a clear, concise, and visually engaging way. Whether you're following a world-class event or organizing a local sports league, our chart provides a comprehensive overview of each match-up, the scores, and the progression of the winners.</p> <p>Optimized for all devices, the Flourish Tournament Chart template ensures fans can follow the action on <b>any screen size</b>. Customize colors, fonts, and styles with ease to match your brand, making your visualizations a natural extension of your website.</p> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Line charts</h3> <p><p><b>Line charts</b> are unbeatable in tracking the progress and performance of a player or a team <b>over time</b>. They transform the seasonal flow of data into an engaging storyline, which helps us see the ups and downs of any performance.</p> <p>With Flourish, you can take this classic chart type to the next level. Add <a href="https://flourish.studio/blog/chart-filters/" target="_blank"><b>exploratory filters</b></a> to let users interact with the data, and use <a href="https://flourish.studio/blog/introducing-annotations/" target="_blank"><b>annotations</b></a> to highlight key moments – such as the beginning of playoff season or major tactical shifts. Plus, with smooth animations and <a href="https://flourish.studio/blog/live-data/" target="_blank"><b>dynamic updates</b></a>, your charts remain as engaging as the game itself. <p>Use line charts to visualize goal scoring trends, a player's form over the season, or even the fluctuating fortunes of a team in the league standings.</p> <p><a href="https://flourish.studio/visualisations/line-bar-pie-charts/" target="_blank"><div class="btn">Learn more</div></a></p></p> </div> <div class="row-visual"><div class="flourish-embed" data-src="visualisation/21465205?1" data-height="30rem"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Racing line charts</h3> <p><p>Imagine having all the same powerful settings of a line chart: tracking rankings, performance shifts, and trends, but with <b>the added thrill of movement</b>. This is exactly what the <a href="" target="_blank">Line Chart Race template</a> does, bringing the data to life as positions change in real time.</p> <p>Watch as teams climb the standings, players battle for the top scorer spot, or clubs race for championship titles. Every rise, fall, and comeback is visualized in a dynamic, engaging way, making insights clearer and more compelling.</p> <p>This template comes with <b>three dynamic play modes</b>, letting you to choose whether to display the whole X axis from the start or gradually unveil data over time. You can also add <b>captions</b> which allow you to explain key dates and events, enriched with images and GIFs!</p> <p>Explore these modes and all other features by creating your own.</p> <p><a href="https://app.flourish.studio/templates?blueprint_name=line+chart+race" target="_blank"><div class="btn">Create your own</div></a></p></p> </div> <div class="row-visual"><div class="flourish-embed" data-src="visualisation/21465695?1" data-height="33rem"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div>  <h2 class="extra-padding" id="football-league">Transform football league stats into dynamic visuals</h2> <p>Improve your league football reporting with Flourish. Delve into the heart of the Premier League, La Liga, Bundesliga, MLS, Serie A and others by visualizing data in ways that capture the essence of each competition.</p> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Bar charts</h3> <p><p>Bar charts provide a powerful snapshot of where teams stand <b>relative to each other</b> at any point in the league, highlighting top scorers, most effective goalkeepers, or the most disciplined defenses. They are ideal for measuring discrete data points like the total points earned by teams, goal differentials, or even the distribution of yellow and red cards.</p> <p>Within the Flourish editor, you can create a <b>grid of small charts</b>, also known as <a href="https://helpcenter.flourish.studio/hc/en-us/articles/8827954285583-How-to-create-a-grid-of-charts" target="_blank">small multiples</a>. This powerful visualization technique allows you to display several mini charts in a single, organized framework, each representing a different slice of your data set under the same axis scales. Ideal for sports analytics, they enable easy comparisons across teams or seasons by showing each dataset with consistent scales.</p> <p>With interactive controls, filters, and legends at your fingertips, you'll find the <a href="https://app.flourish.studio/templates" target="_blank">Line, Bar, Pie template</a> to be an indispensable ally for visualizing change over time and drawing comparisons between data series. And to truly captivate your audience, transform your charts into a <a href="https://helpcenter.flourish.studio/hc/en-us/articles/8761559998351-Creating-a-story" target="_blank"><b>Flourish story</b></a> or an immersive <a href="https://flourish.studio/visualisations/scrollytelling/" target="_blank"><b>scrollytelling experience</b></a>.</p> <p><a href="https://app.flourish.studio/templates" target="_blank"><div class="btn">Get started now</div></a></p> </p> </div> <div class="row-visual"><div class="flourish-embed" data-src="story/2873521?1" data-height="40rem"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Bar Chart Race</h3> <p><p>If you're looking for something even more dynamic than our traditional line or bar charts, consider the engaging <a href="https://flourish.studio/visualisations/bar-chart-race/" target="_blank"><b>Bar Chart Race</b></a>.</p> <p>Universally adored by audiences, these animated charts excel at showcasing the progression of football statistics over time, such as ranking changes throughout a league season, goal tallies among top scorers, or even the fluctuating market values of players. They bring an <b>element of competition</b> and timeline evolution right into your data visualization, making complex changes easy and entertaining to follow.</p> <p>In a Flourish Bar Chart Race, you can add <a href="https://helpcenter.flourish.studio/hc/en-us/articles/8761566757647-Bar-chart-race-an-overview" target="_blank">images and captions</a>, customize the color palette and fonts of your visualization, as well as tweak the animation duration.</p> <p><a href="https://flourish.studio/blog/visualize-premier-league-football-data/" target="_blank"><div class="btn">8 ways to visualize Premier League data</div></a></p> </p> </div> <div class="row-visual"><div class="flourish-embed" data-src="visualisation/21466825?1" data-height="30rem"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Scatter plots</h3> <p><p>Scatter plots bring a special kind of clarity to sports data, enabling a deep dive into various facets of the game. With the capacity to compare two or more variables, they shed light on player performance, team strategies, and match outcomes.</p> <p>This chart type simplifies the process of evaluating player effectiveness, strategic decisions, and the impact of choices made during the game. Whether it's analyzing a team's offensive strength or identifying key play patterns, scatter plots are the perfect tool for delving into the intricacies of football tournament data.</p> <p>With the Flourish Scatter template, exploring complex football data becomes a breeze! Reveal key insights by highlighting important data, <a href="https://flourish.studio/blog/introducing-annotations/" target="_blank">adding detailed <b>annotations</b></a>, and using <a href="https://helpcenter.flourish.studio/hc/en-us/articles/8761562935311-How-to-add-selective-labels-to-your-scatter-plot" target="_blank">strategically-positioned <b>labels</a> and colors</b> for maximum clarity.</p> <p><a href="https://flourish.studio/blog/world-cup-euros-football-data-visualization/" target="_blank"><div class="btn">See more examples on our blog</div></a></p> </p> </div> <div class="row-visual"><div class="flourish-embed" data-src="story/2176036?1" data-height="30rem"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <h2 class="extra-padding" id="olympics-data">Visualize the Olympics</h2> <p>Data visualizations bring the Olympic Games to life, and as we look towards Paris 2024, they'll be more important than ever. Interactive graphics help us see and understand athletes' performances, which countries are winning, and how records are being broken. With engaging charts and graphs, everyone can get excited about the stories and successes that will unfold in Paris.</p> <figure class="full viz-desktop"> <div class="flourish-embed" data-src="visualisation/16545315?724315" style="width:48%; display: inline-block; vertical-align: top;"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> <div class="flourish-embed" data-src="visualisation/16534409?724315" style="width:48%; display: inline-block; vertical-align: top;"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> </figure> <figure class="full viz-mobile"> <div class="flourish-embed" data-src="story/2272812?654906"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> </figure> <p><a href="https://flourish.studio/visualisations/create-a-table/" target="_blank">Flourish tables</a> offer an exceptional platform for displaying complex data sets, from schedules to medal counts of the Olympic Games, in an accessible and comprehensible manner. Sortable tables are great for <b>quick comparisons</b> between countries based on their gold, silver, bronze, and total medals. Color-coding the bars makes the distinctions between medal types immediately apparent, <b>enhancing readability</b>.</p> <p><b>Pro tip:</b> Connect your table to a <a href="https://flourish.studio/blog/live-data/" target="_blank">live-updating CSV</a> and your chart will automatically update.</p> <p>The use of distinct icons and a grid layout enables a quick overview of the entire Olympic program, making it easier to spot when key events will occur. To customize your table, you can change the background color, as well as embed country flags and emojis. And for those who love going the extra mile with their data, you'll appreciate a standout feature of our tables – the <a href="https://helpcenter.flourish.studio/hc/en-us/articles/8761554867983-Table-an-overview#mini-bar-line-charts" target="_blank"><b>mini bar and line charts</b></a>! They effortlessly turn your numbers into engaging graphs right within the table cells.</p> <p><a href="https://app.flourish.studio/templates#template-table" target="_blank"><div class="btn">Create your own</div></a></p> <h2 class="extra-padding">Recreating sports events</h2> <p>Our <b>Sports Race</b> template allows you to visualize events that involve a fixed track or course – such as athletics, swimming, and sailing. The template comes <a href="https://app.flourish.studio/templates#template-sports-race" target="_blank">ready to use</a> for a number of sports, but you can also easily upload your own track and participant icons to cover different events. The settings allow you to recreate all the races at this year’s Olympics, and even give medals to the 1st, 2nd and 3rd place athletes.</p> <figure class="full"> <div class="flourish-embed" data-src="visualisation/16550311?724315" data-height="70vh"><script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script></div> </figure> <p><a href="https://flourish.studio/blog/visualizing-olympics/" target="_blank"><div class="btn">Other ways to visualize the Olympics</div></a></p> <h2 class="extra-padding" id="text-images">Beyond charts: create interactive content with Flourish</h2> <p>Take your sports coverage to the next level by offering more than just charts. With Flourish, you can incorporate interactive elements such as videos and images into your storytelling. Enhance audience engagement by integrating qualitative data or adding a touch of fun with templates like the Quiz or Draw the line. <a href="https://flourish.studio/blog/visualizing-qualitative-data/" target="_blank">Read more on our blog</a>.</p> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Cards</h3> <p><p>This template enables showcasing content in a grid or carousel, with configurations for interactive displays on hover or click. Featuring an interactive legend, popup and panel additions, and extensive image customization, the Cards template excels at dynamically presenting teams, players, stadiums, or merchandise.</p> <p>One of the best features of the Flourish Cards template is its ability to <a href="https://helpcenter.flourish.studio/hc/en-us/articles/8761574060175-How-to-customize-your-Cards-with-HTML-CSS" target="_blank">use custom HTML</a> to fully customize your content display. By using this option, you can change how each card <b>interacts on click or hover</b>, style content with HTML and CSS, and even embed Flourish charts in each card!</p> <p><a href="https://flourish.studio/blog/cards-template/" target="_blank"><div class="btn">Read more on our blog</div></a></p> </p> </div> <div class="row-visual"><div class="flourish-embed" data-src="visualisation/16893288?1"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Quiz</h3> <p><p>Dipping your toes into the world of trivia can be a fantastic way to learn something new, and using our Quiz template is a great way to start. It offers a fun and interactive experience for readers to engage with your content.</p> <p>The Quiz template offers <b>multiple-choice</b> and <b>slider response</b> options. You can also customize feedback for each question and conclude with personalized cards that celebrate the user's quiz performance.</p> <a href="https://app.flourish.studio/templates#template-quiz" target="_blank"><div class="btn">Create your own</div></a> </p> </div> <div class="row-visual"><div class="flourish-embed" data-src="visualisation/16803647?1"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Draw The Line chart</h3> <p>What better way to engage your audience than by inviting them to participate? With our interactive <b>Draw The Line</b> template, you can make your readers guess the trajectory of a player's or team's performance before revealing the actual statistics. <p>This feature can transform the way fans and enthusiasts interact with data by incorporating elements of gamification. Fans can <b>predict outcomes</b> based on past performances, rivalries, or even injuries, and then compare their predictions with real-world data. </p> <p>This interactive and playful approach not only enhances engagement by challenging the audience but also deepens their understanding of the factors influencing sports achievements. It blends gamification with learning, bridging the gap between raw data and sports storytelling.</p> <a href="https://flourish.studio/blog/draw-the-line-chart/" target="_blank"><div class="btn">Read more on our blog</div></a> </p> </div> <div class="row-visual"><div class="flourish-embed" data-src="visualisation/16814911?1" data-height="30rem"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <div class="fl-usecase-block"> <div class="row feature-section text-right"> <div class="row-header"> <h3>Timeline</h3> <p>Timelines are an exceptional tool for visualizing the achievements of players or sports clubs over time. Using our interactive <b>Timeline</b> template, you can track and present the progression of milestones, awards, and significant moments in a player's or club's history in an engaging and easily digestible format. <p>By organizing achievements in a chronological order, timelines provide a clear sense of growth, highlight <b>key turning points</b> and offer insights into periods of success or challenge. And in sports, where careers and club histories are filled with defining matches, awards, and records, interactive timelines offer a dynamic way to explore these stories. </p> <p>Choose a <b>vertical or a horizontal layout</b> for your Flourish timeline, opt for a <b>background image</b> to add visual context to your story, and select a color scheme that complements your brand or presentation theme for a cohesive look.</p> <a href="https://flourish.studio/blog/visualizing-qualitative-data/" target="_blank"><div class="btn">Other ways to visualize text and images</div></a> </p> </div> <div class="row-visual"><div class="flourish-embed" data-src="visualisation/16978447?1" data-height="35rem"><script src="https://public.flourish.studio/resources/embed.js"></script></div></div> </div> </div> <h2 class="extra-padding" id="resources">More resources</h2> <div class="flourish-grid wide"><div class="grid-container col-820-3 col-420-1" style="grid-template-columns: repeat(3, 1fr);"><div class="grid-item"><h4>Check out our blog posts</h4> <p><a href="https://flourish.studio/blog/world-cup-euros-football-data-visualization/" target="_blank">Your ultimate guide to visualizing football tournaments →</a></p> <p><a href="https://flourish.studio/blog/visualizing-olympics/" target="_blank">How to visualize the Olympics →</a></p> <p><a href="https://flourish.studio/blog/visualize-premier-league-football-data/" target="_blank">8 ways to visualize football league <br>data →</a></p></div><div class="grid-item"><a target="_blank" rel="noopener" href="https://www.youtube.com/channel/UCWTf4OgEH_MiDvfmjPdkTxg"> <h4>Our webinars</h4> <p>Our YouTube channel covers different template tutorials and webinar recordings, some specifically focused on sports</p> <div class="btn-secondary">Explore</div> </a></div><div class="grid-item"><a target="_blank" rel="noopener" href="https://help.flourish.studio/"> <h4>Help docs</h4> <p>Our comprehensive help guides break down every feature, providing step-by-step guidance</p> <div class="btn-secondary">Explore</div> </a></div></div></div> </div>  </div> </div> </div> </div> <div class="row footer" data-section="footer"> <div class="row-contents"> <div class="row-inner"> <div class="footer-container">  <div class="footer-section company" data-section-group="company"> <h4>Company</h4> <ul> <li><a href="/company" data-track="click" data-component="about">About us</a></li> <li><a target="_blank" rel="noopener" href="https://www.lifeatcanva.com/en/locations/united-kingdom/" data-track="click" data-component="careers">Careers</a></li> <li><a href="/security" data-track="click">Security</a></li> <li><a href="/pricing" data-track="click">Pricing</a></li> <li><a href="/terms" data-track="click">Terms</a></li> <li><a href="/privacy" data-track="click">Privacy policy</a></li> <li><a href="/resources/faq" data-track="click">FAQs</a></li> </ul> </div>  <div class="footer-section explore" data-section-group="explore"> <h4>Explore</h4> <ul> <li><a href="/examples" data-track="click">Examples</a></li> <li><a href="/resources/elections" data-track="click">Elections & polls</a></li> <li><a href="/resources/sports" data-track="click">Sports & competitions</a></li> <li><a href="/visualisations/maps" data-track="click">Interactive maps</a></li> <li><a href="/resources/visualize-survey-data" data-track="click" data-component="survey">Survey responses</a></li> <li><a href="/visualisations/scrollytelling" data-track="click">Scrollytelling</a></li> <li><a href="/visualisations" data-track="click">Chart guides</a></li> <li><a href="/blog" data-track="click">Blog</a></li> </ul> </div>  <div class="footer-section solutions" data-section-group="solutions"> <h4>Solutions</h4> <ul> <li><a href="/solutions/financial-services" data-track="click" data-component="financial">Financial services</a></li> <li><a href="/solutions/professional-services" data-track="click" data-component="professional">Professional services</a></li> <li><a href="/solutions/newsrooms" data-track="click">Newsrooms</a></li> <li><a href="/solutions/marketing" data-track="click">Marketing</a></li> <li><a href="/solutions/not-for-profit" data-track="click" data-component="nonprofit">Nonprofits</a></li> <li><a href="/solutions/government" data-track="click">Government</a></li> <li><a href="/solutions/education" data-track="click">Education</a></li> </ul> </div>  <div class="footer-section resources" data-section-group="resources"> <h4>Resources</h4> <ul> <li><a href="/whats-new" data-track="click" data-component="whats_new">What's new</a></li> <li><a target="_blank" rel="noopener" href="https://help.flourish.studio/" data-track="click" data-component="help_docs" onclick="FlourishAnalytics.trackOutbound('https://help.flourish.studio/', this)">Help docs</a></li> <li><a href="/resources/training" data-track="click">Training</a></li> <li><a href="/resources/webinar" data-track="click">Webinars</a></li> <li><a href="/resources/datasets" data-track="click">Datasets</a></li> <li><a href="/accessibility" data-track="click">Accessibility</a></li> <li><a href="/experts" data-track="click">Experts network</a></li> <li><a href="https://flourish.studio/developers" data-track="click" onclick="FlourishAnalytics.trackOutbound('https://flourish.studio/developers', this)">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" data-track="click" data-component="newsletter"> <div class="footer-btn">Subscribe to our newsletter</div> </a> <div class="social-links" data-section-group="social"> <a target="_blank" rel="noopener" href="https://x.com/f_l_o_u_r_i_s_h" aria-label="X" data-track="click" data-component="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" data-track="click" data-component="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" data-track="click" data-component="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" data-track="click" data-component="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> <script src="/js/script.js?ddcb49de92eb2662628cec21b9bfeefd"></script> <script src="/js/store-inbound-fields.js"></script> </body> </html>

CINXE.COM

Visualize sports data