Public
Edited
May 5
import {vl} from "@vega/vega-lite-api-v5"
import {printTable} from "@uwdata/data-utilities"
abTemp = FileAttachment("Temperature_Anomaly-1.csv").csv()
vl.markPoint()
.data(abTemp)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.size().fieldQ('Temperature_Anomaly'),
vl.opacity().value(.25)
)
.width(600)
.render()
vl.markPoint({filled: true})
.data(abTemp)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.opacity().fieldQ('Temperature_Anomaly')
)
.width(600)
.render()
vl.markPoint({filled: true})
.data(abTemp)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.opacity().value(.5),
vl.color().fieldQ('Temperature_Anomaly')
)
.width(600)
.render()
vl.markPoint({filled: true})
.data(abTemp)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.opacity().value(.5),
vl.color().fieldQ('Temperature_Anomaly').scale({"range":"diverging"})
)
.width(600)
.render()
vl.markPoint({filled: true})
.data(abTemp)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.opacity().value(.5),
vl.color().fieldQ('Temperature_Anomaly').scale({
"domain": [-1, 0, .05, 1.8],
"range": ["#0000ff", "#88ccff", "#f98d5d", "#ff0000"]}),
vl.shape().fieldN('Month')
)
.width(600)
.render()
vl.markPoint({filled: true})
.data(abTemp)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.opacity().value(.5),
vl.color().fieldQ('Temperature_Anomaly').scale({
"domain": [-1, 0, .05, 1.8],
"range": ["#0000ff", "#88ccff", "#f98d5d", "#ff0000"]}),
vl.tooltip().fieldO('Month')
)
.width(600)
.render()
vl.markPoint({filled: true})
.data(abTemp)
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.opacity().value(.5),
vl.color().fieldQ('Temperature_Anomaly').scale({
"domain": [-1, 0, .05, 1.8],
"range": ["#0000ff", "#88ccff", "#f98d5d", "#ff0000"]}),
vl.tooltip().fieldO('Month'),
vl.column().fieldO('Month').sort(["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"])
)
.width(200)
.height(150)
.render()
vl.markPoint()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.color().fieldN('Month')
)
.render()
vl.markTick({size:200, thickness: 2.5})
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.x().fieldT('Year'),
vl.color().fieldQ('Temperature_Anomaly').scale({
"domain": [-1, 0, .05, 1.8],
"range": ["#0000ff", "#88ccff", "#f98d5d", "#ff0000"]})
)
.height(200)
.render()
vl.markLine({interpolate:'bundle'})
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.color().fieldN('Month')
)
.render()
vl.markLine({interpolate:'step-after'})
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.color().fieldN('Month')
)
.render()
vl.markBar()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly'),
vl.color().fieldN('Month')
)
.render()
vl.markBar()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly').stack(null),
vl.color().fieldN('Month'),
vl.opacity().value(.5)
)
.render()
vl.markArea()
.data(abTemp)
.transform(
vl.filter("datum.Month == 'Feb' || datum.Month == 'Aug'"))
.encode(
vl.x().fieldT('Year'),
vl.y().fieldQ('Temperature_Anomaly').stack(null),
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.
