Public
Edited
Apr 19, 2024
Insert cell
Insert cell
dummy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof form = Inputs.form({
fill_dimension: Inputs.select(["flag", "type"], {label: "Breakdown Selection"}),
y_dimension: Inputs.select(["Casualties", "Tonnage", "Value"], {label: "Metric Selction"}),
})
Insert cell
viewof chart = Plot.plot({
title: "Associating chart title with graph",
caption: "Associated legend text with graph.",
y: {grid: true},
marks: [
Plot.rectY(table, {y: form.y_dimension, x: "date", fill: form.fill_dimension, sort: form.fill_dimension, tip: "x"}),
Plot.rectY(table, Plot.pointer({y: form.y_dimension, x: "date", stroke: "#E5006E", fill: "#E5006E", fillOpacity: 0.5, sort: form.fill_dimension})),
Plot.ruleY([0])
],
color: {legend: true},
marginLeft : 60
})
Insert cell
Insert cell
viewof table = Inputs.table(ran)
Insert cell
data = cars
Insert cell
data
X
year
Y
Color
Size
Facet X
Facet Y
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof summary = Plot.plot({
width,
marks: [
Plot.rectY(data, Plot.binX({ y: "count" }, { x: "year", tip: true })),
Plot.ruleY([0])
]
})
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