Published
Edited
Sep 17, 2019
Insert cell
Insert cell
embed = require('vega-embed')
Insert cell
d3 = require('d3')
Insert cell
data = d3.csv('https://gist.githubusercontent.com/nofurtherinformation/284c26c2eec0e61ed196df44ad88ae70/raw/5e1c35f928259e701c05e6b4053dea54c18aaafb/test_data')
Insert cell
viewof test2 = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v3.json",
width:300,
height:300,
"data": {values:data},
"mark": {"type":"line", point:true},
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": "income", "type": "quantitative"}
}
})
Insert cell
headers = ["income","expenditure"]
Insert cell
viewof test3 = embed({
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
repeat: {column: headers},
"config": {
"invalidValues": null
},
spec: {
width:300,
height:300,
"data": {values: data},
"mark": {"type":"bar", point:true},
"encoding": {
"x": {"field": "date", "type": "temporal"},
"y": {"field": {"repeat":"column"}, "type": "quantitative"},
"color":{"field":"District","type":"nominal"}
}
}
})
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