Vega: Interactive graphs - Revision history

MarkkuOpe: /* Vega */

2021-09-06T12:50:44Z

Vega

← Older revision		Revision as of 15:50, 6 September 2021
Line 122:		Line 122:
	<graph>		<graph>
	{		{
	~~"$schema": "https://vega.github.io/schema/vega/v5.json",~~
	"width": 200,		"width": 200,
	"height": 100,		"height": 100,

MarkkuOpe: /* Vega */

2021-09-06T12:47:44Z

Vega

← Older revision		Revision as of 15:47, 6 September 2021
Line 122:		Line 122:
	<graph>		<graph>
	{		{
			"$schema": "https://vega.github.io/schema/vega/v5.json",
	"width": 200,		"width": 200,
	"height": 100,		"height": 100,

MarkkuOpe: /* Vega */

2021-09-06T12:47:17Z

Vega

← Older revision		Revision as of 15:47, 6 September 2021
Line 120:		Line 120:


			<graph>
			{
			"width": 200,
			"height": 100,
			"padding": 5,

			"signals": [
			{ "name": "method", "value": "tidy",
			"bind": {"input": "select", "options": ["tidy", "cluster"]} },
			{ "name": "separation", "value": true, "bind": {"input": "checkbox"} }
			],

			"data": [
			{
			"name": "tree",
			"values": [
			{"id": "A", "parent": null},
			{"id": "B", "parent": "A"},
			{"id": "C", "parent": "A"},
			{"id": "D", "parent": "C"},
			{"id": "E", "parent": "C"}
			],
			"transform": [
			{
			"type": "stratify",
			"key": "id",
			"parentKey": "parent"
			},
			{
			"type": "tree",
			"method": {"signal": "method"},
			"separation": {"signal": "separation"},
			"size": [{"signal": "width"}, {"signal": "height"}]
			}
			]
			},
			{
			"name": "links",
			"source": "tree",
			"transform": [
			{ "type": "treelinks" },
			{ "type": "linkpath" }
			]
			}
			],

			"scales": [
			{
			"name": "color",
			"type": "ordinal",
			"range": {"scheme": "category20"}
			}
			],

			"marks": [
			{
			"type": "path",
			"from": {"data": "links"},
			"encode": {
			"enter": {
			"stroke": {"value": "#ccc"}
			},
			"update": {
			"path": {"field": "path"}
			}
			}
			},
			{
			"type": "symbol",
			"from": {"data": "tree"},
			"encode": {
			"enter": {
			"fill": {"scale": "color", "field": "id"},
			"stroke": {"value": "white"},
			"size": {"value": 400}
			},
			"update": {
			"x": {"field": "x"},
			"y": {"field": "y"}
			}
			}
			}
			]
			}
			</graph>

	=== Kantasienet ===		=== Kantasienet ===

MarkkuOpe: /* Vega */

2021-09-06T12:47:08Z

Vega

← Older revision		Revision as of 15:47, 6 September 2021
Line 121:		Line 121:


	==== Kantasienet ====		=== Kantasienet ===
	<graph>		<graph>
	{		{

MarkkuOpe: /* vega */

2021-09-06T12:46:55Z

vega

← Older revision		Revision as of 15:46, 6 September 2021
Line 117:		Line 117:
	</graph>		</graph>

	=== ~~vega~~ ===		=== Vega ===



	==== Kantasienet ====		==== Kantasienet ====

MarkkuOpe: /* Kantasienet */

2021-09-06T12:45:33Z

Kantasienet

← Older revision		Revision as of 15:45, 6 September 2021
Line 1:		Line 1:
			==== Kantasienet ====
			<graph>
			{
			"width": 1024,
			"height": 150,
			"background": "#ffffff",
			"data": [
			{
			"name": "tree",
			"values": [
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Kärpässienet", "E": "Punakärpässieni" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Kärpässienet", "E": "Kavalakärpässieni" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Kärpässienet", "E": "Valkokärpässieni" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Herkkusienet", "E": "Peltoherkkusieni" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Herkkusienet", "E": "Kuusiherkkusieni" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Herkkusienet", "E": "Viljelyherkkusieni" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Rouskut", "E": "Haaparousku" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Rouskut", "E": "kangasrousku" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Rouskut", "E": "Lutikkarousku" },

			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Haperot", "E": "Aurinkohapero" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Haperot", "E": "Isohapero" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Haperot", "E": "Pyökkihapero" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Häränkielet", "E": "Häränkieli" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Tuhkelot", "E": "Känsätuhkelo" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Tuhkelot", "E": "Nuijakuukunen" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Tuhkelot", "E": "Kenttätuhkelo" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Kivitatit", "E": "Herkkutatti" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Kivitatit", "E": "Punatatti" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Lehmäntatit", "E": "Lehmäntatti" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Lehmäntatit", "E": "Koivunpunikkitatti" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Tylopilus", "E": "Samettitatti" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Voitatit", "E": "" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Voitatit", "E": "Voitatti" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Kantarellit", "D": "Vahverot", "E": "Keltavahvero" }
			,
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Kantarellit", "D": "Vahverot", "E": "Suppilovahvero" },
			{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Kantarellit", "D": "Vahverot", "E": "Mustatorvisieni" }
			],
			"transform": [
			{
			"type": "treeify",
			"groupby": ["A","C","D"]
			},
			{
			"type": "hierarchy",
			"mode": "cluster",
			"nodesize": [20,100]
			},
			{
			"type": "formula",
			"field": "align",
			"expr": "'right'"
			},
			{
			"type": "formula",
			"field": "offset",
			"expr": "-10"
			}
			]
			}
			],
			"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"},
			"strokeWidth": {"value": 2},
			"stroke": {"value": "#000000"}
			}
			}
			},
			{
			"type": "text",
			"from": {
			"data": "tree",
			"transform": [
			{
			"type": "formula",
			"field": "ff_node_label",
			"expr": "if(datum.layout_depth == 0, 'Kantasienet', if(datum.layout_depth == 1, datum.A, if(datum.layout_depth == 2, datum.C, if(datum.layout_depth == 3, datum.D, if(datum.layout_depth == 4, datum.E, if(datum.layout_depth == 5, datum.E , ''))))))"
			}
			]
			},
			"properties": {
			"enter": {
			"x": {"field": "layout_y"},
			"dx": {"field": "offset"},
			"y": {"field": "layout_x"},
			"dy": {"value": -8},
			"font": {"value": "Arial"},
			"fontSize": {"value": 12},
			"align": {"field": "align"},
			"baseline": {"value": "middle"},
			"fill": {"value": "#0000ff"},
			"text": {"field": "ff_node_label"}
			}
			}
			}
			]
			}
			</graph>

			=== vega ===

	==== Kantasienet ====		==== Kantasienet ====
	<graph>		<graph>

MarkkuOpe: Created page with "==== Kantasienet ==== { "width": 1024, "height": 150, "background": "#ffffff", "data": [ { "name": "tree", "values": [ {"A": "Avokantai..."

2021-09-06T12:45:08Z

Created page with "==== Kantasienet ==== <graph> { "width": 1024, "height": 150, "background": "#ffffff", "data": [ { "name": "tree", "values": [ {"A": "Avokantai..."

New page

==== Kantasienet ====
<graph>
{
"width": 1024,
"height": 150,
"background": "#ffffff",
"data": [
{
"name": "tree",
"values": [
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Kärpässienet", "E": "Punakärpässieni" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Kärpässienet", "E": "Kavalakärpässieni" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Kärpässienet", "E": "Valkokärpässieni" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Herkkusienet", "E": "Peltoherkkusieni" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Herkkusienet", "E": "Kuusiherkkusieni" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Herkkusienet", "E": "Viljelyherkkusieni" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Rouskut", "E": "Haaparousku" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Rouskut", "E": "kangasrousku" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Rouskut", "E": "Lutikkarousku" },

{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Haperot", "E": "Aurinkohapero" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Haperot", "E": "Isohapero" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Haperot", "E": "Pyökkihapero" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Häränkielet", "E": "Häränkieli" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Tuhkelot", "E": "Känsätuhkelo" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Tuhkelot", "E": "Nuijakuukunen" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Helttasienet", "D": "Tuhkelot", "E": "Kenttätuhkelo" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Kivitatit", "E": "Herkkutatti" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Kivitatit", "E": "Punatatti" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Lehmäntatit", "E": "Lehmäntatti" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Lehmäntatit", "E": "Koivunpunikkitatti" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Tylopilus", "E": "Samettitatti" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Voitatit", "E": "" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Tatit", "D": "Voitatit", "E": "Voitatti" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Kantarellit", "D": "Vahverot", "E": "Keltavahvero" }
,
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Kantarellit", "D": "Vahverot", "E": "Suppilovahvero" },
{"A": "Avokantaiset","B": "Varsinaiset avokantaiset","C": "Kantarellit", "D": "Vahverot", "E": "Mustatorvisieni" }
],
"transform": [
{
"type": "treeify",
"groupby": ["A","C","D"]
},
{
"type": "hierarchy",
"mode": "cluster",
"nodesize": [20,100]
},
{
"type": "formula",
"field": "align",
"expr": "'right'"
},
{
"type": "formula",
"field": "offset",
"expr": "-10"
}
]
}
],
"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"},
"strokeWidth": {"value": 2},
"stroke": {"value": "#000000"}
}
}
},
{
"type": "text",
"from": {
"data": "tree",
"transform": [
{
"type": "formula",
"field": "ff_node_label",
"expr": "if(datum.layout_depth == 0, 'Kantasienet', if(datum.layout_depth == 1, datum.A, if(datum.layout_depth == 2, datum.C, if(datum.layout_depth == 3, datum.D, if(datum.layout_depth == 4, datum.E, if(datum.layout_depth == 5, datum.E , ''))))))"
}
]
},
"properties": {
"enter": {
"x": {"field": "layout_y"},
"dx": {"field": "offset"},
"y": {"field": "layout_x"},
"dy": {"value": -8},
"font": {"value": "Arial"},
"fontSize": {"value": 12},
"align": {"field": "align"},
"baseline": {"value": "middle"},
"fill": {"value": "#0000ff"},
"text": {"field": "ff_node_label"}
}
}
}
]
}
</graph>