| |
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" ],
}
],
|
Define an ordering that orders the nodes based on their id... |
"orderings": [
{
"name": "nodeOrder",
"data": "network.nodes",
"orderBy": [{"field": "id"}],
"allowTies": false
}
],
|
...and use this ordering to create a table. |
"tables": [
{
"name": "adjacencyMatrix",
"data": "network.links",
"rowOrder": { "order": "nodeOrder", "field": "source" },
"colOrder": { "order": "nodeOrder", "field": "target" },
"symmetric": true
}
],
|
Define scale to map from edge type to angle and color. |
"scales": [
{
"name": "color",
"type": "ordinal",
"range": ["#0000ff","#ffc300","#4daf4a","#ff00ff"],
"domain": ["B", "Y", "G", "P"]
},
{
"name": "angle",
"type": "ordinal",
"range": [90, 270, 0, 180 ],
"domain": ["B", "Y", "G", "P"]
}
],
|
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"},
|
Define scale for the area of each shape. Defining it here, rather than at the top-level, allows it to be scaled relative to the width of the table cell. |
"scales": [
{
"name": "area",
"type": "ordinal",
"range": [1, 4, 9, 16 ],
"rangeMapFunction": "datum * bounds.width * bounds.height / 20",
"domain": ["B", "Y", "G", "P"]
}
],
|
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 pie-slice, rotated and colored based on the link type. |
"mark": {
"type": "path",
"path": " M0,0 L0,-50 A50,50 0 0,1 50,000 z",
"angle": { "scale": "angle", "field": "type" },
"x": {"expression": "bounds.width/2"},
"y": {"expression": "bounds.height/2"},
"area": {"scale": "area", "field": "type"},
"stroke": "none",
"fill": {"scale": "color", "field": "type"},
}
]
}
]
}
|