The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Hands-on tutorialsObservable Quick GuidesBuild your first scatterplot with Observable PlotGet started with the Chart cellBuild your first map with Observable PlotBuild your first choropleth map with Observable PlotPlot from ggplot2Analyzing revenue by category for an online storeWhich items are purchased together?Wrangling data in JavaScript with Arquero: a primer for R users
Learn Just Enough JavaScript: Introduction
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]
myNewObject = ({state: 'California'})
myNewObject.state
[1, 2, 3, 4, 5].filter(d => d < 3)
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)
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" 2000 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.