Published
Edited
Jun 7, 2022
1 fork
Importers
23 stars
Also listed in…
Plot
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
PlotLatest = require("@observablehq/plot@0.5") // FileAttachment("plot-652941.umd.js").url().then(require) //
Insert cell
PlotLatest.plot({
marks: [
PlotLatest.dot(data, { x: "body_mass", y: "bill_length", fill: "species" })
],
color: { legend: true },
//r: { color: true },
height: 200,
width: 300
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
import { Plot as Plot484 } from "@fil/plot-color-legend-432@343"
Insert cell
Insert cell
Plot332.plot({
marginLeft: 80,
fy: { paddingInner: 0.3 },
x: { inset: 10, ticks: 5 },
y: { label: null },
facet: { data, x: "species", columns: 2 },
marks: [
Plot332.frame(),
Plot332.dot(data, { x: "bill_length", y: "sex", fill: "island" }),

// todo: replace this with a render function mark
Plot332.text(
data,
Plot.selectFirst({
text: "species",
x: 60,
y: () => null,
textAnchor: "end",
fontWeight: "bold"
})
)
]
})
Insert cell
import { Plot as Plot332 } from "@fil/facet-wrap-332@96"
Insert cell
Insert cell
((Plot) =>
Plot.plot({
className: "plot hello",
x: { className: "axis-x" },
y: { className: "axis-y" },
marks: [
Plot.frame({ className: "frame" }),
Plot.dot(
{ length: 10 },
{
x: Math.random,
y: Math.random,
className: "world"
}
)
],
height: 200,
width: 240
}))(Plot253)
Insert cell
html`<style>
.hello { background: #fefef2 }
.frame { stroke: brown }
.axis-x text { fill: brown }
.axis-y text { font-style: italic }
.world { fill: lightblue }
`
Insert cell
import { Plot as Plot253 } from "@fil/plot-classname-253@38"
Insert cell
Insert cell
Insert cell
Insert cell
import { Plot as Plot71 } from "@fil/plot-brush-71@920"
Insert cell
Insert cell
Insert cell
import { data } from "@observablehq/plot-exploration-penguins"
Insert cell
import { toc } from "@mbostock/toc"
Insert cell
import { getCurrentPinnedName } from "@mootari/notebook-data@366"
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