xxxxxxxxxx<head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } </style></head><body> <div id ="chartID"></div> <script> const margin = {top: 70, right: 70, bottom: 70, left: 70}; const fullWidth = 960; const fullHeight = 400; const width = fullWidth - margin.left - margin.right; const height = fullHeight - margin.top - margin.bottom; const svg = d3.select('#chartID').append('svg') .attr('width', fullWidth) .attr('height', fullHeight) const g = svg .append('g') .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); const parseTime = d3.timeParse('%d-%b-%y'); const area = d3.area() .x(d => xScale(d.date)) .y1(d => yScale(d.committed)); const area2 = d3.area() .x(d => xScale(d.date)) .y1(d => yScale(d.unconfirmed)); const allData = generateData(20); const today = new Date(2017, 7, 23); // select 7-week interval containing 'today' // TODO: should be 7 Sun-Sat spans // get prev Sunday from today and count back 0-3 weeks // depending on depth of available data // then count forward to being total to 7 weeks const maxDay = new Date(2017, 8, 12); const minDay = new Date(2017, 6, 25); const data = allData.filter(d => d.date >= minDay && d.date <= maxDay); const xScale = d3.scaleTime() .domain(d3.extent(data, d => d.date)) .range([0, width]); const yMin = d3.min(data, d => d.committed) * 0.75; const yMax = d3.max(data, d => Math.max(d.committed, d.unconfirmed)) const yScale = d3.scaleLinear() .domain([yMin, yMax]) .range([height, 0]); area.y0(yScale(yMin)); area2.y0(yScale(yMin)); g.append('path') .datum(data) .attr('fill', '#d189bf') .attr('opacity', 0.5) .attr('d', area2); g.append('path') .datum(data) .attr('fill', '#d189bf') .attr('d', area); const yAxis = d3 .axisBottom(xScale) .ticks(7); g.append('g') .attr('transform', 'translate(0,' + height + ')') .call(yAxis); // util function generateData(weeks) { const days = (weeks || 6) * 7; const min = 12000; const max = 85000; const result = []; // seed values with random value within range let committed = Math.random() * (max - min) + min; let unconfirmed = Math.random() * (max - min) + min; for (let i = 0; i < days; i++) { const date = new Date(2017, 5, 11); const seed = Math.random() * 3000 + 1000; date.setDate(date.getDate() + i); committed = Math.random() * (committed + seed - min) + min; unconfirmed = Math.random() * (unconfirmed + seed - min) + min; result.push({ date, committed, unconfirmed }); } return result; } </script></body> https://d3js.org/d3.v4.min.js