playing with space, shape, colour & composition
mermaid`graph LR
a-->b
b-->c`
renderMermaidDiagram(
`sankey-beta
%% source,target,value
Electricity grid,Over generationd / exports,104.453
Electricity grid,Heating and cooling - homes,113.726
Electricity grid,H2 conversion,29.14`
)
renderMermaidDiagram(`timeline
title History of Social Media Platform
2002 : LinkedIn
2004 : Facebook
: Google
2005 : Youtube
2006 : Twitter`
)
renderMermaidDiagram(
`quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]`
)
renderMermaidDiagram(`
mindmap
root((mindmap))
Origins
Long history
::icon(fa fa-book)
Popularisation
British popular psychology author Tony Buzan
Research
On effectiveness<br/>and features
On Automatic creation
Uses
Creative techniques
Strategic planning
Argument mapping
Tools
Pen and paper
Mermaid`
)
renderMermaidDiagram(`
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 5: Me
`)
renderMermaidDiagram(`
---
title: Example Git diagram
---
gitGraph
commit
commit
branch develop
checkout develop
commit
commit
checkout main
merge develop
commit
commit
`, 200)
mermaidLatest = require("https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js")
mermaidLatest.initialize({ startOnLoad: true });
renderMermaidDiagram = (template_literal, height = 400) => {
// Directly create the container using Observable's html tagged template literal
const container = html`<div class="mermaid" style="min-height: ${height}px;">${template_literal}</div>`;
// Schedule Mermaid initialization for after the container is attached to the DOM
// ObservableHQ ensures this code runs at the correct lifecycle phase of the cell
// This approach avoids querying the document
setTimeout(() => mermaidLatest.init({ startOnLoad: true }, container), 0);
return container;
}
renderMermaidDiagram(`
graph TD;
A-->T;
A-->C;
B-->D;
C-->D;
`, 300)
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.
