Template:Force-directed graph

Revision as of 11:36, 19 January 2023 by Jason.nlw (talk | contribs) (Created page with "{{#tag:graph| { "version": 2, "width": {{#if:{{{width|}}}|{{{width}}}|800}}, "height": {{#if:{{{height|}}}|{{{height}}}|600}}, "padding": {"top":0, "bottom":0, "left":0, "right":0}, "signals": [ { "name": "hover", "init": null, "streams": [ { "type": "symbol:mouseover", "expr": "datum._id" }, { "type": "window:mouseup, symbol:mouseout", "expr": "null" } ] }, { "name": "grab", "init": null, "st...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

<graph mode="interactive"> {

 "version": 2,
 "width": 800,
 "height": 600,
 "padding": {"top":0, "bottom":0, "left":0, "right":0},
 "signals": [
   {
     "name": "hover", "init": null,
     "streams": [
       { "type": "symbol:mouseover",
         "expr": "datum._id" },
       { "type": "window:mouseup, symbol:mouseout", "expr": "null" }
     ]
   },
   {
     "name": "grab", "init": null,
     "streams": [
       { "type": "symbol:touchstart, symbol:mousedown",
         "expr": "datum._id" },
       { "type": "touchend, window:mouseup", "expr": "null" }
     ]
   },
   {
     "name": "active", "init": null,
     "streams": [
       { "type": "hover, grab", "expr": "{id: grab || hover}" },
       {
         "type": "symbol:touchmove, [symbol:mousedown, window:mouseup] > window:mousemove",
         "expr": "{x: eventX(), y: eventY(), id: grab, update: true}"
       }
     ]
   },
   {
     "name": "click",
     "init": null,
     "streams": [
       {
         "type": "symbol:dblclick",
         "expr": "open('https://www.wikidata.org/wiki/' + datum.item)"
       }
     ]
   }
 ],
 "data": [
   {
     "name": "rawData",
     "url":"wikidatasparql:///?query=SELECT%20%3Fitem%20%3FitemLabel%20%3FlinkTo%20%7B%0A%20%20wd%3AQ42196%20wdt%3AP171%2A%20%3Fitem%0A%20%20OPTIONAL%20%7B%20%3Fitem%20wdt%3AP171%20%3FlinkTo%20%7D%0A%20%20SERVICE%20wikibase%3Alabel%20%7Bbd%3AserviceParam%20wikibase%3Alanguage%20%22%E2%A7%BClang%E2%A7%BD%2Cen%22%20%7D%0A%7D",
     "format": { "type": "json" }
   },
   {
     "name": "rawNodes",
     "source": "rawData",
     "transform": [
       {
         "type": "aggregate", 
         "groupby": ["item"]
       },
       {"type": "rank" },
       {"type": "formula", "field": "index", "expr": "datum.rank - 1" },
       {"type": "formula", "field": "name", "expr": "datum.values[0].itemLabel" }
     ]
   },
   {
     "name": "edges",
     "source": "rawData",
     "transform": [
       {"type": "filter", "test": "datum.linkTo"},
       {
         "type": "lookup",
         "on": "rawNodes",
         "onKey": "item",
         "keys": ["item", "linkTo"],
         "as": ["_target", "_source"]
       },
       {"type": "filter","test": "datum._source"},
       {"type": "formula", "field": "source", "expr": "datum._source.index" },
       {"type": "formula", "field": "target", "expr": "datum._target.index" }
     ]
   },
   {
     "name": "nodes",
     "source": "rawNodes",
     "transform": [
       {
         "type": "force",
         "links": "edges",
         "linkDistance": 7,
         "charge": -200,
         "linkStrength": 0.5,
         "bound": false,
         "interactive": false,
         "active": {"signal": "active"}
       }
     ]
   }, 
   {
     "name": "edges2",
     "source": "edges",
     "transform": [
       { "type": "lookup", "on": "nodes",
         "keys": ["source", "target"],
         "as":   ["_source", "_target"] },
       {
         "type": "formula",
         "field": "angle",
         "expr": "atan2(datum._target.layout_y - datum._source.layout_y, datum._target.layout_x - datum._source.layout_x) * 180 / PI"
       },
       { "type": "linkpath", "shape": "line" }
     ]
   }
 ],
 "marks": [
   {
     "type": "path",
     "from": {
       "data": "edges2"
     },
     "properties": {
       "enter": {
         "stroke": {"value": "black"}
       },
       "update": {
         "path": {"field": "layout_path"}
       }
     }
   },
   {
     "type": "symbol",
     "from": {"data": "nodes"},
     "properties": {
       "enter": {
         "fill": {"value": "#ccc"},
         "size": {"value": 70},
         "stroke": {"value": "black"}
       },
       "update": {
         "x": {"field": "layout_x"},
         "y": {"field": "layout_y"}
       }
     }
   },
   {
     "type": "text",
     "from": {"data": "edges2"},
     "properties": {
       "enter": {
         "fill": {"value": "black"},
         "text": {"value": "  ◀"},
         "fontSize": {"value": "8"},
         "baseline": {"value": "middle"}
       },
       "update": {
         "x": {"field": "_source.layout_x"},
         "y": {"field": "_source.layout_y"},
         "angle": {"field": "angle"}
       }
     }
   },
   {
     "type": "text",
     "from": {
       "data": "nodes"
     },
     "properties": {
       "enter": {
         "fill": {"value": "black"},
         "text": {"field": "name"},
         "fontSize": {"value": "10"},
         "baseline": {"value": "middle"}
       },
       "update": {
         "x": {"field": "layout_x", "offset": 10},
         "y": {"field": "layout_y"}
       }
     }
   }
 ]

}</graph> Template:Documentation