myNumber = 10 * 1000
myString = 10 * "JavaScript is cool!"
myObject = ({name: "Paul", age: 25})
myObject.name
myObject.age
myArrayOfObjects = [
{year: 2022, city: 'New York', population: 8380000},
{year: 2021, city: 'New York', population: 8419000},
{year: 2020, city: 'New York', population: 8444000},
]
myArrayOfObjects[0];
myArrayOfObjects[0]
[1, 2, 3, 4, 5].filter(d => d < 3)
[1,2,3,4,5,6,7,8,9].filter(d=> d<7)
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')
myData.filter(d=>d.city == "Boston")
myNewArray = myData.map(d => d.name)
myNewArray2=myData.map(d => d.city)
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('ssen','kim')
myFunctionWithParameters('Dr', 'Pepper')
sendEmail('ssen0117@naver.com','meaning', 'hello')
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);
}
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.