Crafting Visual Stories with Data.
Basic Data Type
// Variable x = Number 23
x = 23
// String are written in Single Quotes or Double Quotes
y = "Inxd"
z = "I'am learning by typing along with Amit"
// Multiline Strings - Backtick
long_line = `This is learning
something that is new
While I am struggling
to get started`
sample = `area,sales,profit
north,5,2
east,25,8
west,15,6
south,20,5
central,10,3`
// Boolean is true or false
bool_var = false
// Date
today = new Date(1707903643429).toString()
Date.now()
function f(x) {
var y = x + 1;
return y;
}
f(3)
function sum(a, b) {
return a + b;
}
sum(2, 4)
sum("hello", "world")
Short Form Function
Arrow Function
Anonymous Function
sumshort = (a, b) => a + b
// Anonymous
(a, b) => a + b
Array []
prime = [2, 3, 5, 7, 11, 13]
prime[0]
prime[1] + prime[4]
shortNames = ({
india: "IN",
china: "CN",
russia: "RU"
})
shortNames.india
shortNames["india"]
// csv data
sample1 = `area,sales,profit
north,5,2
east,25,8
west,15,6
south,20,5
central,10,3`
dataRow = d3.csvParse(sample1, d3.autoType)
dataRow[0]
dataCol = ({
area: ["north", "east", "west", "south", "central"],
sales: [5, 25, 15, 20, 10],
profit: [2, 8, 6, 5, 3]
})
dataCol.area
Visualisation
Grouped Chart
Inputs.table(dataRow, { width: 400 })
dataTall = aq.from(dataRow).fold(["sales", "profit"])
Inputs.table(dataTall, { width: 400 })
Plot.plot({
x: { axis: null },
marks: [
Plot.barY(dataTall, { x: "key", y: "value", fx: "area", fill: "key" })
]
})
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.
