Prova-Chart
De Wikisofia
Prova d'inclusió d'un gràfic que pugui servir copm a model de l'espai de relacions conceptuals:
{{Graph:<rotation>}}
_____________________________________________________________________________
{
"version": 2,
"width": 600,
"height": 600,
"padding": 5,
"signals": [
{ "name": "rotation", "init": 0,
"streams": [{
"type": "click",
"expr": "rotation + 6.14/180"
}]
}
],
"data": [
{
"name": "tree",
"url": "wikiraw:///Extension:Graph/data/flare-json",
"format": {"type": "treejson"},
"transform": [
{ "type": "hierarchy", "sort": "name", "size": [6.28, 300], "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": "300 + datum.radius * cos(datum.angle)" },
{ "type": "formula", "field": "xx", "expr": "300 + 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"}
}
}
}
]
}
Inclusions de prova 2 Radial Tree
{
"version": 2,
"width": 600,
"height": 600,
"padding": 5,
"signals": [
{ "name": "rotation", "init": 0,
"streams": [{
"type": "click",
"expr": "rotation + 6.14/180"
}]
}
],
"data": [
{
"name": "tree",
"url": "wikiraw:///Extension:Graph/data/flare-json",
"format": {"type": "treejson"},
"transform": [
{ "type": "hierarchy", "sort": "name", "size": [6.28, 300], "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": "300 + datum.radius * cos(datum.angle)" },
{ "type": "formula", "field": "xx", "expr": "300 + 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"}
}
}
}
]
}
Radial Tree prova 3
<graph><syntaxhighlight lang="javascript">{
"version": 2,
"width": 600,
"height": 600,
"padding": 5,
"signals": [
{ "name": "rotation", "init": 0,
"streams": [{
"type": "click",
"expr": "rotation + 6.14/180"
}]
}
],
"data": [
{
"name": "tree",
"url": "wikiraw:///Extension:Graph/data/flare-json",
"format": {"type": "treejson"},
"transform": [
{ "type": "hierarchy", "sort": "name", "size": [6.28, 300], "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": "300 + datum.radius * cos(datum.angle)" },
{ "type": "formula", "field": "xx", "expr": "300 + 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"}
}
}
}
]
}</syntaxhighlight></graph>