User:Ad Huikeshoven/Vega

Vega minimal one rect=staaf diagram
{"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"} } 	}	}  ] }  {"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"} } 	}	}  ] }

Vega minimal two blauw vierkantje
{"version":2, "width": 200, "height": 200, "background": "steelblue" } {"version":2, "width": 200, "height": 200, "background": "steelblue" }

Vega minimal three blauw vierkantje
{"version":2, "background": "steelblue" } {"version":2, "background": "steelblue" }

Vega minimal four blauw vierkant (smaller viewports will render scrollbars)
{"version":2, "viewport": [506, 506], "background": "steelblue" } {"version":2, "viewport": [506, 506], "background": "steelblue" }

Vega minimal five: scene
{"version":2, "scene": { "fill": "green", "fillOpacity": 0.5, "stroke": "red", "strokeWidth": 10, "strokeDash": [40,10], "strokeOpacity": 0.5, "strokeDashOffset": 15 } } {"version":2, "scene": { "fill": "green", "fillOpacity": 0.5, "stroke": "red", "strokeWidth": 10, "strokeDash": [40,10], "strokeOpacity": 0.5, "strokeDashOffset": 15 } }

Vega minimal six: axes and scales
{"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 } ] }  {"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 } ] }

Vega minimal seven: to text
{"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} }   	}  	}	}  ] }  {"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} }   	}  	}	}  ] }

Vega minimal 8: basic text
{"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"} } 	}	}  ] }  {"version":2, "width": 200, "height": 200, "marks": [ { 	"type": "text", "properties": { "enter": { "x": {"value": 50}, "y": {"value": 50}, "text": {"value": "Hello Wikipedia"},

"fill": {"value": "Red"} } 	}	}  ] }

Vega minimal 9: blocks
{"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"} } 	}	}  ] }  {"version":2, "width": 200, "height": 200,

"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"} } 	}	}  ] } specifying background might hide the whole scene

Vega minimal 10: single arc
{"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"} } 	}	}  ] }  {"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"} } 	}	}  ] }

Vega minimal 11: single rect mark
{"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"} } 	}	}  ] }  {"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"} } 	}	}  ] }

Vega minimal 12: single path mark
{ "version":2, "marks": [ { 	"type": "path", "properties": { "enter": { "path": {"value": "M 100 350 q 150 -300 300 0"}, "stroke": {"value": "steelblue"} } 	}	}  ] }  { "version":2, "marks": [ { 	"type": "path", "properties": { "enter": { "path": {"value": "M 100 350 q 150 -300 300 0"}, "stroke": {"value": "steelblue"} } 	}	}  ] }