Notebooks 2.0 is here.
Crafting Visual Stories with Data.
Cell (Markdown / HTML / JS Code)
Output of the Cell (Coming on Top)
Label the Cell also
a = 6
b = 3
a * b
c = "hello"
d = "world"
m = c + " " + d
Functions
Built-in Function (String, Number) by the language
Create Function on our own
Import function from libraries (d3, vl)
// Convert to Upper Case
m.toUpperCase()
// Create my own function
function multiply(a, b) {
return a * b;
}
multiply(2, 3)
multiply("a", "b")
sales = [5, 25, 10, 20, 15]
// First Number
sales[0]
// Number of items in the Array
sales.length
people = ({ name: "Akshita", handle: "@aksh" })
people.name
people.handle
Object.keys(people)
Object.values(people)
// Column 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 }
]
textCSV = `Area,Sales,Profit
North,5,2
East,25,8
West,10,6
South,20,5
Central,15,3`
dataCSV = d3.csvParse(textCSV)
vl
.spec({
data: { values: dataRow },
mark: "bar",
encoding: {
x: { field: "area", type: "nominal" },
y: { field: "sales", type: "quantitative" }
}
})
.render()
vegaEmbed = require("vega-embed")
vegaEmbed({
data: { values: dataRow },
mark: "bar",
encoding: {
x: { field: "area", type: "N" },
y: { field: "sales", type: "Q" },
color: { field: "profit", type: "Q" }
}
})
vegaEmbed({
$schema: "https://vega.github.io/schema/vega-lite/v5.json",
description: "A simple bar chart with embedded data.",
data: {
values: [
{ a: "A", b: 28 },
{ a: "B", b: 55 },
{ a: "C", b: 43 },
{ a: "D", b: 91 },
{ a: "E", b: 81 },
{ a: "F", b: 53 },
{ a: "G", b: 19 },
{ a: "H", b: 87 },
{ a: "I", b: 52 }
]
},
mark: "bar",
encoding: {
x: { field: "a", type: "nominal", axis: { labelAngle: 0 } },
y: { field: "b", type: "quantitative" }
}
})
One More Visualisation
vegaEmbed({
width: 300,
height: 300,
data: { values: dataRow },
mark: "circle",
encoding: {
x: { field: "area", type: "N" },
y: { field: "sales", type: "Q" },
color: { field: "area", type: "N" },
size: { field: "profit", type: "Q" }
}
})
vegaEmbed({
width: 300,
height: 300,
data: { values: dataRow },
mark: "text",
encoding: {
x: { field: "sales", type: "Q", axis: null },
y: { field: "profit", type: "Q", axis: null },
text: { field: "area", type: "N" },
color: { field: "area", type: "N" },
size: { field: "profit", type: "Q" }
},
config: { view: { stroke: null } }
})
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.
