myNumber = 10 * 1000
myString = 10 * "JavaScript is cool!"
myObject = ({name: "Paul", age: 25})
myObject.name
myArrayOfObjects = [
{year: 2022, city: 'New York', population: 8380000},
{year: 2021, city: 'New York', population: 8419000},
{year: 2020, city: 'New York', population: 8444000},
]
myArrayOfObjects[0]
[1, 2, 3, 4, 5].filter(a => a < 2)
myData = [
{name: 'Paul', city: 'Denver'},
{name: 'Robert', city: 'Denver'},
{name: 'Ian', city: 'Boston'},
{name: 'Cobus', city: 'Boston'},
{name: 'Ayodele', city: 'New York'},
{name: 'Mike', city: 'New York'},
]
myData.filter(d => d.city == 'Denver')
myNewArray = myData.map(d => d.name)
Here, I created a new array of just the names in myData. If you want to copy all the values in your array, and add some new ones, you can use the {...} notation.
myNewerArray = myData.map(d => ({...d, date: new Date() }) )
function myFunction() {
return 'This is the output of my function!'
}
myFunction()
function myFunctionWithParameters(firstName, lastName) {
return `My first name is ${firstName}, and my last name is ${lastName}.`
}
myFunctionWithParameters('Dr', 'Pepper')
myModernFunctionWithParameters = (firstName, lastName) => {
return `My first name is ${firstName}, and my last name is ${lastName}.`
}
[1, 2, 3, 4, 5].filter(d => d < 3)
[1, 2, 3, 4, 5].filter(function(d) { return d < 3 })
{
if(1 > 2) {
return 'Math is broken' // If this statement is true return this
} else {
return 'Math still works!' // If the first statement was false, return this
}
}
{
if(1 > 2) {
return 'Math is broken' // If this statement is true, return this
} else if(1 == '1') { //
return 'Math works?' // If the second statement is true, return this
} else {
return 'Math is an synthetic a priori truth' // If neither statements were true, return this
}
}
1 == 1
1 == '1'
1 === '1'
{
if(1 > 2) { // If this statement is true
return 'Math is broken' // return this
} else { // if the first statement was not true
return 'Math still works!' // return this
}
}
variableSetToCodeBlock = {
const today = new Date();
return today.getFullYear()
}
{
let string = ''
for(let i = 0; i <= 5; i++) {
string += i
}
return string
}
myValues = [1, 20, 13, 4, 55, 6]
{
let largestNumber = 0; // Declare a variable for the largest number
for(let i = 0; i < myValues.length - 1; i++) { // Loop through all the values in my array
if(myValues[i] > largestNumber) { // Check if the value in the array is larger that the largestNumber
largestNumber = myValues[i] // If so, assign the value as the new largest number
}
}
return largestNumber
}
d3.max(myValues)
{
let largestNumber = 0; // Create a variable for the largest number
let i = 0;
while(i < myValues.length - 1) {
if(myValues[i] > largestNumber) { // Check if the value in the array is larger that the largestNumber
largestNumber = myValues[i] // If so, assign the value as the new largest number
}
i++;
}
return largestNumber
}
{
const width = 300;
const height = 100;
const r = 30;
const svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
const circle = svg.append('circle')
.attr('r', r)
.attr('cy', height / 2)
.attr('cx', r);
let cx = 30;
while(true) { // Loop goes on forever
yield svg.node();
await Promises.delay(2000); // This causes the loop to "wait" 1200 milliseconds
cx == r ? cx = width - r : cx = r;
circle.transition()
.duration(1500)
.attr('cx', cx);
}
}
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.
