matrix.html

---
title: Learning Standards Matrix
date: 2018-07-24
---
<div id="mainMatrix" style="width: 95%; max-width: 40em; margin: auto;">
</div>


<table id="stdTable" class="stds">
	<tr>
		<th>Matrix</th>
		<th>Standard<br/>(Type)</th>
		<th>Standards<br/>Org</th>
		<th>Description</th>
		<th>Data Types</th>
		<th>Data Layers</th>
		<th>Uses</th>
		<th>Intended<br/>Context</th>
	</tr>
</table>

<table class="layout"><tr>
<td><a href="https://open-stand.org"><img alt="Open Stand Group Logo" height="128px" width="128px" src="/res/open-stand512blue.png"></a></td>
<td>The contributors to EdMatrix advocate for <a href="https://open-stand.org">open-stand.org</a> principles.</td>
</tr>
</table>

<script type="module">
    import moduleMatrixSvg from "/res/MatrixSvg.js";
    globalThis.MatrixSvg = moduleMatrixSvg;
</script>
<script>

// Note, this is a reduced version of what goes into standards.json - optimized for the page display.
let standards = [
{%- for post in site.stds -%}
{%- unless forloop.first -%},
{% endunless %}{
  "name": "{{ post.title | replace: '"', '\\"' }}",
  "url": "{{ post.stdurl | replace: '"', '\\"' }}",
  "stdType": "{{ post.stdtype | replace: '"', '\\"' }}",
  "org": "{{ post.org | replace: '"', '\\"' }}",
  "orgPage": "/orgs/{{ post.org | slugify: "latin" }}",
  "types": ["{{ post.types | replace: ',', '","' }}"],
  "dataLayers": [{{ post.datalayers }}],
  "uses": ["{{ post.uses | replace: ',', '","' }}"],
  "context": ["{{ post.context | replace: ',', '","' }}"],
  "excerpt": "{{ post.excerpt | strip | normalize_whitespace | replace: '"', '\"' }}",
  "pageUrl": "{{ post.url | replace: '"', '\\"' }}"
}
{%- endfor -%}
];

function createEle(name, attrs, ...children) {
	let ele = document.createElement(name);
	if (attrs !== undefined) {
		for (let key in attrs) {
			ele.setAttribute(key, attrs[key]);
		}
	}
	for (let child of children) {
		if (typeof(child) == "string") {
			ele.appendChild(document.createTextNode(child));
		}
		else {
			ele.appendChild(child);
		}
	}
	return ele;
}

const layerNames = ["", "Data Dict", "Data Model", "Serialization", "Protocol"];

function stdToTd(std) {
	return createEle("td", undefined, 
		createEle("a", {href: std.url}, std.name),
		createEle("br", undefined),
		("(" + std.stdType + ")"));
}

function descriptionToTd(std) {
	const desc = document.createElement("td");
	desc.className = "streamline";
	desc.innerHTML = std.excerpt + " <a href='" + std.pageUrl + "'>(more)</a>";
	return desc;
}

function dataTypesToTd(std) {
	const ul = document.createElement("ul");
	for (const t of std.types) {
		ul.appendChild(createEle("li", undefined, t));
	}
	return createEle("td", undefined, ul);
}

function layersToTd(std) {
	const list = document.createElement("td");
	for (const l of std.dataLayers) {
		list.appendChild(createEle("ol", {start: l}, createEle("li", undefined, layerNames[l])));
	}
	return list;
}

function usesToTd(std) {
	return createEle("td", undefined, std.uses.join(", "));
}

function contextToTd(std) {
	const ul = document.createElement("ul");
	for (const t of std.context) {
		ul.appendChild(createEle("li", undefined, t));
	}
	return createEle("td", undefined, ul);
}

function loadStandards() {
	const stdTable = document.getElementById("stdTable");
	for (std of standards) {
		const stdMatrix = MatrixSvg.getStandardMatrix(std, "6em");
		stdMatrix.style.verticalAlign = "top";
		const row = document.createElement("tr");
		row.appendChild(createEle("td", undefined, stdMatrix));
		row.appendChild(stdToTd(std));
		row.appendChild(createEle("td", undefined,
			createEle("a", {href: std.orgPage}, std.org)));
		row.appendChild(descriptionToTd(std));
		row.appendChild(dataTypesToTd(std));
		row.appendChild(layersToTd(std));
		row.appendChild(usesToTd(std));
		row.appendChild(contextToTd(std));
		stdTable.appendChild(row);
	}
}

function onLoaded() {
    document.getElementById("mainMatrix").appendChild(MatrixSvg.getMatrix("100%", true));
	loadStandards();
}

window.addEventListener('load', onLoaded);     

</script>