Published
Edited
Sep 10, 2021
viewof date = {
const svg = d3.select(DOM.svg(width, height))
.style("-webkit-tap-highlight-color", "transparent")
.on("mousemove touchmove", moved);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
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(series)
.join("g");
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));
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);
d3.transition()
.ease(d3.easeCubicOut)
.duration(1500)
.tween("date", () => {
const i = d3.interpolateDate(x.domain()[1], x.domain()[0]);
return t => update(i(t));
});
function update(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(event) {
update(x.invert(d3.pointer(event, this)[0]));
d3.event.preventDefault();
}
update(x.domain()[0]);
return svg.node();
}
height = 600
margin = ({top: 20, right: 40, bottom: 30, left: 40})
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
.clamp(true)
y = d3.scaleLog()
.domain([1 / k, k])
.rangeRound([height - margin.bottom, margin.top])
k = d3.max(d3.group(data, d => d.name), ([, group]) => d3.max(group, d => d.value) / d3.min(group, d => d.value))
z = d3.scaleOrdinal(d3.schemeCategory10).domain(data.map(d => d.name))
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)
.ticks(null, x => +x.toFixed(6) + "×"))
.call(g => g.selectAll(".tick line").clone()
.attr("stroke-opacity", d => d === 1 ? null : 0.2)
.attr("x2", width - margin.left - margin.right))
.call(g => g.select(".domain").remove())
parseDate = d3.utcParse("%Y-%m-%d")
formatDate = d3.utcFormat("%B, %Y")
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.value))
bisect = d3.bisector(d => d.date).left
series = d3.groups(data, d => d.name).map(([key, values]) => {
const v = values[0].value;
return {key, values: values.map(({date, value}) => ({date, value: value / v}))};
})
data = d3.merge(await Promise.all([FileAttachment("AAPL.csv"), FileAttachment("AMZN.csv"), FileAttachment("GOOG.csv"), FileAttachment("IBM.csv"), FileAttachment("MSFT.csv")].map(async file => d3.csvParse(await file.text(), d => {
const date = parseDate(d["Date"]);
return {name: file.name.slice(0, -4), date, value: +d["Close"]};
}))))
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.
