MIT CS Graduate student in MIT Visualization Group.
Previously undergraduate member of @uwplse and @uwsampl.
Public
Edited
Nov 13, 2023
Importers
3 stars
planets = render(App);
viewof spacing = Inputs.range([0, 100], {label: "Amount", step: 1})
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.StackH({ spacing: spacing },
bf.Circle({ name: "mercury", r: 15, fill: "#EBE3CF", "stroke-width": 3, stroke: "black"}),
bf.Circle({ r: 36, fill: "#DC933C", "stroke-width": 3, stroke: "black"}),
bf.Circle({ r: 38, fill: "#179DD7", "stroke-width": 3, stroke: "black"}),
bf.Circle({ r: 21, fill: "#F1CF8E", "stroke-width": 3, stroke: "black"}),
)
),
/* But you can also use *relations* like Align and Distribute */
bf.Align({ alignment: "centerX" },
bf.Text({ name: "label" }, "Mercury"),
/* Bluefish lets you refer to previous components using a special `Ref` component. */
bf.Ref({ select: "mercury" }),
),
bf.Distribute({ direction: "vertical", spacing: 60 },
bf.Ref({ select: "label" }),
bf.Ref({ select: "mercury" }),
),
/* In addition to performing layout, Bluefish relations can also draw objects. */
bf.Arrow(
bf.Ref({ select: "label" }),
bf.Ref({ select: "mercury" }),
)
)
}
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.
