Class Quick Reference

Jia Zhang
5 min readSep 9, 2022


A list of quick code references for class


Common Commands in the Terminal

ls — lists what files and folders are in your current directory(folder)

cd — changes your position in the terminal

cd subdirectory — changes your position to a folder in your current directory. For example cd b puts you in the b folder

cd .. — changes your position to 1 level up

You can use keys for shortcuts:

up — press the up key in the terminal to have the history of commands you typed appear

tab — press tab to autocomplete file names — example: cd Des then press tab, it will autocomplete to Desktop.

Starting the Server
Windows: http-server
Mac: python -m SimpleHTTPServer
python -m http.server

Ctrl c to stop local server in terminal

Comments in code

HTML comment looks like this: <! — Write your comments here
CSS: /* Write your comments here */
JavaScript: // Write your comments here


Read from top to bottom.
Is nested, with open and closing tags. Example of a paragraph in the body of page:

the text of your paragraph goes here

fixed space, hard space, non-breaking space: &nbsp;
line break: <br>
a paragraph: <p>the text of your paragraph goes here</p>


Read from top to bottom.
Example of 2 HTML elements, with ID and class assigned, and how CSS selects them


JS Variables

Declare with “var”, example: var a;
or declare and assign value at same time, example: var a = 2;
change value of var a, example: a = a+1; this would set a to 3, or a = 3;

JS Primitives

4 for now
Integer — 1, 2, 3, 2000000 , -30
Float — decimal number, 0.2, -5,4
Booleantrue, false
String (technically a composite) — “any kind of sentence or word” , “2”

Adding Primitives
be aware of when data is parsed as a string even though the value is an integer or float!!!!

1 + 1 = 2.0 //adding integer and float results in float
“1”+ “1” = “11”//string and string results in longer string
“1” + 1 = “11”//adding string and integer also results in longer string

JS Data Structures

just 2 here lists(arrays) and dictionaries(objects)


or Arrays have Javascript syntax like this:
var arrayName = [value, value, value]
they are linear
have an index
the index starts at 0, arrayName[0] gets you the first item in the array
they can be sorted: arrayName.sort()
and have a length: arrayName.length

Some examples of arrays:
[1, 2, 3, 4] //
list of integers
[“1”, ”2”, ”3”, ”4”] //list of strings
[1, ”red”, ”2”, 4.3] //mixed list
[1,1,1,1] //list of identical values


or Objects have Javascript syntax like this:
{Key:value, key:value}
Objects are not linear
have no index — no first item of object
Cannot be sorted as object — You can sort by key or value into an array.
There is no length — you can get length of all the keys or values.

Here are some ways to size of an object:
First here is an object named A:
var A = {key1:2,key2:3,key3:1}
are all the keys of the object in an array [key1,key2,key3]
and the length of the keys array can sometimes give an relative idea of the size: Object.keys(A).length will be 3

Some examples of Objects: must have unique keys
{“blue”: 56, “black”: 20}
{“1”: “red”, “2”:”green”}
{“25”:2, “a”:2, “blue”:90}
{“geoid2”:25, “geoid4”:40}

3. these data structures are usually nested
[ [1,2,3] , [2,5] , [5,9] ]
// array of arrays
[ {a:2} , {b:3} , {c:2,d:2} ] // array of objects
{ a:{j:2,k:4}, b:{j:2,k:12}} // objects containing objects
{ a:[1,2,3], b:[3,4,5] } // object containing arrays

JS Functions

takes input and “return” output — Note: we will add to this as we start using functions more in more complex code.

JS Logic

3 kinds of conditional statements

If else statement is structured like black text
English explanation in pink
Example of if else in blue

For loop is structured like black text
English explanation in pink
Example of if else in blue

While loop is structured like black text
English explanation in pink
Example of if else in blue

D3 Reference

General pattern for creating new elements with data:

d3.selectAll(“.newElementClass”) //create a placeholder for new elements
.data(dataset)//attach data — must be an array
.enter()//enter data context
.append(“div”)//add a new element for each data point in array
.attr(“class”,”newElementClass”)//set class for new elements
// now you are free to access the data to style the element you added

making a new SVG
var svg = //make a variable for the new svg“body”)//select where svg will go on page
.append(“svg”)//add svg
.attr(“width”, 500)// set width
.attr(“height”, 500);// set height

draw circles on new svg
A circle has 3 attributes that must be set, x and y coordinates of its center are set by “cx” and “cy”, and the radius is set by“r”.


draw rectangles with 4 attributes, x and y for its left upper corner, and width and height.