CxJS Diagrams

Neural Network Example

This example visualizes a simple neural network with input, hidden, and output layers. It demonstrates:

  • Flow layouts for arranging layers horizontally and nodes vertically
  • Repeater for generating nodes and connections from data
  • Conditional styling using CxJS expressions to color nodes by layer type
  • StraightLine for connecting all nodes between adjacent layers
<Diagram unitSize={48} showGrid center>
    <Flow gap={2} align="center">
        <Repeater records={bind("$page.network.layers")} recordAlias="$layer">
            <Flow direction="down" gap={0.5}>
                <Repeater records={bind("$layer.nodes")}>
                    <Cell>
                        <Shape
                            text={bind("$record.name")}
                            id={bind("$record.id")}
                            shape="circle"
                            class={{
                                'fill-blue-200 stroke-blue-600': expr('{$layer.type} == "input"'),
                                'fill-orange-200 stroke-orange-600': expr('{$layer.type} == "hidden"'),
                                'fill-green-200 stroke-green-600': expr('{$layer.type} == "output"'),
                            }}
                        />
                    </Cell>
                </Repeater>
            </Flow>
        </Repeater>
    </Flow>
    <Repeater records={bind("$page.network.connections")} recordAlias="$conn">
        <StraightLine from={bind("$conn.from")} to={bind("$conn.to")} stroke="black" />
    </Repeater>
</Diagram>
 
3
 
2
 
5
 
1