Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
d3 = require("d3@5")
Cereals = d3.csv("https://gist.githubusercontent.com/raynathanlow/ed59b0ba93996068fb7032bd08691f6f/raw/8e18ff5e6f646ab12800dec754b13490f3f70273/CerealsVEGAtutorial.csv")
VegaLite = require('@observablehq/vega-lite')
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
VegaLite({
data: {values: Cereals},
mark: "bar",
encoding: {
x: {field: "calories", type: "quantitative"},
y: {field: "name", type: "nominal"}}
}
})
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { field: "protein", type: "quantitative" },
y: { field: "name", type: "nominal" },
}
})
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { field: "calories", type: "quantitative" },
y: { field: "name", type: "nominal" },
}
})
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "mean", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "min", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "max", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "variance", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
VegaLite({
data: { values: Cereals },
mark: "bar",
encoding: {
x: { aggregate: "median", field: "protein", type: "quantitative" },
y: { field: "Type", type: "nominal" }
},
})
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
