Built with blockbuilder.org
forked from areologist's block: area chart
Last active
August 21, 2017 13:51
-
-
Save areologist/fb5f709cff89f5fedea188aa58b3a505 to your computer and use it in GitHub Desktop.
area chart two
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| date | committed | unconfirmed | |
|---|---|---|---|
| 1-Apr-17 | 48195.44 | 47795.442 | |
| 2-Apr-17 | 55461.72 | 55061.722 | |
| 3-Apr-17 | 55258.53 | 54858.532 | |
| 4-Apr-17 | 50127.83 | 49727.832 | |
| 5-Apr-17 | 76620.81 | 76220.812 | |
| 6-Apr-17 | 76620.81 | 76220.812 | |
| 7-Apr-17 | 76620.81 | 76220.812 | |
| 8-Apr-17 | 100571.68 | 100171.682 | |
| 9-Apr-17 | 91719.52 | 91319.522 | |
| 10-Apr-17 | 96239.32 | 95839.322 | |
| 11-Apr-17 | 98483.3 | 98083.32 | |
| 12-Apr-17 | 108620.08 | 118620.08200 | |
| 13-Apr-17 | 108620.08 | 118620.08200 | |
| 14-Apr-17 | 108620.08 | 118620.08200 | |
| 15-Apr-17 | 108170.13 | 118170.13200 | |
| 16-Apr-17 | 119098.3 | 129098.3200 | |
| 17-Apr-17 | 101325.71 | 111325.71200 | |
| 18-Apr-17 | 104259.05 | 114259.05200 | |
| 19-Apr-17 | 104641.65 | 114641.65200 | |
| 20-Apr-17 | 104641.65 | 114641.65200 | |
| 21-Apr-17 | 104641.65 | 114641.65 | |
| 22-Apr-17 | 111920.53 | 121920.532400 | |
| 23-Apr-17 | 104867.04 | 114867.042400 | |
| 24-Apr-17 | 109231.15 | 119231.152400 | |
| 25-Apr-17 | 57587.93 | 58587.932400 | |
| 26-Apr-17 | 62478.4 | 64478.42400 | |
| 27-Apr-17 | 62478.4 | 64478.42400 | |
| 28-Apr-17 | 62478.4 | 63478.42400 | |
| 29-Apr-17 | 81384.09 | 81384.092400 | |
| 30-Apr-17 | 77865.45 | 78865.452400 | |
| 1-May-17 | 82434.19 | 81434.192400 | |
| 2-May-17 | 79306.91 | 78306.912400 | |
| 3-May-17 | 38966.54 | 39966.542400 | |
| 4-May-17 | 38966.54 | 39966.542400 | |
| 5-May-17 | 38966.54 | 38966.542400 | |
| 6-May-17 | 47844.23 | 48844.232400 | |
| 7-May-17 | 66611.47 | 66611.472400 | |
| 8-May-17 | 71452.16 | 71452.162400 | |
| 9-May-17 | 37831.17 | 37831.172400 | |
| 10-May-17 | 48420.59 | 48420.592400 | |
| 11-May-17 | 48420.59 | 48420.592400 | |
| 12-May-17 | 48420.59 | 48420.592400 | |
| 13-May-17 | 56739.52 | 56739.522400 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment