Extension:Graph/Demo/RadialTree

{ "version": 2, "width": 900, "height": 900, "padding": 5, "signals": [ { "name": "rotation", "init": 0, "streams": [{ "type": "click", "expr": "rotation + 6.14/180" }]   }  ],  "data": [ {     "name": "tree", "url": "/w/index.php?title=Extension:Graph/data/flare-json&action=raw", "format": {"type": "treejson"}, "transform": [ { "type": "hierarchy", "sort": "name", "size": [6.28, 450], "orient": "radial", "output": {"x": "angle1", "y": "radius"} }, { "type": "formula", "field": "angle", "expr": "(datum.angle1 + rotation) % (2*PI)" }, { "type": "formula", "field": "sign", "expr": "datum.angle > 3.14 ? 1 : -1" }, { "type": "formula", "field": "degrees", "expr": "!datum.radius ? 0 : (datum.angle + datum.sign*1.57) * 180/PI" }, { "type": "formula", "field": "yy", "expr": "450 + datum.radius * cos(datum.angle)" }, { "type": "formula", "field": "xx", "expr": "450 + datum.radius * -sin(datum.angle)" }, { "type": "formula", "field": "align", "expr": "!datum.radius ? 'center' : datum.sign < 0 ? 'left' : 'right'" } ]   }  ],  "marks": [ {     "type": "path", "from": { "data": "tree", "transform": [ {"type": "filter", "test": "datum.parent"}, {           "type": "linkpath", "sourceX": "parent.xx", "sourceY": "parent.yy", "targetX": "xx", "targetY": "yy", "shape": "line" }       ]      },      "properties": { "update": { "path": {"field": "layout_path"}, "stroke": {"value": "#ddd"} }     }    },    {      "type": "text", "from": {"data": "tree"}, "properties": { "update": { "x": {"field": "xx"}, "y": {"field": "yy"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 10}, "align": {"field": "align"}, "baseline": {"value": "middle"}, "fill": {"value": "#000"}, "text": {"field": "name"}, "angle": {"field": "degrees"} }     }    }  ] }