Published
Edited
Mar 11, 2020
1 fork
3 stars
height = 400
innerHeight = height - margin.top - margin.bottom
innerWidth = width - margin.left - margin.right
margin = ({left: 60, right: 30, top: 60, bottom: 60})
lineGenerator = d3.line()
.x(d => x(d.daysLeft))
.y(d => {
let utility = (expectancy * value) / (sensitivity * timeToDeadlineScale(d.daysLeft));
return y(utility)
})
.curve(d3.curveCardinal.tension(0));
areaGenerator = d3.area()
.x(d => x(d.daysLeft))
.y0(socializingValue)
.y1(d => y((expectancy * value) / (sensitivity * timeToDeadlineScale(d.daysLeft))))
.curve(d3.curveCardinal.tension(0));
transition = d3.transition()
.duration(50)
.ease(d3.easeLinear);
xAxis = g => g
.attr('transform', `translate(0,${innerHeight})`)
.call(d3.axisBottom(x).ticks(10).tickFormat(x => `${x}d`))
.call(g => g.select(".domain").remove())
.call(g => g.append('text')
.attr('x', innerWidth)
.attr('y', margin.bottom / 1.2)
.attr('fill', 'black')
.attr('text-anchor', 'end')
.style('font-size', 15)
.style('font-weight', 'bold')
.text('Days until deadline →'));
y = d3.scaleLinear()
.domain([0, 80])
.range([innerHeight, 0]);
x.domain()
x = d3.scaleLinear()
.domain(d3.extent(data, d => d.daysLeft).reverse())
.range([0, innerWidth]);
timeToDeadlineScale = d3.scaleLinear()
.domain([0, data.length])
.range([0, 1]);
data = dateArray.map((d,i, arrayRef) => {
return {date: new Date(d), value: (expectancy * value) / (sensitivity * (arrayRef.length - i)),
daysLeft: arrayRef.length - i}
})
dateArray = getDates(new Date(), (new Date()).addDays(25));
function getDates(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
while (currentDate <= stopDate) {
dateArray.push(new Date (currentDate));
currentDate = currentDate.addDays(1);
}
return dateArray;
}
Date.prototype.addDays = function(days) {
var date = new Date(this.valueOf());
date.setDate(date.getDate() + days);
return date;
}
d3 = require('d3@5')
import {slider, select} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
