Add a bit of sample code for a pie chart

css/main.css

@@ -2,7 +2,11 @@ body {
   padding-top: 5rem;
 }
 
-.starter-template {
+.content-box {
   padding: 3rem 1.5rem;
   text-align: center;
-}
+}
+
+.chart-box {
+  border: 1px solid grey;
+}

index.html

@@ -43,7 +43,7 @@
 
     <main role="main" class="container">
 
-      <div class="starter-template">
+      <div class="content-box">
         <h1>Hallo!</h1>
         <p class="lead">
          Mit Bootstrap sieht alles per Default ein wenig hübscher aus.<br>
@@ -53,6 +53,11 @@
         </p>
       </div>
 
+      <div class="content-box chart-box">
+        <p>Hier erscheint gleich ein Test-Diagramm.</p>
+        <div id="testchartbox"></div>
+      </div>
+
     </main><!-- /.container -->
 
 
@@ -80,6 +85,7 @@
     <script type="text/javascript" src="js/d3/d3.min.js"></script>
     <script type="text/javascript" src="js/util.js"></script>
     <script type="text/javascript" src="js/preprocessor.js"></script>
+    <script type="text/javascript" src="js/diagrams.js"></script>
     <script type="text/javascript" src="js/main.js"></script>
   </body>
 </html>

js/diagrams.js

@@ -0,0 +1,37 @@
+"use strict";
+
+/*
+ * This may be restructured in the future - code to create diagrams will live here.
+ */
+
+function createTestPieChart(containerId, dataset) {
+  var width = 360;
+  var height = 360;
+  var radius = Math.min(width, height) / 2;
+  var color = d3.scaleOrdinal(d3.schemeCategory20b);
+
+  var svg = d3.select(containerId)
+    .append("svg")
+    .attr("width", width)
+    .attr("height", height)
+    .append("g")
+    .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")");
+
+  var arc = d3.arc()
+    .innerRadius(0)
+    .outerRadius(radius);
+
+  var pie = d3.pie()
+    .value(function(d) { return d.count; })
+    .sort(null);
+
+  var path = svg.selectAll("path")
+    .data(pie(dataset))
+    .enter()
+    .append("path")
+    .attr("d", arc)
+    .attr("fill", function(d, i) {
+      return color(d.data.label);
+    });
+
+}

js/main.js

@@ -9,4 +9,17 @@ console.log("Let's load and preprocess all data properly.");
 preprocessor.load(function(data) {
   console.log("Results are in!");
   console.log(data);
-});
+
+  // Create a very basic dataset for a chart
+  var dataset = [
+    { label: "SPD", count: 25 },
+    { label: "CDU", count: 30 },
+    { label: "Die Grünen", count: 40 },
+    { label: "Die Linken", count: 15 },
+    { label: "Die Rechten", count: 20 },
+    { label: "Die Partei", count: 5 },
+  ];
+  // Pass the dataset to the chart function
+  createTestPieChart("#testchartbox", dataset);
+
+});