import {vl} from '@vega/vega-lite-api-v5'
abTemp = FileAttachment("Temperature_Anomaly@1.csv").csv()
vl.markPoint()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month')
)
.render()
vl.markPoint()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month'),
vl.shape().fieldN('Month') //
)
.render()
vl.markCircle() //
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month')
)
.render()
vl.markSquare() //
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month')
)
.render()
vl.markTick()//
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month')
)
.render()
vl.markTick({size: 200, thickness: 2})
.data(abTemp)
.encode(
vl.color().fieldQ('Temperature_Anomaly').scale({
"domain": [-1,0,.05, 1.8],
"range": ["#0000ff","#88ccff","#f98d5d", "#ff0000"]}),
vl.x().fieldT('Year')
)
.height(200)
.render()
vl.markLine()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month')
)
.render()
vl.markLine({interpolate: 'bundle'})
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month')
)
.render()
vl.markBar()//
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly'),
vl.x().fieldT('Year'),
vl.color().fieldN('Month')
)
.render()
vl.markBar()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly').stack(null),//
vl.x().fieldT('Year'),
vl.color().fieldN('Month'),
vl.opacity().value(.5)//
)
.render()
vl.markArea()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly').stack(null),
vl.x().fieldT('Year'),
vl.color().fieldN('Month'),
vl.opacity().value(.5)
)
.render()
vl.markArea()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.y().fieldQ('Temperature_Anomaly').stack(null),
vl.x().fieldT('Year'),
vl.color().fieldN('Month'),
vl.opacity().value(.5)
)
.render()
data = [
{"category": "Sky", "value": 75, "order": 3},
{"category": "Shady side of a pyramid", "value": 10, "order": 1},
{"category": "Sunny side of a pyramid", "value": 15, "order": 2}
]
vl.markArc()
.data(data)
.encode(
vl.theta().fieldQ('value'),
vl.color().fieldN('category')
)
.render()
vl.markArc()
.data(data)
.encode(
vl.theta().fieldQ('value').scale({"range": [2.35619449, 8.639379797]}),
vl.color().fieldN('category').scale({
"domain": ["Sky", "Shady side of a pyramid", "Sunny side of a pyramid"],
"range": ["#416D9D", "#674028", "#DEAC58"]}),
vl.order().fieldO('order')
)
.render()
vl.markBar()
.data(data)
.encode(
vl.x().fieldQ('value'),
vl.y().fieldO('order').sort('-x'),
vl.color().fieldN('category').scale({
"domain": ["Sky", "Shady side of a pyramid", "Sunny side of a pyramid"],
"range": ["#416D9D", "#674028", "#DEAC58"]})
)
.render()
vl.markBar()//
.data(data)
.encode(
vl.x().fieldQ('value'),
vl.color().fieldN('category').scale({
"domain": ["Sky", "Shady side of a pyramid", "Sunny side of a pyramid"],
"range": ["#416D9D", "#674028", "#DEAC58"]}),
vl.size().value(100), //
vl.tooltip().fieldN('category') //
)
.height(110)
.render()
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.
