added circle

server/vbv_lernwelt/templates/base.html

@@ -27,6 +27,8 @@
     <!-- Your stuff: Third-party javascript libraries go here -->
     <!-- place project specific Javascript in this file -->
     <script defer src="{% static 'js/project.js' %}"></script>
+    <script src="https://d3js.org/d3.v4.min.js"></script>
+
 
   {% endblock javascript %}
 

server/vbv_lernwelt/templates/learnpath/circle.html

@@ -6,8 +6,12 @@
 
 {% block content %}
   <div class="w-full flex mt-6">
-  <div class="bg-white flex-col w-1/3 m-5">
-    <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
+  <div class="bg-white flex flex-col w-1/3 m-5">
+        <div><a href="{% pageurl page.get_parent.get_parent %}">Zurück zum Lernpfad</a></div>
+
+    <div class="flex justify-center">
+      	<svg width="400" height="400"> </svg>
+    </div>
     <h1 class="font-bold text-5xl mt-6 mb-4">{{ page.title }}</h1>
     <div class="mt4">{{ page.description }}</div>
     <div class="mt-4">{{ page.goals }}</div>
@@ -27,5 +31,40 @@
   </div>
   </div>
 
+  <script>
+		var data = [5,5,5,5,5];
+
+		var svg = d3.select("svg"),
+			width = svg.attr("width"),
+			height = svg.attr("height"),
+			radius = Math.min(width, height) / 2,
+			g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
+
+		var color = d3.scaleOrdinal(['#99C7E7']);
+
+		// Generate the pie
+		var pie = d3.pie();
+
+		// Generate the arcs
+		var arc = d3.arc()
+					.innerRadius(radius/2.5)
+        			.padAngle(12/360)
+					.outerRadius(radius);
+
+		//Generate groups
+		var arcs = g.selectAll("arc")
+					.data(pie(data))
+					.enter()
+					.append("g")
+					.attr("class", "arc")
+
+		//Draw arc paths
+		arcs.append("path")
+			.attr("fill", function(d, i) {
+				return color(i);
+			})
+			.attr("d", arc);
+	</script>
+
 
 {% endblock %}