Professor of Computer Science at Old Dominion University
Published
Edited
Nov 11, 2020
2 stars
viewof labelBarChart = embed (
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
"data": {
"values": [
{"a": "A", "b": 28},
{"a": "B", "b": 55},
{"a": "C", "b": 43}
]
},
"encoding": {
"y": {"field": "a", "type": "nominal"},
"x": {"field": "b", "type": "quantitative", "scale": {"padding": 10}}
},
"layer": [{
"mark": "bar"
}, {
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 3
},
"encoding": {
"text": {"field": "b", "type": "quantitative"}
}
}]
}
)
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"}
}
}
)
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}}
}
)
viewof layer_mean = embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/seattle-weather.csv"},
"layer": [
{
"mark": "bar",
"encoding": {
"x": {
"timeUnit": "month",
"field": "date",
"type": "ordinal"
},
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
}
}
},
{
"mark": "rule",
"encoding": {
"y": {
"aggregate": "mean",
"field": "precipitation",
"type": "quantitative"
},
"color": {"value": "red"},
"size": {"value": 3}
}
}
]
}
)
viewof layer_histo = embed(
{
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"data": {"url": "https://vega.github.io/vega-lite/examples/data/movies.json"},
"layer": [{
"mark": "bar",
"encoding": {
"x": {"field": "IMDB Rating", "bin": true},
"y": {"aggregate": "count"}
}
},{
"mark": "rule",
"encoding": {
"x": {"aggregate": "mean", "field": "IMDB Rating"},
"color": {"value": "red"},
"size": {"value": 5}
}
}]
}
)
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"}
}
}
]
}
)
embed = require("vega-embed@6")
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.
