The avatar for @sfu-iat355
IAT355
Published
Tutorials
Edited
Sep 13, 2019
Fork of Week 2: A Brief Introduction to JavaScript and Observable
•
4 forks
1 star
Insert cell
Insert cell
Insert cell
Insert cell
2 + 2
Insert cell
Insert cell
html`<div> I am a piece of content.</div>`
Insert cell
Insert cell
html`

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hello World HTML Document</title>
</head>
<body>
<!-- This is a comment -->
<h2>Hello World</h2>
<div id="main">
</div>
</body>
</html>
`
Insert cell
Insert cell
Insert cell
Insert cell
Object1 = "This object can be referenced globally"
Insert cell
Object1
Insert cell
Insert cell
//Object1 = "try me"
Insert cell
Insert cell
{
let x = 0;
for (let i = 1; i <= 10; ++i) {
x += i;
}
return x;
}
Insert cell
Insert cell
X
Insert cell
Insert cell
function formal_introduction(name) {
return "Greetings! my name is " + name
}
Insert cell
formal_introduction("IAT355 TA")
Insert cell
Insert cell
Insert cell
Insert cell
1.3 + 3.15
Insert cell
Insert cell
Math.random()
Insert cell
Insert cell
true
Insert cell
!false
Insert cell
Insert cell
true && false
Insert cell
true || false
Insert cell
Insert cell
x = null
Insert cell
x
Insert cell
Insert cell
{var y
return y
}
Insert cell
Insert cell
'strings can use single quotes'
Insert cell
"or double"
Insert cell
"but not both'
Insert cell
"strings have native methods".length
Insert cell
'They can be' + " combined"
Insert cell
"strings can be sliced".slice(-6)
Insert cell
"strings,can,be,split".split(',')
Insert cell
Insert cell
array = [1, "two", 3]
Insert cell
typeof array
Insert cell
array[2]
Insert cell
md` Arrays also have some useful methods.`
Insert cell
array.length
Insert cell
array.indexOf("two") //notice indexing starts from 0
Insert cell
array.slice(2)
Insert cell
array.join(' and ')
Insert cell
array.concat(4) //add values on
Insert cell
Insert cell
object = ({key: "value", anotherKey: "anotherValue"})
Insert cell
Insert cell
object.key
Insert cell
Object.keys(object) // return an array of property key strings
Insert cell
Insert cell
data = [
{city: "Seattle", annual_hours_sunshine: 2163, annual_precipitation: 37.13},
{city: "New York", annual_hours_sunshine: 2677, annual_precipitation: 46.23},
{city: "Chicago", annual_hours_sunshine: 2504, annual_precipitation: 39.04}
]
Insert cell
Insert cell
Insert cell
function multiply(number1, number2) {
return number1 * number2
}
Insert cell
multiply(8,6)
Insert cell
Insert cell
Insert cell
multiply2 = (a, b) => a * b
Insert cell
Insert cell
multiply3 = a => a * a
Insert cell
Insert cell
Insert cell
function multiplyWithName(number1, number2) {
return number1 * number2
}
Insert cell
newNum = multiplyWithName(9,16)
Insert cell
Insert cell
multipliedWithName = (a,b) =>multiplyWithName(a,b)
Insert cell
newnum2 = multipliedWithName(9,14)
Insert cell
Insert cell
RA = [1, 2, 3, 4, 5]
Insert cell
Insert cell
Insert cell
{
let count = 0;
RA.forEach(function(d) {
count += 1;
});
return count;
}
Insert cell
Insert cell
RA.map(function(d) {return d + 1})
Insert cell
Insert cell
Insert cell
RA.filter(d => d > 3)
Insert cell
Insert cell
RA.reduce((count,d) => count + 1, 0)
Insert cell
Insert cell
Insert cell
Insert cell
cities = [
{"city":"seattle", "state":"WA", "population":652405, "land_area":83.9},
{"city":"new york", "state":"NY", "population":8405837, "land_area":302.6},
{"city":"boston", "state":"MA", "population":645966, "land_area":48.3},
{"city":"kansas city", "state":"MO", "population":467007, "land_area":315}
]
Insert cell
Insert cell
bigCities = cities.filter(d => d.population > 500000)
.map(d => {return {city: d.city.toUpperCase(),
state: d.state,
population: d.population,
land_area: d.land_area}})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
cars = d3.json('https://vega.github.io/vega-datasets/data/cars.json')
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more