mpg = d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/master/data-raw/mpg.csv")
printTable(mpg.slice(0, 5))
mpg.forEach(d => {
d.displ = +d.displ,
d.year = +d.year,
d.cyl = +d.cyl,
d.cty = +d.cty,
d.hwy = +d.hwy
});
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data(mpg)
.width(500).height(300)
.encode(
vl.x().fieldQ('displ').scale({zero: false}),
vl.y().fieldQ('hwy').scale({zero: false}),
vl.color().fieldN('class')
)
.title("Fuel efficiency generally decreases with engine size")
.render()
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data(mpg)
.width(500).height(300)
.encode(
vl.x().fieldQ('displ').scale({zero: false}),
vl.y().fieldQ('hwy').scale({zero: false}),
vl.color().fieldN('class')
)
.title({text: "Fuel efficiency generally decreases with engine size",
subtitle: "Two seaters (sports cars) are an exception because of their light weight",
anchor: "start"})
.render()
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data(mpg)
.width(500).height(300)
.encode(
vl.x().fieldQ('displ').scale({zero: false}).title("Engine displacement (L)"),
vl.y().fieldQ('hwy').scale({zero: false}).title("Highway fuel economy (mpg)"),
vl.color().fieldN('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"})
.render()
viewof view_title = embed(
{
"width": 500,
"height": 300,
"data": {"values": mpg},
"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"
}
})
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);
};
{
const scatter = vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.encode(
vl.x().fieldQ('displ').title("Engine displacement (L)"),
vl.y().fieldQ('hwy').title("Highway fuel economy (mpg)"),
vl.color().fieldN('class').title("Car type")
);
const text = vl.markText({ align: "left", fontWeight: 'bold', dx: 5, dy: -4 })
.data(bestInClass)
.encode(
vl.x().fieldQ('displ'),
vl.y().fieldQ('hwy'),
vl.text().fieldN('model')
)
const highlight = vl.markPoint({color: 'black'})
.data(bestInClass)
.encode(
vl.x().fieldQ('displ'),
vl.y().fieldQ('hwy')
)
return vl.layer(scatter, highlight, text)
.data(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"})
.render()
}
{
const scatter = vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.encode(
vl.x().fieldQ('displ').title("Engine displacement (L)"),
vl.y().fieldQ('hwy').title("Highway fuel economy (mpg)"),
vl.color().fieldN('class').title("Car type")
);
const text = vl.markText()
.encode(
vl.x().value(150),
vl.y().value(250),
vl.text().value("No data in this quadrant (low displ, low mpg)")
);
return vl.layer(scatter, text)
.data(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"})
.render()
};
{
const scatter = vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.encode(
vl.x().fieldQ('displ').title("Engine displacement (L)"),
vl.y().fieldQ('hwy').title("Highway fuel economy (mpg)"),
vl.color().fieldN('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"});
const text = vl.markText()
.data({
"values": [{"x": 2, "y": 8,
"text": "No data in this quadrant (low displ, low mpg)"}]
})
.encode(
vl.x().fieldQ('x'),
vl.y().fieldQ('y'),
vl.text().fieldN('text')
);
return vl.layer(scatter, text)
.data(mpg)
.width(500).height(300)
.render()
};
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data(mpg)
.width(500).height(300)
.encode(
vl.x().fieldQ('displ').scale({zero: false}).title("Engine displacement (L)"),
vl.y().fieldQ('hwy').scale({zero: false}).title("Highway fuel economy (mpg)"),
vl.color().fieldN('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"}})
.render()
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data(mpg)
.width(500).height(300)
.encode(
vl.x().fieldQ('displ').scale({zero: false}).title("Engine displacement (L)"),
vl.y().fieldQ('hwy').scale({zero: false}).title("Highway fuel economy (mpg)"),
vl.color().fieldN('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"}})
.render()
vl.markCircle({tooltip: true}) // markCircle (filled), markPoint (not filled)
.data(mpg)
.width(500).height(300)
.encode(
vl.x().fieldQ('displ').scale({zero: false}).title("Engine displacement (L)"),
vl.y().fieldQ('hwy').scale({zero: false}).title("Highway fuel economy (mpg)"),
vl.color().fieldN('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}})
.render()
diamonds = d3.csv("https://raw.githubusercontent.com/tidyverse/ggplot2/master/data-raw/diamonds.csv")
diamonds.forEach(d => {
// convert carat and price to numeric
d.price = +d.price
d.carat = +d.carat
});
printTable(diamonds.slice(0, 5))
vl.markPoint()
.data(diamonds)
.encode(vl.x().fieldQ("carat"),
vl.y().fieldQ("price"))
.render()
vl.markPoint()
.data(diamonds)
.encode(vl.x().fieldQ("carat").scale({'type': 'log'}),
vl.y().fieldQ("price").scale({'type': 'log'}))
.render()
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"}
}
}
)
textOverHeatmap_api = {
const rect = vl.markRect()
.encode(
vl.color().fieldQ("num_cars").title("Count of Records")
.legend({"direction": "horizontal", "gradientLength": 120})
);
const text = vl.markText()
.encode(
vl.text().fieldQ("num_cars"),
vl.color().if("datum['num_cars'] < 40", vl.value("black")).value("white"),
);
return vl.layer(rect, text)
.data('https://vega.github.io/vega-lite/examples/data/cars.json')
.transform(
vl.groupby(["Origin", "Cylinders"])
.aggregate(vl.count().as("num_cars"))
)
.encode(
vl.x().fieldO("Cylinders"),
vl.y().fieldO("Origin")
)
.config({axis: {"grid": true, "tickBand": "extent"}})
.render()
}
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}}
}
)
layerLine_api = { const line = vl.markLine()
.encode(
vl.x().fieldQ("scaled_date"),
vl.y().fieldQ("CO2")
);
const left_text = vl.markText({"baseline":"top", "aria":false})
.encode(
vl.x().fieldQ("scaled_date").aggregate("min"),
vl.y().fieldQ("CO2").aggregate({"argmin": "scaled_date"}),
vl.text().fieldN("year").aggregate({"argmin": "scaled_date"})
);
const right_text = vl.markText({"aria":false})
.encode(
vl.x().fieldQ("scaled_date").aggregate("max"),
vl.y().fieldQ("CO2").aggregate({"argmax": "scaled_date"}),
vl.text().fieldN("year").aggregate({"argmax": "scaled_date"})
);
return vl.layer(line, left_text, right_text)
.width(800).height(500)
.data("https://vega.github.io/vega-lite/examples/data/co2-concentration.csv")
.transform(
vl.calculate("year(datum.Date)").as("year"),
vl.calculate("floor(datum.year / 10)").as("decade"),
vl.calculate("(datum.year % 10) + (month(datum.Date)/12)").as("scaled_date"),
vl.calculate("datum.first_date === datum.scaled_date ? 'first' : datum.last_date === datum.scaled_date ? 'last' : null").as("end")
)
.encode(
vl.x().title("Year into Decade").axis({"tickCount": 11}),
vl.y().title("CO2 concentration in ppm").scale({"zero": false}),
vl.color().fieldO("decade").legend(null).scale({"scheme": "magma"})
)
.config({text: {"align": "left", "dx": 3, "dy": 1}})
.render()
};
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"}
}
}
]
}
)
layer_rect_api = {
const rect = vl.markRect()
.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'"}
}
})
.encode(
vl.x().fieldT("start").timeUnit("year"),
vl.x2().fieldT("end").timeUnit("year"),
vl.color().fieldN("event")
);
const line = vl.markLine({color: "#333"})
.encode(
vl.x().fieldT("year").timeUnit("year").title("year (year)"),
vl.y().fieldQ("population")
);
const point = vl.markPoint({color: "#333"})
.encode(
vl.x().fieldT("year").timeUnit("year").title("year (year)"),
vl.y().fieldQ("population")
);
return vl.layer(rect, line, point)
.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'"}}
})
.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.
