Crafting Visual Stories with Data.
Published
Edited
Aug 1, 2019
md`# Learning Code
This is my first notebook`
2 + 4
md`## Get data and vega-lite library`
data_url = "https://raw.githubusercontent.com/amitkaps/interactive/master/data/notes.csv"
data = d3.csv(data_url)
d3 = require("d3@v5")
vegaembed = require('vega-embed@4/build/vega-embed.min.js')
md`## Let us make my first chart`
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"}
}
})
vegaembed({
"data": {"url": data_url},
"mark": "bar",
"encoding":{
"x": {"field": "year", "type": "ordinal"},
"y": {"field": "money", "type": "quantitative"},
"color": {"field": "denom", "type": "nominal"}
}
})
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"}
}
})
md` Individual notes in circulation`
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"}
}
})
md`Total money in circulation`
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"}
}
})
md`Proportion of notes in circulation`
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"}
}
})
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"}
}
})
md`# Annotation`
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"}
}
})
md`## Composition`
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}
}
})
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}
}
})
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}
}}
]
})
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"}
}
})
cars_url = "https://raw.githubusercontent.com/amitkaps/interactive/master/data/notes.csv"
d3.csv("cars_url")
vegaembed({
"data" : {"url": "cars_url"},
"mark": "point",
"encoding": {
"x": {"field": "price", "type": "Q"},
"y": {"field": "kmpl", "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.
