User:Psephomancy/Sandbox: Difference between revisions
Psephomancy (talk | contribs) No edit summary |
Psephomancy (talk | contribs) (→Graphs) |
||
Line 192: | Line 192: | ||
"cornerRadius": {"signal": "cornerRadius"} |
"cornerRadius": {"signal": "cornerRadius"} |
||
} |
} |
||
} |
|||
} |
|||
] |
|||
} |
|||
</graph> |
|||
== Interactive == |
|||
<graph> |
|||
{ |
|||
// We want to use Vega 2, and specify image size |
|||
"version": 2, "width": 300, "height": 80, |
|||
// Set padding to the same value on all sides |
|||
"padding": 12, |
|||
// By default the background is transparent |
|||
"background": "#edf1f7", |
|||
"signals": [ |
|||
{ |
|||
"name": "isDragging", |
|||
"init": false, |
|||
"streams": [ |
|||
{"type": "@handle:mousedown","expr": "true"}, |
|||
{"type": "mouseup","expr": "false"} |
|||
] |
|||
}, |
|||
{ |
|||
"name": "scaledHandlePosition", |
|||
"streams": [ |
|||
{ |
|||
"type": "mousemove[isDragging]", |
|||
"expr": "eventX()", |
|||
"scale": {"name": "yearsScale","invert": true} |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
"name": "currentYear", |
|||
"init": 2000, |
|||
"expr": "clamp(parseInt(scaledHandlePosition),1960,2013)" |
|||
} |
|||
], |
|||
"scales": [ |
|||
{ |
|||
"name": "yearsScale", |
|||
"type": "linear", |
|||
"zero": false, |
|||
"domain": [1960, 2013], |
|||
"range": "width" |
|||
} |
|||
], |
|||
"marks": [ |
|||
{ |
|||
// draw the year label in the upper left corner |
|||
"name": "yearLabel", |
|||
"type": "text", |
|||
"properties": { |
|||
"enter": { |
|||
"x": {"value": 0}, |
|||
"y": {"value": 25}, |
|||
"fontSize": {"value": 32}, |
|||
"fontWeight": {"value": "bold"}, |
|||
"fill": {"value": "steelblue"} |
|||
}, |
|||
"update": {"text": {"signal": "currentYear"} } |
|||
} |
|||
}, |
|||
{ |
|||
// Draw a horizontal line |
|||
"name": "scrollLine", |
|||
"type": "rule", |
|||
"properties": { |
|||
"enter": { |
|||
"x": {"value": 0}, |
|||
"y": {"value": 40}, |
|||
"x2": {"value": 300}, |
|||
"stroke": {"value": "#000"}, |
|||
"strokeWidth": {"value": 2} |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
// Draw a triangle shape with a hover effect |
|||
// naming objects allows us to reference them later |
|||
"name": "handle", |
|||
"type": "path", |
|||
"properties": { |
|||
"enter": { |
|||
"y": {"value": 40}, |
|||
// path syntax is the same as SVG's path tag |
|||
"path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"}, |
|||
"stroke": {"value": "#880"}, |
|||
"strokeWidth": {"value": 2.5} |
|||
}, |
|||
"update": { |
|||
"x": {"scale": "yearsScale","signal": "currentYear"}, |
|||
"fill": {"value": "#fff"} |
|||
}, |
|||
// Change fill color of the object on mouse hover |
|||
"hover": {"fill": {"value": "#f00"} } |
|||
} |
} |
||
} |
} |
Revision as of 04:04, 2 October 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>
But not all of them:
<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>
Interactive
<graph> {
// We want to use Vega 2, and specify image size "version": 2, "width": 300, "height": 80, // Set padding to the same value on all sides "padding": 12, // By default the background is transparent "background": "#edf1f7",
"signals": [ { "name": "isDragging", "init": false, "streams": [ {"type": "@handle:mousedown","expr": "true"}, {"type": "mouseup","expr": "false"} ] }, { "name": "scaledHandlePosition", "streams": [ { "type": "mousemove[isDragging]", "expr": "eventX()", "scale": {"name": "yearsScale","invert": true} } ] }, { "name": "currentYear", "init": 2000, "expr": "clamp(parseInt(scaledHandlePosition),1960,2013)" } ],
"scales": [ { "name": "yearsScale", "type": "linear", "zero": false, "domain": [1960, 2013], "range": "width" } ],
"marks": [ { // draw the year label in the upper left corner "name": "yearLabel", "type": "text", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 25}, "fontSize": {"value": 32}, "fontWeight": {"value": "bold"}, "fill": {"value": "steelblue"} }, "update": {"text": {"signal": "currentYear"} } } }, { // Draw a horizontal line "name": "scrollLine", "type": "rule", "properties": { "enter": { "x": {"value": 0}, "y": {"value": 40}, "x2": {"value": 300}, "stroke": {"value": "#000"}, "strokeWidth": {"value": 2} } } }, { // Draw a triangle shape with a hover effect // naming objects allows us to reference them later "name": "handle", "type": "path", "properties": { "enter": { "y": {"value": 40}, // path syntax is the same as SVG's path tag "path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"}, "stroke": {"value": "#880"}, "strokeWidth": {"value": 2.5} }, "update": { "x": {"scale": "yearsScale","signal": "currentYear"}, "fill": {"value": "#fff"} }, // Change fill color of the object on mouse hover "hover": {"fill": {"value": "#f00"} } } } ]
} </graph>
Math
works!
except sometimes the image is lost and it displays ?'"`UNIQ--postMath-00000001-QINU`"'?
instead?
Wikimedia Commons images
Some text
![](https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Cleome_hassleriana_NBG_2_LR.jpg/300px-Cleome_hassleriana_NBG_2_LR.jpg)
Some more text
[Interwiki transcluding is disabled]
![](https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Cleome_hassleriana_NBG_2_LR.jpg/300px-Cleome_hassleriana_NBG_2_LR.jpg)
Some even more text
[Interwiki transcluding is disabled]
Interwiki links
[[w:test]]
Blah blah w:test blah blah.
[[w:test|test]]
Blah blah test blah blah.
{{wp|test}}
Blah blah test on Wikipedia
blah blah.
[[wikt:test|test]]
Blah blah test blah blah.
Scary transclusion
From Wikipedia templates
{{w:Sample}}
[Interwiki transcluding is disabled]
{{raw:w:Sample}}
[Interwiki transcluding is disabled]
{{raw:w:Graph:Chart|width=600|height=100|xAxisTitle=X|yAxisTitle=Y |type=rect|x=1,2,3,4,5,6,7,8|y=10,12,6,14,2,10,7,9}}
[Interwiki transcluding is disabled]
From Wikipedia articles
{{w::Arulampalam}}
(Links point at Wikipedia, like they would if this template were used there)
[Interwiki transcluding is disabled]
{{raw:w::Arulampalam}}
(Links point to local pages, as if the template had been imported here)
[Interwiki transcluding is disabled]
Local copy that transcludes from Wikipedia
{{Sample}}
[Interwiki transcluding is disabled]
Parameters work?
Some dubious text{{raw:w:dubious}}
Some dubious text[Interwiki transcluding is disabled]
Some dubious text{{raw:w:dubious|Dubious assertion}}
Some dubious text[Interwiki transcluding is disabled]
Some dubious text{{raw:w:dubious|Dubious assertion|reason=I don't believe you}}
Some dubious text[Interwiki transcluding is disabled]
No, it gives:
- Script error: No such module "Unsubst".
But I could import that module?
From Miraheze Template Wiki
{{raw:templatewiki:Neutral}}
[Interwiki transcluding is disabled]
{{raw:templatewiki:flags|uk}}
[Interwiki transcluding is disabled]
Doesn't work:
{{raw:templatewiki:Cite book}}
[Interwiki transcluding is disabled]
Local copy that transcludes from Miraheze Template Wiki
{{Neutral}}
[Interwiki transcluding is disabled]
Argh
[Interwiki transcluding is disabled]
YouTube
Can embed YouTube videos!