• ADVERTISEMENT

    How to Embed Open Spending Visualizations In Your Own Website

    by Lisa Evans
    March 20, 2013

    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.

    ADVERTISEMENT

    i-b029f04bf5b8bef9eaacc00885d3da88-budget-eg-line.png

    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.

    i-a7af4035a1fc88235e6b49a84114f238-embed.png

    ADVERTISEMENT

    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

    i-1b4cf7e657b07ea341048912fee9dd18-bubble.png

    Widget code for the bubble chart on Github is here.

    The Tree Map

    i-1bfcb4e0a162601597ea03b035ffb4ed-squares.png
    Widget code for the tree map on Github is here.

    The table view

    i-864a3af5f8cba608cf8b65de28aaf85d-table.png

    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.

    Tagged: bubble tree government open knowledge foundation open spending tree map visualization widgets

    One response to “How to Embed Open Spending Visualizations In Your Own Website”

  • ADVERTISEMENT
  • ADVERTISEMENT
  • Who We Are

    MediaShift is the premier destination for insight and analysis at the intersection of media and technology. The MediaShift network includes MediaShift, EducationShift, MetricShift and Idea Lab, as well as workshops and weekend hackathons, email newsletters, a weekly podcast and a series of DigitalEd online trainings.

    About MediaShift »
    Contact us »
    Sponsor MediaShift »
    MediaShift Newsletters »

    Follow us on Social Media

    @MediaShiftorg
    @Mediatwit
    @MediaShiftPod
    Facebook.com/MediaShift