The Open Knowledge Foundation’s Open Spending platform is a hive of activity and packed full of colorful displays of spending and budgets from all over the world. Its aim is to help track government and corporate financial transactions across the world and present them in useful and engaging forms.
For some time now, users have been able to upload any of their own spending to the platform and make a range of visualizations, but now you can embed any of the visualizations on your own website. This means you can have the full interactive display on your site.
How to embed
Let’s say you have chosen a visualization on the Open Spending platform; notice there’s an “embed” button at the bottom right of the webpage. The red arrow points to the button below.
Just click “embed” and you’ll be presented with the code to embed on your website and some options for the size (in pixels) of the interactive.
The rest is just cut and pasting this code extract into your site.
So, if you’re a journalist looking to add an interactive to your online news story, an NGO looking to show spending on your cause, or you work in a government department and want to show how you allocate funds, then you can add this code to your site. If you are unsure how to paste the code then contact your site administrator.
The reason it’s possible to embed code comes down to the Open Spending widgets.
In very simplified terms a widget is a piece of code you can add into your webpage, and it pulls data — in this case from the Open Spending database — so you don’t need to store datasets yourself. If you have any difficulties or questions about using the Open Spending widgets, then please don’t hesitate to contact the Open Spending team. If you’re curious about how the widget code works, then here are three examples shown in jsfiddle where you can see the full web environment for the:
The three main visualizations we offer at the moment are listed below along with links to the open-source code on Github.
The Bubble Tree
Widget code for the bubble chart on Github is here.
The Tree Map
Widget code for the tree map on Github is here.
The table view
Widget code for the table view on Github is here.
And it’s likely more interactive displays will be available over time. Have fun with the widgets. Let us know how easy you find them to use and when you use them by posting a link to your site on the Open Spending mailing list.
Lisa Evans is a software engineer and journalist. After helping to create Where Does My Money Go, she worked with the Guardian’s datablog. She now works on Open Spending.
Interesting.