chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append("g").call(xAxis);
svg.append("g").call(yAxis);
/*
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", randomColor)
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
*/
var newline = d3
.line()
.defined(d => !(d.TSG_T_Avg < 8))
.x(d => x(new Date(d.time)))
.y(d => y(d.TSG_T_Avg));
var newdata = combinded.map((p, index) =>
index === combinded.length - 1 ? [p] : [p, combinded[index + 1]]
);
var bounds = d3.extent(combinded, d => d.TSG_T_Avg);
var interval = bounds[1] - bounds[0];
console.log(data, newdata, bounds, interval);
var gradientColor = p => {
// console.log(p, p[0].TSG_T_Avg, p[0].per90);
if (p[0].TSG_T_Avg > p[0].per90 && p[0].TSG_T_Avg < 10.8) {
return "#feb24c";
} else if (p[0].TSG_T_Avg > 10.8) {
return "#f03b20";
} else {
return "steelblue";
}
// return d3.interpolateHslLong("red", "blue")(
// (p[0].TSG_S_Avg - bounds[0]) / interval
// );
};
const makeOpacity = d => {
if (d[0].TSG_T_Avg > d[0].per90 && d[0].TSG_T_Avg < 10.8) {
return 1;
} else if (d[0].TSG_T_Avg > 10.8) {
return 1;
} else {
return 1;
}
};
svg
.selectAll('path')
.data(newdata)
.enter()
.append('path')
.attr('d', p => newline(p))
.style("opacity", d => makeOpacity(d))
.attr('stroke', p => gradientColor(p)); //randomColor);
return svg.node();
}
combinded[0]
x = d3
.scaleTime()
.domain(d3.extent(combinded, d => new Date(d.time)))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(combinded, d => d.TSG_T_Avg))
.nice()
.range([height - margin.bottom, margin.top])
yAxis = g =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(8))
.call(g => g.select(".domain").remove())
.call(g =>
g
.select(".tick:last-of-type text")
.clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y)
)
import { combinded } from '8258855b097f221a'
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.
