logic_mgraph = digraph2svg( 'A[label="+" shape=circle] x->A->z y->A y->A' )
md`
Other terms for the logic of causality:
${dot_fragment_2_svg(`
cause -> effect [label=value fontsize=16]
`)}
${dot_fragment_2_svg(`
provider -> client [label=value fontsize=16]
`)}
${dot_fragment_2_svg(`
producer -> consumer [label=value fontsize=16]
`)}
`
<style>
/* view more testcases on screen without scrolling by letting cells float */
div.observablehq--worker :where( :not(.ktscontainer) )
{ clear: left }
/* ideally this selector, but not standard and breaks all styles for FF
div.observablehq--worker:has( div svg ) */
div.observablehq--worker .ktscontainer /* works OK but leaves vertical steps between cells in FF - also creates overlap which prevents mouse events in the overlapping area! */
{
/* float: left*/
}
div.observablehq--worker :where( .ktscontainer )
{
vertical-align: top;
}
code
{
border: solid /*forestgreen*/ 2px;
border-radius: 10px;
padding: 1px;
}
</style>
import {dot2svg, dot_fragment_2_svg, digraph2svg, visco, init, css} from "@bogo/kxfm"
css
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.
