Workshop: Visualising Data with JavaScript ​

JSON vs JavaScript objects ​

• Create an HTML file and a linked JavaScript file.

• Create a constant which equates to a JSON string with 5 name/value pairs naming five people and their pets.

• Use JSON.parse() to convert the JSON string into a JSON object literal.

• Create five variables and make each one equal a sentence containing one of the name/value pairs.

• Print each sentence to its own paragraph tag on the page.

• Create another constant which equates to a JavaScript object with 3 name/value pairs naming three people and their favourite fruit.

• Use JSON.stringify() to convert it into a JSON string.

• Print the resulting JSON string to another paragraph element on the page.

Retrieving open JSON data from the web ​

• Create an HTML file and a linked JavaScript file.
• Use the fetch API to get emoji data from: https://api.github.com/emojis
• Use https://jsonbeautify.com/ to look at the JSON and format/beautify it.
• Pick one of the emojis which start with "smile", "smiling" or "smiley".
• Using context.drawImage() place 25 of the emojis randomly on a canvas that is 800 x 600 pixels. (Hint: you need to use Image() https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image, and then specify its src and what happens onload of the image https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement).

Experimenting with open JSON data ​

• Create an HTML file and a linked JavaScript file.
• Look at some open data sources on this page: https://github.com/jdorfman/awesome-json-datasets.
• Incorporate JSON data into a creative JavaScript program using either event handlers and the DOM, or canvas commands.