D3 Examples - Lastkurven

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Jahreszyklus</title>
    <script src="https://d3js.org/d3.v4.min.js"></script>
      
    <style> /* set the CSS */
        .line {
            fill: none;
            stroke: steelblue;
            stroke-width: 2px;
          }
        
        .line2 {
            fill: none;
            stroke: purple;
            stroke-width: 2px;
          }
        
        .lineCurve {
            fill: none;
            stroke: pink;
            stroke-width: 2px;
          }
        
        .area {
            fill: lightsteelblue;
        }
        
        .axis {
            font: 14px sans-serif;
        }
        
        .axis-title {
            font: 20px sans-serif;
            text-decoration: underline;
        }
        
        .grid line {
            stroke: lightgrey;
            stroke-opacity: 0.7;
            shape-rendering: crispEdges;
        }
        
        .grid path {
            stroke-width: 0;
        }
        
    </style>
  </head>
  <body>
      
      <!-- load the d3.js library -->  
      <script src="https://d3js.org/d3.v4.min.js"></script>
      
      
    <script>
        
        // set the dimensions and margins of the graph
        var margin = {top: 40, right: 60, bottom: 90, left: 70},
            width = 1071 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;
        
        // parse the date / time
        var parseTime = d3.timeParse("%Y-%m-%d");    
        
        // set the ranges
        var x = d3.scaleTime().range([0, width]);           
        var y = d3.scaleLinear().range([height, 0]);        
        
        var x_bar = d3.scaleBand() 
                        .rangeRound([0, width])         
                        .padding(0.5);                 
        
        //Color Scale
        var colorScale = d3.scaleLinear()
                            .range(["#2c7bb6","#d7191c"]);       
        
        // append the svg obgect to the body of the page
        
        var svg4 = d3.select("body").append("svg")
                                      .attr("width", width + margin.left + margin.right)
                                      .attr("height", height + margin.top + margin.bottom)
                                    .append("g")
                                      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
       
        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;
                //console.log(d.tag);
                console.log("min: " + Math.min(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10) + "   max: " + Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10) )
            })
            
            
            
             //scale the range of the data
            x.domain(d3.extent(data, function(d) {return d.tag; }));   
            y.domain([0, 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); })]);    
            x_bar.domain(data.map(function(d) {return d.tag; }));
            
            //scale the color
            colorScale.domain([0, 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); })]);
           
            
            /* ---------- SVG4 barchart ---------- */
            
            // die rectangles ans svg anbinden (append)
            svg4.selectAll("bar")
                    .data(data)
                .enter().append("rect")
                    .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))})
                    .attr("x", function(d) {return x(d.tag); })
                    .attr("width", x_bar.bandwidth())
                    .attr("y", function(d) {return y(Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10)); })  
                    .attr("height", function(d) {return height - y(Math.max(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10) - Math.min(d.haus2, d.haus3, d.haus4, d.haus5, d.haus6, d.haus7, d.haus8, d.haus9, d.haus10))});              
            
            
            // x-Achse definieren            
            svg4.append("g")
                .attr("transform", "translate(0," + height + ")")           
                .attr("class", "axis")                                      
                .call(d3.axisBottom(x)                                      
                         .tickFormat(d3.timeFormat("%B")))                  
                .selectAll("text")
                    .style("text-anchor", "end")            
                    .attr("dx", "-.8em")                    
                    .attr("dy", ".15em")
                    .attr("transform", "rotate(-55)");      
            
            svg4.append("text")
                .attr("class", "axis")
                .attr("x", width/2)
                .attr("y", height + margin.top + 70)
                .style("text-anchor", "middle")
                .text("Monat")
            
            
            //y-Achse definieren
            svg4.append("g")
                .attr("class", "axis")
                .call(d3.axisLeft(y));                   
            
            svg4.append("text")
                .attr("class", "axis")
                .attr("transform", "rotate(-90)")
                .attr("x", 0 - (height/2))
                .attr("y", 0 - margin.left)
                .attr("dy", "1em")
                .style("text-anchor", "middle")
                .text("kWh pro Tag");
            
            
            // Titel hinzufügen
            
            svg4.append("text")
                .attr("class", "axis-title")
                .attr("x", (width/2))
                .attr("y", 0 - (margin.top/2))
                .attr("text-anchor", "middle")
                .text("Jahreslastkurve barchart")
            
                      
        })
        
        
    </script>
  </body>
</html>
    