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.