| |
Construct the network from a hard-coded link-table. |
"data": [
{
"name": "links",
"values": [
{"source": 0, "target": 5, "type": "B"},
{"source": 1, "target": 4, "type": "B"},
{"source": 3, "target": 2, "type": "B"},
{"source": 1, "target": 0, "type": "Y"},
{"source": 1, "target": 4, "type": "Y"},
{"source": 3, "target": 2, "type": "Y"},
{"source": 4, "target": 0, "type": "Y"},
{"source": 5, "target": 4, "type": "Y"},
{"source": 1, "target": 0, "type": "G"},
{"source": 1, "target": 3, "type": "G"},
{"source": 3, "target": 2, "type": "G"},
{"source": 3, "target": 5, "type": "G"},
{"source": 5, "target": 4, "type": "G"},
{"source": 3, "target": 2, "type": "P"},
{"source": 3, "target": 5, "type": "P"},
{"source": 5, "target": 1, "type": "P"},
{"source": 5, "target": 4, "type": "P"}
]
}
],
"networks": [
{
"name": "network",
"links": "links",
"directed": true,
"source_node": [ "id", "source" ],
"target_node": [ "id", "target" ],
}
],
|
Group links based on their type .... |
"groupings": [
{
"name": "linkTypes",
"common": ["type"],
"data": "network.links"
}
],
|
...and a layout based on this type. |
"layouts": [
{
"name": "layout",
"data": "linkTypes",
|
"order": {"field": "type"} |
"order": "linkTypeOrdering",
"pattern": "row-by-row",
"numRows": 2,
"numCols": 2,
"paddingX": 0.2,
"paddingY": 0.2
},
],
|
Define an ordering that orders the nodes based on their id, and link types by teir type |
"orderings": [
{
"name": "nodeOrder",
"data": "network.nodes",
"orderBy": [{"field": "id"}],
"allowTies": false
},
{
"name": "linkTypeOrdering",
"data": "linkTypes",
"orderBy": {"field": "id", "direction": "ascending"}
}
],
|
Define scale to map from edge type to color. |
"scales": [
{
"name": "color",
"type": "ordinal",
"domain": ["B", "Y", "G", "P"]
"range": ["#0000ff","#ffc300","#4daf4a","#ff00ff"],
}
],
|
This block defines what to draw for each link type |
"vis": [
{
"entries": "linkTypes",
"layout": "layout",
"tables": [
{
"name": "adjacencyMatrix",
"data": "entry.data",
"rowOrder": { "order": "nodeOrder", "field": "source" },
"colOrder": { "order": "nodeOrder", "field": "target" },
"symmetric": true,
"fullDataset": "network.links"
}
],
|
This block defines what we want to draw for each element of the table. |
"vis": [
{
"table": "adjacencyMatrix",
|
Label the rows and columns... |
"rowLabels": { "field": "source.id", "align": "right", "dx": -10 },
"colLabels": { "field": "target.id", "dx": 20 },
|
...and draw lines between each cell. |
"rowLines": {"stroke": "black"},
"colLines": {"stroke": "black"},
|
This block defines what to draw for each data element inside the parent block: i.e., for each edge in this table cell. |
"vis": [
{
"entries": "entry.data",
|
We draw a rectangle, filling the table cell, with a color determined by the link type. |
"mark": {
"type": "rect",
"x": 0,
"y": 0,
"width": {"expression": "bounds.width"},
"height": {"expression": "bounds.height"},
"fill": {"scale": "color", "field": "type"},
}
|
| |