In this module, you will be introduced to some of the basic concepts, methods and principles of data visualization by designing and coding your own interactive infographics.
This will be an opportunity for you to get a deeper understanding of web development methods and frameworks. We will be using HTML, CSS, Javascript, p5.js, ML5 and D3.js.
Now let’s get started!
Submission: For each of these exercises (00, 01, 02, 03), upload images of your data visualizations along with screen recordings on your blog, showing the working webpages as well as your code. Once you are done with the module, go to Moodle and submit a zip folder of your code along with these recordings and images.
00 Intro
00 – Introductory Lecture (watch it here)
(link to presentation)
– History, principles and methods of data visualization
– Interactive data visualization
– Introducing the module
00A – Visual Studio Code & HTML Basics
– Installing ‘Visual Studio Code’ with Plugins ‘Live Server’ & ‘Live Preview’
– Your First Webpage: Creating your Webpage Folder
– HTML page structure
– HTML basic elements (head, body, div, h1, p, img, etc.)
– CSS styles in HTML
00B – HTML & CSS
– Installing Font Libraries
– Linking a stylesheet
00C – Ids & Classes
– Styling HTML elements from stylesheet using Ids and Classes
– Understanding hierarchies
– Padding, colors, margins, sizes, borders, etc.
00D – Javascript Function & Conditional Statement
– Setting-up a Javascript file and linking it to the HTML
– Calling a function on click
– Editing the style of an element from Javascript
00E – InnerHTML
– Introducing the innerHTML command in Javascript
00F – Functions with Arguments & Key Value Pairs
– Calling a function with arguments in Javascript
– Javascript Objects with Key-Value Pairs
00G – Array of Objects
– Exploring JSON formats
– Exploring Arrays
– Exploring Arrays of Objects
00H – Loops & Appendchild Method
– Creating A Javascript Loop
– Using the Appendchild method to populate the HTML from Javascript using Data
00I – Data Visualization Using Vanilla Javascript
– Graphic representation of quantifiable data using plain (vanilla) Javascript
Note: Before jumping into the code, proper web design can be done using platforms and software such as Figma, which is a good link between designers and developers and which will be useful for you in the future to create the wireframes of your web and mobile design projects. I invite you to explore it in your own time as well.
01 Data Analysis using P5.js and ML5.js
01B – Setting-up the Folder & Playing the Video
(download link to the Matrix trailer can be found here – you can use it to test the code, but need to replace it with a movie trailer of your choice).
01C – Face Tracking and Emotion Detection using P5 and ML5
* Below are the CDN links to the libraries you will need for exercise 01. Make sure to include them in the head of your index.html
<!-- linking the p5 libraries -->
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js
<!-- linking the ml5 library -->
https://cdn.jsdelivr.net/gh/ml5js/Intro-ML-Arts-IMA@ml5-build-10-7-19/ml5_build/ml5.min.js
02 Data Visualization using P5.js
02B – Visualizing the Data – Version 1
02B+ – Saving the visualization
02C – Visualizing the Data – Version 2
02D – Visualizing the Data – Version 3
02F – Interactive Visualization
03 Data Visualization using D3.js
(download link to the .csv file used in this exercise can be found here)
03A – Intro to the tutorial series
03D – Adding a Linear Scale and an Axis
*make sure to link the libraries listed below in the head of your html
03F – Parsing Data and Color Coding through Scale Ordinal
03H – Taking it Further using D3
* Below are the CDN links to the libraries you will need to link D3 for exercise 03. Make sure to include them in the head of your index.html
https://d3js.org/d3.v7.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3-scale/0.0.2/scale.js
https://cdnjs.cloudflare.com/ajax/libs/d3-scale/0.0.2/scale.min.js
https://cdn.jsdelivr.net/npm/d3-color@3
https://cdn.jsdelivr.net/npm/d3-interpolate@3
https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3
https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js
