Skip to main content

Clustering nodes

Let's assign the nodes to clusters, and represent this visually as color.

Visualization

NetPanorama specification


{
"data": [
{
"name": "players",
"format": {"type": "csv"},
"url": "/data/tulip/chess.candidates.1948.1990.csv",
"transform": [
{"type": "addIndex", "as": "id"},
{"type": "geocode", "locationField": "Birth Place" }
]
},
{
"name": "games",
"format": {"type": "csv"},
"url": "/data/tulip/wcc.games.1948.1990.csv"
}
],

"networks": [
{
"name": "net",
"nodes": "players",
"links": "games",
"directed": false,
"source_node": [ "Name", "Player 1" ],
"target_node": [ "Name", "Player 2" ],

"transform": [
{"type": "filterNodes", "expression": "datum.Status == '2' "},
{"type": "metric", "metric": "degree"},

Apply the Louvain clustering method, and store the cluster id in the "cluster" field of each node


{"type": "cluster", "method": "louvain", "as": "cluster"}


]
}
],



"maps": [
{
"name": "my_map",
"tiles": "Stamen_TerrainBackground",
"zoomLevel": 3,
"center": [51.5062, -0.1263]
}
],

"layouts": [
{
"name": "net-layout",
"network": "net",

"map": "my_map",
"lat": {"field": "lat"},
"lng": {"field": "lon"}
}

],


"scales": [
{
"name": "area",
"type": "sqrt",
"range": [40, 1000],
"domain": [0, 6]
},

Define a color scale to map cluster number to color...


{
"name": "color",
"type": "ordinal",
"domain": [0, 1, 2],
"range": ["#279c87", "#c5df5f", "1f0265"]
}


],

"vis": [
{
"entries": "net.links",
"layout": "net-layout",
"mark": {
"type": "linkpath",
"start": "source",
"end": "target"
}
},
{
"entries": "net.nodes",
"layout": "net-layout",
"mark": {
"type": "circle",
"area": {"field": "degree", "scale": "area"},

...and use this to set the fill color for nodes.


"fill": {"field": "cluster", "scale": "color"},


"tooltip": { "expression": "datum.Name + ' (degree ' + datum.degree + ')' " }
}
},


{

"mark":{
"type": "map",
"map": "my_map"
},

},

]

}