Published
Edited
Apr 9, 2021
Insert cell
Insert cell
Insert cell
Insert cell
{
let x, y;
x = 10;
y = 20;
x = y;
return x;
}
Insert cell
Insert cell
a = 10
Insert cell
b = 20
Insert cell
c = b
Insert cell
Insert cell
presbyterians = d3.json("https://data.chnm.org/presbyterians/")
Insert cell
Insert cell
import { Table } from "@observablehq/table"
Insert cell
Table(presbyterians, {
sort: "year",
format: {
year: y => y.toString()
}
})
Insert cell
Insert cell
import { vl } from "@vega/vega-lite-api"
Insert cell
Insert cell
vl
.markLine()
.data(presbyterians)
.encode(
vl
.x()
.fieldQ("year")
.axis({ format: "f", title: null }),
vl
.y()
.fieldQ("members")
.axis({ format: ".2s" }),
vl.tooltip().fieldQ("members"),
vl.color().value(lineColor)
)
.title(`Presbyterians ${years[0]}–${years[1]}`)
.width(500)
.render()
Insert cell
years = d3.extent(presbyterians, d => d.year)
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