The avatar for @nyuvis
EBVL
Enrico Bertini's Visualization Lab
Public
Guides and Examples
Edited
Feb 19
12 forks
21 stars
Guides and Examples
Introduction
JavaScript Basics
Data TransformationSVG and D3 BasicsBar Chart Walk-throughLine and Area ChartsSelections and JoinsMapsChoropleth Color SchemesFundamental Graphs with D3Graphical Encoding ExamplesContextual Elements, Aesthetics, and ClaritySmall MultiplesSmall Multiples with Different AxesNetworksInteractionSocrata Open Data API & NYC Open DataStarting a sequential color scale at a darker color
Insert cell
Insert cell
Insert cell
"hello" === 'hello'
Insert cell
`hello` !== "good bye"
Insert cell
Insert cell
myName = 'Dan'
Insert cell
hello = `Hello, ${myName}! Your name has ${myName.length} letters.`
Insert cell
`3 x 4 = ${3 * 4}`
Insert cell
Insert cell
words = hello.split(' ')
Insert cell
Insert cell
words.join('_')
Insert cell
Insert cell
roster = ['Sue', 'Bob', 'Joe', 'Meg', 'Michelle', 'Mike', 'Kate', 'Sue', 'Mike', 'Meg', 'Joe']
Insert cell
roster.length
Insert cell
Insert cell
roster[0]
Insert cell
Insert cell
roster[roster.length - 1]
Insert cell
Insert cell
roster.at(-1)
Insert cell
Insert cell
roster.slice(1, 4)
Insert cell
Insert cell
roster.includes('Sue')
Insert cell
roster.includes('Frank')
Insert cell
Insert cell
uniqueNames = new Set(roster)
Insert cell
uniqueNames.size
Insert cell
Insert cell
uniqueNames.has('Sue')
Insert cell
uniqueNames.has('Brad')
Insert cell
Insert cell
{
const classes = new Set();
classes.add('Information Visualization');
classes.add('Algorithms');
classes.add('Machine Learning');
classes.delete('Algorithms');
return classes;
}
Insert cell
Insert cell
Array.from(uniqueNames)
Insert cell
[...uniqueNames]
Insert cell
Insert cell
stringToInt = ({
'one': 1,
'two': 2,
'three': 3
})
Insert cell
Insert cell
stringToInt.one
Insert cell
stringToInt['one']
Insert cell
myNum = 'three'
Insert cell
stringToInt[myNum]
Insert cell
Insert cell
Object.hasOwn(stringToInt, 'two')
Insert cell
'four' in stringToInt
Insert cell
Insert cell
stringToInt['four']
Insert cell
Insert cell
keyValuePairs = [
['one', 1],
['two', 2],
['three', 3],
]
Insert cell
Object.fromEntries(keyValuePairs)
Insert cell
Insert cell
Object.entries(stringToInt)
Insert cell
Insert cell
{
const nameToScore = {};
nameToScore['Tim'] = 100;
nameToScore['Becky'] = 95;
nameToScore.Jill = 90;
nameToScore.Ben = 85;
delete nameToScore.Becky;
delete nameToScore['Tim'];
return nameToScore;
}
Insert cell
Insert cell
Object.keys(stringToInt)
Insert cell
Object.values(stringToInt)
Insert cell
Insert cell
nameToAge = new Map([
['Bob', 20],
['Sue', 25],
['Joe', 30],
['Jen', 35]
])
Insert cell
new Map(Object.entries(stringToInt))
Insert cell
Insert cell
nameToAge.has('Jen')
Insert cell
nameToAge.has('Ted')
Insert cell
nameToAge.get('Jen')
Insert cell
Insert cell
nameToAge.get('')
Insert cell
Insert cell
{
const nameToScore = new Map();

nameToScore.set('Tim', 100);
nameToScore.set('Becky', 95);
nameToScore.set('Jill', 90);
nameToScore.set('Ben', 85);
nameToScore.delete('Becky');
nameToScore.delete('Tim');
return nameToScore;
}
Insert cell
Insert cell
Array.from(nameToAge.keys())
Insert cell
[...nameToAge.keys()]
Insert cell
Array.from(nameToAge.values())
Insert cell
[...nameToAge.values()]
Insert cell
Insert cell
Array.from(nameToAge)
Insert cell
Insert cell
Object.fromEntries(Array.from(nameToAge))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mealsObj.James.Subway.lunch
Insert cell
mealsObj.Mary.Subway.lunch
Insert cell
mealsMap.get('James').get('Subway').get('lunch')
Insert cell
mealsMap.get('Mary').get('Subway').get('lunch')
Insert cell
Insert cell
mealsObj.Mary.Dunkin.breakfast
Insert cell
mealsMap.get('Mary').get('Dunkin').get('breakfast')
Insert cell
Insert cell
mealsObj.James.Dunkin.breakfast
Insert cell
mealsMap.get('James').get('Dunkin').get('breakfast')
Insert cell
Insert cell
mealsObj.James?.Dunkin?.breakfast
Insert cell
mealsObj['James']?.['Dunkin']?.['breakfast']
Insert cell
mealsMap.get('James')?.get('Dunkin')?.get('breakfast')
Insert cell
Insert cell
null ?? 7
Insert cell
undefined ?? 'hi'
Insert cell
0 ?? 11
Insert cell
false ?? 'bye'
Insert cell
Insert cell
mealsObj.Mary?.Dunkin?.breakfast ?? 0
Insert cell
mealsMap.get('Mary')?.get('Dunkin')?.get('breakfast') ?? 0
Insert cell
mealsMap.get('James')?.get('Dunkin')?.get('breakfast') ?? 0
Insert cell
mealsObj.James?.Dunkin?.breakfast ?? 0
Insert cell
Insert cell
function greeting(name) {
return `Hello, ${name}!`;
}
Insert cell
greeting('Dan')
Insert cell
Insert cell
farewell = name => `Good bye, ${name}!`
Insert cell
farewell('Dan')
Insert cell
Insert cell
exponent = (base, power) => base ** power
Insert cell
exponent(3, 2)
Insert cell
Insert cell
double = num => {
const value = num * 2;
return `${num} doubled is ${value}`;
}
Insert cell
double(10)
Insert cell
Insert cell
makePerson = (name, age) => ({
name: name,
age: age
})
Insert cell
makePerson('Jill', 30)
Insert cell
Insert cell
makePerson2 = (name, age) => ({ name, age })
Insert cell
makePerson2('Jill', 30)
Insert cell
Insert cell
makePerson3 = (name, age) => {
return { name, age };
}
Insert cell
makePerson3('Jill', 30)
Insert cell
Insert cell
nameToAge
Insert cell
Array.from(nameToAge)
Insert cell
Insert cell
Array.from(nameToAge, pair => pair)
Insert cell
Insert cell
Array.from(nameToAge, pair => `${pair[0]} is ${pair[1]} years old.`)
Insert cell
Insert cell
Array.from(nameToAge, pair => ({ name: pair[0], age: pair[1] }))
Insert cell
Insert cell
Array.from(nameToAge, pair => ({ name: pair[0], age: pair[1] }) )
Insert cell
Insert cell
Array.from(nameToAge, ([name, age]) => ({name: name, age: age}))
Insert cell
Insert cell
Array.from(nameToAge, ([name, age]) => ({name, age}))
Insert cell
Insert cell
Array.from(nameToAge, function(pair) {
return {
name: pair[0],
age: pair[1]
};
})
Insert cell
Insert cell
function personToString1(person) {
return `${person.name} is ${person.age} years old and attends ${person.school}.`;
}
Insert cell
function personToString2({name, age, school}) {
return `${name} is ${age} years old and attends ${school}.`;
}
Insert cell
person = ({ name: 'Chris', age: 22, school: 'Northeastern'})
Insert cell
personToString1(person)
Insert cell
personToString2(person)
Insert cell
Insert cell
{
const coordinate = [10, 20];
const [x, y] = coordinate;
return x + y;
}
Insert cell
{
const coordinate = { x: 10, y: 20 };
const {x, y} = coordinate;
return x + y;
}
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