Verwendung

Einbettung

Im Radar wird die D3.js-Bibliothek verwendet, um Komponenten in Vektorgrafiken zu erstellen/handhaben und eine Kollisionssimulation laufen zu lassen. Zu diesem Zweck muss die Bibliothek importiert werden.

Außerdem muss das CSS-Stylesheet des Radars und das Radar-Script an sich noch importiert werden. Diese beiden Dateien können einfach von dieser Seite aus importiert werden.

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://flnkln.github.io/src/radar/radar.js"></script>
<link rel="stylesheet" href="https://flnkln.github.io/src/radar/radar.css" />

Inizierung

Das Radar wird in einem <div>-Tag generiert, dieser muss erstellt werden mit einer id. Durch den <div>-Tag kann bestimmt werden wo das Radar positioniert werden soll auf der Seite.

<div id="initaRadar"></div>

Das Radar wird iniziiert durch den Aufruf der Funktion createRadar aus der oben Importierten radar.js. Diese Funktion erwartet drei Übergabe Parameter, diese drei Parameter werden als JSON-Objekt erwartet, welche die Konfiguration, Struktur und Einträge des Radars beinhalten.

WICHTIG: Die ID von dem zuvor erstellten <div>-Tag und die Radar ID in der Konfigurations JSON müssen übereinstimmen!

Das Radar ist in purem JavaScript geschrieben, daher wurde für die Übergabe Parameter das JSON-Format gewählt. Das bietet eine große Flexibilität der Herkunft der Radar Daten.

Im Rahmen dieses Projekts wird das Radar in einer Jekyll-Seite dargestellt und bekommt die Daten Jekyll üblich aus dem data-Ordner im YAML-Format. Diese Daten müssen erstmal in JSON konvertiert werden.

<script> 
    var config = {{ site.data.intiaRadarConfig | jsonify }};
    var structure = {{ site.data.intiaRadarStructure | jsonify }};
    var entries = {{ site.data.intiaRadarEntries | jsonify }};
    
    createRadar(config, structure, entries);
</script>