Public
Edited
Sep 18, 2023
goog = await FileAttachment("goog.csv").csv({ typed: "auto" })
a
X
frequency
Y
letter
Color
—
Size
—
Facet X
letter
Facet Y
frequency
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
title: "sdsdsd",
marks: [
Plot.barX(a, { x: "frequency", y: "letter", tip: true }),
Plot.ruleX([0])
]
})
Plot.plot({
title: "sdsdsd",
marks: [
Plot.rectY(
await FileAttachment("goog.csv").csv({ typed: "auto" }),
Plot.binX({ y: "count" }, { x: "Date", tip: true })
),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.rectY(
await FileAttachment("goog.csv").csv({ typed: "auto" }),
Plot.binX({ y: "count" }, { x: "Date", tip: true })
),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.areaY(
await FileAttachment("goog.csv").csv({ typed: "auto" }),
Plot.binX({ y: "count" }, { x: "Date", tip: true })
),
Plot.ruleY([0])
]
})
Plot.plot({
color: { legend: true },
marks: [
Plot.lineY(await FileAttachment("goog.csv").csv({ typed: "auto" }), {
x: "Date",
y: "Open",
stroke: "High",
z: null,
tip: true
})
]
})
Plot.plot({
color: { legend: true },
marks: [
Plot.lineY(await FileAttachment("goog.csv").csv({ typed: "auto" }), {
x: "Date",
y: "Open",
stroke: "High",
z: null,
tip: true
})
]
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(goog, {x: "Date", y: "Close", stroke: "red"}),
Plot.lineY(aapl, {x: "Date", y: "Close", stroke: "blue"})
]
})
a = alphabet
Plot.plot({
color: { legend: true },
marks: [Plot.dot(a, { x: "letter", y: "frequency", tip: true })]
})
Plot.plot({
color: { legend: true },
marks: [
Plot.barY(a, { x: "letter", y: "frequency", fill: "letter", tip: true }),
Plot.ruleY([0])
]
})
Plot.plot({
color: { legend: true },
marks: [
Plot.barY(a, { x: "letter", y: "frequency", fill: "#8c2b78", tip: true }),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barY(a, { x: "letter", y: "frequency", tip: true }),
Plot.ruleY([0])
]
})
Plot.plot({
marginTop: 20,
marginRight: 20,
marginBottom: 30,
marginLeft: 40,
grid: true,
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", fill: "green"}),
Plot.frame()
]
})
Plot.plot({
y: {
transform: (d) => d / 1000,
label: "Unemployed (thousands)"
},
marks: [
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
Plot.ruleY([0])
]
})
industries
Plot.areaY(d3.cumsum({length: 600}, d3.randomNormal())).plot()
d3.cumsum({length: 600}, d3.randomNormal())
d3.shuffle(aapl.slice())
Plot.areaY(d3.shuffle(aapl.slice()), {x: "Date", y: "Close"}).plot() // 🌶️
Plot.areaY(d3.shuffle(aapl.slice()), {x: "Date", y: "Close", sort: "Date"}).plot()
Plot.plot({
x: {
label: null
},
y: {
grid: true,
reverse: true
},
marks: [
//Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.3}),
Plot.lineY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([100])
]
})
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.
