lastkurven circular

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Jahreszyklus</title>
        
        
        <script src="https://d3js.org/d3.v4.min.js"></script>
        
         
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400' rel='stylesheet' type='text/css'>
        
        <style>
          body {
            font-size: 10px;
            font-family: 'Open Sans', sans-serif;
            font-weight: 400;
            fill: #8C8C8C;
            text-align: center;
            }
          
          .title {
            font-size: 28px;
            fill: #4F4F4F;
            font-weight: 300;
            text-anchor: start;
          }
          
          .subtitle {
            font-size: 14px;
            fill: #AAAAAA;
            font-weight: 300;
            text-anchor: start;
          }
          
          .credit {
            font-size: 12px;
            fill: #AAAAAA;
            font-weight: 300;
            text-anchor: start;
          }
          
          .axis path,
          .axis tick,
          .axis line {
            fill: none;
            stroke: none;
          }
          
          .axis text {
            font-size : 12px;
            fill: #AAAAAA;
            font-weight: 400;
          }
          
          .legendTitle {
            font-size: 12px;
            fill: #4F4F4F;
            font-weight: 300;
          }
          
          .januar {
            font-size: 14px;
            text-anchor: start;
            font-weight: 300;
            fill: #AAAAAA;
          }
          
          yearLine {
            stroke: #AAAAAA;
          }
          
          .axisText {
            fill: #C4C4C4;
            font-size: 11px;
            font-weight: 300;
            text-anchor: middle;
            text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
          }
          
          .axisCircles {
            fill: none;
            stroke: #E8E8E8;
            stroke-width: 1px;
          }
          
        
        </style>
    
    
    </head>
    
    <body>
      
      <div id="lastkurven"></div>     
        
        
        <script>
          
          /* ---------- SVG erstellen ---------- */
          
          var margin = {
            top: 70,
            right: 20,
            bottom: 120,
            left: 20
          }
          var width = window.innerWidth - margin.left - margin.right - 20;
          var height = window.innerHeight - margin.top - margin.bottom - 20;
          
          //SVG-Container
          var svg = d3.select("#lastkurven")
          						.append("svg")
          						.attr("width", width + margin.left + margin.right)
          						.attr("height", height + margin.top + margin.bottom)
          						.append("g")
          						.attr("transform", "translate(" + (margin.left + width/2) + "," + (margin.top + height/2) + ")");  //durch das transform wird das g-Element glaube ich auf die Mitte von dem SVG gelegt (müsste ich noch mal nachdenken)
          
          
          
          /* ---------- parse the date / time ---------- */
        var parseTime = d3.timeParse("%Y-%m-%d");    //  hier sage ich, wie mein Zeitformat aufgebaut ist (https://github.com/d3/d3-time-format/blob/master/README.md#timeParse)
          
          
          
          
          /* ---------- Scales erstellen ---------- */
          d3.csv("lastkurven.csv", function(error, data) {
            if (error) throw error;
            
            // Daten formatieren
            data.forEach(function(d) {
                d.tag = parseTime(d.tag);      
                d.haus2 = +d.haus2;                 
                d.haus3 = +d.haus3;
                d.haus4 = +d.haus4;
                d.haus5 = +d.haus5;
                d.haus6 = +d.haus6;
                d.haus7 = +d.haus7;
                d.haus8 = +d.haus8;
                d.haus9 = +d.haus9;
                d.haus10 = +d.haus10;
            })
            
            //Min- und Max-Werte aus den Daten ziehen
            
            var maxOverall = d3.max(data, function(d) {return Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10); });
            var minOverall = d3.min(data, function(d) {return Math.min(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10); });
            
            var minMax = d3.min(data, function(d) {return Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10); });  // der kleinste der maximalen Werte
            
            var meanMax = d3.mean(data, function(d) {return Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10); });  // der mittlere maximale Wert
            
            
            /* ---------- Scales erstellen ---------- */
            
            //den minimalen inneren Radius und den maximalen äußeren Radius setzen
            var outerRadius = Math.min(width, height, 500)/2,
                innerRadius = outerRadius * 0.4;
            
            var colorScale = d3.scaleLinear()
            										.domain([minMax, meanMax, maxOverall])
            										.range(["#2c7bb6", "#ffff8c", "#d7191c"])
            										.interpolate(d3.interpolateHcl);
            
            //die Höhen der bars so skalieren, dass sie nicht bei 0 starten und einen initialen offset nach außen haben
            var barScale = d3.scaleLinear()
            									.range([innerRadius, outerRadius])
            									.domain([minOverall, maxOverall]);
            
            //Die Daten so skalieren, dass sie einen Winkel von 360° ergeben, angefangen am ersten Datenpunkt = erster Januar
            
            var angle = d3.scaleLinear()
            							.range([-180, 180])
            							.domain(d3.extent(data, function(d) {return d.tag; }));
            
            
            
            /* ---------- Titel erstellen ---------- */
            
            var textWrapper = svg.append("g")
            											.attr("class", "textWrapper")
            											.attr("transform", "translate(" + Math.max(-width/2, - outerRadius - 170) + "," + 0 + ")");
            
            //den Titel oben hinzufügen (append)
            textWrapper.append("text")
            						.attr("class", "title")
            							.attr("x", 0)
            							.attr("y", -outerRadius - 40)
            							.text("Jahreslastkurven");
            textWrapper.append("text")
            						.attr("class", "subtitle")
            							.attr("x", 0)
            							.attr("y", -outerRadius - 20)
            							.text("aus 9 fiktiven Jahresdaten");
            
            //credits unten hinzufügen
            textWrapper.append("text")
            						.attr("class", "credit")
            								.attr("x", 0)
            								.attr("y", outerRadius + 120)
            								.text("Based on weather-radials.com and the related bl.ock of nadieh bremer");
            
            
            
            /* ---------- Achsen erstellen ---------- */
            
            //Wrapper für die Bars und um sie nach unten zu positionieren
            var barWrapper = svg.append("g")
            										.attr("transform", "translate(" + 0 + "," + 0 + ")");
            
            //gridlines unter die bars zeichnen
            var axes = barWrapper.selectAll(".gridCircles")
            											.data([0, 5, 10, 15, 20, 25])
            											.enter()
            											.append("g");
            //Kreise zeichnen
            axes.append("circle")
            		.attr("class", "axisCircles")
            		.attr("r", function(d) {return barScale(d); });  //wie funktioniert die Funktion? 
            //Achsbeschriftung
            axes.append("text")
            		.attr("class", "januar")
            		.attr("x", 7)
            		.attr("y", -outerRadius * 1.1)
            		.attr("dy", "0.9em")
            		.text("Januar");
            //x-Achsen beschriften   -- der sollte besser über die bars
            axes.append("text")
            			.attr("class", "axisText")
            			.attr("y", function(d) {return barScale(d); })
            			.attr("dy", "0.3em")
            			.text(function(d) {return d + " kWh/a"});
                        
                        
            //Linie um das Jahr aufzuteilen
            barWrapper.append("line")
            					.attr("class", "yearLine")
            					.attr("x1", 0)
            					.attr("y1", -innerRadius * 0.65)
            					.attr("x2", 0)
            					.attr("y2", -outerRadius * 1.1);
            
            
            
            /* ---------- Balken erstellen ---------- */
            
            //Zeichnet einen Balken pro Tag, bei dem die Höche der Unterschied zwischen dem minimalen und maximalen Tageswert ist
            barWrapper.selectAll(".lastBar")
            					.data(data)
            					.enter()
            					.append("rect")
            					.attr("class", "lastBar")
            					.attr("transform", function(d,i) {return "rotate(" + (angle(d.tag)) + ")"; })
            					.attr("width", 1.7)
            					.attr("height", function(d,i) { return barScale(Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10)) - barScale(Math.min(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10)); } )
            					.attr("x", -0.75)
            					.attr("y", function (d,i) {return barScale(Math.min(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10)); })
            					.style("fill", function(d) {return colorScale(Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10))})
            
            
            
            
            /* ---------- Legende erstellen ---------- */
            
            var legendWidth = Math.min(outerRadius * 2, 400);
            
            var xScale = d3.scaleLinear()
            								.range([-legendWidth/2, legendWidth/2])
            								.domain([0,25]);
            
            
              })
        
        </script>
    
    
    
    </body>

</html>

https://d3js.org/d3.v4.min.js