Public
Edited
Jul 26, 2023
Insert cell
Insert cell
vegalite = require("@observablehq/vega-lite")
Insert cell
d3 = require("d3@5")
Insert cell
data_url = "https://raw.githubusercontent.com/amitkaps/interactive/master/data/sample.csv"
Insert cell
data = d3.csv(data_url)
Insert cell
Inputs.table(data)
Insert cell
md`## Simple Chart`
Insert cell
vegalite({
width: 400,
height: 300,
data: {url: data_url},
mark: "bar",
encoding: {
x: {field: "area", type:"N"},
y: {field: "sales", type: "Q"}
}
})
Insert cell
vegalite({
width: 400,
height: 300,
data: {url: data_url},
selection: {
"highlight": {type: "single", on: "mouseover", empty: "none"}
},
mark: "bar",
encoding: {
x: {field: "area", type:"N"},
y: {field: "sales", type: "Q"},
color: {
condition: {selection: "highlight", value: "blue"},
value: "brown"}
}
})
Insert cell
vegalite({
width: 400,
height: 300,
data: {url: data_url},
selection: {
"highlight": {type: "single", on: "mouseover", empty: "none"},
"select": {type: "single", on:"click", empty: "none"}
},
mark: "bar",
encoding: {
x: {field: "area", type:"N"},
y: {field: "sales", type: "Q"},
color: {
condition: {selection: "highlight", value: "blue"},
value: "brown"},
opacity: {
condition: {selection: "select", value: 0.2},
value: 1},
}
})
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