rounded = false
width = height * 4
height = 200
paramsA = [
[targetDataParam, []], // only target
[targetDataParam, [[]]], // tartget & empty ride
[null, [ride]], // only rides
[targetDataParam, [ride]], // target and ride
[targetDataParam, [ride, ride]] // target and rides
]
params = paramsA[0]
targetData = params[0] || []
ridesData = params[1] || []
data = params[1] && params[1][0] && params[1][0].length && params[1][0] || params[0]
margin = ({top: 0, right: 1, bottom: 0, left: 1})
ride = dataRaw.xLabels.map((date, i) => ({
date: date.split(":")[0]*60 + +date.split(":")[1], value: dataRaw.linegraph.Output[i]}))
xDomain = ridesData.reduce((acc, curr) => d3.extent(acc.concat(d3.extent(curr, d=>d.date))), d3.extent(targetData, d=>d.date))
x = d3.scaleLinear()
.domain(xDomain)
.range([margin.left, width - margin.right])
invert = x => data.reduce(function(prev, curr) {
return (Math.abs(curr.date - x) < Math.abs(prev.date - x) ? curr : prev);
});
yDomain = ridesData.reduce((acc, curr) => d3.extent(acc.concat(d3.extent(curr, d=>d.value))), d3.extent(targetData, d=>d.value))
y = d3.scaleLinear()
.domain(yDomain)
.range([height - margin.bottom, margin.top])
line = d3.line()
.curve(d3.curveMonotoneX)
.defined(d => !isNaN(d.value))
.x(d => x(d.date))
.y(d => y(d.value))
ftp = 285
color = d3.scaleThreshold([.56, .76, .91, 1.06, 1.21, 1.5].map(i => i * ftp / yDomain[1]),["#dbdbdb","#96d48c","#fed797","#fec57f","#fea494","#fd887d", "#fd5e6d"])
targetDataParam = targetDataRaw.map(([date, value]) => ({date, value: value * ftp}))
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call(g => g.select(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").append("tspan").text(data.y))
d3 = require("d3@6")
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.
