The avatar for @amitkaps
Amit Kapoor
Crafting Visual Stories with Data.
Public
Edited
Mar 10, 2023
1
Insert cell
Insert cell
x = 1 + 2
Insert cell
viewof y = Inputs.range([0, 100], {label: "Amount", step: 1})
Insert cell
x + y + z
Insert cell
z = 4
Insert cell
Insert cell
Insert cell
122 * 34
Insert cell
1 / 3
Insert cell
0.1 + 0.2
Insert cell
## String / Text

You can use double quotes or single quotes to write strings
Insert cell
"Hello World"
Insert cell
Insert cell
cell1 = 45
Insert cell
Insert cell
true
Insert cell
false
Insert cell
x === 3
Insert cell
x < 5
Insert cell
## Array []
Insert cell
airports = ["DEL", "BLR", "MUM"]
Insert cell
airports[0]
Insert cell
airports[2]
Insert cell
Insert cell
aircodes = ({
DEL: "Delhi",
BLR: "Bangalore",
BOM: "Mumbai"
})
Insert cell
aircodes.DEL
Insert cell
aircodes["DEL"]
Insert cell
## Functions
Insert cell
text = "hello world"
Insert cell
text.toUpperCase()
Insert cell
function sum(x, y) {
return x + y;
}
Insert cell
sum(4, 5)
Insert cell
sum("hello", "world")
Insert cell
// Arrow Function (Concise Way)
sum2 = (x, y) => x + y
Insert cell
(x, y) => x + y
Insert cell
## 2D Data

- Columns Ways
- Row Ways
Insert cell
// Columns Way
dataColumns = ({
area: ["north", "east", "west", "south", "central"],
sales: [5, 15, 10, 20, 15],
profit: [2, 8, 6, 5, 3]
})
Insert cell
// 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 }
]
Insert cell
Insert cell
url = "https://docs.google.com/spreadsheets/d/e/2PACX-1vT1oVTsABc-Tvqx1TIzEla4kALro38n4q7nOIEhkH_cbox8JdZQjcaJOJAu6Z0X0URe39zylcTS6pGg/pub?gid=0&single=true&output=csv"
Insert cell
d3.csv(url, d3.autoType)
Insert cell
sample1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
data = FileAttachment("sample1.csv").csv()
Insert cell
sample1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
## Make Vis
Insert cell
viewof stroke = Inputs.range([1, 50], { label: "Stroke", step: 1 })
Insert cell
Plot.plot({
marks: [
Plot.dot(sample1, {
x: "area",
y: "sales",
fill: "red",
stroke: "red",
strokeWidth: stroke
})
]
})
Insert cell
Plot.plot({
marks: [
Plot.barY(sample1, { x: "area", y: "sales" }),
Plot.dot(sample1, {
x: "area",
y: "sales",
fill: "red",
stroke: "red",
strokeWidth: stroke
})
]
})
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