edges

An edge list bound from @data, one edge per row.

On this page
A directed trade network of five countries from an edge list, each edge as thick as the trade it carries.A directed trade network of five countries from an edge list, each edge as thick as the trade it carries.

#Attributes

fromImplicit
The column naming each row's first vertex: #data.column. Given with to:, or not at all.
Can be written as shorthand: edges:value
to
The column naming each row's second vertex.
weights
A numeric column of edge weights: a path's length, a vertex table's size: weight, width: weight and show-weights all read it. A cell that is not a number leaves that row unweighted, and a negative cell is read as positive.
width
The stroke width, in pixels: one width, a list one per row, or an expression from each edge's reading — #self.weight, the flow map's convention, or a numeric column: width: #self.weight -> 1..50 -> 1 + 7_ draws weight 1 at 1 pixel and 50 at 8, in step between; a map with a width per interval bands them. A column changes no measurement.
edge-width-style
length-by
weight makes each edge of a tree or binary-tree as long as its weight, so a vertex stands as far from the root as the weights on the way to it add up to — a phylogram, or a UPGMA dendrogram, whose leaves then line up by themselves. An unweighted edge, and every edge of a list left none, is one long. Other layouts ignore it.
noneweight
Defaultnone
shape
elbow draws each edge square — across at its parent's rank, then along the direction: to its child — so only the run along the flow carries length: the phylogram's and the dendrogram's convention. Read by the ranked layouts: tree, binary-tree, layered and bipartite. straight is one line.
straightelbow
Defaultstraight
slice
The column this list is sliced by — long-format, one row per edge per slice — showing the edges of the slice the scene's control over that column stands on: edges(from: #ties.a; to: #ties.b; slice: #ties.month) with cue.slider:m(column: #ties.month). On a slider, the slice shown is the last at or before its value. Rows naming one pair the same way round are one edge, with the weight, colour and width of its first row. Every measurement counts every slice; the layout settles to each slice's edges, the vertices gliding, and edges fade in and out.
colour
The rows' colour: one colour for every row, a list one per row, or a map applied to a column, colour: #trade.kind -> (import: red; otherwise: grey), the names it keys named in the footer's key. #self.weight or a numeric column grades the rows: a map bands them, colour: #self.weight -> (..<10: grey; 10..: red), and an interval then a ramp's name ramps them. colour-from: colours each edge from its vertices instead. Unset, a neutral grey.
edge-colour-style
Also written: color
colour-from
A rule that colours each edge from the vertices it joins, in place of colour:: ends, theirs where they share one and an even mix where they differ; gradient, from the colour of the vertex it leaves to the colour of the one it reaches; from, the colour of the vertex it leaves; to, the colour of the one it reaches — a flow's bands coloured by where they end up; none, the edge's own colour:.
noneendsgradientfromto
Also written: color-from
Defaultnone
dashed
Dashed strokes.
Defaultfalse
hiddenAnimatable
Declared but not drawn, with the vertices only this list names. They still count in every measurement. Animatable.
Defaultfalse

#Derived attributes

Computed while the element renders — read one with #id.name in attribute position or {{#id.name}} in prose, never set.

weightDerived
Each edge's weight, from weights: or an inline edge's weight:, read as #self.weight: width: #self.weight -> 1..50 -> 1 + 7_ draws weights 1 and 50 at 1 and 8 px.

#Allowed in

#Examples

A trade network of seven countries from an edge list, each edge carrying its value as a weight.A trade network of seven countries from an edge list, each edge carrying its value as a weight.
network{
    edges(from: #trade.exporter; to: #trade.importer; weights: #trade.value)
}
Six French cities joined by roads drawn thicker for more lanes, motorways red and other roads grey.Six French cities joined by roads drawn thicker for more lanes, motorways red and other roads grey.
network{
    edges(from: #roads.from; to: #roads.to; weights: #roads.km; width: #roads.lanes; colour: #roads.kind -> (motorway: red; other road: grey))
}
Three frames of the first step: an empty canvas, then a citation network of five papers fading in.Three frames of the first step: an empty canvas, then a citation network of five papers fading in.
network{
    cue{
        edges(from: #citations.paper; to: #citations.cites)
    }(
        in: 1
    )
}(
    directed: arrows
)

#Notes

  • Every distinct cell in the two endpoint columns is a vertex labelled with its text, matched without regard to case or spacing.
  • An inline vertex or a vertices row whose name matches a cell is that vertex — how a data vertex is named, coloured, sized, or given an #id a path can point at.
  • A list with neither from: nor to: lists no rows: its colour: and width: are the rule for the inline edges — edges(width: #self.weight -> 1..10 -> 1 + 3_).

Last updated