The avatar for @ysummer1
ysummer1
Published
Edited
Feb 27, 2019
Fork of Getting Started with Data
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell
Cereals = d3.csv("https://gist.githubusercontent.com/SFU-IAT355/87a05902375cb5523d31a6197d607cb3/raw/da6a2294b0ad2fe6bec5759213fefb302c7af2b2/CerealsVEGAtutorial.csv")
Insert cell
Insert cell
Insert cell
VegaLite = require('@observablehq/vega-lite')
Insert cell
Insert cell
md` \`\`\`
VegaLite({
data: {values: **Data Input**},
mark: "**Mark Input**",
encoding: {
x: {field: "**Measure Input**", type: "quantitative"},
y: {field: "**Dimension Input**", type: "nominal"}}
}
})
\`\`\`
`
Insert cell
VegaLite({
data: {values: Cereals},
mark: "bar",
encoding: {
y: {field: "name", type: "nominal"},
x: {field: "protein", type: "quantitative"}
}
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
md` \`\`\`
VegaLite({
data: {values: **Data Input**},
mark: "**Mark Input**",
encoding: {
x: {aggregate: "**Aggregation Type**", field: "**Measure Input**", type: "quantitative"},
y: {field: "**Dimension Input", type: "nominal"}
}
})
\`\`\`
`
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

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

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