PageSourceSearch

https://flourish.studio/

html flourish.studio collected 2026-10-01 06:27:56 UTC 76,045 bytes, 1,483 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5	<meta charset="utf-8">
6	<meta name="viewport" content="width=device-width, initial-scale=1">
7		
8
9	<!-- Search engines -->
10	<meta name="description" content="Bring data to life with Flourish. Create data visualizations and interactive content – no coding needed. Engage, inspire, and tell your best data stories with ease.">
11
12	
13	<link rel="canonical" href="https://flourish.studio/" />
14
15	<!-- Twitter -->
16	<meta name="twitter:card" content="summary_large_image">
17	<meta name="twitter:site" content="@f_l_o_u_r_i_s_h">
18	<meta name="twitter:image" content="https://flourish.studio/images/generic-meta-tag.png">
19	<meta name="twitter:title" content="">
20	<meta name="twitter:description" content="Bring data to life with Flourish. Create data visualizations and interactive content – no coding needed. Engage, inspire, and tell your best data stories with ease.">
21	<meta name="twitter:creator" content="@f_l_o_u_r_i_s_h">
22
23	<meta property="og:title" content="">
24	<meta property="og:image" content="https://flourish.studio/images/generic-meta-tag.png">
25	<meta property="og:type" content="website">
26	<meta property="og:description" content="Bring data to life with Flourish. Create data visualizations and interactive content – no coding needed. Engage, inspire, and tell your best data stories with ease.">
27	<meta property="og:site_name" content="Flourish">
28	<meta property="og:url" content="https://flourish.studio/" />
29	<meta property="fb:app_id" content="102649676918117">
30
31	<title>Flourish</title>
32
33	
34
35
36<script type="application/json" id="flourish-config">
37{
38  "disableCookieConsent": false,
39  "isLocalhost": false,
40  "enableAnalytics": true,
41  "snowplow": {
42    "collectorUrl": "https://api.canva.com/_spi/ae/snowplow/5f60f4dc-c844-41b5-9da7-ab8d39e5f475",
43    "appId": "flourish",
44    "cookieDomain": "flourish.studio",
45    "crossDomainTargets": ["app.flourish.studio","public.flourish.studio"]
46  },
47  "fullstory": {
48    "orgId": "o-23F4NG-na1",
49    "allowedDomain": "flourish.studio",
50    "teamSpace": "flourish",
51    "samplingRate": 0.1,
52    "monthlySessionCap": 20000,
53    "consentGroupId": "C0002",
54    "blockedPaths": ["/newsletter/","/talk-to-us/","/resources/webinar/","/resources/webinar/john-burn-murdoch-webinar-2025/"],
55    "allowedPaths": []
56  }
57}
58</script>
58
59
60
61
62
63
64<script src="/js/analytics-onetrust.js?2070d750ffce4d3163cf407a1cd6af45"></script>
64
65
66  
66<script src="https://cdn-au.onetrust.com/consent/c7f22011-a5da-4a30-8750-4cb18703c00d/OtAutoBlock.js" type="text/javascript"></script>
66
67  
67<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>
67
68
69
70<script src="/js/analytics-ga.js?3962480725b0a7a192d943d968fbd537"></script>
70
71
72
73
74<script src="/js/analytics-snowplow.js?104ab42b5439c0c093eac2cbdbb019ac"></script>
74
75
76
77<script src="/js/analytics-fullstory.js?d07185febd95098d325e9271e5c17098"></script>
77
78
79
80	
81	<link rel="alternate" href="/atom.xml" title="Flourish" type="application/atom+xml">
82	
83
84	<link href="/highlight.css?3e9f1d3cf8a99ebe7f3f230bae0e7d41" rel="stylesheet">
85	<link href="/style.css?09092026" rel="stylesheet">
86
87	
88
89	
90
91	
92
93	
94
95	
96
97	
98
99	
100	
100<script type="application/ld+json">
101	{
102	  "@context": "https://schema.org",
103	  "@graph": [
104	    {
105	      "@type": "Organization",
106	      "@id": "https://flourish.studio/#organization",
107	      "name": "Flourish",
108	      "url": "https://flourish.studio/",
109	      "logo": {
110	        "@type": "ImageObject",
111	        "url": "https://flourish.studio/images/Flourish_Logo_Black_small.png"
112	      },
113	      "description": "Flourish is a powerful data visualization platform that empowers the world to tell stories with data.",
114	      "foundingDate": "2018",
115	      "founders": [
116	        { "@type": "Person", "name": "Duncan Clark" },
117	        { "@type": "Person", "name": "Robin Houston" }
118	      ],
119	      "sameAs": [
120	        "https://x.com/f_l_o_u_r_i_s_h",
121	        "https://www.linkedin.com/company/flourishstudio",
122	        "https://www.youtube.com/channel/UCWTf4OgEH_MiDvfmjPdkTxg",
123	        "https://www.instagram.com/madewithflourish/"
124	      ],
125	      "parentOrganization": {
126	        "@type": "Organization",
127	        "name": "Canva",
128	        "url": "https://www.canva.com"
129	      }
130	    },
131	    {
132	      "@type": "WebSite",
133	      "@id": "https://flourish.studio/#website",
134	      "url": "https://flourish.studio/",
135	      "name": "Flourish",
136	      "description": "Create stunning charts, maps and interactive content — no coding required.",
137	      "publisher": {
138	        "@id": "https://flourish.studio/#organization"
139	      }
140	    },
141	    {
142	      "@type": "WebPage",
143	      "@id": "https://flourish.studio/#webpage",
144	      "url": "https://flourish.studio/",
145	      "name": "Flourish – Where data meets storytelling",
146	      "description": "Create stunning charts, maps and interactive content that engage and inspire – instantly. No coding required.",
147	      "isPartOf": {
148	        "@id": "https://flourish.studio/#website"
149	      },
150	      "about": {
151	        "@id": "https://flourish.studio/#organization"
152	      },
153	      "breadcrumb": {
154	        "@type": "BreadcrumbList",
155	        "itemListElement": [
156	          {
157	            "@type": "ListItem",
158	            "position": 1,
159	            "name": "Home",
160	            "item": "https://flourish.studio/"
161	          }
162	        ]
163	      }
164	    },
165	    {
166	      "@type": "FAQPage",
167	      "mainEntity": [
168	        {
169	          "@type": "Question",
170	          "name": "What is Flourish?",
171	          "acceptedAnswer": {
172	            "@type": "Answer",
173	            "text": "Flourish is a powerful data visualization platform that empowers the world to tell stories with data. Trusted by organizations and newsrooms worldwide, Flourish helps creators bring data narratives to life with highly engaging, interactive and impressive visualizations."
174	          }
175	        },
176	        {
177	          "@type": "Question",
178	          "name": "Who is behind Flourish?",
179	          "acceptedAnswer": {
180	            "@type": "Answer",
181	            "text": "Flourish was co-founded in 2018 by Duncan Clark and Robin Houston. Duncan has a background in data journalism and publishing, while Robin is a mathematician and developer. In 2022, Canva acquired Flourish with the shared goal of democratizing data storytelling."
182	          }
183	        },
184	        {
185	          "@type": "Question",
186	          "name": "How does Flourish differ from other data visualization tools?",
187	          "acceptedAnswer": {
188	            "@type": "Answer",
189	            "text": "Flourish sets itself apart through ease of use (no technical skills needed), storytelling features like scrollytelling and interactive presentations, flexibility via the Flourish SDK, and publishability — all outputs are mobile-optimized and capable of reaching unlimited audiences."
190	          }
191	        },
192	        {
193	          "@type": "Question",
194	          "name": "Is Flourish a business intelligence tool?",
195	          "acceptedAnswer": {
196	            "@type": "Answer",
197	            "text": "Flourish is not typically regarded as a business intelligence tool. While its templates and API allow for data exploration and dashboard integration, its primary focus is on data storytelling, especially for presentations and digital publications."
198	          }
199	        }
200	      ]
201	    }
202	  ]
203	}
204	</script>
204
205	
206
207<meta name="generator" content="Hexo 6.2.0"></head>
208
209<body onclick class="is-static">
vendor: 74 bytes, lines 209-212
209
210	
211	<noscript>
212		<iframe src="https://www.googletagmanager.com/ns.html?id=
212GTM-PBJJP4J
vendor: 90 bytes, lines 212-216
212" height="0" width="0"
213			style="display:none;visibility:hidden"></iframe>
214	</noscript>
215
216	
216<script src="/js/analytics-body.js?2e7777399d7bf1d5cf9160b87e8b909b"></script>
216
217
218
219<!-- onclick is used to make hover states work on Safari -->
220
221<!-- Flourish AI announcement banner — remove the <aside data-flai-bnr> block below to disable; the has-banner class is added by script only when the banner is present -->
222
223
224
225	
226	<div class="row header not-logged-in" data-section="header">
227	<div class="row-inner">
228		<!-- Logo - inherits section from parent -->
229		<a
230			href="/"
231			class="logo clickable menu-item"
232			data-track="click"
233			data-component="logo"
234		>
235			<img
236				id="logo"
237				src="/images/Flourish_Logo_Black_small.png"
238				alt="Flourish logo"
239			/>
240		</a>
241		<nav class="menu-holder">
242			<div
243				id="menu-announcer"
244				class="sr-only"
245				aria-live="assertive"
246				role="status"
247			></div>
248			<div
249				class="hamburger menu-item mobile-nav"
250				tabindex="0"
251				aria-label="Toggle menu"
252				aria-expanded="false"
253				role="button"
254			>
255				<span class="fa fa-bars" aria-hidden="true"></span>
256				<span class="fa fa-close" aria-hidden="true"></span>
257			</div>
258			<div class="menu desktop-nav">
259				<ul class="dropdown-menu sub-menu" id="main-menu">
260					<li class="dropdown-menu-item-wrapper">
261						<div
262							class="dropdown-menu-item has-dropdown"
263							data-track="click"
264							data-component="product"
265							tabindex="0"
266							aria-haspopup="menu"
267							role="button"
268							aria-expanded="false"
269							href="/product"
270							aria-controls="product-submenu"
271							id="product-submenu-button"
272						>
273							<span data-section="product" class="menu-item">Product</span>
274						</div>
275						<div
276							class="dropdown-menu-contents"
277							aria-hidden="true"
278							aria-labelledby="product-submenu-button"
279							id="product-submenu"
280							role="menu"
281						>
282							<div class="dropdown-menu-section">
283								<div id="product-header" class="menu-section-header">Create</div>
284								<ul class="dropdown-menu-section" data-section-group="product" aria-labelledby="product-header">
285									<li role="menuitem">
286										<a href="/product/data-visualization/" class="product-link" data-track="click" data-component="data-visualization">
287											<div class="product-icon-container">
288												<div class="product-icon product-viz-icon"><img src="https://public.flourish.studio/uploads/654906/77f0dc36-550e-452a-ba4b-eeef7270efc7.png" alt="" width="32" height="32"></div>
289											</div>
290											<div class="product-content">
291												<div class="product-title">Data visualization</div>
292												<div class="product-subtitle">Create interactive charts and maps using no-code templates</div>
293											</div>
294										</a>
295									</li>
296									<li role="menuitem">
297										<a href="/product/data-storytelling/" class="product-link" data-track="click" data-component="data-storytelling">
298											<div class="product-icon-container">
299												<div class="product-icon product-story-icon"><img src="https://public.flourish.studio/uploads/654906/5221488a-2eb3-4819-9028-92907918b146.png" alt="" width="32" height="32"></div>
300											</div>
301											<div class="product-content">
302												<div class="product-title">Flourish stories</div>
303												<div class="product-subtitle">Build multi-step explainers with charts and captions</div>
304											</div>
305										</a>
306									</li>
307									<li role="menuitem">
308										<a href="/product/interactive-content/" class="product-link" data-track="click" data-component="interactive-content">
309											<div class="product-icon-container">
310												<div class="product-icon product-interactive-icon"><img src="https://public.flourish.studio/uploads/654906/dfefd2d2-f84f-43a6-b550-cbca26922815.png" alt="" width="32" height="32"></div>
311											</div>
312											<div class="product-content">
313												<div class="product-title">Interactive content</div>
314												<div class="product-subtitle">Visualize text, images and audio with interactive templates</div>
315											</div>
316										</a>
317									</li>
318								</ul>
319								<div class="menu-section-divider"></div>
320								<div id="ai-powered-header" class="menu-section-header">AI-powered</div>
321								<ul class="dropdown-menu-section" data-section-group="ai_powered" aria-labelledby="ai-powered-header">
322									<li role="menuitem">
323										<a href="/product/ai-assistant/" class="product-link" data-track="click" data-component="ai-assistant">
324											<div class="product-icon-container">
325												<div class="product-icon product-assistant-icon"><img src="/images/product/ai-assistant/icon-magic-filled.svg" alt="" width="32" height="32"></div>
326											</div>
327											<div class="product-content">
328												<div class="product-title">Flourish Assistant</div>
329												<div class="product-subtitle">Refine your charts faster with AI guidance</div>
330											</div>
331										</a>
332									</li>
333									<li role="menuitem">
334										<a href="/product/mcp-connector/" class="product-link" data-track="click" data-component="mcp-connector">
335											<div class="product-icon-container">
336												<div class="product-icon product-connector-icon"><img src="/images/code-icon.svg" alt="" width="32" height="32"></div>
337											</div>
338											<div class="product-content">
339												<div class="product-title">Flourish Connector</div>
340												<div class="product-subtitle">Connect Flourish to MCP-compatible AI tools</div>
341											</div>
342										</a>
343									</li>
344								</ul>
345						</div>
346						</div>
347					</li>
348					<li class="dropdown-menu-item-wrapper">
349						<a
350							class="dropdown-menu-item"
351							href="/examples/"
352							data-track="click"
353							data-component="examples"
354						>
355							<span class="menu-item">Examples</span>
356						</a>
357					</li>
358					<li class="dropdown-menu-item-wrapper">
359						<div
360							class="dropdown-menu-item has-dropdown"
361							data-track="click"
362							data-component="solutions"
363							tabindex="0"
364							aria-haspopup="menu"
365							role="button"
366							aria-expanded="false"
367							href="/solutions"
368							aria-controls="solutions-submenu"
369							id="solutions-submenu-button"
370						>
371							<span data-section="solutions" class="menu-item">Solutions</span>
372						</div>
373						<div
374							class="dropdown-menu-contents"
375							aria-hidden="true"
376							aria-labelledby="solutions-submenu-button"
377							id="solutions-submenu"
378							role="menu"
379						>
380							<div class="submenu-section-container">
381								<div
382									id="solutions-industry-header"
383									class="menu-section-header"
384								>
385									Industry
386								</div>
387								<ul
388									class="dropdown-menu-section"
389									data-section-group="solutions"
390									aria-labelledby="solutions-industry-header"
391								>
392									<li role="menuitem">
393										<a
394											href="/solutions/financial-services/"
395											data-track="click"
396											data-component="financial"
397										>Financial services</a>
398									</li>
399									<li role="menuitem">
400										<a
401											href="/solutions/professional-services/"
402											data-track="click"
403											data-component="professional"
404										>Professional services</a>
405									</li>
406									<li role="menuitem">
407										<a
408											href="/solutions/newsrooms/"
409											data-track="click"
410											data-component="newsrooms"
411										>Newsrooms</a>
412									</li>
413									<li role="menuitem">
414										<a
415											href="/solutions/marketing/"
416											data-track="click"
417											data-component="marketing"
418										>Marketing</a>
419										</li>
420									<li role="menuitem"><a
421											href="/solutions/not-for-profit/"
422											data-track="click"
423											data-component="nonprofit"
424										>Nonprofits</a></li>
425									<li role="menuitem"><a
426											href="/solutions/government/"
427											data-track="click"
428											data-component="government"
429										>Government</a></li>
430									<li role="menuitem"><a
431											href="/solutions/education/"
432											data-track="click"
433											data-component="education"
434										>Education</a></li>
435								</ul>
436							</div>
437							<div class="submenu-section-container">
438								<div
439									id="solutions-usecases-header"
440									class="menu-section-header"
441								>
442									Use cases
443								</div>
444								<ul 
445									class="dropdown-menu-section" 
446									data-section-group="use_cases"
447									aria-labelledby="solutions-usecases-header"
448								>
449								<li role="menuitem"><a
450										href="/resources/elections/"
451										data-track="click"
452										data-component="elections"
453									>Elections and polling</a></li>
454								<li role="menuitem"><a
455										href="/resources/sports/"
456										data-track="click"
457										data-component="sports"
458									>Sports and competitions</a></li>
459								<li role="menuitem"><a
460										href="/visualisations/maps/"
461										data-track="click"
462										data-component="maps"
463									>Maps</a></li>
464								<li role="menuitem"><a
465										href="/resources/visualize-survey-data/"
466										data-track="click"
467										data-component="survey"
468									>Survey responses</a></li>
469								<li role="menuitem"><a
470										href="/visualisations/scrollytelling/"
471										data-track="click"
472										data-component="scrollytelling"
473									>Scrollytelling</a></li>
474								<li role="menuitem"><a
475										href="/usecases/ai-workflows/"
476										data-track="click"
477										data-component="AI-workflows"
478									>AI-powered workflows</a></li>
479								<li role="menuitem" class="framework-mobile-link"><a
480										href="/case-studies/"
481										data-track="click"
482										data-component="framework_card"
483										data-component-id="case_studies"
484									>Case studies</a></li>
485							</ul>
486						</div>
487						<div class="submenu-section-container submenu-section-framework submenu-section-case-studies">
488							<div
489								id="solutions-case-studies-header"
490								class="menu-section-header"
491							>
492								Case studies
493							</div>
494							<ul
495								class="dropdown-menu-section"
496								data-section-group="case_studies"
497								aria-labelledby="solutions-case-studies-header"
498							>
499								<li role="menuitem"><a
500										class="framework-card"
501										href="/case-studies/"
502										data-track="click"
503										data-component="framework_card"
504										data-component-id="case_studies"
505									>
506										<img
507											class="framework-image"
508											src="/images/case-studies/case-studies-header.jpg"
509											alt="Three colleagues smiling and talking around a laptop in a bright office."
510											loading="lazy"
511										/>
512										<span class="framework-title">How teams tell data stories <span class="framework-title-arrow" aria-hidden="true">→</span></span>
513										<span class="framework-subtitle">Discover how organizations, agencies and newsrooms use Flourish</span>
514									</a></li>
515							</ul>
516						</div>
517					</li>
518					<li class="dropdown-menu-item-wrapper">
519						<div
520							id="resources-submenu-button"
521							class="dropdown-menu-item has-dropdown"
522							data-track="click"
523							data-component="resources"
524							role="button"
525							aria-expanded="false"
526							aria-haspopup="menu"
527							aria-controls="resources-submenu"
528							tabindex="0"
529							href="/resources"
530						><span
531								data-section="resources"
532								class="menu-item"
533							>Resources</span></div>
534						<div
535							class="dropdown-menu-contents"
536							aria-hidden="true"
537							aria-labelledby="resources-submenu-button"
538							id="resources-submenu"
539							role="menu"
540						>
541							<div class="submenu-section-container submenu-section-framework">
542								<ul class="dropdown-menu-section" data-section-group="resources">
543									<li role="menuitem"><a
544											class="framework-card"
545											href="/learn/master-data-storytelling/"
546											data-track="click"
547											data-component="framework_card"
548											data-component-id="master_data_storytelling"
549										>
550											<img
551												class="framework-image"
552												src="/images/learn/master-data-storytelling-header.jpg"
553												alt="A presenter explains a chart on a screen to a small group during a data storytelling session"
554												loading="lazy"
555											/>
556											<span class="framework-title">Master data storytelling <span class="framework-title-arrow" aria-hidden="true">→</span></span>
557											<span class="framework-subtitle">Build stronger data communication skills with our 5-step framework</span>
558										</a></li>
559								</ul>
560							</div>
561							<div class="submenu-section-container">
562								<div
563									id="resources-get-started-header"
564									class="menu-section-header"
565								>
566									Get started
567								</div>
568								<ul
569									class="dropdown-menu-section"
570									data-section-group="resources"
571									aria-labelledby="resources-get-started-header"
572								>
573									<li role="menuitem" class="framework-mobile-link"><a
574											href="/learn/master-data-storytelling/"
575											data-track="click"
576											data-component="framework_card"
577											data-component-id="master_data_storytelling"
578										>Master data storytelling</a></li>
579									<li role="menuitem"><a
580											href="https://helpcenter.flourish.studio/hc/en-us"
581											target="_blank"
582											rel="noopener"
583											data-track="click"
584											data-component="help_center"
585										>Help center</a></li>
586									<li role="menuitem"><a
587											href="/visualisations/"
588											data-track="click"
589											data-component="chart_guides"
590										>Chart guides</a></li>
591									<li role="menuitem"><a
592											href="/resources/webinar/"
593											data-track="click"
594											data-component="webinars"
595										>Webinars</a></li>
596									<li role="menuitem"><a
597											href="/resources/training/"
598											data-track="click"
599											data-component="training"
600										>Training</a></li>	
601									<li role="menuitem"><a
602											href="https://developers.flourish.studio/"
603											target="_blank"
604											rel="noopener"
605											data-track="click"
606											data-component="developers"
607										>Flourish for developers</a></li>
608								</ul>
609							</div>
610							<div class="submenu-section-container">
611								<div
612									id="resources-explore-header"
613									class="menu-section-header"
614								>
615									Explore
616								</div>
617								<ul
618									class="dropdown-menu-section"
619									data-section-group="resources"
620									aria-labelledby="resources-explore-header"
621								>
622									<li role="menuitem"><a
623											href="/blog/"
624											data-track="click"
625											data-component="blog"
626										>Blog</a></li>
627									<li role="menuitem"><a
628											href="/whats-new/"
629											data-track="click"
630											data-component="whats_new"
631										>What's new</a></li>
632									<li role="menuitem"><a
633											href="/experts/"
634											data-track="click"
635											data-component="experts"
636										>Experts network</a></li>
637									<li role="menuitem"><a
638											href="/resources/datasets/"
639											data-track="click"
640											data-component="datasets"
641										>Datasets</a></li>
642									<li role="menuitem"><a
643											href="/accessibility/"
644											data-track="click"
645											data-component="accessibility"
646										>Accessibility</a></li>
647								</ul>
648							</div>
649						</div>
650					</li>
651					<li class="dropdown-menu-item-wrapper">
652						<a
653							class="dropdown-menu-item"
654							href="/pricing/"
655							data-track="click"
656							data-component="pricing"
657						>
658							<span class="menu-item">Pricing</span>
659						</a>
660					</li>
661				</ul>
662				<div id="account-menu">
663					<a
664						class="btn log-in-link"
665						target="_blank" rel="noopener" href="https://app.flourish.studio/login"
666						data-track="click"
667						data-component="login"
668					>Log in</a>
669					<a
670						class="btn sign-up-link"
671						target="_blank" rel="noopener" href="https://app.flourish.studio/register"
672						data-track="click"
673						data-component="signup"
674					>Sign up</a>
675				</div>
676			</div>
677		</nav>
678	</div>
679</div>
680	
681
682	<div class="content">
683		<div class="row static">
684			<!-- embed.js only attaches its single-element loader (Flourish.loadEmbed) if window.Flourish
685     already exists. Define it up front (same as the examples page) so the gallery modal can
686     init one embed at a time without re-scanning/re-initialising the scrollytelling story. -->
687<script>window.Flourish = window.Flourish || {};</script>
687
688<div class="landing-wrapper">
689    <section id="header-section">
690        <h1>Where <span style="color: #135AE1; background-image: linear-gradient(#D0DBF3, #D0DBF3);">data</span> meets <span style="color: #9852D9; background-image: linear-gradient(#E7D9F6, #E7D9F6);">storytelling</span></h1>
691        <p>Create stunning charts, maps and interactive content that engage and inspire – instantly. No coding required.</p>
692        <div class="call-to-actions">
693            <a target="_blank" rel="noopener" href="https://app.flourish.studio/templates/data-first" class="cta-button" data-track="click" data-component="primary_cta" data-section="hero">Get started now</a>   
694            <a href="/talk-to-us/" class="cta-button secondary" data-track="click" data-component="secondary_cta" data-section="hero">Talk to us</a>
695        </div>   
696    </section>
697
698    <section id="demo">
699        <div class="row-inner">
700            <div id="demo-video">
701                <video poster="/images/homepage/homepage_poster_jul2026.png" playsinline autoplay loop muted preload="none">
702                    <source media="(max-width: 819px)" src="/images/homepage/homepage_video_jul2026-mobile.mp4" type="video/mp4">
703                    <source src="/images/homepage/homepage_video_jul2026.mp4" type="video/mp4">
704                </video>
705            </div>
706        </div>
707        <p class="logo-container-label"><strong>Trusted by leaders worldwide</strong> to reach audiences of millions every day</p>
708        <div class="logo-container-holder">
709            <div class="logo-container">
710                <div role="img" aria-label="Atlantic Council logo" class="client-logo" style="background-image:url(/images/clients/white_atlantic_council_logo.png)"></div>
711                <div role="img" aria-label="WPP logo" class="client-logo" style="background-image:url(/images/clients/white_wpp_logo.svg)"></div>
712                <div role="img" aria-label="Sky News logo" class="client-logo" style="background-image:url(/images/clients/white_sky_news_logo.png)"></div>
713                <div role="img" aria-label="HP logo" class="client-logo" style="background-image:url(/images/clients/white_hp_logo.svg)"></div>
714                <div role="img" aria-label="FT logo" class="client-logo" style="background-image:url(/images/clients/white_ft_logo.png)"></div>
715                <div role="img" aria-label="BBC logo" class="client-logo" style="background-image:url(/images/clients/white_bbc_logo.svg)"></div>
716                <div role="img" aria-label="Which? logo" class="client-logo" style="background-image:url(/images/clients/white_which_logo.png)"></div>
717                <div role="img" aria-label="EDF logo" class="client-logo" style="background-image:url(/images/clients/white_edf_logo.png)"></div>
718                <div role="img" aria-label="WRI logo" class="client-logo" style="background-image:url(/images/clients/white_wri_logo.png)"></div>
719                <div role="img" aria-label="EY logo" class="client-logo" style="background-image:url(/images/clients/white_ey_logo.png)"></div>
720                <div role="img" aria-label="LSEG logo" class="client-logo" style="background-image:url(/images/clients/white_lseg_logo.png)"></div>
721                <div role="img" aria-label="Yahoo logo" class="client-logo" style="background-image:url(/images/clients/white_yahoo_logo.webp)"></div>
722                <div role="img" aria-label="Atlantic Council logo" class="client-logo" style="background-image:url(/images/clients/white_atlantic_council_logo.png)"></div>
723                <div role="img" aria-label="WPP logo" class="client-logo" style="background-image:url(/images/clients/white_wpp_logo.svg)"></div>
724                <div role="img" aria-label="Sky News logo" class="client-logo" style="background-image:url(/images/clients/white_sky_news_logo.png)"></div>
725                <div role="img" aria-label="HP logo" class="client-logo" style="background-image:url(/images/clients/white_hp_logo.svg)"></div>
726                <div role="img" aria-label="FT logo" class="client-logo" style="background-image:url(/images/clients/white_ft_logo.png)"></div>
727                <div role="img" aria-label="BBC logo" class="client-logo" style="background-image:url(/images/clients/white_bbc_logo.svg)"></div>
728                <div role="img" aria-label="Which? logo" class="client-logo" style="background-image:url(/images/clients/white_which_logo.png)"></div>
729                <div role="img" aria-label="EDF logo" class="client-logo" style="background-image:url(/images/clients/white_edf_logo.png)"></div>
730                <div role="img" aria-label="WRI logo" class="client-logo" style="background-image:url(/images/clients/white_wri_logo.png)"></div>
731                <div role="img" aria-label="EY logo" class="client-logo" style="background-image:url(/images/clients/white_ey_logo.png)"></div>
732                <div role="img" aria-label="LSEG logo" class="client-logo" style="background-image:url(/images/clients/white_lseg_logo.png)"></div>
733                <div role="img" aria-label="Yahoo logo" class="client-logo" style="background-image:url(/images/clients/white_yahoo_logo.webp)"></div>
734            </div>
735        </div>
736    </section>
737
738    <section id="value-prop">
739        <div class="row-inner">
740            <h2>Turn data into stories worth sharing</h2>
741            <p>From data visualizations and interactive elements to immersive storytelling, Flourish empowers you to turn complex data into interactive visuals that wow your audience - whether you're an expert or just starting out.</p>
742        </div>
743        <div class="examples-gallery-cta">
744            <a href="/examples/" class="cta-button secondary" data-track="click" data-component="secondary_cta" data-section="examples_gallery">Browse examples</a>
745        </div>
746        
747        <div class="examples-gallery" data-section="examples_gallery">
748            <ul>
749                
750                    <li>
751                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29601929"
752                            data-index="0"
753                            data-chart-type="Area chart"
754                            data-make-label="Make an area chart"
755                            data-make-url="https://app.flourish.studio/visualisation/29601929/duplicate"
756                            data-viz="visualisation/29601929"
757                            aria-label="Preview Area chart">
758                            <img loading="lazy" width="400" height="300" alt="Example: Area chart" src="/images/homepage/row-1-example-1.png" />
759                        </button>
760                    </li>
761                
762                    <li>
763                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/2960412
7630"
764                            data-index="1"
765                            data-chart-type="Parliament chart"
766                            data-make-label="Make a parliament chart"
767                            data-make-url="https://app.flourish.studio/visualisation/29604120/duplicate"
768                            data-viz="visualisation/29604120"
769                            aria-label="Preview Parliament chart">
770                            <img loading="lazy" width="100" height="100" alt="Example: Parliament chart" src="/images/homepage/row-1-example-2.png" />
771                        </button>
772                    </li>
773                
774                    <li>
775                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29601931"
776                            data-index="2"
777                            data-chart-type="Treemap"
778                            data-make-label="Make a treemap"
779                            data-make-url="https://app.flourish.studio/visualisation/29601931/duplicate"
780                            data-viz="visualisation/29601931"
781                            aria-label="Preview Treemap">
782                            <img loading="lazy" width="300" height="200" alt="Example: Treemap" src="/images/homepage/row-1-example-3.png" />
783                        </button>
784                    </li>
785                
786                    <li>
787                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29601932"
788                            data-index="3"
789                            data-chart-type="Scatter plot"
790                            data-make-label="Make a scatter plot"
791                            data-make-url="https://app.flourish.studio/visualisation/29601932/duplicate"
792                            data-viz="visualisation/29601932"
793                            aria-label="Preview Scatter plot">
794                            <img loading="lazy" width="100" height="100" alt="Example: Scatter plot" src="/images/homepage/row-1-example-4.png" />
795                        </button>
796                    </li>
797                
798                    <li>
799                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29601933"
800                            data-index="4"
801                            data-chart-type="Sankey"
802                            data-make-label="Make a Sankey graph"
803                            data-make-url="https://app.flourish.studio/visualisation/29601933/duplicate"
804                            data-viz="visualisation/29601933"
805                            aria-label="Preview Sankey">
806                            <img loading="lazy" width="300" height="200" alt="Example: Sankey" src="/images/homepage/row-1-example-5.png" />
807                        </button>
808                    </li>
809                
810                    <li>
811                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="story/3285507"
812                            data-index="5"
813                            data-chart-type="Column chart"
814                            data-make-label="Make a column chart"
815                            data-make-url="https://app.flourish.studio/story/3285507/duplicate"
816                            data-viz="story/3285507"
817                            aria-label="Preview Column chart">
818                            <img loading="lazy" width="300" height="200" alt="Example: Column chart" src="/images/homepage/row-1-example-6.png" />
819                        </button>
820                    </li>
821                
822                    <li>
823                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/24748709"
824                            data-index="6"
825                            data-chart-type="Gauge"
826                            data-make-label="Make a gauge chart"
827                            data-make-url="https://app.flourish.studio/visualisation/24748709/duplicate"
828                            data-viz="visualisation/24748709"
829                            aria-label="Preview Gauge">
830                            <img loading="lazy" width="100" height="100" alt="Example: Gauge" src="/images/homepage/row-1-example-7.png" />
831                        </button>
832                    </li>
833                
834            </ul>
835            <ul>
836                
837                    <li>
838                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29604034"
839                            data-index="7"
840                            data-chart-type="Dot plot"
841                            data-make-label="Make a dot plot"
842                            data-make-url="https://app.flourish.studio/visualisation/29604034/duplicate"
843                            data-viz="visualisation/29604034"
844                            aria-label="Preview Dot plot">
845                            <img loading="lazy" width="100" height="100" alt="Example: Dot plot" src="/images/homepage/row-2-example-1.png" />
846                        </button>
847                    </li>
848                
849                    <li>
850                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/19462548"
851                            data-index="8"
852                            data-chart-type="Photo slider"
853                            data-make-label="Make a photo slider"
854                            data-make-url="https://app.flourish.studio/visualisation/19462548/duplicate"
855                            data-viz="visualisation/19462548"
856                            aria-label="Preview Photo slider">
857                            <img loading="lazy" width="300" height="200" alt="Example: Photo slider" src="/images/homepage/row-2-example-2.png" />
858                        </button>
859                    </li>
860                
861                    <li>
862                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29601941"
863                            data-index="9"
864                            data-chart-type="Chord diagram"
865                            data-make-label="Make a chord diagram"
866                            data-make-url="https://app.flourish.studio/visualisation/29601941/duplicate"
867                            data-viz="visualisation/29601941"
868                            aria-label="Preview Chord diagram">
869                            <img loading="lazy" width="400" height="300" alt="Example: Chord diagram" src="/images/homepage/row-2-example-3.png" />
870                        </button>
871                    </li>
872                
873                    <li>
874                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/23819718"
875                            data-index="10"
876                            data-chart-type="3D map"
877                            data-make-label="Make a 3D map"
878                            data-make-url="https://app.flourish.studio/visualisation/23819718/duplicate"
879                            data-viz="visualisation/23819718"
880                            aria-label="Preview 3D map">
881                            <img loading="lazy" width="400" height="300" alt="Example: 3D map" src="/images/homepage/row-2-example-4.png" />
882                        </button>
883                    </li>
884                
885                    <li>
886                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29601939"
887                            data-index="11"
888                            data-chart-type="Line chart"
889                            data-make-label="Make a line chart"
890                            data-make-url="https://app.flourish.studio/visualisation/29601939/duplicate"
891                            data-viz="visualisation/29601939"
892                            aria-label="Preview Line chart">
893                            <img loading="lazy" width="400" height="300" alt="Example: Line chart" src="/images/homepage/row-2-example-5.png" />
894                        </button>
895                    </li>
896                
897                    <li>
898                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29604031"
899                            data-index="12"
900                            data-chart-type="Projection map"
901                            data-make-label="Make a map"
902                            data-make-url="https://app.flourish.studio/visualisation/29604031/duplicate"
903                            data-viz="visualisation/29604031"
904                            aria-label="Preview Projection map">
905                            <img loading="lazy" width="400" height="300" alt="Example: Projection map" src="/images/homepage/row-2-example-6.png" />
906                        </button>
907                    </li>
908                
909                    <li>
910                        <button type="button" class="example-gallery-card" data-track="click" data-component="thumbnail" data-component-id="visualisation/29602537"
911                            data-index="13"
912                            data-chart-type="Cards"
913                            data-make-label="Make Cards"
914                            data-make-url="https://app.flourish.studio/visualisation/29602537/duplicate"
915                            data-viz="visualisation/29602537"
916                            aria-label="Preview Cards">
917                            <img loading="lazy" width="300" height="200" alt="Example: Cards" src="/images/homepage/row-2-example-7.png" />
918                        </button>
919                    </li>
920                
921            </ul>
922        </div>
923
924        <!-- data-section set here so the modal's tracked elements (prev/next, make-your-own) inherit
925             examples_gallery — the dialog sits outside .examples-gallery, so the section wouldn't
926             otherwise be in their ancestor chain and would fall back to "main". -->
927        <dialog id="gallery-modal" class="gallery-modal" aria-label="Example preview" data-section="examples_gallery">
928            <button type="button" class="gallery-modal-close" aria-label="Close preview">×</button>
929            <div class="gallery-modal-body">
930                <div class="gallery-modal-embed"></div>
931                <div class="gallery-modal-footer">
932                    <div class="gallery-modal-nav">
933                        <button type="button" class="gallery-modal-prev" aria-label="Previous example" data-track="click" data-section-id="preview" data-component="carousel_nav" data-component-id="left">‹</button>
934                        <span class="gallery-modal-counter" aria-live="polite"></span>
935                        <button type="button" class="gallery-modal-next" aria-label="Next example" data-track="click" data-section-id="preview" data-component="carousel_nav" data-component-id="right">›</button>
936                    </div>
937                    <a class="gallery-modal-make-own" href="https://app.flourish.studio/templates" target="_blank" rel="noopener" data-track="click" data-section-id="preview" data-component="secondary_cta"></a>
938                </div>
939            </div>
940        </dialog>
941    </section>
942
943    <section id="usps">
944        <div class="row-inner">
945            <div class="row feature-section">
946                <div class="row-header">
947                    <h3>Your data, fully interactive</h3>
948                    <p>Transform raw data into interactive visualizations that are as sleek as they are engaging. Say goodbye to static charts and let your audience explore, connect, and truly understand your story.</p>
949                </div>
950                <div class="row-visual">
951                    <video muted autoplay loop playsinline preload="none" poster="/images/homepage/home_page_usp1.jpg">
952                        <source media="(max-width: 819px)" src="/images/homepage/home_usp_1-mobile.mp4" type="video/mp4">
953                        <source src="/images/homepage/home_usp_1.mp4" type="video/mp4">
954                    </video>
955                </div>
956            </div>
957            <div class="row feature-section text-right">
958                <div class="row-header">
959                    <h3>No-code creation, stunning results</h3>
960                    <p>Create professional-grade visuals in minutes — no coding, no hassle. Simply import your data and transform it into interactive visuals that grab attention. 
961                        It's as easy as it gets.</p>
962                </div>
963                <div class="row-visual">
964                    <video muted autoplay loop playsinline preload="none" poster="/images/homepage/home_page_usp2.jpg">
965                        <source media="(max-width: 819px)" src="/images/homepage/home_usp_2-mobile.mp4" type="video/mp4">
966                        <source src="/images/homepage/home_usp_2.mp4" type="video/mp4">
967                    </video>
968                </div>
969            </div>
970            <div class="row feature-section">
971                <div class="row-header">
972                    <h3>Share anywhere, look great everywhere</h3>
973                    <p>Seamlessly share and embed your visualisations across platforms—websites, presentations, social media assets and more. Watch them adapt beautifully to any screen, captivating audiences across all devices. </p>
974                </div>
975                <div class="row-visual">
976                    <video muted autoplay loop playsinline preload="none" poster="/images/homepage/home_page_usp3.jpg">
977                        <source media="(max-width: 819px)" src="/images/homepage/home_usp_3-mobile.mp4" type="video/mp4">
978                        <source src="/images/homepage/home_usp_3.mp4" type="video/mp4">
979                    </video>
980                </div>
981            </div>
982            <div class="row feature-section text-right">
983                <div class="row-header">
984                    <h3>Team up, stay on brand</h3>
985                    <p>
985Simplify collaboration and ensure your visuals stay polished and on-brand.  Advanced sharing and customization options let your team create with confidence.</p>
986                </div>
987                <div class="row-visual">
988                    <video muted autoplay loop playsinline preload="none" poster="/images/homepage/home_page_usp4.jpg">
989                        <source media="(max-width: 819px)" src="/images/homepage/home_usp_4-mobile.mp4" type="video/mp4">
990                        <source src="/images/homepage/home_usp_4.mp4" type="video/mp4">
991                    </video>
992                </div>
993            </div>
994            <div class="row feature-section">
995                <div class="row-header">
996                    <h3>Create faster with AI, stay in control</h3>
997                    <p>Start in your AI tool with the <a href="/product/mcp-connector/"><u>Connector</u></a>, then refine in Flourish with the <a href="/product/ai-assistant/"><u>Assistant</u></a>. Get from data to polished, interactive visual faster — with every change still in your hands.</p>
998                </div>
999                <div class="row-visual">
1000                    <video muted autoplay loop playsinline preload="none" poster="/images/homepage/home_page_usp5.png">
1001                        <source media="(max-width: 819px)" src="/images/homepage/home_usp_5-mobile.mp4" type="video/mp4">
1002                        <source src="/images/homepage/home_usp_5.mp4" type="video/mp4">
1003                    </video>
1004                </div>
1005            </div>
1006        </div>
1007    </section>
1008
1009    <!-- industry cards are being redesigned -->
1010    <section id="industries" data-section="industry_selector">
1011        <div class="row-inner">
1012            <h2>Flourish for
1013                <select id="industry-selector" autocomplete="off" aria-label="Choose an industry" data-track="click" data-component="dropdown">
1014                    <option value="financial-services" selected>Financial Services</option>
1015                    <option value="professional-services">Professional Services</option>
1016                    <option value="newsrooms">Newsrooms</option>
1017                    <option value="marketing">Marketing</option>
1018                    <option value="not-for-profit">Nonprofits</option>
1019                    <option value="education">Education</option>
1020                    <option value="government">Government</option>
1021                </select>
1022            </h2>
1023            <div class="industry-container">
1024                <p class="industry-description"></p>
1025                <ul class="checklist"></ul>
1026                <p class="industry-logo-label">Used by thousands of companies every day, including:</p>
1027                <div class="industry-logo-container"></div>
1028                <a href="#" class="cta-button" data-track="click" data-component="secondary_cta"></a>
1029            </div>
1030        </div>
1031    </section>
1032
1033    <!-- scrolly -->
1034    <section id="scrolly-section">
1035        <div class="flourish-embed" data-src="story/2710373?804905" data-height="80vh">
1036            
1036<script src="https://public.flourish.studio/resources/embed.js" data-ot-ignore></script>
1036
1037            <noscript><img src="https://public.flourish.studio/story/2710373/thumbnail" width="100%" alt="visualization" /></noscript>
1038        </div>
1039
1040    </section>
1041
1042    <!-- same as quotes section on solutions landing pages -->
1043    <section id="testimonials">
1044        <div class="row-inner">
1045            <div class="landing-clients">
1046                <div class="quotes">
1047                        <div class="quote">
1048                            <blockquote>Flourish support is great: accessible, friendly, pursuing solutions for our eternal ‘exception of the rules’ queries to make visualizations work in our 40 languages.”</blockquote>
1049                            <p>Roberto Belo-Rovella<br>Editor, BBC World Service</p>
1050                        </div>
1051                        <div class="quote">
1052                            <blockquote>We live and breathe data, and no tool has enabled us to bring our data to life in a beautiful way better than Flourish has. It's a game changer.”</blockquote>
1053                            <p>Joel Leeman <br>Sr. Executive Producer, London Stock Exchange</p>
1054                        </div>
1055                </div>
1056            </div>
1057        </div>
1058    </section>
1059
1060    <section id="end-screen">
1061        <div class="row-inner">
1062            <div class="end-screen-visual">
1063                <img loading="lazy" src="https://public.flourish.studio/uploads/654906/8401fa69-e289-40dd-97a1-c411e9f76f17.webp" alt="Connect with the Flourish team"/>
1064            </div>
1065            <div class="end-screen-content">
1066                <h2>Let’s connect</h2>
1067                <p>Ready to transform your work with data storytelling? Connect with our team to learn more and get started today!</p>
1068                <a href=" /talk-to-us/" class="cta-button" data-track="click" data-component="secondary_cta" data-section="closing_cta">Get in touch</a>
1069            </div>
1070        </div>
1071    </section>
1072
1073    <div class="row-inner">
1074    <!-- FAQ might not be used anymore -->
1075    <section id="faq" data-section="faq">
1076        <button type="button" class="collapsible" id="what-is-flourish" data-track="toggle" data-component="accordion" data-component-id="accordion_item_1">What is Flourish?</button>
1077        <div class="collapsible-content">Flourish is a powerful data visualization platform that empowers the world to tell stories with data.
1078            Trusted by organizations and newsrooms worldwide, Flourish helps creators bring data narratives to life with highly engaging, interactive and impressive visualizations.
1079            Our extensive library of templates and seamless embedding options make every data story informative and truly captivating.</div>
1080        <br><br>
1081        <button type="button" class="collapsible" id="who-is-behind-flourish" data-track="toggle" data-component="accordion" data-component-id="accordion_item_2">Who is behind Flourish?</button>
1082        <div class="collapsible-content">Flourish was co-founded in 2018 by <a href="https://flourish.studio/company/" target="_blank" rel="noopener">Duncan Clark and Robin Houston</a>. Duncan has a background in data journalism and publishing, while Robin is a mathematician and developer. In 2022, Canva acquired Flourish with the shared goal of democratizing data storytelling and making data visualization accessible to all. Read more about this <a href="https://flourish.studio/blog/flourish-canva/" target="_blank" rel="noopener">here</a>.
1083        </div><br><br>
1084        <button type="button" class="collapsible" id="how-does-flourish-differ" data-track="toggle" data-component="accordion" data-component-id="accordion_item_3">How does Flourish differ from other data visualization tools?</button>
1085			<div class="collapsible-content">
1086 			Flourish sets itself apart through:<br>
1087					<ul>
1088					<li><b>Ease of use</b>: No specific technical skills are needed thanks to its template-based system and intuitive user interface.</li>
1089					<li><b>Storytelling</b>: Flourish is uniquely designed to facilitate narrative visualizations, such as scrollytelling, interactive presentations, and audio-driven stories.</li>
1090					<li><b>Flexibility</b>: The Flourish SDK lets developers create custom templates without limitations on functionality or design.</li>
1091					<li><b>Publishability</b>: All outputs are styled for robustness, capable of reaching unlimited audiences, and optimized for mobile viewing.</li></ul>
1092			</div><br><br>
1093		<button type="button" class="collapsible" id="is-flourish-a-bi-tool" data-track="toggle" data-component="accordion" data-component-id="accordion_
1093item_4">Is Flourish a business intelligence tool?</button>
1094			<div class="collapsible-content">Flourish is not typically regarded as a business intelligence tool. While its templates and <a href="https://developers.flourish.studio/api/introduction/" target="_blank" rel="noopener">API</a> allow for data exploration and dashboard integration, its primary focus is on data storytelling, especially for presentations and digital publications.
1095			</div><br><br>
1096    </section>
1097    </div>
1098
1099</div>
1100
1101
1102<script>
1103    document.addEventListener("DOMContentLoaded", function() {
1104        const isMobile = window.innerWidth <= 819;
1105
1106        if (isMobile) {
1107            [document.querySelector("#demo-video video"), ...document.querySelectorAll("#usps .row-visual video")].forEach(function(video) {
1108                const mobilePoster = video.poster.replace(/(\.\w+)$/, "-mobile$1");
1109                const img = new Image();
1110                img.onload = function() { video.poster = mobilePoster; };
1111                img.src = mobilePoster;
1112            });
1113        }
1114
1115        const heroVideo = document.querySelector("#demo-video video");
1116        heroVideo.load();
1117        heroVideo.play();
1118        initIndustrySelector();
1119        initFaq();
1120        initExamplesGallery();
1121    });
1122
1123    function initExamplesGallery() {
1124        const cards = Array.from(document.querySelectorAll(".example-gallery-card"));
1125        const gallery = document.querySelector(".examples-gallery");
1126        const modal = document.getElementById("gallery-modal");
1127        if (!cards.length || !modal) return;
1128
1129        const embedContainer = modal.querySelector(".gallery-modal-embed");
1130        const makeBtn = modal.querySelector(".gallery-modal-make-own");
1131        const counter = modal.querySelector(".gallery-modal-counter");
1132        const prevBtn = modal.querySelector(".gallery-modal-prev");
1133        const nextBtn = modal.querySelector(".gallery-modal-next");
1134        const closeBtn = modal.querySelector(".gallery-modal-close");
1135
1136        let currentIndex = 0;
1137
1138        function showExample(index) {
1139            // Wrap around so prev from 0 goes to last, next from last goes to 0
1140            currentIndex = ((index % cards.length) + cards.length) % cards.length;
1141            const card = cards[currentIndex];
1142            const viz = card.dataset.viz;
1143            const makeLabel = card.dataset.makeLabel;
1144            const makeUrl = card.dataset.makeUrl;
1145
1146            // Responsive Flourish embed. We use embed.js's single-element loader (Flourish.loadEmbed)
1147            // rather than reloading the whole script: reloading re-scans EVERY .flourish-embed on the
1148            // page and was re-initialising the scrollytelling story. loadEmbed only inits this one element.
1149            // embed.js is already on the page (loaded by the scrolly section).
1150            embedContainer.innerHTML = '<div class="flourish-embed" data-src="' + viz + '?654906" data-height="30rem"></div>';
1151            const embedEl = embedContainer.querySelector(".flourish-embed");
1152            // Ensure embed.js is on the page (it usually already is, via the scrolly section).
1153            if (!(window.Flourish && window.Flourish.loadEmbed) && !document.querySelector('script[src*="flourish.studio/resources/embed.js"]')) {
1154                const flScript = document.createElement("script");
1155                flScript.src = "https://public.flourish.studio/resources/embed.js";
1156                flScript.setAttribute("data-ot-ignore", "");
1157                document.body.appendChild(flScript);
1158            }
1159            // Init this one embed once Flourish.loadEmbed is available. embed.js loads async, so on a
1160            // fast click it may not be ready yet — retry until it is (bail if the modal has moved on).
1161            (function initEmbed() {
1162                if (!embedEl.isConnected) return;
1163                if (window.Flourish && window.Flourish.loadEmbed) {
1164                    window.Flourish.loadEmbed(embedEl);
1165                } else {
1166                    setTimeout(initEmbed, 100);
1167                }
1168            })();
1169            makeBtn.innerHTML = '<i class="fa fa-external-link"></i>' + makeLabel;
1170            makeBtn.href = makeUrl;
1171            // The modal is shared across all cards, so update its tracking id per preview
1172            // (matches examples.js — otherwise Snowplow reports a stale/missing viz).
1173            makeBtn.setAttribute("data-component-id", viz);
1174            // Re-run Snowplow's cross-domain linker so it decorates this just-updated href
1175            // (same as the examples preview modal — dynamically-set anch
1175ors miss _sp otherwise).
1176            if (window.flourishApplyCrossDomainLinker) window.flourishApplyCrossDomainLinker();
1177            counter.textContent = (currentIndex + 1) + " / " + cards.length;
1178        }
1179
1180        cards.forEach((card) => {
1181            card.addEventListener("click", function() {
1182                const i = parseInt(card.dataset.index, 10) || 0;
1183                showExample(i);
1184                if (typeof modal.showModal === "function") {
1185                    modal.showModal();
1186                } else {
1187                    modal.setAttribute("open", "");
1188                }
1189                gallery.classList.add("is-paused");
1190            });
1191        });
1192
1193        prevBtn.addEventListener("click", function() { showExample(currentIndex - 1); });
1194        nextBtn.addEventListener("click", function() { showExample(currentIndex + 1); });
1195
1196        // Mirrors the showModal/setAttribute fallback above — on browsers without <dialog>
1197        // support, modal.close() doesn't exist and would throw, and the "close" event below
1198        // never fires, so do the cleanup here directly instead of relying on it.
1199        function closeModal() {
1200            if (typeof modal.close === "function") {
1201                modal.close();
1202            } else {
1203                modal.removeAttribute("open");
1204                embedContainer.innerHTML = "";
1205                gallery.classList.remove("is-paused");
1206            }
1207        }
1208
1209        closeBtn.addEventListener("click", closeModal);
1210
1211        // Click on backdrop (the dialog itself, outside its body) closes the modal
1212        modal.addEventListener("click", function(e) {
1213            if (e.target === modal) closeModal();
1214        });
1215
1216        // Keyboard nav inside the modal
1217        modal.addEventListener("keydown", function(e) {
1218            if (e.key === "ArrowLeft") showExample(currentIndex - 1);
1219            if (e.key === "ArrowRight") showExample(currentIndex + 1);
1220        });
1221
1222        modal.addEventListener("close", function() {
1223            // Stop the embed and free memory
1224            embedContainer.innerHTML = "";
1225            gallery.classList.remove("is-paused");
1226        });
1227    }
1228
1229    function initIndustrySelector() {
1230        // Map industry IDs to component IDs for tracking
1231        const industryToComponentId = {
1232            "financial-services": "financial_services",
1233            "professional-services": "professional_services",
1234            "newsrooms": "newsrooms", 
1235            "marketing": "marketing",
1236            "not-for-profit": "non_profits",
1237            "education": "education",
1238            "government": "government"
1239        };
1240
1241        const industries_content = {
1242             "financial-services": {
1243                "name": "Financial Services",
1244                "description": "Say goodbye to dull charts and complex dashboards and experience the power of memorable data storytelling. ",
1245                "checklist": ["Interactive visuals for client pitches", "Real-time visualizations for client insights", "Full data control with Flourish API", "Easy, secure collaboration"],
1246                "logos": ["white_bdo_logo", "white_goldman_sachs_logo", "white_s_p_global_logo"]
1247            },
1248            "professional-services": {
1249                "name": "Professional Services",
1250                "description": "Turn any insights into powerful, client-ready visuals that tell a clear story, capture attention and drive action.",
1251                "checklist": ["Interactive graphs for client reports", "Data-driven, animated presentations", "Live data visualization for rapid insights", "Easy, secure collaboration"],
1252                "logos": ["white_accenture_logo", "white_ey_logo", "white_hp_logo"]
1253            },
1254            "newsrooms": {
1255                "name": "Newsrooms",
1256                "description": "Bring any data to life with interactive visualizations. Supercharge your reporting and engage your audience like never before.",
1257                "checklist": ["Interactive charts and maps", "No-code scrollytelling experiences", "Live-updating data visualization", "Magical animations and transitions"],
1258                "logos": ["white_bbc_logo", "white_ft_logo", "white_sky_news_logo"]
1259            },
1260            "marketing": {
1261                "name": "Marketing",
1262                "description": "Create stunning visual stories that drive engagement and win recognition. Quickly, intuitively, code-free.",
1263                "checklist": ["On-brand, interactive visualizations", "Immersive scrollytelling experiences", "Extensive library of ready-to-use templates", "Effortless embedding across all platforms"],
1264                "logos": ["white_wpp_logo", "white_wired_logo", "white_yahoo_logo"]
1265            },
1266            "government": {
1267                "name": "Government",
1268                "description": "Bring your data to life with interactive visuals that make complex insights easy to share and understand.",
1269                "checklist": ["No-code data visualizations", "Extensive library of ready-to-use templates", "Built-in accessibility features", "Secure, compliant data visualizations"],
1270                "logos": ["white_european_council_logo", "white_euaa_logo", "white_un_logo"]
1271            },
1272            "not-for-profit": {
1273                "name": "Nonprofits",
1274                "description": "Transform complex data into memorable stories that resonate with diverse audiences, drive awareness, and inspire meaningful change.",
1275                "checklist": ["No-code data visualizations", "Immersive, data-led presentations", "Built-in accessibility features", "Effortless embedding across all platforms"],
1276                "logos": ["white_atlantic_council_logo", "white_which_logo", "white_wri_logo"]
1277            },
1278            "education": {
1279                "name": "Education",
1280                "description": "Bridge the gap between data and storytelling. Whether you’re an educator, researcher, or student, Flourish makes teaching, presenting, and mastering data easy.",
1281                "checklist": ["Interactive, no-code visualizations", "Extensive library of ready-to-use templates", "Dynamic, data-led presentations", "Built-in accessibility features"],
1282                "logos": ["white_washington_university_logo", "white_harvard_university_logo", "white_stanford_hai_logo"]
1283            },
1284        }
1285
1286        const selector = document.querySelector("#industry-selector");
1287        const ctaButton = document.querySelector("#industries .cta-button");
1288
1289        // Update dropdown and CTA button component_id when selection changes
1290        selector.addEventListener("change", function() {
1291            const selectedValue = this.value;
1292            const componentId = industryToComponentId[selectedValue];
1293
1294            // Update dropdown's component_id for tracking
1295            selector.setAttribute('data-component-id', componentId);
1296
1297            updateIndustry(selectedValue);
1298        });
1299
1300        function updateIndustry(industry_id) {
1301            const content = industries_content[industry_id];
1302            if (!content) return;
1303
1304            const componentId = industryToComponentId[industry_id];
1305
1306            document.querySelector("#industries .industry-description").textContent = content.description;
1307            document.querySelector("#industries .checklist").innerHTML = content.checklist.map(item => `<li><div class="checklist-icon"><img loading="lazy" src="/images/icon-check-large.svg" alt=""></div><p>${item}</p></li>`).join("");
1308            document.querySelector("#industries .industry-logo-container").innerHTML = content.logos.map(logo => `<div class="client-logo" style="background-image: url(/images/clients/${logo}.png)"></div>`).join("");
1309            ctaButton.innerText = `Flourish for ${content.name}`;
1310            ctaButton.href = `/solutions/${industry_id}/`;
1311
1312            // Update CTA button's component_id for tracking
1313            ctaButton.setAttribute('data-component-id', componentId);
1314
1315            // Update dropdown's component_id for tracking (also set on initial load)
1316            selector.setAttribute('data-component-id', componentId);
1317        }
1318
1319        updateIndustry("financial-services");
1320    }
1321
1322    function initFaq() {
1323        var buttons = document.getElementsByClassName("collapsible");
1324
1325        // Add click event listener to each collapsible button
1326        Array.from(buttons).forEach(function(button) {
1327            button.addEventListener("click", function() {
1328                // Toggle active class
1329                this.classList.toggle("active");
1330
1331                // Show or hide the content
1332                var content = this.nextElementSibling;
1333                if (content.style.display === "block") {
1334                    content.style.display = "none";
1335                }
1336                else {
1337                    content.style.display = "block";
1338                }
1339            });
1340        });
1341    }
1342</script>
1342
1343		</div>
1344	</div>
1345
1346	<div class="row footer" data-section="footer">
1347    <div class="row-contents">
1348        <div class="row-inner">
1349            <div class="footer-container">
1350                <!-- Company section -->
1351                <div class="footer-section company" data-section-group="company">
1352                    <h4>Company</h4>
1353                    <ul>
1354                        <li><a href="/company/" data-track="click" data-component="about">About us</a></li>
1355                        <li><a target="_blank" rel="noopener" href="https://www.lifeatcanva.com/en/locations/united-kingdom/" data-track="click" data-component="careers">Careers</a></li>
1356                        <li><a href="/security/" data-track="click">Security</a></li>
1357                        <li><a href="/pricing/" data-track="click">Pricing</a></li>
1358                        <li><a href="/terms/" data-track="click">Terms</a></li>
1359                        <li><a href="/privacy/" data-track="click">Privacy policy</a></li>
1360                        <li><a href="/resources/faq/" data-track="click">FAQs</a></li>
1361                    </ul>
1362                </div>
1363
1364                <!-- Product section -->
1365                <div class="footer-section product" data-section-group="product">
1366                    <h4>Product</h4>
1367                    <ul>
1368                        <li><a href="/product/data-visualization/" data-track="click" data-component="data-visualization">Data visualization</a></li>
1369                        <li><a href="/product/data-storytelling/" data-track="click" data-component="data-storytelling">Flourish stories</a></li>
1370                        <li><a href="/product/interactive-content/" data-track="click" data-component="interactive-content">Interactive content</a></li>
1371                        <li><a href="/product/ai-assistant/" data-track="click" data-component="ai-assistant">Flourish Assistant</a></li>
1372                        <li><a href="/product/mcp-connector/" data-track="click" data-component="mcp-connector">Flourish Connector</a></li>
1373                        <li><a href="/integrations/powerpoint/" data-track="click" data-component="powerpoint">Powerpoint</a></li>
1374                    </ul>
1375                </div>
1376
1377                <!-- Explore section -->
1378                <div class="footer-section explore" data-section-group="explore">
1379                    <h4>Explore</h4>
1380                    <ul>
1381                        <li><a href="/examples/" data-track="click">Examples</a></li>
1382                        <li><a href="/resources/elections/" data-track="click">Elections & polls</a></li>
1383                        <li><a href="/resources/sports/" data-track="click">Sports & competitions</a></li>
1384                        <li><a href="/visualisations/maps/" data-track="click">Interactive maps</a></li>
1385                        <li><a href="/resources/visualize-survey-data/" data-track="click" data-component="survey">Survey responses</a></li>
1386                        <li><a href="/visualisations/scrollytelling/" data-track="click">Scrollytelling</a></li>
1387                        <li><a href="/visualisations/" data-track="click">Chart guides</a></li>
1388                        <li><a href="/usecases/ai-workflows/" data-track="click" data-component="AI-workflows">AI-powered workflows</a></li>
1389                        <li><a href="/blog/" data-track="click">Blog</a></li>
1390                    </ul>
1391                </div>
1392
1393                <!-- Solutions section -->
1394                <div class="footer-section solutions" data-section-group="solutions">
1395                    <h4>Solutions</h4>
1396                    <ul>
1397                        <li><a href="/solutions/financial-services/" data-track="click" data-component="financial">Financial services</a></li>
1398                        <li><a href="/solutions/professional-services/" data-track="click" data-component="professional">Professional services</a></li>
1399                        <li><a href="/solutions/newsrooms/" data-track="click">Newsrooms</a></li>
1400                        <li><a href="/solutions/marketing/" data-track="click">Marketing</a></li>
1401                        <li><a href="/solutions/not-for-profit/" data-track="click" data-component="nonprofit">Nonprofits</a></li>
1402                        <li><a href="/solutions/government/" data-track="click">Government</a></li>
1403                        <li><a href="/solutions/education/" data-track="click">Education</a></li>
1404                        <li><a href="/case-studies/" data-track="click" data-component="case_studies">Case studies</a></li>
1405                    </ul>
1406                </div>
1407
1408                <!-- Resources section -->
1409                <div class="footer-section resources" data-section-group="resources">
1410                    <h4>Resources</h4>
1411                    <ul>
1412                        <li><a href="/learn/master-data-storytelling/" data-track="click" data-component="master_data_storytelling">Master data storytelling</a></li>
1413                        <li><a href="/whats-new/" data-track="click" data-component="whats_new">What's new</a></li>
1414                        <li><a target="_blank" rel="noopener" href="https://help.flourish.studio/" data-track="click" data-component="help_docs">Help docs</a></li>
1415                        <li><a href="/resources/training/" data-track="click" data-component="training">Training</a></li>
1416                        <li><a href="/resources/webinar/" data-track="click" data-component="webinars">Webinars</a></li>
1417                        <li><a href="/resources/datasets/" data-track="click" data-component="datasets">Datasets</a></li>
1418                        <li><a href="/accessibility/" data-track="click" data-component="accessibility">Accessibility</a></li>
1419                        <li><a href="/experts/" data-track="click" data-component="experts">Experts network</a></li>
1420                        <li><a target="_blank" rel="noopener" href="https://developers.flourish.studio/" data-track="click" data-component="developers">For developers</a></li>
1421                    </ul>
1422                </div>
1423
1424                <!-- Company info -->
1425                <div class="footer-section company-info">
1426                    <h4>Flourish</h4>
1427                    <p class="break-text">Flourish is a registered trademark of <span>Canva UK Operations Ltd, UK</span></p>
1428                    <p>company 08825531</p>
1429                    <p>33 Hoxton Square</p>
1430                    <p>London N1 6NN</p>
1431                </div>
1432            </div>
1433        </div>
1434
1435        <!-- Stay in touch section -->
1436        <div class="footer-container-black">
1437            <div class="row-inner">
1438                <div class="footer-section stay-in-touch">
1439                    <h4>Stay in touch</h4>
1440                    <div class="footer-row-items">
1441                        <div class="btn-social-container">
1442                            <a href="/newsletter/" data-track="click" data-component="newsletter">
1443                                <div class="footer-btn">Subscribe to our newsletter</div>
1444                            </a>
1445                            <div class="social-links" data-section-group="social">
1446                                <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">
1447                                    <img loading="lazy" class="icon" src="/images/icons/x-logo.svg" alt="">
1448                                </a>
1449                                <a target="_blank" rel="noopener" href="https://www.instagram.com/madewithflourish/" aria-label="instagram" data-track="click" data-component="instagram">
1450                                    <img loading="lazy" class="icon" src="/images/icons/instagram-logo.svg" alt="">
1451                                </a>
1452                                <a target="_blank" rel="noopener" href="https://www.linkedin.com/company/flourishstudio" aria-label="LinkedIn" data-track="click" data-component="linkedin">
1453                                    <img loading="lazy" class="icon" src="/images/icons/linkedin-logo.svg" alt="">
1454                                </a>
1455                                <a target="_blank" rel="noopener" href="https://www.youtube.com/channel/UCWTf4OgEH_MiDvfmjPdkTxg" aria-label="YouTube" data-track="click" data-component="youtube">
1456                                    <img loading="lazy" class="icon" src="/images/icons/youtube-logo.svg" alt="">
1457                                </a>
1458                            </div>
1459                        </div>
1460                        <div class="footer-credit">
1461                            <p>© 2026 Flourish, a Canva UK Operations Limited brand. All rights reserved.</p>
1462                        </div>
1463                    </div>
1464                </div>
1465            </div>
1466        </div>
1467    </div>
1468</div>
1469
1470	
1471<script src="/js/script.js?25b7584ebb44e3c2b576ed25561479b7"></script>
1471
1472
1473	
1474<script src="/js/store-inbound-fields.js?272e3c837830d9f746a5abf71a642972"></script>
1474
1475
1476
1477	
1478	
1479
1480</body>
1481</html>
1482
1483

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.