Examples

We have written a few example Flourish templates to illustrate some of the basic concepts. These will become part of a longer tutorial series.

We’ve also made the Horserace template open source as an example of a real data visualisation made in Flourish.

To get started with any of these, clone them and run them with Flourish. For example:

git clone https://github.com/kiln/example-template-data-circles
cd example-template-data-circles
npm update
flourish run

Using front-end frameworks

Because Flourish templates have a simple structure, you can use your front-end framework of choice to develop them.

This section contains a few examples. We shall add more over time. If you’d like to contribute an example in your favourite framework, please get in touch at support@flourish.studio.

Svelte

Svelte is a fairly new front-end framework that produces particularly compact and efficient self-contained code.

Rich Harris, the author of Svelte, has made a couple of example templates based on the simple examples from our examples page:

Vue.js

We also have an example template made in Vue.js, by Tom Flannery: Vue circles. You can also see it live on Glitch.