Skip to content

Instantly share code, notes, and snippets.

@areologist

areologist/.block

Last active January 11, 2018 21:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save areologist/92fd3d9df3e1a141fd16de11d5cded4f to your computer and use it in GitHub Desktop.
Save areologist/92fd3d9df3e1a141fd16de11d5cded4f to your computer and use it in GitHub Desktop.
Download ZIP
trend 2
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body {
margin: 0;
}
svg {
border: 1px solid gray;
margin: 15px;
}
svg text {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: default;
user-select: none;
}
svg text::selection {
background: none;
}
.y-axis .domain {
display: none;
}
input:checked {
border: 6px solid black;
}
fieldset {
border: 1px solid black;
margin: 15px 15px 0;
}
label {
margin-left: 15px;
}
input {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 50%;
width: 16px;
height: 16px;
border: 2px solid #999;
transition: 0.2s all linear;
outline: none;
margin-right: 5px;
position: relative;
top: 4px;
}
.options {
display: grid;
}
fieldset {
grid-row: 1;
}
</style>
</head>
<body>
<div class="options">
<fieldset id="sourceList">
<legend>Source</legend>
<div>
<label for="radioNet">Net</label>
<input type="radio" id="radioNet" name="trendType" value="net" checked />
<label for="radioIn">In</label>
<input type="radio" id="radioIn" name="trendType" value="in" />
<label for="radioOut">Out</label>
<input type="radio" id="radioOut" name="trendType" value="out" />
</div>
</fieldset>
<fieldset id="planList">
<legend>Plan affects</legend>
<div>
<label for="radioPlanIn">In</label>
<input type="radio" id="radioPlanIn" name="planAffects" value="in" checked />
<label for="radioPlanOut">Out</label>
<input type="radio" id="radioPlanOut" name="planAffects" value="out" />
</div>
</fieldset>
</div>
<script>
const margin = { top: 20, right: 80, bottom: 40, left: 80 };
const width = 720;
const height = 340;
class TrendChart {
constructor() {
this.dataSource = 'net';
this.planSource = 'in';
this.svg = d3.select('body')
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom);
}
init() {
this.container = this.svg
.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
return new Promise((resolve, reject) => {
d3.json('trend-data.json', (err, data) => {
if (err) {
return reject(err);
}
data.forEach(year =>
year.months.forEach(d => {
d.net = parseFloat(d.actualNet);
d.out = parseFloat(d.actualTotalPay);
d.in = parseFloat(d.actualTotalReceived);
d.plan = {
in: isNumber(d.plannedReceived) ? parseFloat(d.plannedReceived) : null,
out: isNumber(d.plannedPay) ? parseFloat(d.plannedPay) : null
};
}));
return resolve(data);
});
});
}
start(years) {
this.setup(years);
this.render(years);
this._data = years;
}
setup(years) {
this._min = d3.min(years, year => d3.min(year.months, d => d[this.dataSource]));
this._max = d3.max(years, year => d3.max(year.months, d => d[this.dataSource]));
this.yScale = d3.scaleLinear()
.domain([this._min, this._max])
.range([height, 0]);
this.xScale = d3.scaleLinear()
.domain([1, 12])
.range([0, width]);
}
render(years) {
const line = this._getLine();
const colors = this._getColors();
const pastYears = this.container
.append('g')
.call(this.drawPastYears.bind(this, years));
const plan = this.container
.append('g')
.call(this.drawPlanned.bind(this, years));
const currentYear = this.container
.append('g')
.call(this.drawCurrentYear.bind(this, years));
this.createAxes();
}
drawPastYears(years, container) {
const line = this._getLine(this.dataSource);
const colors = this._getColors().slice(1).reverse();
const data = years.length > 1 ? years.slice(1) : [];
const selection = container
.selectAll('.past-years')
.data(data, d => d.year);
selection
.enter()
.append('path')
.attr('class', 'past-years')
.attr('d', d => line(d.months))
.attr('fill', 'transparent')
.attr('stroke', (d, i) => colors[i])
.attr('stroke-width', 2);
selection.exit().remove();
}
drawCurrentYear(years, container) {
const line = this._getLine(this.dataSource);
const colors = this._getColors();
const data = years.length > 0 ? years.slice(0, 1) : [];
container
.append('path')
.attr('class', 'current-year')
.attr('d', line(data[0].months))
.attr('fill', 'transparent')
.attr('stroke', colors[0])
.attr('stroke-width', 3);
}
drawPlanned(years, container) {
// get 'planned'
const y = 2017;
const planned = years
.filter(d => d.year === y)
.map(d =>
d.months.filter(m => m.plan[this.planSource] !== null));
const line = d3.line()
.x(d => this.xScale(d.month))
.y(d => this.yScale(d.plan[this.planSource]))
.curve(d3.curveCatmullRom);
container
.append('path')
.attr('class', 'planned')
.attr('d', line(planned[0]))
.attr('fill', 'transparent')
.attr('stroke', 'black')
.attr('stroke-width', 2)
.attr('stroke-dasharray', '4, 4');
}
changeSource(source) {
this.dataSource = source;
const years = this._data;
this.setup(years);
// update the lines
const line = this._getLine(this.dataSource);
this.svg
.select('.current-year')
.transition()
.duration(750)
.attr('d', line(years[0].months));
this.svg
.selectAll('.past-years')
.data(years.length > 1 ? years.slice(1) : [])
.transition()
.duration(550)
.attr('d', d => line(d.months));
this.changePlan(this.planSource);
this.updateAxes();
}
changePlan(plan) {
this.planSource = plan;
const y = 2017;
const planned = this._data
.filter(d => d.year === y)
.map(d =>
d.months.filter(m => m.plan[this.planSource] !== null));
const line = d3.line()
.x(d => this.xScale(d.month))
.y(d => this.yScale(d.plan[this.planSource]))
.curve(d3.curveCatmullRom);
this.svg
.select('.planned')
.transition()
.duration(550)
.attr('d', line(planned[0]))
}
createAxes() {
const yTicks = this._min < 0 ?
[this._min, 0, this._max] :
[this._min, this._max];
const yAxis = d3.axisLeft(this.yScale)
.tickValues(yTicks)
.tickFormat(d3.format('($,.0f'));
this.container
.append('g')
.attr('class', 'y-axis')
.attr('transform', 'translate(-10, 0)')
.call(yAxis);
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug',
'Sept', 'Oct', 'Nov', 'Dec'];
const xAxis = d3.axisBottom(this.xScale)
.tickFormat((d, i) => months[i]);
this.container
.append('g')
.attr('transform', `translate(0, ${height})`)
.call(xAxis)
.select('.domain')
.remove();
}
updateAxes() {
const yTicks = this._min < 0 ?
[this._min, 0, this._max] :
[this._min, this._max];
const yAxis = d3.axisLeft(this.yScale)
.tickValues(yTicks)
.tickFormat(d3.format('($,.0f'));
this.svg
.select('.y-axis')
.transition()
.duration(1000)
.call(yAxis);
}
_getLine(key) {
return d3.line()
.x(d => this.xScale(d.month))
.y(d => this.yScale(d[key]))
.curve(d3.curveCatmullRom);
}
_getColors() {
return ['#5998c4', '#687b86', '#b8bec0', '#dbdce0', '#f1f6fe'];
}
}
// utility functions
function isNumber(val) {
return typeof val === 'number';
}
window.addEventListener('load', () => {
const chart = new TrendChart();
chart.init()
.then((years) =>
chart.start(years))
.catch(err => console.error(err));
document.querySelectorAll('#sourceList input[type=radio]')
.forEach(element =>
element.addEventListener('change', e =>
(chart.changeSource(e.target.value))));
document.querySelectorAll('#planList input[type=radio]')
.forEach(element =>
element.addEventListener('change', e =>
(chart.changePlan(e.target.value))));
});
</script>
</body>
Raw
trend-data.json
[{
"year": 2017,
"months": [{
"account": "00000000004005488736",
"key": "167266973",
"month": 1,
"year": 2017,
"actualNet": 253748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 2,
"year": 2017,
"actualNet": 333748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 3,
"year": 2017,
"actualNet": 92748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 4,
"year": 2017,
"actualNet": 383748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 5,
"year": 2017,
"actualNet": 533748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 6,
"year": 2017,
"actualNet": 283748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 7,
"year": 2017,
"actualNet": 433748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 8,
"year": 2017,
"actualNet": 233748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": null,
"plannedReceived": null
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 9,
"year": 2017,
"actualNet": 33748,
"actualTotalPay": 54217,
"actualTotalReceived": 87965,
"plannedPay": 75450,
"plannedReceived": 60275
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 10,
"year": 2017,
"actualNet": 235322,
"actualTotalPay": 159832,
"actualTotalReceived": 395154,
"plannedPay": 200000,
"plannedReceived": 40000
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 11,
"year": 2017,
"actualNet": 11300,
"actualTotalPay": 66598,
"actualTotalReceived": 77898,
"plannedPay": 70500,
"plannedReceived": 80000
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 12,
"year": 2017,
"actualNet": 30578,
"actualTotalPay": 15214,
"actualTotalReceived": 45793,
"plannedPay": null,
"plannedReceived": null
}]
}, {
"year": 2016,
"months": [{
"account": "00000000004005488736",
"key": "167266973",
"month": 1,
"year": 2016,
"actualNet": 672336,
"actualTotalPay": 52417,
"actualTotalReceived": 724754,
"plannedPay": 555555,
"plannedReceived": 0
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 2,
"year": 2016,
"actualNet": 29802,
"actualTotalPay": 68451,
"actualTotalReceived": 98254,
"plannedPay": 4578,
"plannedReceived": 0
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 3,
"year": 2016,
"actualNet": 7035,
"actualTotalPay": 67179,
"actualTotalReceived": 74214,
"plannedPay": 4996320,
"plannedReceived": 1
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 4,
"year": 2016,
"actualNet": 28941,
"actualTotalPay": 68579,
"actualTotalReceived": 97521,
"plannedPay": 1002715,
"plannedReceived": 1
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 5,
"year": 2016,
"actualNet": 9684,
"actualTotalPay": 35745,
"actualTotalReceived": 45430,
"plannedPay": 1650433,
"plannedReceived": 1
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 6,
"year": 2016,
"actualNet": 23784,
"actualTotalPay": 45763,
"actualTotalReceived": 69547,
"plannedPay": 5209029,
"plannedReceived": 5061883
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 7,
"year": 2016,
"actualNet": 8977,
"actualTotalPay": 54875,
"actualTotalReceived": 63852,
"plannedPay": 2255139,
"plannedReceived": 2523951
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 8,
"year": 2016,
"actualNet": 11110,
"actualTotalPay": 14725,
"actualTotalReceived": 25836,
"plannedPay": 1577973,
"plannedReceived": 4427525
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 9,
"year": 2016,
"actualNet": 22200,
"actualTotalPay": 74182,
"actualTotalReceived": 96382,
"plannedPay": 3053187,
"plannedReceived": 2177454
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 10,
"year": 2016,
"actualNet": 11110,
"actualTotalPay": 85225,
"actualTotalReceived": 96336,
"plannedPay": 2801609,
"plannedReceived": 2741119
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 11,
"year": 2016,
"actualNet": 33333,
"actualTotalPay": 45612,
"actualTotalReceived": 78945,
"plannedPay": 2501086,
"plannedReceived": 2216920
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 12,
"year": 2016,
"actualNet": 33243,
"actualTotalPay": 64321,
"actualTotalReceived": 97564,
"plannedPay": 4825740,
"plannedReceived": 5118546
}]
}, {
"year": 2015,
"months": [{
"account": "00000000004005488736",
"key": "167266973",
"month": 1,
"year": 2015,
"actualNet": 94259,
"actualTotalPay": 174343,
"actualTotalReceived": 268602,
"plannedPay": 2514692,
"plannedReceived": 4974827
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 2,
"year": 2015,
"actualNet": 730560,
"actualTotalPay": 124152,
"actualTotalReceived": 854712,
"plannedPay": 2105806,
"plannedReceived": 4048279
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 3,
"year": 2015,
"actualNet": 169397,
"actualTotalPay": 154754,
"actualTotalReceived": 324152,
"plannedPay": 1145302,
"plannedReceived": 4138310
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 4,
"year": 2015,
"actualNet": 180692,
"actualTotalPay": 504521,
"actualTotalReceived": 685214,
"plannedPay": 4201054,
"plannedReceived": 2660584
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 5,
"year": 2015,
"actualNet": 205016,
"actualTotalPay": 200857,
"actualTotalReceived": 405874,
"plannedPay": 4329266,
"plannedReceived": 4179029.634615385
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 6,
"year": 2015,
"actualNet": 197498,
"actualTotalPay": 654715,
"actualTotalReceived": 852214,
"plannedPay": 4109041,
"plannedReceived": 5595252.730769231
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 7,
"year": 2015,
"actualNet": 173109,
"actualTotalPay": 101475,
"actualTotalReceived": 274585,
"plannedPay": 5305789,
"plannedReceived": -112310.00000000093
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 8,
"year": 2015,
"actualNet": 503956,
"actualTotalPay": 154785,
"actualTotalReceived": 658741,
"plannedPay": 1415340,
"plannedReceived": -3115637
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 9,
"year": 2015,
"actualNet": 319801,
"actualTotalPay": 475412,
"actualTotalReceived": 795214,
"plannedPay": 2408879,
"plannedReceived": -1539138.000000001
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 10,
"year": 2015,
"actualNet": 650040,
"actualTotalPay": 157412,
"actualTotalReceived": 807452,
"plannedPay": 2899192,
"plannedReceived": 4062071.557692308
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 11,
"year": 2015,
"actualNet": 497590,
"actualTotalPay": 245214,
"actualTotalReceived": 742804,
"plannedPay": 5273562,
"plannedReceived": 5157876.846153847
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 12,
"year": 2015,
"actualNet": 870550,
"actualTotalPay": 75244,
"actualTotalReceived": 945795,
"plannedPay": 4895373,
"plannedReceived": 7941685.365384612
}]
}, {
"year": 2014,
"months": [{
"account": "00000000004005488736",
"key": "167266973",
"month": 1,
"year": 2014,
"actualNet": 371947,
"actualTotalPay": 547586,
"actualTotalReceived": 924781,
"plannedPay": 1788651,
"plannedReceived": 2503954
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 2,
"year": 2014,
"actualNet": 694060,
"actualTotalPay": 154794,
"actualTotalReceived": 848854,
"plannedPay": 2236321,
"plannedReceived": 3062385
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 3,
"year": 2014,
"actualNet": 658251,
"actualTotalPay": 280547,
"actualTotalReceived": 938799,
"plannedPay": 2872403,
"plannedReceived": 1801036
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 4,
"year": 2014,
"actualNet": 254388,
"actualTotalPay": 487125,
"actualTotalReceived": 512563,
"plannedPay": 1089334,
"plannedReceived": 5532095
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 5,
"year": 2014,
"actualNet": 946725,
"actualTotalPay": 52874,
"actualTotalReceived": 999600,
"plannedPay": 3519424,
"plannedReceived": 1990202
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 6,
"year": 2014,
"actualNet": -73281,
"actualTotalPay": 324745,
"actualTotalReceived": 251463,
"plannedPay": 1390779,
"plannedReceived": 1519345
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 7,
"year": 2014,
"actualNet": -32337,
"actualTotalPay": 357815,
"actualTotalReceived": 325478,
"plannedPay": 3508845,
"plannedReceived": 2967484
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 8,
"year": 2014,
"actualNet": 243425,
"actualTotalPay": 415287,
"actualTotalReceived": 658712,
"plannedPay": 4575819,
"plannedReceived": 4243758
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 9,
"year": 2014,
"actualNet": 434476,
"actualTotalPay": 451269,
"actualTotalReceived": 885745,
"plannedPay": 2290573,
"plannedReceived": 1727027
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 10,
"year": 2014,
"actualNet": 330002,
"actualTotalPay": 325478,
"actualTotalReceived": 655480,
"plannedPay": 5991478,
"plannedReceived": 1017851
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 11,
"year": 2014,
"actualNet": 355242,
"actualTotalPay": 490745,
"actualTotalReceived": 845987,
"plannedPay": 2525494,
"plannedReceived": 5672431
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 12,
"year": 2014,
"actualNet": 533298,
"actualTotalPay": 190854,
"actualTotalReceived": 724152,
"plannedPay": 2709401,
"plannedReceived": 3158586
}]
}, {
"year": 2013,
"months": [{
"account": "00000000004005488736",
"key": "167266973",
"month": 1,
"year": 2013,
"actualNet": 363158,
"actualTotalPay": 224157,
"actualTotalReceived": 587315,
"plannedPay": 2381961,
"plannedReceived": 5431554
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 2,
"year": 2013,
"actualNet": 647244,
"actualTotalPay": 115932,
"actualTotalReceived": 763176,
"plannedPay": 2742325,
"plannedReceived": 3300746
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 3,
"year": 2013,
"actualNet": 838198,
"actualTotalPay": 138910,
"actualTotalReceived": 977109,
"plannedPay": 3707851,
"plannedReceived": 4927375
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 4,
"year": 2013,
"actualNet": 62534,
"actualTotalPay": 10853,
"actualTotalReceived": 73388,
"plannedPay": 1975637,
"plannedReceived": 4229066
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 5,
"year": 2013,
"actualNet": -60645,
"actualTotalPay": 185425,
"actualTotalReceived": 124780,
"plannedPay": 5511678,
"plannedReceived": 1183943
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 6,
"year": 2013,
"actualNet": 764683,
"actualTotalPay": 231857,
"actualTotalReceived": 996541,
"plannedPay": 5306274,
"plannedReceived": 5298879
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 7,
"year": 2013,
"actualNet": 430637,
"actualTotalPay": 124152,
"actualTotalReceived": 554789,
"plannedPay": 5973486,
"plannedReceived": 1294528
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 8,
"year": 2013,
"actualNet": 291700,
"actualTotalPay": 154152,
"actualTotalReceived": 445852,
"plannedPay": 2258045,
"plannedReceived": 2607520
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 9,
"year": 2013,
"actualNet": 404758,
"actualTotalPay": 264789,
"actualTotalReceived": 669547,
"plannedPay": 3939789,
"plannedReceived": 2721807
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 10,
"year": 2013,
"actualNet": 22242,
"actualTotalPay": 102547,
"actualTotalReceived": 124789,
"plannedPay": 5104791,
"plannedReceived": 2179843
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 11,
"year": 2013,
"actualNet": 798272,
"actualTotalPay": 200140,
"actualTotalReceived": 998412,
"plannedPay": 1708034,
"plannedReceived": 5992572
}, {
"account": "00000000004005488736",
"key": "167266973",
"month": 12,
"year": 2013,
"actualNet": 191820,
"actualTotalPay": 133658,
"actualTotalReceived": 325478,
"plannedPay": 2643301,
"plannedReceived": 4597718
}]
}]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment