intia-theme 0.1.56 → 0.1.57

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c3d3b98390c39c7b9199ccb9ab7a697e00b9dfcbef1577c558243fb729f9ce8c
-  data.tar.gz: cf2f452d0da883c2f4b4bc3c9ab4857653f695af018c4986c6a31316f4a7a7be
+  metadata.gz: a61c54d1efa22b8bb6f9ffe42b0ce87b1086d2f9193b859e9aab9ddc4741657a
+  data.tar.gz: d3c4a657f48e4a7fa087b7867f47ec250502dffc66416e5c6773cc84d77969cb
 SHA512:
-  metadata.gz: 1c4344e05d1df9f424d720635a31f4f09300f4d1a45a02d4b038515973863331e902492706bcb4d68c63b4c86eab638934667e76f7619f232ef9ee779a6e2f89
-  data.tar.gz: c47d43986c8970ec0ebec47ddc651c1ae43812968dfc5948957b2ed46fac03df90a897dcd7359f96dae5505b8e1cb3f2296e2810e3b90426d59e6b6d51e68aa8
+  metadata.gz: 19c3d4ac1b03650a4906e57efc83be1c98a2377922b3801e760e16b9f5bf169204558ebc6af80822358fc86d78deaf41359f151ef4dc6e53e76cc38f229679a0
+  data.tar.gz: d33d81b549feddf7c3dd450d71ec0c53fad74e5be8ad19bb3419af7f97b59349095d377e02164d2b11d6d7b76c8a88d5d3d0284c9a1f295663b7d379b73e974e

data/_includes/head.html

@@ -11,8 +11,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.3/dist/css/bulma-carousel.min.css">
     {% unless site.hide_radar %}
         <script src="https://d3js.org/d3.v5.min.js"></script>
-        <script src="https://methods.intia.de/src/radar/radar.js"></script>
-        <link rel="stylesheet" href="https://methods.intia.de/src/radar/radar.css" />
+        <!--<script src="https://methods.intia.de/src/radar/radar.js"></script>-->
+        <script src="{{ site.baseurl }}/assets/js/radar.js"></script>
+        <!--<link rel="stylesheet" href="https://methods.intia.de/src/radar/radar.css" />-->
     {% endunless %}
     {% unless site.hide_share_buttons %}
         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-social@1/bin/bulma-social.min.css">

data/_includes/header.html

@@ -2,7 +2,7 @@
     <div class="container">
         <div class="navbar-brand">
             <a href="{{ site.baseurl }}/" class="">
-                <img src="{{ site.baseurl }}/assets/img/logo-black.png">
+                <img id="navbar-logo" src="../assets/img/logo-horizontal-short.png">
             </a>
             <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu"
                 :class="{ 'is-active': openNav }" x-on:click="openNav = !openNav">

data/_sass/_main.scss

@@ -17,3 +17,4 @@ $dark: #09443e;
 @import "helper";
 @import "icons";
 @import "print";
+@import "radar";

data/_sass/_radar.scss

@@ -0,0 +1,317 @@
+#radar {
+    /* Generel */
+        --fontFamily: "Verdana", sans-serif;
+        --borderRadius: 0;
+        --lineWidth: 1; 
+        --spacing: 8px;
+        --textPadding: 0.25em;
+        --dropdownBoxShadow: 0 5px 20px rgba(0,0,0,0.1);
+    /* FontSizes */
+        --radarDropdown: 16px;
+        --radarCardTitle: 16px;
+        --radarCardItem: 14px;
+        --radarName: 30px;  
+        --radarSelectionButton: 14px;
+        --radarSectorName: 16px;
+        --radarSegmentName: 11px;
+        --radarLegendCardItemText: 14px;
+        --radarBlipLegendSector: 14px;
+        --radarBlipLegendSegment: 12px;
+        --radarBlipLegendBlip: 11px;
+    /* Colors */
+        --primaryFontColor: #000000;
+        --secondaryFontColor: #ffffff;
+        --cardBackgroundColor: #ffffff;
+        --buttonHoverColor: #ecf0f1;
+        --lineColor: rgb(255, 255, 255);
+        --bubbleColor: rgba(178, 190, 195,1.0);
+    }  
+    
+    /* #region div structur */
+    .radarContainer {
+        display: grid;
+        grid-template:
+            'radarTitle'
+            'radarSelection'
+            'radar';
+        grid-gap: var(--spacing);
+        /* background-color: rgb(250, 250, 250); */
+        background-color: rgba(0, 0, 0, 0.02);
+        border-radius: var(--borderRadius);
+        padding: var(--spacing);
+        font-family: var(--fontFamily);
+        fill: var(--primaryFontColor);    
+    } 
+    .radarTitle {
+        grid-area: radarTitle;
+        font-size: var(--radarName);
+        padding: var(--textPadding);
+        border-radius: var(--borderRadius);
+        background-color: var(--cardBackgroundColor);
+    }
+    .radarSelection{
+        grid-area: radarSelection;
+    }
+    .radar{
+        grid-area: radar;
+        background-color: var(--cardBackgroundColor);
+        border-radius: var(--borderRadius);
+        padding: var(--spacing);
+        height: min-content;
+    }
+    .radarLegend{
+        margin-top: var(--spacing);
+    }
+    .radarBlipLegend{
+        overflow: auto;
+        grid-area: radarBlipLegend;
+        display: grid;
+        grid-auto-rows: min-content;
+        gap: var(--spacing);
+    }
+    /* #endregion */
+    
+    /* #region dropdown */
+    .radarContainer .dropdown{
+        position: relative;
+        border-radius: var(--borderRadius);
+        /* padding: var(--textPadding); */
+        user-select: none;
+        cursor: pointer;
+        background-color: var(--cardBackgroundColor);
+        font-size: var(--radarDropdown);
+    }
+    .radarContainer .dropdown:hover{
+        background-color: var(--buttonHoverColor);
+    }
+    /* dropdown arrow */
+    .radarContainer .dropdown::before{
+        content: '';
+        position: absolute;
+        right: calc(var(--textPadding) * 2);
+        top: calc(var(--textPadding) * 2);
+        z-index: 10000;
+        width: calc(var(--radarDropdown) / 2);
+        height: calc(var(--radarDropdown) / 2);
+        border: 2px solid var(--primaryFontColor);
+        border-top: 2px solid rgba(0,0,0,0);
+        border-right: 2px solid rgba(0,0,0,0);
+        transform: rotate(-45deg);
+        transition: 250ms;
+    }
+    .radarContainer .dropdown.active::before{
+        top: calc(var(--textPadding) * 3);
+        transform: rotate(135deg);
+    }
+    .radarContainer .dropdownText{
+        width: 100%;
+        height: 100%;
+    }
+    .radarContainer .dropdown .dropdownContent{
+        position: absolute;
+        display: none;
+        user-select: none;
+        z-index: 10000;
+        border-radius: var(--borderRadius);
+        box-shadow: var(--dropdownBoxShadow);
+        background-color: var(--cardBackgroundColor);
+        width: 100%;
+        left: 0;
+        margin-top: var(--spacing);
+    }
+    .radarContainer .dropdown.active .dropdownContent{
+        display: block;
+    }
+    /* #endregion */
+    
+    /* #region card */
+    .radarContainer .card{
+        padding: var(--spacing);
+        background-color: var(--cardBackgroundColor);  
+        border-radius: var(--borderRadius);
+    }
+    .radarContainer .subCard{
+        padding: 0; 
+        border-radius: var(--borderRadius);
+    }
+    .radarContainer .cardTitle{
+        padding: var(--textPadding);
+        font-size: var(--radarCardTitle);
+        font-weight: bold;
+    }
+    .radarContainer .cardItem{
+        position: relative;    
+        border-radius: var(--borderRadius);
+        padding:  var(--textPadding);
+        cursor: pointer;
+    }
+    .radarContainer .cardItem:hover{
+        background-color: var(--buttonHoverColor);
+    }
+    .radarContainer .cardItem.active{
+        background-color: var(--buttonHoverColor);
+    }
+    .radarContainer .cardItem .text{
+        font-size: var(--radarCardItem);
+        font-weight: lighter;
+        text-decoration: none;
+    }
+    
+    /* #endregion */
+    
+    /* #region radarSelection ------------------------------------------ */
+    .radarContainer .radarSelection{
+        text-align: center;
+    }
+    .radarContainer .selectionButton{
+        font-size: var(--radarSelectionButton);
+        text-align: center;
+        user-select: none;
+        padding: var(--textPadding);
+        border-radius: var(--borderRadius);
+        background-color: var(--cardBackgroundColor);
+    }
+    .radarContainer .selectionButton:hover{
+        background-color: var(--buttonHoverColor);
+    }
+    /* #endregion */
+    
+    /* #region radar ------------------------------------------------ */
+    .radarContent{
+        display: inline-block;
+        position: relative;
+        width: 100%;
+        padding-bottom: 100%;
+        vertical-align: top;
+        overflow: visible;
+        border-top-left-radius: var(--borderRadius);
+        border-top-right-radius: var(--borderRadius);
+        background-color: var(--cardBackgroundColor);
+    }  
+    .radarContent .radarSVG{
+        display: inline-block;
+        position: absolute;
+        top: 0;
+        left: 0; 
+        /* margin: 8px;   */
+        overflow: visible;
+    }  
+     
+    /* #region Text ------------------------------------------------------- */
+    .sectorName{
+    font-size: var(--radarSectorName);
+    font-weight: bold;
+    pointer-events: none;
+    user-select: none;
+    }  
+    .radarContent .segmentName{
+        font-size: var(--radarSegmentName);
+        font-weight: bold;
+        pointer-events: none;
+        user-select: none;
+    }
+    
+    .methodStatesText {
+    vertical-align: middle;
+    pointer-events: none;
+    user-select: none;
+    }
+    .blipText {
+    /* font-size scales by blipSize set in config-File */
+    font-weight: bold;
+    /* fill: var(--secondaryFontColor); */
+    fill: white;
+    pointer-events: none;
+    user-select: none;    
+    }
+    .bubbleText {
+    /* font-size scales by blipSize set in config-File */
+    fill: var(--secondaryFontColor);
+    }
+    /* #endregion */
+    
+    .radarBubble{    
+        pointer-events: none;
+        user-select: none;
+    }
+    .radarBubble .background{
+        fill: var(--bubbleColor);
+    }
+    .radarLines{
+        stroke-width: var(--lineWidth);
+        stroke: var(--lineColor);
+    }  
+    .radarContainer .blip{
+        cursor: pointer;
+    }
+    /* #endregion */
+    
+    /* #region radarLegend --------------------------------------------- */
+    .radarLegend .dropdownContent{
+        height: 14rem;
+        overflow: auto;
+    }
+    .radarLegend .paddingText{
+        font-size: var(--radarLegendCardItemText);
+        padding-left: calc(var(--radarLegendCardItemText) + var(--textPadding));
+        font-weight: lighter;
+        text-decoration: none;
+    }
+    .radarLegend .stateColor{
+        position: absolute;
+        top: 25%;
+        width: var(--radarLegendCardItemText);
+        height: var(--radarLegendCardItemText);
+        border-radius: 50%;
+    }
+    .radarLegend .movementIndicator{
+        position: absolute;
+        top: 25%;
+        width: var(--radarLegendCardItemText);
+        height: var(--radarLegendCardItemText);
+        border: 2px solid black;
+        border-radius: 50%;    
+        transform: rotate(90deg);
+    }
+    .radarLegend .movementIndicator.in{
+        border-left: 2px solid rgba(0,0,0,0.25);
+        border-right: 2px solid rgba(0,0,0,0.25);
+        border-bottom: 2px solid rgba(0,0,0,0.25);
+    }
+    .radarLegend .movementIndicator.out{
+        border-left: 2px solid rgba(0,0,0,0.25);
+        border-right: 2px solid rgba(0,0,0,0.25);
+        border-top: 2px solid rgba(0,0,0,0.25);
+    }
+    /* #endregion */
+      
+    /* #region radarBlipLegend ----------------------------------------- */    
+    .radarContainer .blipLegendSector{
+        font-size: var(--radarBlipLegendSector);
+        font-weight: bold;
+    }
+    .radarContainer .blipLegendSegment{
+        font-size: var(--radarBlipLegendSegment);
+        font-weight: lighter;
+    }
+    .radarContainer .blipLegendBlip{
+        user-select: none;
+        font-size: var(--radarBlipLegendBlip);      
+    }
+    /* #endregion */
+    
+    
+    /* for tablet or desktop */
+    /*
+    @media screen and (min-width: 600px){
+        .radarContainer{
+            display: grid;
+            grid-template:
+                'radarTitle radarTitle'
+                'radarSelection radarSelection'
+                'radarBlipLegend radar';
+            grid-template-columns: 0.25fr 0.75fr;
+            grid-template-rows: min-content min-content 0fr;
+        }    
+    }
+    */

data/assets/js/main.js

@@ -132,9 +132,14 @@ function updateSite() {
 
 // Font size
 var html=document.querySelector('html');
-
+var logo = document.getElementById("navbar-logo");
 function updateFontSize() {
     html.style.fontSize=siteData.fontSize+"rem";
+    if(siteData.fontSize == 1.2){
+        logo.src = "../assets/img/logo-horizontal-short.png";
+    }else{
+        logo.src = "../assets/img/logo-short.png";
+    }
 }
 
 // Change font size Button

data/assets/js/radar.js

@@ -0,0 +1,902 @@
+/* 
+all occurring angles are in radian 
+*/
+function createRadar(config, structure, entries){   
+    //#region variable definition #######################################################
+    const 
+        radarId = config.radar.id,
+        diameter = config.radar.renderResolution,
+        radius = diameter / 2,
+        sectorThickness = 2 * Math.PI / structure.sectors.length,
+        blipMinSize = config.blip.size;
+    
+    const fillingRatio = Math.PI / Math.sqrt(18); // ~0.74
+
+
+    let 
+        radarData={}, // object to save all radar data
+        seed = 42,  // seed number for reproducible random sequence
+        blipIdCounter = 1, // counter variable to give each blip a unique id
+        onlyOneSectorDisplayed = false;
+
+    //#endregion ########################################################################
+    
+    window.onresize = () => {
+        mobileMode = (getSvgDivWidth() < diameter) ? true : false;
+        update();
+    }    
+
+    //#region helper function math ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    /*-------------------------------------------------------------------
+    custom random number generator, to make random sequence reproducible
+    source: https://stackoverflow.com/questions/521295
+    -------------------------------------------------------------------*/
+    let random = () => {let x = Math.sin(seed++) * 10000; return x - Math.floor(x);};
+    let random_between = (min, max) => (min+random()*(max-min));
+    let normal_between = (min, max) => (min+(random()+random())*0.5*(max-min));
+
+    let pointByAngleAndRadius = (angle, radius) => ({
+        x: Math.cos(angle) * radius,
+        y: Math.sin(angle) * radius  
+    })
+    
+    let angleAndRadiusByPoint = (point) => ({      
+        angle: angleOfPoint(point),
+        radius: radiusOfPoint(point),
+    })
+
+    let angleOfPoint = (point) => (point.y < 0) 
+        ? Math.PI*2 + Math.atan2(point.y, point.x)
+        : Math.atan2(point.y, point.x);
+
+    let radiusOfPoint = (point) => 
+        Math.sqrt(point.x * point.x + point.y * point.y);
+
+    let calcOffsetAngle = (radius) => 
+        Math.atan(blipRadiusWithPadding / radius);
+
+    // NEW
+    let occupiedSpaceByBlips = (blipCount) => {
+        let radius = blipMinSize/2 + config.blip.margin;
+        return Math.pow(radius, 2) * Math.PI * blipCount;
+    }  
+            
+    let calcAngleRatio = (angle) =>  angle / (2 * Math.PI);
+
+    let blipAreaInSegment = (segment) => {
+        let radii = Math.pow(segment.outerRadius, 2) - Math.pow(segment.innerRadius, 2)
+        return Math.PI * radii * calcAngleRatio(segment.angleSpan) * fillingRatio; 
+    }
+
+    let blipMaxRadiusInArea = (blipCount, area) => 
+        Math.sqrt(area / (Math.PI * blipCount));
+
+    let calcSegmentOuterRadius = (innerRadius, angle, blipCount) => {
+        let blipSpace = occupiedSpaceByBlips(blipCount);
+        let angleRatio = calcAngleRatio(angle);
+        let squareRootTerm = blipSpace / (Math.PI * angleRatio * fillingRatio) + Math.pow(innerRadius, 2);
+        return Math.sqrt(squareRootTerm);
+    }
+
+    let calcSegmentAngleSpan = (innerRadius, outerRadius, blipCount) => {
+        let blipSpace = occupiedSpaceByBlips(blipCount);
+        let denominator = (Math.PI * (Math.pow(outerRadius, 2) - Math.pow(innerRadius, 2)) * fillingRatio);
+        return blipSpace / denominator * (2 * Math.PI)
+    }
+    //#endregion ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+    //#region helper function segment borders ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    /* Checks if a value is in interval between min and max. 
+    -> If the value is below the interval minimum, the interval minimum is returned.
+    -> If the value is above the interval maximum, the interval maximum is returned.*/
+    let bounded_interval = (value, min, max) => {
+        let low = Math.min(min, max);
+        let high = Math.max(min, max);
+        return Math.min(Math.max(value, low), high);
+    }
+
+    let boundedRadius = (point, minRadius, maxRadius) => ({ 
+        angle: point.angle,
+        radius: bounded_interval(point.radius, minRadius, maxRadius)
+    })
+    
+    let boundedAngle = (point, minAngle, maxAngle) => {
+        let blipPointRadius = radiusOfPoint(point);    
+        let offsetAngle = calcOffsetAngle(blipPointRadius);  
+        let minOffsetAngle = minAngle + offsetAngle;
+        let maxOffsetAngle = maxAngle - offsetAngle;
+        let blipPointAngle = angleOfPoint(point);
+        let angle = bounded_interval(blipPointAngle, minOffsetAngle, maxOffsetAngle);
+        //if the blip was outside the interval the blip point is recalculated
+        if(angle == minOffsetAngle) return pointByAngleAndRadius(minOffsetAngle, blipPointRadius);
+        if(angle == maxOffsetAngle) return pointByAngleAndRadius(maxOffsetAngle, blipPointRadius);
+        else return point;
+    }
+
+    let segmentFunctions = (segment) => ({
+        clip: (blip) => {
+            let pointInAngleInterval = boundedAngle(blip, segment.startAngle, segment.endAngle);
+            let pointInRadiusInterval = boundedRadius(
+                angleAndRadiusByPoint(pointInAngleInterval),
+                segment.blipMinRadius,
+                segment.blipMaxRadius
+            );
+            blip.x = pointByAngleAndRadius(pointInRadiusInterval.angle, pointInRadiusInterval.radius).x;
+            blip.y = pointByAngleAndRadius(pointInRadiusInterval.angle, pointInRadiusInterval.radius).y;
+            return { x: blip.x, y: blip.y };
+        },
+        random: () => pointByAngleAndRadius(
+            random_between(segment.startAngle, segment.endAngle),
+            normal_between(segment.blipMinRadius, segment.blipMaxRadius))
+    })
+    //#endregion ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    
+    //#region helper functions svg ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    let getSvgDivWidth = () => {
+        // returns the width of the div tag where the svg is placed in excluding the padding
+        let radarOffsetWidth = radarDiv.select(`.radar`).node().offsetWidth;
+        let padding = parseInt(window.getComputedStyle(radarDiv.select(`.radar`).node()).paddingLeft) * 2;
+        return radarOffsetWidth - padding;
+    }
+
+    let translate = (x, y) => `translate(${x}, ${y})`;       
+
+    let arc = (segment) => {  
+        const startMaxPoint = pointByAngleAndRadius(segment.startAngle, segment.outerRadius);
+        const startMinPoint = pointByAngleAndRadius(segment.startAngle, segment.innerRadius);
+        const endMaxPoint = pointByAngleAndRadius(segment.endAngle, segment.outerRadius);
+        const endMinPoint = pointByAngleAndRadius(segment.endAngle, segment.innerRadius);
+        return [
+          'M', startMaxPoint.x, startMaxPoint.y,
+          'A', segment.outerRadius, segment.outerRadius, 0, 0, 1, endMaxPoint.x, endMaxPoint.y, 
+          'L', endMinPoint.x, endMinPoint.y,
+          'A', segment.innerRadius, segment.innerRadius, 0, 0, 0, startMinPoint.x, startMinPoint.y,
+          'L', startMaxPoint.x, startMaxPoint.y,
+          'Z'
+        ].join(' ');
+    }
+
+    let sectorNamePath = (segment) => {
+        const radius = segment.outerRadius;
+        const startPoint = pointByAngleAndRadius(segment.startAngle, radius);
+        const endPoint = pointByAngleAndRadius(segment.endAngle, radius);        
+        return [
+            'M', startPoint.x, startPoint.y,
+            'A', radius, radius, 0, 0, 1, endPoint.x, endPoint.y
+          ].join(' ');
+    }
+
+    let segmentNamePath = (segment) => {
+        const endMaxPoint = pointByAngleAndRadius(segment.endAngle, segment.outerRadius);
+        const endMinPoint = pointByAngleAndRadius(segment.endAngle, segment.innerRadius);
+
+        if(segment.endAngle > 1.5 * Math.PI && segment.endAngle <= 2 * Math.PI || 
+            segment.endAngle < 0.5 * Math.PI){
+                return [
+                    'M', endMinPoint.x, endMinPoint.y,
+                    'L', endMaxPoint.x, endMaxPoint.y
+                  ].join(' ');
+        }
+        return [
+            'M', endMaxPoint.x, endMaxPoint.y,
+            'L', endMinPoint.x, endMinPoint.y
+          ].join(' ');
+    }
+
+    let getSectorColorPalette = (colorCode) => {
+        let colorStart, colorEnd, brighterColor;   
+        switch (true){
+            case config.sector.useColor && config.segment.colorGradient:
+                brighterColor = d3.hsl(colorCode);
+                brighterColor.l *= config.segment.colorGradientLimit;
+                colorStart = d3.rgb(colorCode);
+                colorEnd = d3.rgb(brighterColor);
+                break;
+            case config.segment.colorGradient:
+                brighterColor = d3.hsl(config.radar.defaultColor);
+                brighterColor.l *= config.segment.colorGradientLimit;
+                colorStart = d3.rgb(config.radar.defaultColor);
+                colorEnd = d3.rgb(brighterColor);
+                break;
+            case config.sector.useColor:
+                colorStart = d3.rgb(colorCode);
+                colorEnd = d3.rgb(colorCode);
+                break;
+            default:                
+                colorStart = d3.rgb(config.radar.defaultColor);
+                colorEnd = d3.rgb(config.radar.defaultColor);  
+        }        
+        return d3.scaleLinear()
+                    .domain([0, structure.rings.list.length])
+                    .range([colorStart, colorEnd]);
+    }
+
+    let getBlipColor = (blip) => 
+        (blip.stateID >= 0 && blip.stateID < structure.entryStates.list.length)
+            ? structure.entryStates.list[blip.stateID].color
+            : config.blip.defaultColor;
+
+    let getBlipRingColor = (blip) => {
+        let color = (blip.stateID >= 0 && blip.stateID < structure.entryStates.list.length)
+            ? d3.rgb(structure.entryStates.list[blip.stateID].color)
+            : d3.rgb(config.blip.defaultColor);
+        if(blip.moved != 0) color.opacity = 0.25; 
+        return color;
+    }
+    let getBlipMovedIndicator = (blip) => {
+        if(blip.moved != 0){
+            let radius = config.blip.outerCircleRadius;
+
+            let startAngle = (blip.moved > 0) 
+                ? radarData.sectors[blip.sectorID].startAngle + Math.PI
+                : radarData.sectors[blip.sectorID].startAngle;
+            let endAngle = (blip.moved > 0)
+                ? radarData.sectors[blip.sectorID].endAngle + Math.PI
+                : radarData.sectors[blip.sectorID].endAngle;
+            let startPoint = pointByAngleAndRadius(startAngle, radius);
+            let endPoint = pointByAngleAndRadius(endAngle, radius); 
+            return [
+                'M', startPoint.x, startPoint.y,
+                'A', radius, radius, 0, 0, 1, endPoint.x, endPoint.y,
+            ].join(' ');
+        }  
+        return ``; 
+    }
+    //#endregion ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+    
+    //#region preparing radar data ||||||||||||||||||||||||||||||||||||||||||||||||||||||
+
+
+
+
+
+    // create data structure ----------------------------------------------------------
+    radarData.rings = structure.rings.list.map((ring, index) => ({
+        ...ring,
+        index: index,
+    }));
+    radarData.sectors = structure.sectors.map((sector, index) => ({
+        ...sector,
+        id: index,
+        idText: `${radarId}_sector${index}`,
+        color: getSectorColorPalette(sector.color), 
+        segments: radarData.rings,
+    }));
+    radarData.sectors.forEach(sector => {
+        sector.segments = sector.segments.map((segment, index) => ({
+            ...segment,
+            idText: `${sector.idText}_segment${index}`,
+            color: sector.color(index),
+            blips: entries.filter(entry => 
+                            entry.sectorID == sector.id && 
+                            entry.ringID == index && 
+                            entry.active) 
+                        .sort((a, b) => a.name.localeCompare(b.name)),
+        }))
+    });
+    // --------------------------------------------------------------------------------
+    // adding ring radii and ring thickness -----------------------------------------
+    radarData.rings.forEach((ring, index) => {
+        ring.innerRadius = (index == 0) ? 0 : radarData.rings[index - 1].outerRadius;
+        ring.outerRadius = radarData.sectors.reduce((prev, curr) => 
+            Math.max(prev, calcSegmentOuterRadius(ring.innerRadius, sectorThickness, curr.segments[index].blips.length))
+        , 0);
+        ring.radiusThickness = ring.outerRadius - ring.innerRadius;
+    });
+    /* if the last outer radius is larger or smaller than the given radar radius, the rings must be 
+    adjusted in such a way that any open space is evenly filled or any space that overlaps is evenly 
+    subtracted from all ring thicknesses. */
+    let ringsLastOuterRadius = radarData.rings[radarData.rings.length - 1].outerRadius;
+    let ringThicknessCorrection = (radius - ringsLastOuterRadius) / radarData.rings.length;
+    radarData.rings.forEach((ring, index) => {
+        ring.radiusThickness = ring.radiusThickness + ringThicknessCorrection;
+        ring.innerRadius = (index == 0) ? 0 : radarData.rings[index - 1].outerRadius;
+        ring.outerRadius = ring.innerRadius + ring.radiusThickness;
+    });
+    // update segments
+    radarData.sectors.forEach(sector => {
+        sector.segments = sector.segments.map((segment, index) => ({
+            ...segment,
+            radiusThickness: radarData.rings[index].radiusThickness,
+            innerRadius: radarData.rings[index].innerRadius,
+            outerRadius: radarData.rings[index].outerRadius,
+        }))
+    });
+
+    // add needed min angle span for each sector
+    radarData.sectors.forEach((sector) => {
+        sector.angleSpan = sector.segments.reduce((prev, curr) =>             
+            Math.max(prev, calcSegmentAngleSpan(curr.innerRadius, curr.outerRadius, curr.blips.length))            
+        , 0);
+    });
+    // add up all sector angle spans
+    let sectorAngleSpanSum = radarData.sectors.reduce((prev, curr) => prev + curr.angleSpan, 0);
+    let sectorAngleCorrection = ((Math.PI * 2) - sectorAngleSpanSum) / radarData.sectors.length;
+    radarData.sectors.forEach((sector, index) => {
+        sector.angleSpan = sector.angleSpan + sectorAngleCorrection;
+        sector.startAngle = (index == 0) ? 0 : radarData.sectors[index - 1].endAngle;
+        sector.endAngle = sector.startAngle + sector.angleSpan;
+    });
+    // update segments
+    radarData.sectors.forEach(sector => {
+        sector.segments = sector.segments.map((segment, index) => ({
+            ...segment,
+            angleSpan: sector.angleSpan,
+            startAngle: sector.startAngle,
+            endAngle: sector.endAngle,
+        }))
+    })
+    // ------------------------------------------------------------------------------
+
+
+
+    // ------------------------------------------------------------------------------
+    // Blip anpassung
+    let sectorMinBilpRadius = radarData.sectors.reduce((prev, curr) => {
+        let segmentMinBilpRadius = curr.segments.reduce((prev, curr) => {
+            let area = blipAreaInSegment(curr);
+            let radius = blipMaxRadiusInArea(curr.blips.length, area);
+            let size = (radius - config.blip.margin) * 2;
+            return Math.min(size, prev)
+        }, Number.MAX_VALUE)
+        return Math.min(prev, segmentMinBilpRadius)
+    }, Number.MAX_VALUE);
+
+    const 
+        blipSize = Math.max(sectorMinBilpRadius, blipMinSize),
+        blipRadiusWithPadding = blipSize / 2 + config.segment.padding;
+
+    config.blip.size = blipSize;
+
+    radarData.sectors.forEach(sector => {
+        sector.segments = sector.segments.map((segment, index) => ({
+            ...segment,
+            blipMinRadius: (index == 0)
+                ? blipRadiusWithPadding / Math.sin(sector.angleSpan / 2)
+                : segment.innerRadius + blipRadiusWithPadding,
+            blipMaxRadius: segment.outerRadius - blipRadiusWithPadding
+        }))
+    })
+
+    // ------------------------------------------------------------------------------
+
+    
+
+
+
+
+    radarData.blips = []; // list of all blips, for a better processing later on
+    radarData.sectors.forEach(sector => sector.segments.forEach(segment => {
+        // give each blip the corresponding segment functions
+        segment.blips = segment.blips.map(blip => ({
+            ...blip,
+            idText: `${segment.idText}_blip${blipIdCounter}`,
+            id: blipIdCounter++,
+            focused: false,
+            segmentFunctions: segmentFunctions(segment),
+        }))
+        // save each blip in a list, for better processing later on
+        segment.blips.forEach(blip => radarData.blips.push(blip))
+    }));
+
+    // give each blip the first random position
+    radarData.blips.forEach(blip => {
+        let point = blip.segmentFunctions.random();
+        blip.x = point.x;
+        blip.y = point.y;
+    });
+
+    // add data to the configuration of a blip to create blips later on
+    let fontSize = blipSize * 0.33,
+        blipRadius = blipSize * 0.5,
+        strokeWidth = blipRadius * 0.2,
+        outerCircleRadius = blipRadius ,
+        innerCircleRadius = outerCircleRadius - strokeWidth; 
+    config.blip = ({
+        ...config.blip,
+        fontSize: fontSize,
+        radius: blipRadius,
+        strokeWidth: strokeWidth,
+        outerCircleRadius: outerCircleRadius,
+        innerCircleRadius: innerCircleRadius
+    });
+
+    structure.entryStates.list = structure.entryStates.list.map((state, index)=>({
+        ...state, 
+        index: index
+    }));
+
+
+    //#endregion ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
+
+    //#region create div structure ______________________________________________________
+    let radarDiv = d3.select(`div#${radarId}`).classed(`radarContainer`, true);
+    if(config.radar.showName){
+        radarDiv.append(`div`)
+            .classed(`radarTitle`, true)
+            .text(config.radar.name);
+    }
+    // select sector dropdown
+    radarDiv.append(`div`)
+        .attr(`id`, `${radarId}_selectionDropdown`)
+        .classed(`radarSelection dropdown`, true);   
+    radarDiv.append(`div`)
+        .classed(`radar`, true)
+        .attr(`id`, `${radarId}_radarDiv`);
+    /*
+    radarDiv.append(`div`)
+        .classed(`radarBlipLegend`, true);
+    */
+    //#endregion ________________________________________________________________________
+
+    //#region create radar SVG and radar legend _________________________________________
+    radarDiv.select(`.radar`)
+        .append(`div`)
+        .classed(`radarContent`, true)
+        .append(`svg`)
+        .attr(`id`, `${radarId}_svg`)
+        .classed(`radarSVG`, true)
+        .attr(`preserveAspectRatio`, `xMinYMin meet`)
+        .attr(`viewBox`, `0 0 ${diameter} ${diameter}`);
+    radarDiv.select(`svg#${radarId}_svg`).append(`g`)
+                .attr(`id`, `${radarId}_radarContent`)
+                .attr(`transform`, translate(radius, radius));
+    // append radar legend div
+    radarDiv.select(`.radar`)
+        .append(`div`)
+        .attr(`id`, `${radarId}_radarLegend`)
+        .classed(`radarLegend dropdown`, true)
+        .on(`click`, ()=>
+            document.getElementById(`${radarId}_radarLegend`).classList.toggle(`active`))
+        .text(config.radar.legendDropdownText);
+    //#endregion ________________________________________________________________________
+
+    // can be declared only after the radar svg is appended
+    let mobileMode = (getSvgDivWidth() < diameter) ? true : false;
+    // let mobileMode = (getSvgDivWidth() < 400) ? true : false;
+
+    //#region event fuctions general ****************************************************
+    let update = () => {
+        selectionDropdownContent.select(`.selectionButton`)
+                                    .style(`display`, (mobileMode) ? `none` : `block`);
+        if(mobileMode && !onlyOneSectorDisplayed){
+            displaySector(radarData.sectors[0]);
+            changeSvgViewbox(radarData.sectors[0].idText);
+            selectionDropdownText.text(radarData.sectors[0].name);
+        } 
+        else changeSvgViewbox(`${radarId}_radarContent`);
+    }
+
+    let changeSvgViewbox = (idText) => {
+        onlyOneSectorDisplayed = (idText == `${radarId}_radarContent`) ? false : true;
+        let box = radarDiv.select(`g#${idText}`).node().getBBox()
+        let size = Math.max(box.width, box.height);
+        let x = radius + box.x;
+        let y = radius + box.y;
+        d3.select(`svg#${radarId}_svg`).attr(`viewBox`, `${x} ${y} ${size} ${size}`); 
+    }    
+    //#endregion ************************************************************************
+
+    //#region event functions sector ****************************************************
+    let displayAllSectors = () => {
+        sectors.style(`display`, `block`);
+        blipLegendSectors.style(`display`, `block`);
+    }
+    let displaySector = (sector) => {
+        sectors.style(`display`, `none`);
+        radarDiv.select(`g#${sector.idText}`).style(`display`, `block`);
+        blipLegendSectors.style(`display`, `none`);
+        radarDiv.select(`div#${sector.idText}_legend`).style(`display`, `block`); 
+    }
+    let focusAllSector = () => {
+        sectors.style(`opacity`, 1);
+        blipLegendSectors.style(`opacity`, 1);
+    }
+    let focusSector = (sector) => {
+        if(!onlyOneSectorDisplayed){
+            sectors.style(`opacity`, 0.25);
+            radarDiv.select(`g#${sector.idText}`).style(`opacity`, 1);
+            blipLegendSectors.style(`opacity`, 0.25);
+            radarDiv.select(`div#${sector.idText}_legend`).style(`opacity`, 1);
+        }       
+    }
+    //#endregion ************************************************************************
+
+    //#region event functions ring ******************************************************
+    let focusRing = (ring) => {        
+        segments.style(`opacity`, 0.25)
+        segments.filter(seg => seg.index == ring.index).style(`opacity`, 1)        
+    }
+    let focusAllRings = () => segments.style(`opacity`, 1);
+    //#endregion ************************************************************************
+
+    //#region event functions blip ******************************************************
+    let blipClick = (blip) => {
+        let blipData = radarData.blips.find(data => data.id == blip.id);
+        if (blipData.focused){
+            window.open(blipData.link);
+        }
+        else blipData.focused = true;
+    }
+    
+    let focusAllBlips = () => {
+        radarData.blips.forEach(blip => blip.focused = false);
+        blips.style(`opacity`, 1);
+        radarDiv.selectAll(`.blipLegendBlip`).classed(`active`, false);
+        hideBubble(); 
+    }
+
+    let focusBlip = (blip) => {
+        radarData.blips.find(data => data.id == blip.id).focused = true;
+        blips.filter(data => data.sectorID == blip.sectorID).style(`opacity`, 0.25);
+        radarDiv.select(`g#${blip.idText}`).style(`opacity`, 1);
+        blipLegendBlips.filter(data => data.id == blip.id).classed(`active`, true);
+        showBubble(blip);
+    }
+
+    let focusBlipByState = (state) => {
+        blips.style(`opacity`, 0.25);
+        blips.filter(data => data.stateID == state.index).style(`opacity`, 1);
+        blipLegendBlips.filter(data => data.stateID == state.index).classed(`active`, true);
+    }
+
+    let focusBlipByMovement = (movementValue) => {
+        blips.style(`opacity`, 0.25);
+        if(movementValue > 0) {
+            blips.filter(data => data.moved > 0).style(`opacity`, 1);
+            blipLegendBlips.filter(data => data.moved > 0).classed(`active`, true);
+        }
+        if(movementValue < 0) {
+            blips.filter(data => data.moved < 0).style(`opacity`, 1);
+            blipLegendBlips.filter(data => data.moved < 0).classed(`active`, true);
+        }
+        if(movementValue == 0) {
+            blips.filter(data => data.moved == 0).style(`opacity`, 1);
+            blipLegendBlips.filter(data => data.moved == 0).classed(`active`, true);
+        }
+    }
+    //#endregion ************************************************************************
+    
+    //#region event functions bubble ****************************************************
+    let showBubble = (blip) => {
+        bubble.style(`display`, `block`);
+        let text = bubble.select(`text`).text(blip.name);
+        let textBox = text.node().getBBox();
+        bubble.attr('transform', translate(blip.x - textBox.width / 2, blip.y - 19))
+        bubble.select(`rect`)
+            .attr('x', -5)
+            .attr('y', -textBox.height)
+            .attr('width', textBox.width + 10)
+            .attr('height', textBox.height + 4);
+        bubble.select(`path`).attr('transform', translate(textBox.width / 2 - 5, 3));
+    }
+    let hideBubble = () => 
+        radarDiv.select(`g#${radarId}_bubble`).style(`display`, `none`);
+    //#endregion ************************************************************************
+
+    //#region d3-components radar -------------------------------------------------------
+    /* to place text on an svg-path the attribute alignment-baseline has been used, 
+    the options of this attribute are well explained here
+    https://vanseodesign.com/web-design/svg-text-baseline-alignment/
+    */    
+    let makeSector = (selection) => {
+        selection           
+            .attr(`id`, sector => `${sector.idText}`)
+            .classed(`sector`, true)
+            .on(`mouseover`, sector => focusSector(sector))
+            .on(`mouseout`, focusAllSector)
+            .on(`click`, sector => { 
+                displaySector(sector);
+                changeSvgViewbox(sector.idText); 
+            });        
+        if(config.sector.showName){
+            let name = selection.append(`g`)
+                .attr(`class`, `sectorName`)
+            name.append(`path`)
+                .attr(`id`, sector => `${sector.idText}_name`)
+                .attr(`d`, sector => sectorNamePath(sector.segments[sector.segments.length-1]))
+                .attr(`fill`, `none`);
+            name.append(`text`).append(`textPath`)
+                .attr(`href`, sector => `#${sector.idText}_name`, `http://www.w3.org/1999/xlink`)
+                .attr(`alignment-baseline`, `after-edge`)
+                .attr(`startOffset`, `50%`)
+                .attr(`style`, `text-anchor:middle;`)
+                .text(sector => sector.name);
+        }                           
+    }    
+
+    let makeSegment = (selection) => {
+        selection            
+            .attr(`id`, segment => `${segment.idText}`) 
+            .classed(`segment`, true)
+            .append(`path`)  
+                .classed(`radarLines`, true)                     
+                .attr(`d`, segment => arc(segment))
+                .attr(`fill`, segment => segment.color);
+
+        if(config.segment.showName){
+            let name = selection.append(`g`)
+                .classed(`segmentName`, true);
+            name.append(`path`)
+                .attr(`id`, segment => `${segment.idText}_namePath`)
+                .attr(`d`, segment => segmentNamePath(segment))
+                .attr(`fill`, `none`);
+            name.append(`text`).append(`textPath`)
+                .attr(`href`, segment => `#${segment.idText}_namePath`, `http://www.w3.org/1999/xlink`)
+                .attr(`alignment-baseline`, segment => 
+                    (segment.endAngle > 1.5 * Math.PI && segment.endAngle <= 2 * Math.PI || 
+                        segment.endAngle < 0.5 * Math.PI) 
+                        ? `before-edge`
+                        : `after-edge`)
+                .attr(`startOffset`,`50%`)                
+                .attr(`style`, `text-anchor:middle;`)
+                .text(segment => (config.segment.showNameAsId) ? segment.index : segment.name);
+        }   
+    }
+
+    let makeBlip = (selection) => {
+        selection
+            .attr(`id`, data => `${data.idText}`)
+            .classed(`blip`, true)
+            .attr(`transform`, data => translate(data.x, data.y))
+            .on(`click`, data => blipClick(data))
+            .on(`mouseover`, data => focusBlip(data))
+            .on(`mouseout`, data => focusAllBlips(data));             
+        // blip outer ring
+        selection.append(`circle`)
+            .attr(`r`, config.blip.outerCircleRadius)
+            .attr(`fill`, `rgba(0, 0, 0, 0)`)
+            .attr(`stroke-width`, config.blip.strokeWidth)
+            .attr(`stroke`, getBlipRingColor);    
+        // blip indicater for movement    
+        selection.append(`path`)
+            .attr(`d`, getBlipMovedIndicator)
+            .attr(`fill`, `none`)
+            .attr(`stroke-width`, config.blip.strokeWidth)
+            .attr(`stroke`, getBlipColor);
+        // blip innerCircle
+        selection.append('circle')
+            .attr('r', config.blip.innerCircleRadius)
+            .attr('fill', getBlipColor); 
+        // blip text
+        selection.append('text')
+            .classed('blipText', true)
+            .attr('y', config.blip.fontSize/3)
+            .attr('text-anchor', 'middle')
+            .style(`font-size`, config.blip.fontSize)
+            .text(data => data.id); 
+    }
+
+    let makeBubble = (selection) => {
+        selection
+            .classed(`radarBubble`, true)
+            .attr(`id`, `${radarId}_bubble`)
+            .style(`display`, `none`)
+        let fontSize = config.blip.radius;
+        selection.append('rect')
+            .attr('class', 'background')
+            .attr('rx', 4)
+            .attr('ry', 4);
+        selection.append('text')
+            .attr('class', 'bubbleText')
+            .attr(`y`, -fontSize/9)
+            .style(`font-size`, fontSize);
+        selection.append('path')
+            .attr('class', 'background')
+            .attr('d', 'M 0,0 10,0 5,8 z');
+    }
+    //#endregion ------------------------------------------------------------------------
+    
+    //#region d3-components radar legend ------------------------------------------------
+    let makeLegendBlipStates = (selection) => {
+        selection.append(`span`)
+            .classed(`stateColor`, true)
+            .style(`background-color`, data => data.color);
+        selection.append(`span`)
+            .classed(`paddingText`, true) 
+            .text(data => data.name);
+    }
+
+    let makeLegendBlipMovement = (selection) => {
+        selection.append(`span`)
+            .classed(`movementIndicator`, true)
+            .classed(`in`, data => data.value > 0)
+            .classed(`out`, data => data.value < 0);
+        selection.append(`span`)
+            .classed(`paddingText`, true) 
+            .text(data => data.name);
+    }
+
+    let makeLegendRings = (selection) => {
+        selection.append(`span`)
+            .classed(`text`, true) 
+            .text(data => `${data.index}. ${data.name}`);
+    }
+    //#endregion ------------------------------------------------------------------------
+    
+    //#region d3-components radar blip legend -------------------------------------------
+    let makeBlipLegendSector = (selection) => {
+        selection            
+            .attr(`id`, sector => `${sector.idText}_legend`)
+            .classed(`blipLegendSector card`, true)            
+            .on(`click, mouseover`, sector => focusSector(sector))
+            .on(`mouseout`, focusAllSector)
+            .text(sector => sector.name);
+    }
+
+    let makeBlipLegendSegment = (selection) => {
+        selection
+            .attr(`id`, segment => `${segment.idText}_legend`)
+            .classed(`blipLegendSegment subCard`, true)
+            .text(segment => segment.name);
+    }
+
+    let makeBlipLegendBlip = (selection) => {
+        selection
+            .attr(`id`, blip => `${blip.idText}_legend`)
+            .classed(`blipLegendBlip cardItem`, true)
+            .on(`click`, blip => blipClick(blip))
+            .on(`mouseover`, blip => focusBlip(blip))
+            .on(`mouseout`, blip => focusAllBlips(blip))
+            .text(blip => `${blip.id} ${blip.name}`);
+    }
+    //#endregion ------------------------------------------------------------------------
+
+    //#region generate selection ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+    let selectionDropdownText = radarDiv.select(`.radarSelection`)
+        .on(`click`, ()=> {
+            document.getElementById(`${radarId}_selectionDropdown`)
+                .classList.toggle(`active`);
+        })
+        .append(`span`)
+            .classed(`dropdownText`, true)
+            .text(config.radar.showAllSectorsText);
+    
+    // append a dropdown content div to add the dropdown options
+    let selectionDropdownContent = radarDiv.select(`.radarSelection`)
+        .append(`div`)
+        .classed(`dropdownContent`, true);
+    
+    // append the first dropdown option to show the whole radar
+    selectionDropdownContent
+        .append(`div`)
+        .classed(`selectionButton`, true)
+        .style(`display`, (mobileMode) ? `none` : `block`)
+        .text(config.radar.showAllSectorsText)
+        .on(`click`, () => {    
+            displayAllSectors();
+            changeSvgViewbox(`${radarId}_radarContent`);
+            selectionDropdownText.text(config.radar.showAllSectorsText);
+        });        
+    
+    // append a dropdown option for each sector in radar
+    selectionDropdownContent.selectAll(null)
+        .data(radarData.sectors)
+        .enter()
+        .append(`div`)
+            .classed(`selectionButton`, true)
+            .text(sector => sector.name)
+            .on(`click`, sector => {    
+                displaySector(sector);
+                changeSvgViewbox(sector.idText);
+                selectionDropdownText.text(sector.name);
+            });            
+    //#endregion ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+    //#region generate radar ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+    let sectors = d3.select(`g#${radarId}_radarContent`)
+        .selectAll(`.sector`)
+        .data(radarData.sectors)
+        .enter()
+        .append(`g`)
+        .call(makeSector);
+
+    let segments = sectors.selectAll(`.segment`)
+        .data(sector => sector.segments )
+        .enter()
+        .append(`g`)
+        .call(makeSegment);
+
+    let blips = segments.selectAll(`.blip`)
+        .data(segment => segment.blips)
+        .enter()
+        .append(`g`)        
+        .call(makeBlip);
+
+    let bubble = d3.select(`g#${radarId}_radarContent`)
+        .append(`g`)
+        .call(makeBubble);
+    //#endregion ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+    //#region generate radar legend +++++++++++++++++++++++++++++++++++++++++++++++++++++
+    let radarLegendContainer = radarDiv.select(`.radarLegend`)
+        .append(`div`)
+        .attr(`id`, `${radarId}_radarLegendContainer`)
+        .classed(`dropdownContent`, true);
+
+    // generate entry states legend
+    let entryStatesLegend = radarLegendContainer.append(`div`)
+        .classed(`card`, true)
+    entryStatesLegend.append(`div`)
+        .classed(`cardTitle`, true)
+        .text(structure.entryStates.legendTitle);
+    entryStatesLegend.selectAll(null)
+        .data(structure.entryStates.list)
+        .enter()
+        .append(`div`)
+            .classed(`cardItem`, true)
+            .call(makeLegendBlipStates)
+            .on(`mouseover`, (data)=> focusBlipByState(data))
+            .on(`mouseout`, data => focusAllBlips(data));    
+
+    // generate entry movement legend
+    let entryMovementLegend = radarLegendContainer.append(`div`)
+        .classed(`card`, true);
+    entryMovementLegend.append(`div`)
+        .classed(`cardTitle`, true)
+        .text(structure.entryMovement.legendTitle);
+    entryMovementLegend.selectAll(null)
+        .data(structure.entryMovement.list)
+        .enter()
+        .append(`div`)
+            .classed(`cardItem`, true)
+            .call(makeLegendBlipMovement)
+            .on(`mouseover`, (data)=> focusBlipByMovement(data.value))
+            .on(`mouseout`, data => focusAllBlips(data));
+
+    // generate ring legend
+    let ringLegend = radarLegendContainer.append(`div`)
+        .classed(`card`, true);
+    ringLegend.append(`div`)
+        .classed(`cardTitle`, true)
+        .text(structure.rings.legendTitle);
+    ringLegend.selectAll(null)
+        .data(radarData.rings)
+        .enter()
+        .append(`div`)
+            .classed(`cardItem`, true)
+            .call(makeLegendRings)
+            .on(`mouseover`, (data)=> focusRing(data))
+            .on(`mouseout`, ()=> focusAllRings());
+    //#endregion ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+    //#region generate radar blip legend ++++++++++++++++++++++++++++++++++++++++++++++++
+    let blipLegendSectors = radarDiv.select(`.radarBlipLegend`).selectAll(null)
+        .data(radarData.sectors)
+        .enter()
+        .append(`div`)
+        .call(makeBlipLegendSector);
+
+    let blipLegendSegments = blipLegendSectors.selectAll(null)
+        .data(sector => sector.segments.filter(segment => segment.blips.length != 0))
+        .enter()
+        .append(`div`)
+        .call(makeBlipLegendSegment);
+
+    let blipLegendBlips = blipLegendSegments.selectAll(null)
+        .data(segment => segment.blips)
+        .enter()
+        .append(`div`)
+        .call(makeBlipLegendBlip)
+    //#endregion ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+
+    //#region forceSimulation %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+    // make sure that blips stay inside their segment
+    let ticked = () => blips.attr(`transform`, (d) => translate(
+            d.segmentFunctions.clip(d).x, 
+            d.segmentFunctions.clip(d).y
+    ));    
+    // distribute blips, while avoiding collisions
+    d3.forceSimulation(radarData.blips)
+        .force(`collision`, 
+            d3.forceCollide()
+                .radius(blipSize/2 + config.blip.margin)
+                .strength(0.15))
+                .on(`tick`, ticked);
+    //#endregion %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
+
+    update();
+    console.log(radarData, config);
+
+    
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: intia-theme
 version: !ruby/object:Gem::Version
-  version: 0.1.56
+  version: 0.1.57
 platform: ruby
 authors:
 - Marc Schmidt
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-05-11 00:00:00.000000000 Z
+date: 2022-05-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -56,6 +56,7 @@ files:
 - _sass/_layout.scss
 - _sass/_main.scss
 - _sass/_print.scss
+- _sass/_radar.scss
 - assets/img/404.png
 - assets/img/arrow-down.png
 - assets/img/arrow-left.png
@@ -72,8 +73,9 @@ files:
 - assets/img/icons/remove.svg
 - assets/img/icons/search.svg
 - assets/img/internal-link.png
-- assets/img/logo-black.png
 - assets/img/logo-dites.png
+- assets/img/logo-horizontal-short.png
+- assets/img/logo-short.png
 - assets/img/logo-white.png
 - assets/img/logos/BMBF_logo.jpg
 - assets/img/logos/DiTes_Single.png
@@ -86,6 +88,7 @@ files:
 - assets/img/logos/fjmk.png
 - assets/js/bulma-carousel/js/bulma-carousel.js
 - assets/js/main.js
+- assets/js/radar.js
 - assets/js/search.js
 - assets/styles/main.scss
 - assets/templates/contact.png