Week 2 Assignment

In week 2 you will familiarize yourself with HTML/CSS as well as the some elements of javascript/D3 code. We will be working with Chapter 5 in the book as well as in our class files.

First, as always in this class, open your class folder in your text editor, and also in your browser by starting the local server with terminal.

I didn’t have a chance to introduce you to the javascript console this week because we ran out of time, but we will take a closer look next week. For now, just know that this is a useful tool that is built into every browser and should always be open when you are writing your code. To view the console (in Chrome), go to “View”, open the “Developer” dropdown, and select “JavaScript Console”.

You will see a window similar to the below pop up.

Whenever something unexpected happens in the browser window, this is where you should look first to see if there are any errors. This is the most useful tool to keep track of your progress and also to debug errors. (The book will cover this as well)

In chapter 5 we will go through the steps of creating elements on the page and loading data, before we join the 2 and create elements based on our data.

Read the rest of this post, then open your browser and text editor to chapter 5 folder and start reading our D3 book on Page 67. You will find the corresponding files the book refers to by name in this chapter 5 folder starting with 01_empty_page_template.html

file 1, the blank page with page title at top

You might notice that there are additional files in the folder that is not mentioned by the book:

03b_load_multiple_datasets.html shows how multiple datasets can be loaded in at the same time. Please take a look at the file in your text editor as well as developer console after you go over 03_csv_loading.html. This will be used to make projects that require multiple data files. For now just be aware of the 2 methods of loading datasets in 03, and 03b.

After you have read up to Page 87 and followed the files up to 08_creating_paragraphs_with_style_functions.html, there are 3 more files with file names ending in _EXERCISE. These are your homework assignment, each of these combine data loading with conditional logic written in javascript to filter the data in some way. All the instructions for completing the exercises are inside the files themselves as comments. Look for the words

“ //YOUR ASSIGNMENT STARTS HERE:” in these files for the instructions.

09_load_data_and_style_with_accessed_values_EXERCISE.html shows you how to access the values inside the dataset food.csv you loaded earlier in the chapter. It then asks you to repeat the styling from file 08 but using the data values from food.csv.

10_if_else_if_else_EXERCISE.html asks you to write a slightly more complex if/else conditional statement. This one is a classic coding exercise.

Finally 11_filter_EXERCISE.html asks you to write from scratch a little of each topic covered in this chapter and in class this week. You can copy and paste from the previous steps in this folder, everything you need in order to complete this exercise is inside chapter 5.

After completing these 3 exercises, please rename each exercise with the file number and your last and first name:

09_zhang_jia.html, 10_zhang_jia.html, 11_zhang_jia.html

and upload all 3 to the Week 2 assignment section in Canvas.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store