Getting started
Numbers
Numbers
a = 3
b = 6
a * b
Strings
c = "Hello"
d = "World"
m = c + " " + d
Function
m.toUpperCase ()
// Create my own function
function multiply(a, b) {
return a * b;
}
multiply(2, 3)
Array[]
sales = [5, 25, 10, 20, 15]
// First Number
sales[0]
Object
people = ({ name: "Akshita", handle: "@aksh" })
people.name
people.handle
Object.keys(people)
Object.values(people)
Data:Table Structure
Column Way: Object of Arrays
Key Names items are Column Names
Values are an Array of the Column Values
Row Way: Array of Objects
Array items are row
Object is ColumnHeader: Value
// 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 }
]
Data CSV
textCSV = `Area,Sales,Profit
North,5,2
East,25,8
West,10,6
South,20,5
Central,15,3`
To convert CSV to our Row based data - We can use d3 data loading function
d3.csvParse(string)
d3.csv(url)
dataCSV = d3.csvParse(textCSV)
Making Visualisation
Using VegaLite (https://vega.github.io/vega-lite/)
Use this vl.spec( specification).render()
Import vega-embed
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({
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 } }
})
vegaEmbed({
data: { values: dataRow },
mark: "bar",
encoding: {
x: { field: "sales", type: "quantitative" },
y: { field: "area", type: "nominal" }
}
})
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.
