How Code for Africa created the Bubble Network template
A Q&A with CfA’s head of data about developing custom Flourish templates
One of the things many Flourish users don’t realize is that you’re not limited to the built-in templates. Any developer can also add new templates to the mix using the Flourish SDK – which is the very same tool we use in Flourish HQ for developing and publishing the core templates.
Once a new template is published, it can be used by any Flourish user with their own data and settings. Enterprise customers can even keep their templates private for their own teams and connect live data sources to them via the Flourish API.
The SDK – or “software development kit” – has been around since we launched Flourish, but we haven’t always been very good at highlighting the cool things users are making with it. With that in mind, I reached out to Jacopo Ottaviani, the head of data at Code for Africa, whose team has recently created an inventive new template called Bubble Networks.
The following Q&A has been lightly edited for clarity and length.
Q: What does the custom Bubble Networks template do?
A: Bubble Networks is a Flourish template used to visualize networks interactively. It takes a network dataset as input and generates a grid of colored connected bubbles. For instance, if a bubble represents a country, its size might represent its population. Bubbles are connected by lines when the entities they represent have a relationship, such as financial transactions. The template is also responsive, meaning it works well on mobile devices.
Q: Is the Bubble Networks template part of a larger project?
A: The Bubble Networks template was developed as part of a Code for Africa project called “Unequal Exchanges”, a data-driven story on bank secrecy made jointly with Christian Aid and the Financial Transparency Coalition. The project explored how far one key financial transparency tool, the automatic exchange of financial information, has come. It was designed and developed by a team of three people: Isacco Chiaf, an information designer based in Brussels, Emma Lewis, a developer based in London, and myself. The original “Bubble Networks” data visualization was then made into a reusable Flourish template by Alan Zard, a developer based in Rome.
Q: What was your or your organization’s experience with Flourish before making this template?
A: Code for Africa uses Flourish widely. It is used for most data journalism projects and training programs. Flourish is a very versatile tool with a great design and a fair degree of customizability. All a user needs to make data visualization with Flourish is some familiarity with datasets and online tools.
Q: Did you come across any technical challenges when actually coding the template? If so, how did you solve them?
A: The process went well. According to Alan Zard, who developed the template for us: “What surprised me was the ease of use of the Flourish SDK. The documentation is great, and the toolkit gets you in the right place from the get go. I have met occasional speedbumps along the way, as one would expect when dealing with a new development framework, and some bits I have found slightly obscure. Thankfully, I didn’t have to wait too much to receive support and clarification from Flourish. Frankly, it has been a blast.”
Q: Would you code a custom Flourish template again?
A: Absolutely. I think it’s a fantastic way to get a lot of people to use and reuse your data visualization in many different ways. From my perspective, I can’t wait to see what the Flourish community makes with our Bubble Networks template. I believe it can be applied in multiple fields and stories.
Q: Anything else you want to say?
A: Thanks for having me on the blog. I’m looking forward to connecting more with the Flourish community on Twitter and LinkedIn.
Interested in the SDK?
We’re always happy to chat with and give tips to developers who are looking to code custom Flourish templates. Install the SDK and dive into the docs here and if you have questions feel free to get in touch via hello@flourish.studio or, for newsroom users, newsrooms@flourish.studio.