A list of quick code references for class
WEEKS 1–5
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
Or
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
HTML
Read from top to bottom.
Is nested, with open and closing tags. Example of a paragraph in the body of page:
<body>
<p>
the text of your paragraph goes here
</p>
</body>
fixed space, hard space, non-breaking space:
line break: <br>
a paragraph: <p>the text of your paragraph goes here</p>
CSS
Read from top to bottom.
Example of 2 HTML elements, with ID and class assigned, and how CSS selects them
JavaScript
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
Boolean — true, 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)
Lists
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
Dictionaries
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}
Object.keys(A) 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
SVG
making a new SVG
var svg = //make a variable for the new svg
d3.select(“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”.
circle.attr(“cx”,20)
.attr(“cy”,20)
.attr(“r”,5)
draw rectangles with 4 attributes, x and y for its left upper corner, and width and height.
rectangle.attr(“x”,20)
.attr(“y”,20)
.attr(“width”,20)
.attr(“height”,10)
