Built with blockbuilder.org
xxxxxxxxxx<html> <head> <meta charset="utf-8"> <title>Jahreszyklus</title> <!-- D3.js --> <script src="https://d3js.org/d3.v4.min.js"></script> <!-- Google Font --> <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> <!-- auf dieses div wird später zurückgegriffen um darin die radial chart zu ersrtellen --> <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