Collusion logo A workshop on animating data feeds for Collusion's Data-Culture Lab 16-20 January 2017.

Loading Data Feeds

There are many websites that publish live data and the most popular way for publishing the information is in a JSON feed. JSON has displaced XML as the most popular format.

JSON makes it easy for both humans and computers to read the information.

JSON feeds are made available through APIs, Application Programming Interfaces. They are a way for data to be used by developers within their own designs. Large social media platforms such as Facebook, Twitter, Flickr etc have APIs. Programmable APIs

Wunderground have an api for developers to see their weather forecast for specific locations around the world. To start using their API look at their documentation page.

We will use AJAX to load the data into an html page. AJAX stands for Asynchronous JavaScript and XML

AJAX enables a web page to update without the user refreshing the page. Gmail uses AJAX to show new emails. Gmails users can leave Gmail open in their browser and see emails appear in the browser as they arrive.

Like other APIs wunderground has documentation

The weather API has a set of conditions codes to describe all weather. The condition codes are illustrated with stock drawings. You could visualise weather data by replacing the stock images with your own drawings.

Animating Illustrator Files

Adobe Illustrator generates SVG files, which stands for Scalable Vector Graphic. SVG files can also be created in the free and open source application Inkscape. The individual elements of the file can be animated with snap.svg a javascript library

Play with the CodePen example

Or you could download the source files and experiment with the code on your own machine.

But you will need to create a local server in order to animate the SVG. On OSX you could start a simple server. Or you could set up a test server such as XAMPP. XAMPP has PHP and MySQL so you can program databases on your local machine before uploading to a live website.


1,196 0 8