Crafting Visual Stories with Data.
a = 6
b = 4
a * b
// Strings / Text
"Hello World"
// Variable = Value
x = 2
3. Boolean
true
// Boolean
x === 1
// Array
country = ["india", "pakistan", "srilanka"]
// Access the array is [index]
// Index start from 0
country[0]
// Object
// Key - Value Pair
countryShort = ({ india: "IN", pakistan: "PK", srilanka: "SL" })
countryShort.india
countryStates = ({ india: ["KAR", "JK", "TN"], pakistan: "PK", srilanka: "SL" })
countryStates.india
m = "hello"
// Built in Function
m.toUpperCase()
function sum(a, b) {
return a + b;
}
sum(x, 50)
function doubleSum(a, b) {
return sum(a, b) + sum(a, b);
}
doubleSum(x, 2)
// Arrow Function - Short Form of writing a function
// function tripleMult(d) {return 3 * d}
tripleMult = (d) => 3 * d
tripleMult(2)
(d) => d * 3
digits = [1, 2, 3]
digits.map((d) => d * 3)
digits.map(tripleMult)
// For Loop
{
let sum = 0;
for (let step = 0; step < 10; step++) {
sum = sum + step;
}
return sum;
}
// Columns Way
dataColumns = ({
area: ["north", "east", "west", "south", "central"],
sales: [5, 15, 10, 20, 15],
profit: [2, 8, 6, 5, 3]
})
// Row Way
dataRow = [
{ area: "north", sales: 5, profit: 2 },
{ area: "east", sales: 25, profit: 8 },
{ area: "west", sales: 10, profit: 6 },
{ area: "south", sales: 20, profit: 5 },
{ area: "central", sales: 15, profit: 3 }
]
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vTPCMJ8uhkpU11KCRyov3p0uy5Tazcumq-al0HcMx-4fx3cvxZTYJ2WBqy5yGZUFoDo8TK5BC-4rS-c/pub?gid=0&single=true&output=csv"
d3.csv(url, d3.autoType)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
