Public
Edited
Feb 28, 2024
import { bf, render, bluefish } from "@joshpoll/bluefish-in-observable"
planets = render(App)
bluefish.GraphLayered
function App() {
return bf.Bluefish(
/* Bluefish is a diagramming library for SolidJS */
/* You can specify UI-like components such as Row and Background */
bf.Background(
{ padding: 20 },
bf.StackV(
{ spacing: spacing },
bf.Circle({
name: "mercury",
r: 15,
fill: "#EBE3CF",
"stroke-width": 3,
stroke: "black"
}),
bf.Circle({
r: 56,
fill: "#DC933C",
"stroke-width": 3,
stroke: "black"
}),
bf.Circle({
r: 38,
fill: "#179DD7",
"stroke-width": 3,
stroke: "black",
name: "earth"
}),
bf.Circle({
r: 21,
fill: "#F1CF8E",
"stroke-width": 3,
stroke: "black"
})
)
),
/* But you can also use *relations* like Align and Distribute */
bf.Align(
{ alignment: "centerY" },
bf.Text({ name: "label" }, "Earth"),
/* Bluefish lets you refer to previous components using a special `Ref` component. */
bf.Ref({ select: "earth" })
),
bf.Distribute(
{ direction: "horizontal", spacing: 50 },
bf.Ref({ select: "label" }),
bf.Ref({ select: "earth" })
),
/* In addition to performing layout, Bluefish relations can also draw objects. */
bf.Arrow(bf.Ref({ select: "label" }), bf.Ref({ select: "earth" }))
);
}
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.
