JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<script>
var mapScript = {
	title: "Example Map",
	elements: [
		{
			id: 1,
			name: "Customer",
			visibility: 1.0,
			maturity: 0.4
		},
		{
			id: 2,
			name: "Online image maniputation",
			visibility: 0.95,
			maturity: 0.3
		},
		{
			id: 3,
			name: "Online photo storage",
			visibility: 0.8,
			maturity: 0.375
		},
		{
			id: 4,
			name: "Print",
			visibility: 0.8,
			maturity: 0.625
		},
		{
			id: 5,
			name: "Web site",
			visibility: 0.7,
			maturity: 0.65
		},
		{
			id: 6,
			name: "CRM",
			visibility: 0.6,
			maturity: 0.7
		},
		{
			id: 7,
			name: "Platform",
			visibility: 0.45,
			maturity: 0.575
		},
		{
			id: 8,
			name: "Compute",
			visibility: 0.2,
			maturity: 0.725
		},
		{
			id: 9,
			name: "Data Centre",
			visibility: 0.15,
			maturity: 0.58
		},
		{
			id: 10,
			name: "Power",
			visibility: 0.1,
			maturity: 0.9
		}
	],
	links: [
		{
			start: "Customer",
			end: "Online image maniputation"
		},
		{
			start: "Customer",
			end: "Online photo storage"
		},
		{
			start: "Customer",
			end: "Web site"
		},		
		{
			start: "Customer",
			end: "Print"
		},		
		{
			start: "Online image maniputation",
			end: "Online photo storage"
		},		
		{
			start: "Online photo storage",
			end: "Web site"
		},		
		{
			start: "Print",
			end: "Web site"
		},		
		{
			start: "Web site",
			end: "Platform"
		},		
		{
			start: "Web site",
			end: "CRM"
		},		
		{
			start: "Platform",
			end: "Compute"
		},		
		{
			start: "CRM",
			end: "Compute"
		},		
		{
			start: "Compute",
			end: "Data Centre"
		},		
		{
			start: "Compute",
			end: "Power"
		},		
		{
			start: "Data Centre",
			end: "Power"
		}
	]
};
</script>
<h1>Example Map</h1>
<div id="map">
</div>
</body>

JavaScript

var padding = 20;

var visToY = function (visibility, mapHeight) {
	return (1-visibility)*mapHeight;
};

var matToX = function (maturity, mapWidth) {
	return maturity*mapWidth;
};

var renderLink = function(startElement, endElement, mapWidth, mapHeight) {
	var x1 = matToX(startElement.maturity, mapWidth);
	var x2 = matToX(endElement.maturity, mapWidth);
	var y1 = visToY(startElement.visibility, mapHeight);
	var y2 = visToY(endElement.visibility, mapHeight);

	return '<line x1="'+x1+'" y1="'+y1+'" x2="'+x2+'" y2="'+y2+'" stroke="grey" />';

};

var getElementByName = function(elements, name) {
	var hasName = function(element) {
		return element.name === name;
	};
	return elements.find(hasName);
};

var renderLinks = function(mapScript, mapWidth, mapHeight) {
	var mapLink = function(link) {
		return renderLink(getElementByName(mapScript.elements,link.start), getElementByName(mapScript.elements,link.end), mapWidth, mapHeight);
	};
	return mapScript.links.map(mapLink).join('');
};

var renderElement = function(element, mapWidth, mapHeight) {
	var x = matToX(element.maturity, mapWidth);
	var y = visToY(element.visibility, mapHeight);

	var elementSvg =
		'<g id="'+element.name+'" transform="translate('+x+','+y+')">' +
          '<circle cx="0" cy="0" r="5" stroke="black" fill="white" />' +
          '<text x="10" y="-5" text-anchor="start">' +
          	element.name +
          '</text>  ' +
        '</g>';

    return elementSvg;
};

var renderElements = function(mapScript, mapWidth, mapHeight){
	var mapElement = function (element) {
		return renderElement(element, mapWidth, mapHeight);
	};
	return mapScript.elements.map(mapElement).join('');
};

var renderMap = function(mapScript, mapWidth, mapHeight) {

	var mapSvg = 
      	'<g id="map">' +
	      '<g id="links">' +
	      	renderLinks(mapScript, mapWidth, mapHeight) +
	      '</g>' +
	      '<g id="elements">' +
	      	renderElements(mapScript, mapWidth, mapHeight) +
	      '</g>' +
	   	'</g>';

	return...