hello world
md`**hello world**`
html`<b>hello world</b>`
name = "John"
Number
Represents both integer and floating-point numbers.
age = 25;
isStudent = true;
typeof name
typeof age
typeof isStudent
Number('123')
String(123)
parseInt(123.4) // base 10
parseInt('123.4', 10) // decimal part is truncated
+"123"
(1+2)*3/4
2**3 === Math.pow(2,3)
Math.min(1,2,3)
Math.max(1,2,3)
Math.random() // returns a random number greater than or equal to 0 and less than 1
`${name} is ${age}.` //template strings
colors = ["red", "green", "blue"];
mixedArray = [1, "Hello", true, {name: "John"}, () => "Function result"];
students = FileAttachment("tell_me_about_you@4.csv").csv()
myObject = ({name: "Paul", age: 25, city: "Boston"})
myObject.name === myObject["name"]
students[0] // the first array - indices starting at 0
students.length
columns = students["columns"]
columns.indexOf("Do you live in Massachusetts?") // returns the index of the first matching item
students.concat({"Timestamp: ": new Date()}) // combine values into a new array
students.push({"Timestamp: ": new Date()}) // appending values into the existing array
Convert Strings and Arrays
fruits = "apple,orange,pear"
fruitsArray = fruits.split(',')
newFruits = fruitsArray.join('/')
fruits.replaceAll(',', '/')
fruits.replace(',', '/') // only replace the first match
getRandomInt = (max) => (Math.floor(Math.random() * max) + 1)
// name of the function = (input) => return the output
getRandomInt(10) //returns integer 1-10
student_data = students.map((student, i) => ({...student, name: `student ${i+1}`}));
Plot.plot({
marks: [
Plot.barX(alphabet.slice(0,5), {x: "frequency", y: "letter", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
]
})
langData = {// Create an object to count language frequencies
const languageFrequencies = {};
// Iterate through the data and count frequencies
student_data.forEach(entry => {
const languages = entry["Please select all the coding languages you know of."].split(/[;,(]/);
languages.forEach(language => {
if (languageFrequencies[language]) {
languageFrequencies[language]++;
} else {
languageFrequencies[language] = 1;
}
});
});
// Convert the frequencies into an array of objects
const arrayOfObjects = Object.entries(languageFrequencies).map(([lang, count]) => ({
lang,
count: count.toString()
}));
return arrayOfObjects
}
Plot.plot({
marginLeft: 120,
marks: [
Plot.barX(langDataClean, {x: "count", y: "lang", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
]
})
langDataClean = langData.filter((el) => el.lang !== 'None' && el.lang.length < 20)
Plot.plot({
marginLeft: 100,
grid: true,
marks: [
Plot.dot(students_data_clean, {x: "name", y: "langs"})
]
})
students_data_flat = students_data_array.flatMap((student) => (student.langs.map((lan) => ({
name: student.name,
langs: lan
}))))
students_data_clean = students_data_flat.filter((el) => el.langs !== 'None' && el.langs.length < 20)
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.