Week 4: JavaScript
Last updated
Last updated
This week, we'll be covering the aspects of JavaScripts that will be most important for mastering D3 as a data visualization tool.
These include:
Objects - this data structure is probably the most unique thing about JavaScript, and is the way we will store our individual data observations for visualization with D3.
Arrays - since we rarely visualize only ONE point of data, we'll learn about the Array construct, which will allow us to contain many similar Objects in one variable. While using D3, we will store our dataset as an array of Objects!
If/else, and JavaScript's ternary operator - this allows us to show our code how to make decisions based on logical conditions. This will be important in choosing what elements are drawn by D3, and how they are drawn, in response to logical tests on our data's properties.
For loops - iteration works a bit differently in JavaScript than more data-forward languages like R or Python. Getting a handle on this syntax will make JavaScript data processing a breeze—who needs Pandas, anyway??
Functions (if time) - you will define your own functions in pretty much every line of d3 code you ever write. We'll learn both the older JavaScript function syntax, as well as the fun (and convenient!) new one from the latest JavaScript standard, ES6.
Manipulating HTML / CSS (if time) - this is where the fun really starts! We'll show you how to use JavaScript and your own custom functions to add, delete, modify, and animate your HTML elements to make them respond to user interaction however you want. This is the crux of what we'll be doing with D3, and your syntax knowledge here is quite transferable there!
Whatever topics we don't get to in Workshop will be covered in Lab and at the beginning of workshop next week, after website presentations!
File
Link
Workshop 4 Slides
Week 4 GitHub folder
Weekly feedback form
