viewof date = {
const tick = seriesType[compareBy].x === "date" ? updateDate : update;
const svg = d3
.select(DOM.svg(width, height))
.style("-webkit-tap-highlight-color", "transparent")
.on("mousemove touchmove", moved);
svg
.append("g")
.call(xAxis)
.append("text")
.attr("transform", "translate(" + width / 2 + ", -5)")
.style("text-anchor", "middle")
.style("fill", "currentColor")
.style("font-weight", "bold")
.text(
seriesType[compareBy].x === "offset" ? "Days after window opens" : "Date"
);
svg
.append("g")
.call(yAxis)
.append("text")
.attr("transform", `translate(5, ${margin.top})`)
.style("text-anchor", "start")
.style("fill", "currentColor")
.style("font-weight", "bold")
.text("Price, relative");
const rule = svg
.append("g")
.append("line")
.attr("y1", height)
.attr("y2", 0)
.attr("stroke", "black");
const serie = svg
.append("g")
.style("font", "bold 10px sans-serif")
.selectAll("g")
.data(seriesType[compareBy].series)
.join("g");
// series path
serie
.append("path")
.attr("fill", "none")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("stroke", d => z(d.key))
.attr("d", d => line(d.values));
// series label
serie
.append("text")
.datum(d => ({ key: d.key, value: d.values[d.values.length - 1].value }))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-width", 3)
.attr("x", x.range()[1] + 3)
.attr("y", d => y(d.value))
.attr("dy", "0.35em")
.text(d => d.key)
.clone(true)
.attr("fill", d => z(d.key))
.attr("stroke", null);
// endpoint
serie
.append("circle")
.datum(d => ({
key: d.key,
...d.values[d.values.length - 1] //grab all data at that point
}))
.attr("fill", d => z(d.key))
.attr("stroke", "none")
.attr("r", 2)
.attr("cx", d => x(d[seriesType[compareBy].x]))
.attr("cy", d => y(d.value));
d3.transition()
.ease(d3.easeCubicOut)
.duration(1500)
.tween("offset", () => {
const i = d3.interpolate(x.domain()[1], x.domain()[0]);
return t => tick(i(t));
});
function update(index) {
index = Math.round(index);
rule.attr("transform", `translate(${x(index) + 0.5},0)`);
serie.attr("transform", ({ values }) => {
const i = bisect(values, index, 0, values.length - 1);
return `translate(0,${y(1) - y(values[i].value / values[0].value)})`;
});
svg.property("value", index).dispatch("input");
}
function updateDate(date) {
date = d3.utcDay.round(date);
rule.attr("transform", `translate(${x(date) + 0.5},0)`);
serie.attr("transform", ({ values }) => {
const i = bisect(values, date, 0, values.length - 1);
return `translate(0,${y(1) - y(values[i].value / values[0].value)})`;
});
svg.property("value", date).dispatch("input");
}
function moved() {
tick(x.invert(d3.mouse(this)[0]));
d3.event.preventDefault();
}
tick(x.domain()[0]);
return svg.node();
}
// Note that `annual` and `quarterly` seriesTypes below can only happen once `data` has been updated to source all data
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.
