Published
Edited
Sep 28, 2021
Insert cell
Insert cell
Insert cell
vl.markCircle()
.data(countryData)
.transform(vl.filter('datum.year == 2005'))
.encode(
vl.x().fieldQ("life_expect").scale({domain:[25,100]}),
vl.y().fieldQ("fertility"),
vl.tooltip("country")
)
.width(700)
.height(500)
.render()

Insert cell
Insert cell
vl.markCircle()
.data(countryData)
.transform(vl.filter('datum.year == 2005'))
.encode(
vl.x().fieldQ("life_expect").scale({domain:[25,100]}),
vl.y().fieldQ("fertility"),
vl.size().fieldQ("pop").scale({range:[10,1000], domain:[0, 1303182268]}),
vl.tooltip("country")
)
.width(700)
.height(500)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(countryData)
.transform(vl.filter('datum.year == 2005'))
.encode(
vl.x().fieldQ("life_expect").scale({domain:[25,100]}),
vl.y().fieldQ("fertility"),
vl.size().fieldQ("pop").scale({range:[10,1000], domain:[0, 1303182268]}),
vl.color().fieldN("cluster"),
vl.tooltip("country")
)
.width(700)
.height(500)
.render()
Insert cell
Insert cell
Insert cell
vl.markCircle()
.data(carData)
.encode(
vl.x().fieldQ("Miles_per_Gallon")
)
.render()
Insert cell
Two variables...
Insert cell
vl.markCircle()
.data(carData)
.encode(
vl.x().fieldQ("Miles_per_Gallon"),
vl.y().fieldQ("Horsepower")
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(carData)
.encode(
vl.x().fieldQ("Miles_per_Gallon"),
vl.y().fieldQ("Horsepower"),
vl.color().fieldN("Cylinders")
)
.render()
Insert cell
Four variables...
Insert cell
vl.markCircle()
.data(carData)
.encode(
vl.x().fieldQ("Miles_per_Gallon"),
vl.y().fieldQ("Horsepower"),
vl.color().fieldN("Cylinders"),
vl.row().fieldN("Origin")
)
.render()
Insert cell
Insert cell
vl.markCircle()
.data(carData)
.transform(
vl.calculate("parseInt(slice(datum.Year,0,4))").as("year"),
vl.calculate("if(datum.year >= 1970 && datum.year < 1974, '70-73', if(datum.year >= 1974 && datum.year < 1978, '74-77', '78-82'))").as("Date Range")
)
.encode(
vl.x().fieldQ("Miles_per_Gallon"),
vl.y().fieldQ("Horsepower"),
vl.color().fieldN("Cylinders"),
vl.row().fieldN("Origin"),
vl.column().fieldN("Date Range"),
vl.tooltip("Name")
)
.width(200)
.height(200)
.render()
Insert cell
Insert cell
vl.markPoint()
.data(irisData)
.encode(
vl.x().fieldQ(vl.repeat("column")),
vl.y().fieldQ(vl.repeat("row")),
vl.color().fieldN("species")
)
.width(150)
.height(150)
.repeat({
row: ["sepalLength", "sepalWidth", "petalLength", "petalWidth"],
column: ["sepalLength", "sepalWidth", "petalLength", "petalWidth"]
})
.render()
Insert cell
Insert cell
{
/* based on the example from https://observablehq.com/@vega/vega-lite-api */
const domain = ["Cylinders", "Horsepower", "Weight_in_lbs","Acceleration", "Displacement"];
const textStyle = {
dx: -2,
align: 'right',
baseline: 'bottom'
};
const scale = {
type: 'point',
padding: 0
};

const axis = {
domain: false,
ticks: false,
title: false,
grid: true,
gridColor: '#888',
labelAngle: 0,
labelPadding: 8,
labelFontWeight: 'bold'
};

const lines = vl.markLine({
strokeWidth: 0.5,
opacity: 0.5
})
.encode(
vl.color().fieldN('Origin').sort('ascending'),
vl.detail().fieldN('index'),
vl.x().fieldO('key').scale(scale).axis(axis),
vl.y().fieldQ('norm_val').axis(null)
);

const topTick = vl.layer([
vl.markText(textStyle)
.encode(vl.text().max("max")),
vl.markTick({style:"tick", size: 8, color:"#ccc"})
])
.encode(
vl.x().fieldN("key"),
vl.y().value(0)
);

const midTick = vl.layer([
vl.markText(textStyle)
.encode(vl.text().max("mid")),
vl.markTick({style:"tick", size: 8, color:"#ccc"})
])
.encode(
vl.x().fieldN("key"),
vl.y().value(150)
);

const bottomTick = vl.layer([
vl.markText(textStyle)
.encode(vl.text().max("min")),
vl.markTick({style:"tick", size: 8, color:"#ccc"})
])
.encode(
vl.x().fieldN("key"),
vl.y().value(300)
);
return vl.layer([lines, topTick, midTick, bottomTick])
.data(carData)
.transform([
vl.window({"op": "count", "as": "index"}),
vl.fold(domain),
vl.joinaggregate([
{"op": "min", "field": "value", "as": "min"},
{"op": "max", "field": "value", "as": "max"}
]).groupby("key"),
vl.calculate("(datum.value - datum.min) / (datum.max-datum.min)").as("norm_val"),
vl.calculate("(datum.min + datum.max) / 2").as("mid")
])
.width(700)
.height(300)
.render()
}
Insert cell
Insert cell
// based on example from https://observablehq.com/@observablehq/vega-lite-chart-types?collection=@observablehq/observable-for-vega-lite

vl.markRect({tooltip: {"content": "data"}, clip: true})
.data(weatherData)
.encode(
vl.x().fieldO("date").timeUnit("date"),
vl.y().fieldO("date").timeUnit("month"),
vl.color().average("temp_max").scale({scheme:"redyellowblue", reverse:true})
)
.render()
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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