User:Ad Huikeshoven/Vega

Vega minimal one rect=staaf diagram

<graph>{"version":2, "width": 200, "height": 200, "padding": {"top": 30,"left": 30,"bottom": 30,"right": 30}, "data": [{"name": "table","values": [1]}], "scales": [{"name": "y","range": "height"}], "marks": [ { "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"value": 0}, "width": {"value": 200}, "y": {"value": 0}, "y2": {"scale": "y","value": 0}, "fill": {"value": "steelblue"} } } } ] }</graph>

Vega minimal two blauw vierkantje

<graph>{"version":2, "width": 200, "height": 200, "background": "steelblue" }</graph>

Vega minimal three blauw vierkantje

<graph>{"version":2, "background": "steelblue" }</graph>

Vega minimal four blauw vierkant (smaller viewports will render scrollbars)

<graph>{"version":2, "viewport": [506, 506], "background": "steelblue" }</graph>

Vega minimal five: scene

<graph>{"version":2, "scene": { "fill": "green", "fillOpacity": 0.5, "stroke": "red", "strokeWidth": 10, "strokeDash": [40,10], "strokeOpacity": 0.5, "strokeDashOffset": 15 } }</graph>

Vega minimal six: axes and scales

<graph>{"version":2, "scales": [ {"name": "h","domain": [0,2],"range": "width"}, {"name": "v","domain": [0,1],"range": "height"} ], "axes": [ { "type": "x", "scale": "h", "title": "X-axis title", "values": [0,1,2] }, { "type": "y", "scale": "v", "ticks": 2, "title": "Y-axis title", "grid": true } ] }</graph>

Vega minimal seven: to text

<graph>{"version":2, "data": [ { "name": "table", "values": ["Declarative"], "transform": [ { "type": "countpattern", "field": "data", "pattern": "[\\w']{3,}" } ] } ], "marks": [ { "type": "text", "from": {"data": "table"}, "properties": { "enter": { "text": {"field": "text"}, "fill": { "r": {"value": 255}, "g": {"value": 0}, "b": {"value": 0} } } } } ] }</graph>

Vega minimal 8: basic text

<graph>{"version":2, "width": 200, "height": 200, "marks": [ { "type": "text", "properties": { "enter": { "x": {"value": 50}, "y": {"value": 50}, "text": {"value": "Hello Wikipedia"}, "angle": {"value": 42}, "fill": {"value": "Red"} } } } ] }</graph>

Vega minimal 9: blocks

<graph>{"version":2, "width": 200, "height": 200, "background": "lightgray", "marks": [ { "type": "symbol", "description": "This adds a circle mark as symbol.", "properties": { "enter": { "x": {"value": 150}, "y": {"value": 50}, "size": {"value": 1600}, "fill": {"value": "red"} } } }, { "type": "symbol", "description": "This adds a square mark as symbol.", "properties": { "enter": { "x": {"value": 50}, "y": {"value": 50}, "size": {"value": 1600}, "shape": {"value": "square"}, "fill": {"value": "blue"} } } }, { "type": "symbol", "description": "This adds a cross mark as symbol.", "properties": { "enter": { "x": {"value": 50}, "y": {"value": 150}, "size": {"value": 1600}, "shape": {"value": "cross"}, "fill": {"value": "green"} } } }, { "type": "symbol", "description": "This adds a triangle mark as symbol.", "properties": { "enter": { "x": {"value": 150}, "y": {"value": 150}, "size": {"value": 1600}, "shape": {"value": "triangle-up"}, "fill": {"value": "orange"} } } } ] }</graph>

specifying background might hide the whole scene

Vega minimal 10: single arc

<graph>{"version":2, "width": 200, "height": 200, "marks": [ { "type": "arc", "properties": { "enter": { "x": {"value": 100}, "y": {"value": 100}, "innerRadius": {"value": 20}, "outerRadius": {"value": 50}, "startAngle": {"value": -0.785}, "endAngle": {"value": 1.309}, "fill": {"value": "steelblue"} } } } ] }</graph>

Vega minimal 11: single rect mark

<graph>{"version":2, "width": 200, "height": 200, "marks": [ { "type": "rect", "properties": { "enter": { "x": {"value": 50}, "y": {"value": 25}, "x2": {"value": 175}, "y2": {"value": 150}, "fill": {"value": "steelblue"}, "stroke" : {"value": "red"} } } } ] }</graph>

Vega minimal 12: single path mark

<graph>{ "version":2, "marks": [ { "type": "path", "properties": { "enter": { "path": {"value": "M 100 350 q 150 -300 300 0"}, "stroke": {"value": "steelblue"} } } } ] }</graph>