User:Psephomancy/Sandbox: Difference between revisions
Psephomancy (talk | contribs) VisualEditor test |
Psephomancy (talk | contribs) Graphs test |
||
Line 3: | Line 3: | ||
References work!<ref>Doesn't have the automatic URL→reference generation of Wikipedia, though. :/</ref><references /> |
References work!<ref>Doesn't have the automatic URL→reference generation of Wikipedia, though. :/</ref><references /> |
||
= Graphs = |
|||
== Template == |
|||
{{Graph:Chart|width=100|height=100|type=pie|legend=Legende |
|||
|x=A,B,C,D,E,F,G,H,I|y1=100,200,150,300,100,100,150,50,200 |
|||
|y2=7,8,9,8,8,9,10,9,5|showValues=}} |
|||
Needs templates added |
|||
== Raw graph tag == |
|||
Raw graphs work though: |
|||
<graph> |
|||
{ |
|||
"width": 500, |
|||
"height": 50, |
|||
"data": [ |
|||
{ |
|||
"name": "tree", |
|||
"values": [ |
|||
{"A": "Mammal","B": "Herbivore","C": "Cow" }, |
|||
{"A": "Mammal","B": "Herbivore","C": "Goat" }, |
|||
{"A": "Mammal","B": "Omnivore","C": "Human"}, |
|||
{"A": "Mammal","B": "Omnivore","C": "Bat"}, |
|||
{"A": "Fish","B": "Carnivore","C": "Shark"}, |
|||
{"A": "Fish","B": "Carnivore","C": "Electric Eel"}, |
|||
{"A": "Fish","B": "Omnivore","C": "Piranha "}, |
|||
{"A": "Fish","B": "Omnivore","C": "catfish "} |
|||
], |
|||
"transform": [ |
|||
{"type": "treeify","groupby": ["A","B"]}, |
|||
{ |
|||
"type": "hierarchy", |
|||
"mode": "cluster", |
|||
"nodesize": [11,200] |
|||
}, |
|||
{ |
|||
"type": "formula", |
|||
"field": "align", |
|||
"expr": "datum.children ? 'right' : 'left'" |
|||
}, |
|||
{ |
|||
"type": "formula", |
|||
"field": "offset", |
|||
"expr": "datum.children ? -5 : 5" |
|||
} |
|||
] |
|||
} |
|||
], |
|||
"marks": [ |
|||
{ |
|||
"type": "path", |
|||
"from": { |
|||
"data": "tree", |
|||
"transform": [ |
|||
{"type": "filter","test": "datum.parent"}, |
|||
{ |
|||
"type": "linkpath", |
|||
"sourceX": "parent.layout_y", |
|||
"sourceY": "parent.layout_x", |
|||
"targetX": "layout_y", |
|||
"targetY": "layout_x", |
|||
"shape": "cornerX" |
|||
} |
|||
] |
|||
}, |
|||
"properties": { |
|||
"enter": { |
|||
"path": {"field": "layout_path"}, |
|||
"stroke": {"value": "#ddd"} |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
"type": "text", |
|||
"from": { |
|||
"data": "tree", |
|||
"transform": [ |
|||
{ |
|||
"type": "formula", |
|||
"field": "ff_node_label", |
|||
"expr": "if(datum.layout_depth == 0, 'Animals', if(datum.layout_depth == 1, datum.A, if(datum.layout_depth == 2, datum.B, if(datum.layout_depth == 3, datum.C, ''))))" |
|||
} |
|||
] |
|||
}, |
|||
"properties": { |
|||
"enter": { |
|||
"x": {"field": "layout_y"}, |
|||
"dx": {"field": "offset"}, |
|||
"y": {"field": "layout_x"}, |
|||
"font": {"value": "Helvetica Neue"}, |
|||
"fontSize": {"value": 10}, |
|||
"align": {"field": "align"}, |
|||
"baseline": {"value": "middle"}, |
|||
"fill": {"value": "#000"}, |
|||
"text": {"field": "ff_node_label"} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
}</graph> |
|||
<graph> |
|||
{ |
|||
"$schema": "https://vega.github.io/schema/vega/v4.json", |
|||
"width": 200, |
|||
"height": 200, |
|||
"autosize": "none", |
|||
"signals": [ |
|||
{ |
|||
"name": "startAngle", "value": 0, |
|||
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} |
|||
}, |
|||
{ |
|||
"name": "endAngle", "value": 6.29, |
|||
"bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} |
|||
}, |
|||
{ |
|||
"name": "padAngle", "value": 0, |
|||
"bind": {"input": "range", "min": 0, "max": 0.1} |
|||
}, |
|||
{ |
|||
"name": "innerRadius", "value": 0, |
|||
"bind": {"input": "range", "min": 0, "max": 90, "step": 1} |
|||
}, |
|||
{ |
|||
"name": "cornerRadius", "value": 0, |
|||
"bind": {"input": "range", "min": 0, "max": 10, "step": 0.5} |
|||
}, |
|||
{ |
|||
"name": "sort", "value": false, |
|||
"bind": {"input": "checkbox"} |
|||
} |
|||
], |
|||
"data": [ |
|||
{ |
|||
"name": "table", |
|||
"values": [ |
|||
{"id": 1, "field": 4}, |
|||
{"id": 2, "field": 6}, |
|||
{"id": 3, "field": 10}, |
|||
{"id": 4, "field": 3}, |
|||
{"id": 5, "field": 7}, |
|||
{"id": 6, "field": 8} |
|||
], |
|||
"transform": [ |
|||
{ |
|||
"type": "pie", |
|||
"field": "field", |
|||
"startAngle": {"signal": "startAngle"}, |
|||
"endAngle": {"signal": "endAngle"}, |
|||
"sort": {"signal": "sort"} |
|||
} |
|||
] |
|||
} |
|||
], |
|||
"scales": [ |
|||
{ |
|||
"name": "color", |
|||
"type": "ordinal", |
|||
"range": {"scheme": "category20"} |
|||
} |
|||
], |
|||
"marks": [ |
|||
{ |
|||
"type": "arc", |
|||
"from": {"data": "table"}, |
|||
"encode": { |
|||
"enter": { |
|||
"fill": {"scale": "color", "field": "id"}, |
|||
"x": {"signal": "width / 2"}, |
|||
"y": {"signal": "height / 2"} |
|||
}, |
|||
"update": { |
|||
"startAngle": {"field": "startAngle"}, |
|||
"endAngle": {"field": "endAngle"}, |
|||
"padAngle": {"signal": "padAngle"}, |
|||
"innerRadius": {"signal": "innerRadius"}, |
|||
"outerRadius": {"signal": "width / 2"}, |
|||
"cornerRadius": {"signal": "cornerRadius"} |
|||
} |
|||
} |
|||
} |
|||
] |
|||
} |
|||
</graph> |
|||
(But not all of them.) |
Revision as of 23:58, 30 August 2018
VisualEditor
VisualEditor works!
References work![1]
- ↑ Doesn't have the automatic URL→reference generation of Wikipedia, though. :/
Graphs
Template
<graph>{"legends":[{"properties":{"legend":{"y":{"value":-100}}},"stroke":"color","title":"Legende","fill":"color"}],"scales":[{"domain":{"data":"chart","field":"x"},"type":"ordinal","name":"color","range":"category10"},{"range":[0,100],"type":"linear","name":"r","domain":{"data":"chart","field":"r"}}],"version":2,"marks":[{"type":"arc","properties":{"hover":{"fill":{"value":"red"}},"update":{"fill":{"scale":"color","field":"x"}},"enter":{"endAngle":{"field":"layout_end"},"innerRadius":{"value":0},"outerRadius":{"scale":"r","field":"r"},"startAngle":{"field":"layout_start"},"stroke":{"value":"white"},"fill":{"scale":"color","field":"x"},"strokeWidth":{"value":1}}},"from":{"data":"chart","transform":[{"type":"pie","field":"y"}]}},{"type":"text","properties":{"enter":{"theta":{"field":"layout_mid"},"baseline":{"value":"top"},"align":{"value":"center"},"text":{"field":"y"},"y":{"group":"height","mult":0.5},"x":{"group":"width","mult":0.5},"fontSize":{"value":10},"angle":{"mult":57.29577951308232,"field":"layout_mid"},"radius":{"scale":"r","offset":-4,"field":"r"},"fill":{"value":"white"}}},"from":{"data":"chart","transform":[{"field":"y","type":"pie"}]}}],"height":100,"axes":[],"data":[{"format":{"parse":{"y":"integer","x":"string","r":"integer"},"type":"json"},"name":"chart","values":[{"y":100,"x":"A","r":7},{"y":200,"x":"B","r":8},{"y":150,"x":"C","r":9},{"y":300,"x":"D","r":8},{"y":100,"x":"E","r":8},{"y":100,"x":"F","r":9},{"y":150,"x":"G","r":10},{"y":50,"x":"H","r":9},{"y":200,"x":"I","r":5}]}],"width":100}</graph>
Needs templates added
Raw graph tag
Raw graphs work though:
<graph> {
"width": 500, "height": 50, "data": [ { "name": "tree", "values": [ {"A": "Mammal","B": "Herbivore","C": "Cow" }, {"A": "Mammal","B": "Herbivore","C": "Goat" }, {"A": "Mammal","B": "Omnivore","C": "Human"}, {"A": "Mammal","B": "Omnivore","C": "Bat"}, {"A": "Fish","B": "Carnivore","C": "Shark"}, {"A": "Fish","B": "Carnivore","C": "Electric Eel"}, {"A": "Fish","B": "Omnivore","C": "Piranha "}, {"A": "Fish","B": "Omnivore","C": "catfish "} ], "transform": [ {"type": "treeify","groupby": ["A","B"]}, { "type": "hierarchy", "mode": "cluster", "nodesize": [11,200] }, { "type": "formula", "field": "align", "expr": "datum.children ? 'right' : 'left'" }, { "type": "formula", "field": "offset", "expr": "datum.children ? -5 : 5" } ] } ], "marks": [ { "type": "path", "from": { "data": "tree", "transform": [ {"type": "filter","test": "datum.parent"}, { "type": "linkpath", "sourceX": "parent.layout_y", "sourceY": "parent.layout_x", "targetX": "layout_y", "targetY": "layout_x", "shape": "cornerX" } ] }, "properties": { "enter": { "path": {"field": "layout_path"}, "stroke": {"value": "#ddd"} } } }, { "type": "text", "from": { "data": "tree", "transform": [ { "type": "formula", "field": "ff_node_label", "expr": "if(datum.layout_depth == 0, 'Animals', if(datum.layout_depth == 1, datum.A, if(datum.layout_depth == 2, datum.B, if(datum.layout_depth == 3, datum.C, ))))" } ] }, "properties": { "enter": { "x": {"field": "layout_y"}, "dx": {"field": "offset"}, "y": {"field": "layout_x"}, "font": {"value": "Helvetica Neue"}, "fontSize": {"value": 10}, "align": {"field": "align"}, "baseline": {"value": "middle"}, "fill": {"value": "#000"}, "text": {"field": "ff_node_label"} } } } ]
}</graph>
<graph>
{
"$schema": "https://vega.github.io/schema/vega/v4.json", "width": 200, "height": 200, "autosize": "none",
"signals": [ { "name": "startAngle", "value": 0, "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} }, { "name": "endAngle", "value": 6.29, "bind": {"input": "range", "min": 0, "max": 6.29, "step": 0.01} }, { "name": "padAngle", "value": 0, "bind": {"input": "range", "min": 0, "max": 0.1} }, { "name": "innerRadius", "value": 0, "bind": {"input": "range", "min": 0, "max": 90, "step": 1} }, { "name": "cornerRadius", "value": 0, "bind": {"input": "range", "min": 0, "max": 10, "step": 0.5} }, { "name": "sort", "value": false, "bind": {"input": "checkbox"} } ],
"data": [ { "name": "table", "values": [ {"id": 1, "field": 4}, {"id": 2, "field": 6}, {"id": 3, "field": 10}, {"id": 4, "field": 3}, {"id": 5, "field": 7}, {"id": 6, "field": 8} ], "transform": [ { "type": "pie", "field": "field", "startAngle": {"signal": "startAngle"}, "endAngle": {"signal": "endAngle"}, "sort": {"signal": "sort"} } ] } ],
"scales": [ { "name": "color", "type": "ordinal", "range": {"scheme": "category20"} } ],
"marks": [ { "type": "arc", "from": {"data": "table"}, "encode": { "enter": { "fill": {"scale": "color", "field": "id"}, "x": {"signal": "width / 2"}, "y": {"signal": "height / 2"} }, "update": { "startAngle": {"field": "startAngle"}, "endAngle": {"field": "endAngle"}, "padAngle": {"signal": "padAngle"}, "innerRadius": {"signal": "innerRadius"}, "outerRadius": {"signal": "width / 2"}, "cornerRadius": {"signal": "cornerRadius"} } } } ]
} </graph> (But not all of them.)