weather = (await require('vega-datasets@1'))['weather.csv']()
printTable(weather.slice(0, 10)) // first ten rows
printTable(weather.slice(-10)) // last ten rows
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"mark": {"type": "area", tooltip: true},
"data": {"values": weather},
"width": 400,
"height": 300,
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title":null},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average", "title": "Average Min/Max Temperature Range (°C)"},
"y2": {"field": "temp_min", "type": "quantitative", "aggregate": "average"}
}
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"mark": {"type": "area", "opacity": 0.3, tooltip: true},
"data": {"values": weather},
"width": 400,
"height": 300,
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", title:null},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average", "title": "Average Min/Max Temperature Range (°C)"},
"y2": {"field": "temp_min", "type": "quantitative", "aggregate": "average"},
"color": {"field": "location", "type": "nominal"} // subdivide by location
}
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"mark": {"type": "line", tooltip: true},
"data": {"values": weather},
"width": 400,
"height": 300,
"transform": [{
"calculate" : "(datum.temp_min + datum.temp_max) / 2", // calculate midpoint
"as": "temp_mid"
}],
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", title: null},
"y": {"field": "temp_mid", "type": "quantitative", "aggregate": "average", title: "Average Temperature Midpoint (°C)"},
"color": {"field": "location", "type": "nominal"}
}
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": 400,
"height": 300,
"layer": [ // layer tempMid on top of tempMinMax
{ // chart 1 (tempMinMax)
"mark": {"type": "area", "opacity": 0.3, tooltip: true},
"data": {"values": weather},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", title:null},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average", title: "Average Temperature Range (°C)"},
"y2": {"field": "temp_min", "type": "quantitative", "aggregate": "average"},
"color": {"field": "location", "type": "nominal"} // subdivide by location
}
},
{ // chart 2 (tempMid)
"mark": {"type": "line", tooltip: true},
"data": {"values": weather},
"transform": [{
"calculate" : "(datum.temp_min + datum.temp_max) / 2", // calculate midpoint
"as": "temp_mid"
}],
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month"},
"y": {"field": "temp_mid", "type": "quantitative", "aggregate": "average"},
"color": {"field": "location", "type": "nominal"}
}
}
]
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"width": 400,
"height": 300,
"data": {"values": weather}, // data in the layer
"transform": [{ // transform in layer
"calculate" : "(datum.temp_min + datum.temp_max) / 2",
"as": "temp_mid"
}],
"layer": [
{ // chart 1 (tempMinMax)
"mark": {"type": "area", "opacity": 0.3, tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title": null, "axis": {"format": "%b"}},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average", "title": "Avg. Temperature °C"},
"y2": {"field": "temp_min", "type": "quantitative", "aggregate": "average"},
"color": {"field": "location", "type": "nominal"}
}
},
{ // chart 2 (tempMid)
"mark": {"type": "line", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month"},
"y": {"field": "temp_mid", "type": "quantitative", "aggregate": "average"},
"color": {"field": "location", "type": "nominal"}
}
}
]
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"mark": {"type": "bar", tooltip: true},
"data": {"values": weather},
"width": 400,
"height": 300,
"transform": [{"filter": "datum.location == 'Seattle'"}],
"encoding": {
"x": {"field": "temp_max", "type": "quantitative", "bin": true, "title": "Max Temperature (°C)"},
"y": {"type": "quantitative", "aggregate": "count"}
}
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
"mark": {type: "bar", tooltip: true},
"width": 150,
"height": 150,
"transform": [{"filter": "datum.location == 'Seattle'"}],
"encoding": {
"x": {"field": "temp_max", "type": "quantitative", "bin": true, "title": "Max Temp (°C)"},
"y": {"aggregate": "count", "type": "quantitative", title: "number of days"},
"color": {"field": "weather", "type": "nominal",
"scale": {"domain": ["drizzle", "fog", "rain", "snow", "sun"],
"range": ["#aec7e8", "#c7c7c7", "#1f77b4", "#9467bd", "#e7ba52"]}}, // custom color range
"column": {"field": "weather", "type": "nominal"} // column facet
}
}
)
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
"facet": {"column": {"field": "weather"}}, // column facet based on weather field (required)
"transform": [{"filter": "datum.location == 'Seattle'"}],
"spec": { // specification of the view (required)
"mark": {type: "bar", tooltip: true},
"width": 150,
"height": 150,
"encoding": {
"x": {"field": "temp_max", "type": "quantitative", "bin": true, "title": "Max Temp (°C)"},
"y": {"aggregate": "count", "type": "quantitative", title: "number of days"},
"color": {"field": "weather", "type": "nominal",
"scale": {"domain": ["drizzle", "fog", "rain", "snow", "sun"],
"range": ["#aec7e8", "#c7c7c7", "#1f77b4", "#9467bd", "#e7ba52"]}} // custom color range
}
}
}
)
embed({
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"facet": {"column": {"field": "location"}}, // column facet based on location field (required)
"data": {"values": weather},
"transform": [{
"calculate" : "(datum.temp_min + datum.temp_max) / 2",
"as": "temp_mid"
}],
"spec": { // specification of the view (required)
"width": 400,
"height": 300,
"layer": [
{ // chart 1 (tempMinMax)
"mark": {"type": "area", "opacity": 0.3, tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title": null, "axis": {"format": "%b"}},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average", "title": "Avg. Temperature °C"},
"y2": {"field": "temp_min", "type": "quantitative", "aggregate": "average"},
"color": {"field": "location", "type": "nominal"}
}
},
{ // chart 2 (tempMid)
"mark": {"type": "line", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month"},
"y": {"field": "temp_mid", "type": "quantitative", "aggregate": "average"},
"color": {"field": "location", "type": "nominal"}
}
}
]
}
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
"width": 400,
"height": 300,
"mark": {type: "line", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title": null},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average", title: "Average Max Temperature (°C)"},
"color": {"field": "location", "type": "nominal"}
}
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
// horizontal concatenation
"hconcat": [
{ // temp chart
"width": 240,
"height": 180,
"mark": {type: "line", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title": null},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average", title: "Average Max Temperature (°C)"},
"color": {"field": "location", "type": "nominal"}
}
},
{ // precip chart
"width": 240,
"height": 180,
"mark": {type: "line", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title": null},
"y": {"field": "precipitation", "type": "quantitative", "aggregate": "average", title: "Average Precipitation (in)"},
"color": {"field": "location", "type": "nominal"}
}
},
{ // wind chart
"width": 240,
"height": 180,
"mark": {type: "line", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title": null},
"y": {"field": "wind", "type": "quantitative", "aggregate": "average", title: "Average Wind (mph)"},
"color": {"field": "location", "type": "nominal"}
}
}
]
})
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
"repeat": {"column": ["temp_max", "precipitation", "wind"]}, // specify columns for y-axes
"spec": {
"width": 240,
"height": 180,
"mark": {type: "line", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "temporal", "timeUnit": "month", "title": null},
"y": {"field": {"repeat": "column"}, "type": "quantitative", "aggregate": "average"}, // specify repeat in y-axis
"color": {"field": "location", "type": "nominal"}
}
}
}
)
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
"transform": [{"filter": "datum.location == 'Seattle'"}],
"repeat": {
"row": ['temp_max', 'precipitation', 'wind'],
"column": ['temp_max', 'precipitation', 'wind']},
"spec": {
"width": 150,
"height": 150,
"mark": {"type": "circle", "size": 15, "opacity":0.5, tooltip: true},
"encoding": {
"x": {"field": {"repeat": "column"}, "type": "quantitative"}, // repeat for column
"y": {"field": {"repeat": "row"}, "type": "quantitative"}, // repeat for row
}
}
}
)
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"hconcat": [
{ // left chart
"height": 300,
"data": {"values": weather},
"transform": [{"filter": "datum.location == 'Seattle'"}],
"mark": {type: "bar", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "ordinal", "timeUnit": "month"},
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average"}
}
},
{ // right chart
"height": 300,
"data": {"values": weather},
"transform": [{"filter": "datum.location == 'Seattle'"}],
"mark": {"type": "rule", "stroke": "firebrick"},
"encoding": {
"y": {"field": "temp_max", "type": "quantitative", "aggregate": "average"}
}
}
]
}
)
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
"transform": [{"filter": "datum.location == 'Seattle'"}],
"repeat": {"column": ['temp_max', 'precipitation', 'wind']},
"spec": {
"width": 200,
"height": 150,
"layer": [
{ // basic 1
"mark": {type: "bar", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "ordinal", "timeUnit": "month", "title": "Month"},
"y": {"field": {"repeat": "column"}, "type": "quantitative", "aggregate": "average"}
}
},
{ // basic 2
"mark": {"type": "rule", "stroke": "firebrick"},
"encoding": {
"y": {"field": {"repeat": "column"}, "type": "quantitative", "aggregate": "average"}
}
}
]
}
}
)
embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v6.json",
"data": {"values": weather},
"transform": [{"filter": "datum.location == 'Seattle'"}],
"title": "Seattle Weather Dashboard",
"resolve": {"legend": {"color": "independent"}},
"config": {"axis": {"labelAngle": 0}},
"vconcat": [
{
"hconcat": [
{ // splom
"repeat": {
"row": ['temp_max', 'precipitation', 'wind'],
"column": ['temp_max', 'precipitation', 'wind']},
"spec": {
"width": 125,
"height": 125,
"mark": {"type": "circle", "size": 15, "opacity":0.5, tooltip: true},
"encoding": {
"x": {"field": {"repeat": "column"}, "type": "quantitative"},
"y": {"field": {"repeat": "row"}, "type": "quantitative"},
}
}
},
{ // date histograms
"repeat": {"row": ['temp_max', 'precipitation', 'wind']},
"spec": {
"width": 175,
"height": 125,
"layer": [
{
"mark": {type: "bar", tooltip: true},
"encoding": {
"x": {"field": "date", "type": "ordinal", "timeUnit": "month", "title": "Month"},
"y": {"field": {"repeat": "row"}, "type": "quantitative", "aggregate": "average"}
}
},
{
"mark": {"type": "rule", "stroke": "firebrick"},
"encoding": {
"y": {"field": {"repeat": "row"}, "type": "quantitative", "aggregate": "average"}
}
}
]
}
}
]},
{ // temperature histograms
"facet": {"column": {"field": "weather"}},
"spec": {
"mark": {type: "bar", tooltip: true},
"width": 115,
"height": 100,
"encoding": {
"x": {"field": "temp_max", "type": "quantitative", "bin": true, "title": "Temperature (°C)"},
"y": {"aggregate": "count", "type": "quantitative"},
"color": {"field": "weather", "type": "nominal",
"scale": {"domain": ["drizzle", "fog", "rain", "snow", "sun"],
"range": ["#aec7e8", "#c7c7c7", "#1f77b4", "#9467bd", "#e7ba52"]}}
}
}
}
]
})
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.
