Notebooks 2.0 is here.
Crafting Visual Stories with Data.
Published
Edited
Feb 18, 2019
md`# Starting with Vis Learning
## Basic HTML and Vis
Lets start with writing HTML
`
html`
<h2> Hello HTML </h2>
<p> This is in html </p>
`
md`
## Hello MD
This is in markdown.
`
x = 44
x
text = "Meaning of life"
a = [5, 10, 15, 25, 35]
// Accessing the first value of the array
a[0]
myObject = ({
"name": "Adam",
"year": "1980",
"style": "Humour"
})
// Accessing the any key for an object
myObject.name
dataset = [
{"name": "Adam", "year": "1980", "style": "Humour"},
{"name": "Laura", "year": "1990", "style": "Science"},
{"name": "Fred", "year": "19950", "style": "Business"}
]
dataset[1].name
data = [
{"area": "North", "sales": 5, "profit": 2},
{"area": "East", "sales": 25, "profit": 8},
{"area": "West", "sales": 15, "profit": 6},
{"area": "South", "sales": 20, "profit": 5},
{"area": "Central", "sales": 10, "profit": 3}
]
function square (x) {
return x*x
}
square(4)
// Importing Libraries to use
vegalite = require("vega-embed")
vegalite({
width: 250,
height: 250,
data: {values: data},
mark: "bar",
encoding: {
x: {field: "area", type: "nominal"},
y: {field: "sales", type: "quantitative"},
color: {field: "profit", "type": "quantitative"}
}
})
vegalite({
width: 250,
height: 250,
data: {values: data},
mark: "bar",
encoding: {
x: {field: "area", type: "nominal", sort: "descending"},
y: {field: "sales", type: "quantitative"},
color: {field: "profit", "type": "quantitative"}
}
})
vegalite({
width: 250,
height: 250,
data: {values: data},
mark: "bar",
encoding: {
x: {field: "area", type: "nominal", sort: {field: "sales", op: "sum"}},
y: {field: "sales", type: "quantitative"},
color: {field: "profit", "type": "quantitative"}
}
})
vegalite({
data: {values: data},
mark: "rect",
encoding: {
x: {field: "profit", type: "Q"},
y: {field: "sales", type: "Q"},
color: {field: "area", type: "N"},
opacity: {value: 0.5}
}
})
vegalite({
data: {values: data},
mark: "text",
encoding: {
x: {field: "sales", type: "Q"},
y: {field: "profit", type: "Q"},
text: {field: "area", type: "N"}
}
})
vegalite({
data: {values: data},
transform:[
{calculate: "datum.profit / datum.sales", as: "profitPer"}
],
mark: "bar",
encoding: {
x: {field: "area", type: "N"},
y: {field: "sales", type: "Q"},
color: {field: "profitPer", type: "Q"}
}
})
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.
