Public
Edited
Nov 27, 2022
Plot.plot({
marks: [
Plot.ruleY([1/26],{stroke: "orange", strokeWidth:3}),
Plot.barY(alphabet,{x: "letter",y:"frequency",fill:"letter", sort:{x: 'y',reverse:true}})
],
y: {grid: true},
margin:50,
style: {
background:"#131313",
color:"white"
}
})
viewof city = Inputs.select(["New York", "Seattle"], {label: "Select one"})
Plot.plot({
marks: [
Plot.lineY(weather, {
x: "date",
y: "temp_max",
stroke: "location",
opacity: (data) => (data.location == city ? 0.5 : 0.1)
}),
Plot.ruleY([0])
],
title: "Test Label",
x: {
label: "Months"
},
y: {
label: "↑ Temperature (°F)"
},
margin: 50
})
viewof table = Inputs.table(penguins)
Plot.plot({
facet: {
data: penguins,
x: "species"
},
color: {
legend: true,
tickFormat: label => !!label ? label.toLowerCase() : "unknown"
},
marks: [
Plot.frame({
stroke: "#eee"
}), // draws an outline around each facet
Plot.dot(penguins, {
x: "culmen_length_mm",
y: "culmen_depth_mm",
fill: "#eee",
facet: "exclude"
}), // draws excluded penguins on each facet
Plot.dot(penguins, { x: "culmen_length_mm", y: "culmen_depth_mm",fill:"sex" }) // draws only the current facet’s subset
]
})
sales = [
{units: 10, fruit: "fig"},
{units: 20, fruit: "date"},
{units: 40, fruit: "plum"},
{units: 30, fruit: "plum"}
]
Plot.plot({
color: {
legend:true,
},
marks: [
Plot.barX(sales, {x: 'units',y:"fruit",fill:"fruit"}),
// Plot.dot(sales, {x: d => d.units * 1000, y: d => d.fruit})
]
})
Plot.plot({
marks: [
Plot.area(aapl, {
x1: "Date",
y1: 0,
y2: "Close",
fill: "#B10F2E",
})
]
})
Plot.plot({
height: 300,
padding: 0,
y: {
tickFormat: Plot.formatMonth("en", "short")
},
marks: [
Plot.cell(weather.filter(weather => weather.location = "Seattle"), Plot.group({fill: "max"}, {
x: d => d.date.getUTCDate(),
y: d => d.date.getUTCMonth(),
fill: "temp_max",
inset: 0.1
}))
]
})
Plot.plot({
x: {
label: null
},
color: {
scheme: "PiYG"
},
marks: [
Plot.cell(alphabet, {x: "letter", fill: "frequency"})
]
})
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.
