Added a radar chart vizualisation for specific agents

resources/views/app/radar.blade.php

+@extends('layouts.app')
+
+@section('content')
+
+<h1 class="text-center">{{ $label }}</h1> 
+<svg width="600" height="600"></svg>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.1.1/d3.min.js" integrity="sha512-COTaPOlz12cG4fSfcBsxZsjauBAyldqp+8FQUM/dZHm+ts/jR4AFoJhCqxy8K10Jrf3pojfsbq7fAPTb1XaVkg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script>
+
+    var url = "/app/ranking/{{ $label }}/json";
+    d3.json(url).then( data => {
+        console.log(data);
+        let radar_data = [];
+        let features = [];
+
+        //fill the features with the subject names
+        var point = {};
+        for (var i = 0; i < data.length; i++) {
+            var subject = data[i].subject.name;
+            features.push(subject);
+            point[subject] = data[i].score * 10;
+        };
+        radar_data.push(point);
+        console.log(radar_data);
+
+        let svg = d3.select("svg"),
+        width = +svg.attr("width"),
+        height = +svg.attr("height");
+
+        let radialScale = d3.scaleLinear().domain([0, 10]).range([0, 250]);
+        let ticks = [2, 4, 6, 8, 10];
+
+        //draw grid lines (circles)
+        ticks.forEach(t =>
+            svg.append("circle")
+                .attr("cx", 300)
+                .attr("cy", 300)
+                .attr("fill", "none")
+                .attr("stroke", "gray")
+                .attr("r", radialScale(t))
+        );
+
+        //draw tick labels
+        ticks.forEach(t =>
+            svg.append("text")
+                .attr("x", 305)
+                .attr("y", 300 - radialScale(t))
+                .text(t.toString())
+        );
+
+        //draw axis for each feature
+        function angleToCoordinate(angle, value) {
+            let x = Math.cos(angle) * radialScale(value);
+            let y = Math.sin(angle) * radialScale(value);
+            return { "x": 300 + x, "y": 300 - y };
+        }
+        for (var i = 0; i < features.length; i++) {
+            let ft_name = features[i];
+            let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
+            let line_coordinate = angleToCoordinate(angle, 10);
+            let label_coordinate = angleToCoordinate(angle, 10.5);
+            svg.append("line")
+                .attr("x1", 300)
+                .attr("y1", 300)
+                .attr("x2", line_coordinate.x)
+                .attr("y2", line_coordinate.y)
+                .attr("stroke", "black");
+            svg.append("text")
+                .attr("x", label_coordinate.x)
+                .attr("y", label_coordinate.y)
+                .text(ft_name);
+        }
+        //drawing the line for the spider chart
+        let line = d3.line().x(d => d.x).y(d => d.y);
+
+        //get coordinates for a data point
+        function getPathCoordinates(d) {
+            let coordinates = [];
+            for (var i = 0; i < features.length; i++) {
+                let ft_name = features[i];
+                let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length);
+                coordinates.push(angleToCoordinate(angle, d[ft_name]));
+            }
+            return coordinates;
+        }
+
+        for (var i = 0; i < radar_data.length; i++) {
+            let d = radar_data[i];
+            let color = "red";
+            let coordinates = getPathCoordinates(d);
+
+            //draw the path element
+            svg.append("path")
+                .datum(coordinates)
+                .attr("d", line)
+                .attr("stroke-width", 3)
+                .attr("stroke", color)
+                .attr("fill", color)
+                .attr("stroke-opacity", 1)
+                .attr("opacity", 0.5);
+        }
+    });
+</script>
+@endsection
\ No newline at end of file