D3 Examples - lastkurven circular 2

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { 
      background-color: #fffdf9;
      margin:0;
      position:fixed;
      top:0;right:0;
      bottom:0;
      left:0; 
    }
  </style>
  
</head>
​
<body>
  <script>
    
    var margin = 40,    
        width = window.innerWidth - margin.left - margin.right,
        height = window.innerHeight - margin.top - margin.bottom,
        svg = d3.select('svg'),
        origin = svg.append('g')
                                    .attr("transform", "translate(" + width*(3/5) + "," + height/2 + ")"); // verschiebt das SVG auf die rechte Seite, sodass auf der linken Seite Platz für die Legende ist
​
        
        /*
        maxRadius = (height/2) - margin,
        innerRadius = 120;
        */
    
    /* ---------- Zeitformat erstellen ---------- */
    var formatDate = d3.timeParse("%Y-%m-%d"),
        monthNameFormat = d3.timeParse("%b");   // hier könnte ich die localen deutschen Monate einfügen
    
    var ticks = [0, 5, 10, 15, 20, 25];
    
    
    d3.csv("lastkurven.csv", function(error, data) {
      if(error) throw error;
      
      //Daten formatieren
      data.forEach(function(d) {
        d.tag = formatDate(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
      
      
      var rScale = d3.scaleLinear()
                        .domain([minOverall, maxOverall])
                        .range([10, (height/2)-margin]),
          yScale = ; 
      
      var xAxis = d3.axisLeft(x)
                                .tickValues([0, 5, 10, 15, 20, 25])
                                .tickFormat(function(d) {return d + "kWh/a"; });
      
      var color = d3.scaleLinear()
                                .domain(ticks)
                                .range(["#00375a","#1b6491","#52b7e7","#96d88c","#fbd65f","#9e3b2c"]);
      
      var svg = d3.select('body').append("svg")
                                .attr("width", width)
                                .attr("height", height)
                            .append("g")
                                .attr("transform", "translate(" + width/2 + "," + height/2 + ")");
      
    })
​
​
  </script>
</body>
​
    