The avatar for @oducs-vis
ODUCS Vis
Team for ODU Computer Science Data Vis and Info Vis classes
Public
Edited
Nov 8, 2024
Fork of Vega-Lite Annotations Examples
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mpg = d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/master/data-raw/mpg.csv")
Insert cell
printTable(mpg.slice(0, 5))
Insert cell
mpg.forEach(d => {
d.displ = +d.displ,
d.year = +d.year,
d.cyl = +d.cyl,
d.cty = +d.cty,
d.hwy = +d.hwy
});
Insert cell
Insert cell
Insert cell
embed(
{
"data": {"values": mpg},
"width": 500,
"height": 300,
"mark":
{"type": "circle", "tooltip": true}, // circle (filled), point (not filled)
"encoding": {
"x": {"field": "displ", "type": "quantitative", "scale": {"zero": false}},
"y": {"field": "hwy", "type": "quantitative", "scale": {"zero": false}},
"color": {"field":"class", "type": "nominal"}
},
"title": { "text": "Fuel efficiency generally decreases with engine size"}
})
Insert cell
Insert cell
embed(
{
"data": {"values": mpg},
"width": 500,
"height": 300,
"mark":
{"type": "circle", "tooltip": true}, // circle (filled), point (not filled)
"encoding": {
"x": {"field": "displ", "type": "quantitative", "scale": {"zero": false}},
"y": {"field": "hwy", "type": "quantitative", "scale": {"zero": false}},
"color": {"field":"class", "type": "nominal"}
},
"title": { "text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor":"start"}
})
Insert cell
Insert cell
viewof view_title = embed(
{
"data": {"values": mpg},
"width": 500,
"height": 300,
"mark":
{"type": "circle", "tooltip": true},
"encoding": {
"x": {"field": "displ", "type": "quantitative", "scale": {"zero": false}, "title": "Engine displacement (L)"},
"y": {"field": "hwy", "type": "quantitative", "scale": {"zero": false}, "title": "Highway fuel economy (mpg)"},
"color": {"field":"class", "title":"Car type"}
},
"title": { "text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor":"start"
}
})
Insert cell
Insert cell
Insert cell
Insert cell
bestInClass = {
const grouped={};
for (const item of mpg) {
// groups each item by 'class' and saves the one with the max 'hwy' value in 'grouped'
if (!grouped[item.class] || item.hwy > grouped[item.class].hwy) {
grouped[item.class] = item;
}
}
return Object.values(grouped);
};
Insert cell
Insert cell
embed({
"data": {"values": mpg},
"width": 500,
"height": 300,
"title": {
"text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor": "start"
},
"layer": [
{ // scatterplot
"mark": {"type": "circle", "tooltip": true}, // circle (filled), point (not filled)
"encoding": {
"x": {"field": "displ", "type": "quantitative", "title": "Engine displacement (L)"},
"y": {"field": "hwy", "type": "quantitative", "title": "Highway fuel economy (mpg)"},
"color": {"field": "class", "title": "Car type"}
}
},
{ // model text
"mark": {"type": "text", "align": "left", "fontWeight": "bold", "dx": 5, "dy": -4},
"data": {"values": bestInClass},
"encoding": {
"x": {"field": "displ", "type": "quantitative"},
"y": {"field": "hwy", "type": "quantitative"},
"text": {"field": "model", "type": "nominal"}
}
},
{ // highlight model
"mark": {"type": "point", "color": "black"},
"data": {"values": bestInClass},
"encoding": {
"x": {"field": "displ", "type": "quantitative"},
"y": {"field": "hwy", "type": "quantitative"}
}
}
]
})
Insert cell
Insert cell
embed({
"data": {"values": mpg},
"width": 500,
"height": 300,
"title": {
"text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor": "start"
},
"layer": [
{ // scatterplot
"mark": {"type": "circle", "tooltip": true},
"encoding": {
"x": {"field": "displ", "type": "quantitative", "title": "Engine displacement (L)" },
"y": {"field": "hwy", "type": "quantitative", "title": "Highway fuel economy (mpg)"},
"color": {"field": "class", "title": "Car type"}
}
},
{ // text
"mark": {"type": "text"},
"encoding": {
"x": {"value": 150},
"y": {"value": 250},
"text": {"value": "No data in this quadrant (low displ, low mpg)"}
}
},
]
})
Insert cell
Insert cell
embed({
"data": {"values": mpg},
"width": 500,
"height": 300,
"layer": [
{ // scatterplot
"mark": {"type": "circle", "tooltip": true},
"encoding": {
"x": {"field": "displ", "type": "quantitative", "title": "Engine displacement (L)" },
"y": {"field": "hwy", "type": "quantitative", "title": "Highway fuel economy (mpg)"},
"color": {"field": "class", "title": "Car type"}
},
"title": {
"text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor": "start"
}
},
{ // text
"mark": {"type": "text"},
"data": {"values": [{"x": 2, "y": 8, "text": "No data in this quadrant (low displ, low mpg)"}]},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"},
"text": {"field": "text", "type": "nominal"}
}
},
]
})
Insert cell
Insert cell
embed({
"data": {"values": mpg},
"width": 500,
"height": 300,
"mark": {"type": "circle", "tooltip": true},
"encoding": {
"x": {"field": "displ", "type": "quantitative", "scale": {"zero": false}, "title": "Engine displacement (L)" },
"y": {"field": "hwy", "type": "quantitative", "scale": {"zero": false}, "title": "Highway fuel economy (mpg)"},
"color": {"field": "class", "title": "Car type"}
},
"title": {
"text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor": "start"
},
"config": {"legend": {"orient":"left"}}
})
Insert cell
embed({
"data": {"values": mpg},
"width": 500,
"height": 300,
"mark": {"type": "circle", "tooltip": true},
"encoding": {
"x": {"field": "displ", "type": "quantitative", "scale": {"zero": false}, "title": "Engine displacement (L)" },
"y": {"field": "hwy", "type": "quantitative", "scale": {"zero": false}, "title": "Highway fuel economy (mpg)"},
"color": {"field": "class", "title": "Car type"}
},
"title": {
"text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor": "start"
},
"config": {"legend": {"orient":"bottom"}}
})
Insert cell
Insert cell
embed({
"data": {"values": mpg},
"width": 500,
"height": 300,
"mark": {"type": "circle", "tooltip": true},
"encoding": {
"x": {"field": "displ", "type": "quantitative", "scale": {"zero": false}, "title": "Engine displacement (L)" },
"y": {"field": "hwy", "type": "quantitative", "scale": {"zero": false}, "title": "Highway fuel economy (mpg)"},
"color": {"field": "class", "title": "Car type"}
},
"title": {
"text": "Fuel efficiency generally decreases with engine size",
"subtitle": "Two seaters (sports cars) are an exception because of their light weight",
"anchor": "start"
},
"config": {"legend": {"orient":"none", "legendX": 300, "legendY":10}}
})
Insert cell
Insert cell
diamonds = d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/master/data-raw/diamonds.csv")
Insert cell
diamonds.forEach(d => {
// convert carat and price to numeric
d.price = +d.price
d.carat = +d.carat
});
Insert cell
printTable(diamonds.slice(0, 5))
Insert cell
embed({
"data": {"values": diamonds},
"width": 400,
"height": 300,
"mark": {"type": "point", "tooltip": true},
"encoding": {
"x": {"field": "carat", "type": "quantitative"},
"y": {"field": "price", "type": "quantitative"}
}
})
Insert cell
Insert cell
embed({
"data": {"values": diamonds},
"width": 400,
"height": 300,
"mark": {"type": "point", "tooltip": true},
"encoding": {
"x": {"field": "carat", "type": "quantitative", "scale": {"type": "log"}},
"y": {"field": "price", "type": "quantitative", "scale": {"type": "log"}}
}
})
Insert cell
Insert cell
Insert cell
viewof textOverHeatmap = embed (
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/cars.json"},
"transform": [
{
"aggregate": [{"op": "count", "as": "num_cars"}],
"groupby": ["Origin", "Cylinders"]
}
],
"encoding": {
"y": {"field": "Origin", "type": "ordinal"},
"x": {"field": "Cylinders", "type": "ordinal"}
},
"layer": [
{
"mark": "rect",
"encoding": {
"color": {
"field": "num_cars",
"type": "quantitative",
"title": "Count of Records",
"legend": {"direction": "horizontal", "gradientLength": 120}
}
}
},
{
"mark": "text",
"encoding": {
"text": {"field": "num_cars", "type": "quantitative"},
"color": {
"condition": {"test": "datum['num_cars'] < 40", "value": "black"},
"value": "white"
}
}
}
],
"config": {
"axis": {"grid": true, "tickBand": "extent"}
}
}
)
Insert cell
Insert cell
viewof layerLine = embed (
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {
"url": "https://vega.github.io/vega-lite/examples/data/co2-concentration.csv",
"format": {"parse": {"Date": "utc:'%Y-%m-%d'"}}
},
"width": 800,
"height": 500,
"transform": [
{"calculate": "year(datum.Date)", "as": "year"},
{"calculate": "floor(datum.year / 10)", "as": "decade"},
{
"calculate": "(datum.year % 10) + (month(datum.Date)/12)",
"as": "scaled_date"
},
{
"calculate": "datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null",
"as": "end"
}
],
"encoding": {
"x": {
"type": "quantitative",
"title": "Year into Decade",
"axis": {"tickCount": 11}
},
"y": {
"title": "CO2 concentration in ppm",
"type": "quantitative",
"scale": {"zero": false}
},
"color": {
"field": "decade",
"type": "ordinal",
"scale": {"scheme": "magma"},
"legend": null
}
},

"layer": [
{
"mark": "line",
"encoding": {
"x": {"field": "scaled_date"},
"y": {"field": "CO2"}
}
},
{
"mark": {"type": "text", "baseline": "top", "aria": false},
"encoding": {
"x": {"aggregate": "min", "field": "scaled_date"},
"y": {"aggregate": {"argmin": "scaled_date"}, "field": "CO2"},
"text": {"aggregate": {"argmin": "scaled_date"}, "field": "year"}
}
},
{
"mark": {"type": "text", "aria": false},
"encoding": {
"x": {"aggregate": "max", "field": "scaled_date"},
"y": {"aggregate": {"argmax": "scaled_date"}, "field": "CO2"},
"text": {"aggregate": {"argmax": "scaled_date"}, "field": "year"}
}
}
],
"config": {"text": {"align": "left", "dx": 3, "dy": 1}}
}
)
Insert cell
Insert cell
Insert cell
viewof layer_rect = embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "The population of the German city of Falkensee over time",
"width": 500,
"data": {
"values": [
{"year": "1875", "population": 1309},
{"year": "1890", "population": 1558},
{"year": "1910", "population": 4512},
{"year": "1925", "population": 8180},
{"year": "1933", "population": 15915},
{"year": "1939", "population": 24824},
{"year": "1946", "population": 28275},
{"year": "1950", "population": 29189},
{"year": "1964", "population": 29881},
{"year": "1971", "population": 26007},
{"year": "1981", "population": 24029},
{"year": "1985", "population": 23340},
{"year": "1989", "population": 22307},
{"year": "1990", "population": 22087},
{"year": "1991", "population": 22139},
{"year": "1992", "population": 22105},
{"year": "1993", "population": 22242},
{"year": "1994", "population": 22801},
{"year": "1995", "population": 24273},
{"year": "1996", "population": 25640},
{"year": "1997", "population": 27393},
{"year": "1998", "population": 29505},
{"year": "1999", "population": 32124},
{"year": "2000", "population": 33791},
{"year": "2001", "population": 35297},
{"year": "2002", "population": 36179},
{"year": "2003", "population": 36829},
{"year": "2004", "population": 37493},
{"year": "2005", "population": 38376},
{"year": "2006", "population": 39008},
{"year": "2007", "population": 39366},
{"year": "2008", "population": 39821},
{"year": "2009", "population": 40179},
{"year": "2010", "population": 40511},
{"year": "2011", "population": 40465},
{"year": "2012", "population": 40905},
{"year": "2013", "population": 41258},
{"year": "2014", "population": 41777}
],
"format": {
"parse": {"year": "date:'%Y'"}
}
},
"layer": [
{
"mark": "rect",
"data": {
"values": [
{
"start": "1933",
"end": "1945",
"event": "Nazi Rule"
},
{
"start": "1948",
"end": "1989",
"event": "GDR (East Germany)"
}
],
"format": {
"parse": {"start": "date:'%Y'", "end": "date:'%Y'"}
}
},
"encoding": {
"x": {
"field": "start",
"timeUnit": "year"
},
"x2": {
"field": "end",
"timeUnit": "year"
},
"color": {"field": "event", "type": "nominal"}
}
},
{
"mark": "line",
"encoding": {
"x": {
"field": "year",
"timeUnit": "year",
"title": "year (year)"
},
"y": {"field": "population", "type": "quantitative"},
"color": {"value": "#333"}
}
},
{
"mark": "point",
"encoding": {
"x": {
"field": "year",
"timeUnit": "year"
},
"y": {"field": "population", "type": "quantitative"},
"color": {"value": "#333"}
}
}
]
}
)
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