Published
Edited
May 17, 2019
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell
Cereals = d3.csv("https://gist.githubusercontent.com/raynathanlow/ed59b0ba93996068fb7032bd08691f6f/raw/8e18ff5e6f646ab12800dec754b13490f3f70273/CerealsVEGAtutorial.csv")
Insert cell
Insert cell
Insert cell
VegaLite = require('@observablehq/vega-lite')
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
VegaLite({
data: {values: Cereals},
mark: "bar",
encoding: {
x: {field: "calories", type: "quantitative"},
y: {field: "name", type: "nominal"}}
}
})
Insert cell
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { field: "protein", type: "quantitative" },
y: { field: "name", type: "nominal" },
}
})
Insert cell
Insert cell
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { field: "calories", type: "quantitative" },
y: { field: "name", type: "nominal" },
}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "mean", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
Insert cell
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "min", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
Insert cell
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "max", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
Insert cell
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "variance", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
Insert cell
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "median", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

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