Published
Edited
Aug 1, 2019
Insert cell
md`# Learning Code
This is my first notebook`
Insert cell
2 + 4
Insert cell
md`## Get data and vega-lite library`
Insert cell
data_url = "https://raw.githubusercontent.com/amitkaps/interactive/master/data/notes.csv"
Insert cell
data = d3.csv(data_url)
Insert cell
d3 = require("d3@v5")
Insert cell
vegaembed = require('vega-embed@4/build/vega-embed.min.js')
Insert cell
md`## Let us make my first chart`
Insert cell
vegaembed({
"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": "ordinal"},
"y": {"field": "b", "type": "quantitative"}
}
})
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "bar",
"encoding":{
"x": {"field": "year", "type": "ordinal"},
"y": {"field": "money", "type": "quantitative"},
"color": {"field": "denom", "type": "nominal"}
}
})
Insert cell
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "bar",
"transform": [
{"filter": "datum.value > 10"},
{"filter": "datum.year > 2000"}
],
"encoding":{
"x": {"field": "year", "type": "ordinal"},
"y": {"field": "money", "type": "quantitative"},
"color": {"field": "denom", "type": "nominal"}
}
})
Insert cell
Insert cell
md` Individual notes in circulation`
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "line",
"transform": [
{"filter": "datum.value > 10"},
{"filter": "datum.year > 2000"}
],
"encoding":{
"x": {"field": "year", "type": "ordinal"},
"y": {"field": "money", "type": "quantitative"},
"color": {"field": "denom", "type": "nominal"}
}
})
Insert cell
md`Total money in circulation`
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "area",
"transform": [
{"filter": "datum.value > 10"},
{"filter": "datum.year > 2000"}
],
"encoding":{
"x": {"field": "year", "type": "ordinal"},
"y": {"field": "money", "type": "quantitative", "aggregate": "sum"},
"color": {"field": "denom", "type": "nominal"}
}
})
Insert cell
md`Proportion of notes in circulation`
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "area",
"transform": [
{"filter": "datum.value > 10"},
{"filter": "datum.year > 2000"}
],
"encoding":{
"x": {"field": "year", "type": "ordinal"},
"y": {"field": "money", "type": "quantitative", "aggregate": "sum", "stack": "normalize"},
"color": {"field": "denom", "type": "nominal"}
}
})
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "area",
"transform": [
{"filter": "datum.value > 10"},
{"filter": "datum.year > 2000"}
],
"encoding":{
"x": {"field": "year", "type": "ordinal"},
"y": {"field": "money", "type": "quantitative", "aggregate": "sum", "stack": "center", "axis": null},
"color": {"field": "denom", "type": "nominal"}
}
})
Insert cell
md`# Annotation`
Insert cell
vegaembed({
"width": 400,
"height": 400,
"data": {"url": data_url},
"mark": "area",
"transform": [
{"filter": "datum.value > 10"},
{"filter": "datum.year > 2000"}
],
"encoding":{
"x": {"field": "year", "type": "ordinal", "axis": {
"labelAngle": 0,
"title": "Year",
"titleFontSize": 12
}},
"y": {"field": "money", "type": "quantitative", "aggregate": "sum", "stack": "center", "axis": null},
"color": {"field": "denom", "type": "nominal"}
}
})
Insert cell
md`## Composition`
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "bar",
"transform": [
{"filter": "datum.year == 2015"}
],
"encoding":{
"x": {"field": "money", "type": "Q"},
"y": {"field": "denom", "type": "N"},
"color": {"field": "denom", "type": "N"},
"size": {"value": 3}
}
})
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "circle",
"transform": [
{"filter": "datum.year == 2015"}
],
"encoding":{
"x": {"field": "money", "type": "Q"},
"y": {"field": "denom", "type": "N"},
"color": {"field": "denom", "type": "N"},
"size": {"value":100}
}
})
Insert cell
vegaembed({
"data": {"url": data_url},
"transform": [
{"filter": "datum.year == 2015"}
],
"layer": [{
"mark": "bar",
"encoding":{
"x": {"field": "money", "type": "Q"},
"y": {"field": "denom", "type": "N"},
"color": {"field": "denom", "type": "N"},
"size": {"value": 3}
}},{
"mark": "circle",
"encoding":{
"x": {"field": "money", "type": "Q"},
"y": {"field": "denom", "type": "N"},
"color": {"field": "denom", "type": "N"},
"size": {"value": 100}
}}
]
})
Insert cell
vegaembed({
"data": {"url": data_url},
"mark": "circle",
"transform": [
{"filter": "datum.year == 2015"},
{"filter": "datum.denom > 20"}
],
"encoding":{
"x": {"field": "money", "type": "Q"},
"y": {"field": "denom", "type": "N"},
"color": {"field": "denom", "type": "N"},
"size": {"value":100},
"column":{"field": "denom"}
}
})
Insert cell
cars_url = "https://raw.githubusercontent.com/amitkaps/interactive/master/data/notes.csv"
Insert cell
d3.csv("cars_url")
Insert cell
vegaembed({
"data" : {"url": "cars_url"},
"mark": "point",
"encoding": {
"x": {"field": "price", "type": "Q"},
"y": {"field": "kmpl", "type": "Q"}
}
})
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