Generic Grouping Demo

G is a generic visual grouping primitive. It does not encode content roles such as definition, statement, or sequence. Use it like a lightweight list wrapper with optional title, numbering, columns, rail style, line weight, and dividers.

Basic Group

Implications

Implication for Causality

$A$ and $B$ are the direct causes of $C$ .

Implication for Association

Conditioning on the collider $C$ opens the information flow between $A$ and $B$ .


<G title="Implications" rail="line">
  <G.Item title="Implication for Causality">
    $A$ and $B$ are the direct causes of $C$.
  </G.Item>
  <G.Item title="Implication for Association">
    Conditioning on the collider $C$ opens the information flow between $A$ and $B$.
  </G.Item>
</G>

Numbered Group

Workflow

Create the nodes

Add the variables that represent the domain.

Draw the arcs

Encode the directional assumptions in the graph.

Review the implications

Check the causal and non-causal paths before estimating effects.


<G title="Workflow" numbered>
  <G.Item title="Create the nodes">Text.</G.Item>
  <G.Item title="Draw the arcs">Text.</G.Item>
</G>

Bracket, Weight, and Dividers

Use rail="bracket" when the grouped content should read as one bounded unit. Use weight="strong" sparingly for emphasis. Use dividers when item boundaries should be more explicit.

Term List with Dividers

Directed arc

Represents a potential causal effect. The arc direction indicates the assumed causal direction.

Missing arc

Encodes the absence of a direct causal effect. This is still a modeling assumption.


<G title="Term List with Dividers" rail="bracket" weight="strong" dividers>
  <G.Item title="Directed arc">
    Represents a potential causal effect.
  </G.Item>
  <G.Item title="Missing arc">
    Encodes the absence of a direct causal effect.
  </G.Item>
</G>

Columns

Use columns={2} or columns={3} for compact peer items. Columns collapse to one column on small screens.

Adjustment Operations

Controlling

Introduce information on a variable so a path is blocked.

Conditioning

Compute probabilities given a variable state.

Stratifying

Estimate within strata and aggregate.

Matching

Balance relevant distributions before comparison.


<G title="Adjustment Operations" columns={2} compact>
  <G.Item title="Controlling">Text.</G.Item>
  <G.Item title="Conditioning">Text.</G.Item>
</G>

Mixed Content

The body of G.Item can contain paragraphs, formulas, callouts, images, or nested groups.

Collider

Association

Marginally, $A$ and $B$ are independent. Conditionally on $C$ , they become dependent:

$A \bot B,\ A \not\!\bot B \mid C$

Conditioning on a collider can create information flow where none existed marginally.

Nested review

Path status

The path opens when evidence is introduced on the collider.

Interpretation

This is the graphical pattern behind explaining away.


<G title="Collider" rail="bracket" dividers>
  <G.Item title="Association">
    Mixed Markdown and MDX content can go here.
  </G.Item>
  <G.Item title="Nested review">
    <G rail="line" compact>
      <G.Item title="Path status">Text.</G.Item>
    </G>
  </G.Item>
</G>

Props

Available props

title, subtitle, numbered, segmented, steps, columns, rail, weight, compact, dividers, className.

G.Item

title, subtitle, marker, className.

Rail values

line, bracket, none.

Weight values

light, normal, strong.