XML

This is my XML example. When you click the button, it loads the XML document, looks for each element and constructs a sentence from the Name, Date and Time of each one. I have used jQuery just to make the code a bit shorter and commented the code to make it more human-readable.

I think this is a good example because it is simple but clearly shows XML data being dynamically loaded into a page.

Load my timetable

View XML: Link to the XML file
View Code: Link to the Javascript

JSON

This is my JSON example. I have some CSS that aligns divs above eachother inside a main div. All it needs is the Div making, the colour choosing and telling how far from the top it should be. So in the JSON file, it has an ID for each layer of my burger and a colour. A simple iterator then works out how far from the top each layer should be. The Javascript loads in the JSON file, Creates a div, assigns the attributes and then repeats until there is no more data. I used an Image colour picker to match the colours of Burger King's WiFi symbol.

I like this example as it has a nice design, is quite simple and makes something fun. The burger is just data and boxes but it looks pretty cool at the end of it all.

Load a burger

View JSON: Link to the JSON file
View Code: Link to the Javascript

JSONP

This example loads in some coordinates and a fill colour from a JSONP file on antoher domain. The Javascript creates a canvas element, Loads in the data and draws a rectangle based on the data.

I feel this is a good example as, not only does it work, but it shows that data can interact with Canvas.

Load a Canvas

View JSONP: Link to the JSONP file
View Code: Link to the Javascript