D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
AnniWis
Full window
Github gist
lastkurven circular 2
Built with
blockbuilder.org
<!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>
https://d3js.org/d3.v4.min.js