<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../build/ogma.min.js"></script>
<!-- use CDN to load the library for RTL support -->
<script src="//unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.1/index.js"></script>
<style>
.footnote { font-family: Helvetica, Ariel, sans-serif; font-size: 0.8em; display: inline-block; padding: 5px; }
#graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }
</style>
</head>
<body>
<div id="graph-container"></div>
<script>
'use strict';
// graph with mixed RTL and LTR text labels
var graph = {
"nodes":[
{"id":0,"attributes":{"text":"Arabic - العَرَبِيَّة", radius: 12 }},
{"id":1,"attributes":{"text":"Maghrebi group", radius: 8 }},
{"id":2,"attributes":{"text":"Moroccan Arabic (الدارجة - darija)"}},
{"id":3,"attributes":{"text":"Tunisian Arabic (تونسي - tūnsī)"}},
{"id":4,"attributes":{"text":"Algerian Arabic (دارجة - darja)"}},
{"id":5,"attributes":{"text":"Libyan Arabic ( ليبي - lībi)"}},
{"id":6,"attributes":{"text":"Hassaniya Arabic"}},
{"id":7,"attributes":{"text":"Saharan Arabic"}},
{"id":8,"attributes":{"text":"Sudanese group", radius: 8 }},
{"id":9,"attributes":{"text":"Sudanese Arabic (سوداني - sūdānī)"}},
{"id":10,"attributes":{"text":"Chadian Arabic"}},
{"id":11,"attributes":{"text":"Juba Arabic"}},
{"id":12,"attributes":{"text":"Egyptian group", radius: 8 }},
{"id":13,"attributes":{"text":"Egyptian Arabic (مصرى - maṣri)"}},
{"id":14,"attributes":{"text":"Sa'idi Arabic (صعيدى - ṣaʿīdi)"}},
{"id":15,"attributes":{"text":"Arabian Peninsula group", radius: 8 }},
{"id":16,"attributes":{"text":"Bahrani Arabic"}},
{"id":17,"attributes":{"text":"Bareqi Arabic"}},
{"id":18,"attributes":{"text":"Gulf Arabic (خليجي - ḵalījī)"}},
{"id":19,"attributes":{"text":"Najdi Arabic (نجدي - najdi)"}},
{"id":20,"attributes":{"text":"Omani Arabic (عماني - ʿumāni)"}},
{"id":21,"attributes":{"text":"Hejazi Arabic (حجازي - ḥijāzi)"}},
{"id":22,"attributes":{"text":"Hadhrami Arabic (حضرمي - ḥaḍrami)"}},
{"id":23,"attributes":{"text":"Shihhi Arabic"}},
{"id":24,"attributes":{"text":"Dhofari Arabic"}},
{"id":25,"attributes":{"text":"Yemeni Arabic (يمني - yamani)"}},
{"id":26,"attributes":{"text":"Tihamiyya Arabic"}},
{"id":27,"attributes":{"text":"Mesopotamian group", radius: 8 }},
{"id":28,"attributes":{"text":"Mesopotamian Arabic"}},
{"id":29,"attributes":{"text":"North Mesopotamian Arabic (Moslawi/Qeltu)"}},
{"id":30,"attributes":{"text":"Levantine group", radius: 8 }},
{"id":31,"attributes":{"text":"Levantine Arabic (شامي - šāmi)"}},
{"id":32,"attributes":{"text":"Syrian Arabic"}},
{"id":33,"attributes":{"text":"Cypriot Maronite Arabic"}},
{"id":34,"attributes":{"text":"Lebanese Arabic (لبناني - libnēni)"}},
{"id":35,"attributes":{"text":"Jordanian Arabic (أردني - urduni)"}},
{"id":36,"attributes":{"text":"Palestinian Arabic (فلسطيني - falasṭīni)"}},
{"id":37,"attributes":{"text":"Bedawi Arabic (بدوي - badawi/bdiwi)"}},
{"id":38,"attributes":{"text":"Andalusian group", radius: 8 }}
],
"edges":[
{"source":0,"target":1},
{"source":0,"target":8},
{"source":0,"target":12},
{"source":0,"target":15},
{"source":0,"target":27},
{"source":0,"target":30},
{"source":0,"target":38},
{"source":1,"target":2},
{"source":1,"target":3},
{"source":1,"target":4},
{"source":1,"target":5},
{"source":1,"target":6},
{"source":1,"target":7},
{"source":8,"target":9},
{"source":8,"target":10},
{"source":8,"target":11},
{"source":12,"target":13},
{"source":12,"target":14},
{"source":15,"target":16},
{"source":15,"target":17},
{"source":15,"target":18},
{"source":15,"target":19},
{"source":15,"target":20},
{"source":15,"target":21},
{"source":15,"target":22},
{"source":15,"target":23},
{"source":15,"target":24},
{"source":15,"target":25},
{"source":15,"target":26},
{"source":27,"target":28},
{"source":27,"target":29},
{"source":30,"target":31},
{"source":30,"target":32},
{"source":30,"target":33},
{"source":30,"target":34},
{"source":30,"target":35},
{"source":30,"target":36},
{"source":30,"target":37}
]
};
var ogma = new Ogma({
graph: graph,
container: 'graph-container'
});
ogma.tools.brand.set('<span class="footnote">Data © <a href="https://en.wikipedia.org/wiki/Varieties_of_Arabic">Wikipedia</a></span>')
// do not hide labels
ogma.styles.addNodeRule({
text: {
size: 12,
minVisibleSize: 0,
position: 'right',
backgroundColor: 'white'
}
});
ogma.layouts.hierarchical({
direction: 'LR',
levelDistance: 200,
nodeDistance: 20,
duration: 0
}).then(function () {
return ogma.view.locateGraph({ padding: { right: 250 }});
});
</script>
</body>
</html>
