rawData = FileAttachment("aapl.csv").csv({ typed: true })
chart = {
const canvasDimensions = {
width: 928,
height: 500,
marginTop: 10,
marginRight: 10,
marginBottom: 20,
marginLeft: 40
};
function normalizeData(data) {
return d3.map(data, (d) => ({
date: new Date(d.date),
close: parseFloat(d.close)
}));
}
function drawCanvas() {
const { width, height } = canvasDimensions;
return d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
}
const horizontalAxis = {
getScale({ data }) {
const { marginLeft, width, marginRight } = canvasDimensions;
const xDomain = d3.extent(d3.map(data, (d) => d.date));
const xRange = [marginLeft, width - marginRight];
const xScale = d3.scaleUtc().domain(xDomain).range(xRange);
return { xDomain, xRange, xScale };
},
draw({ data, svg }) {
const { width, height, marginBottom } = canvasDimensions;
const { xScale } = this.getScale({ data });
const xAxis = d3
.axisBottom(xScale)
.ticks(width / 80)
.tickSizeOuter(0);
svg
.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(xAxis);
}
};
const verticalAxis = {
getScale({ data }) {
const { height, marginBottom, marginTop } = canvasDimensions;
const yDomain = [0, d3.max(d3.map(data, (d) => d.close))];
const yRange = [height - marginBottom, marginTop];
const yScale = d3.scaleLinear().domain(yDomain).range(yRange);
return { yDomain, yRange, yScale };
},
draw({ data, svg }) {
const { height, marginLeft, width, marginRight } = canvasDimensions;
const { yScale } = this.getScale({ data });
const yAxis = d3.axisLeft(yScale).ticks(height / 40);
const yLabel = "↑ Daily close ($)";
svg
.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(yAxis)
.call((g) => g.select(".domain").remove())
.call((g) =>
g
.selectAll(".tick line")
.clone()
.attr("x2", width - marginLeft - marginRight)
.attr("stroke-opacity", 0.1)
)
.append("text")
.attr("x", -marginLeft)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start")
.text(yLabel);
}
};
function drawContent({ data, svg }) {
const { getScale: getHorizontalScale } = horizontalAxis;
const { getScale: getVerticalScale } = verticalAxis;
const I = d3.range(d3.map(data, (d) => d.date).length);
const { xScale } = getHorizontalScale({ data });
const { yScale } = getVerticalScale({ data });
// Construct a line generator
const line = d3
.line()
.x((i) => xScale(d3.map(data, (d) => d.date)[i]))
.y((i) => yScale(d3.map(data, (d) => d.close)[i]));
svg
.append("path")
.attr("d", line(I))
.attr("fill", "none")
.attr("stroke", "#2e835b")
.attr("stroke-width", 1.5)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round")
.attr("stroke-opacity", 1);
}
// 1. Normalize the data
const normalizedData = normalizeData(rawData);
// 2. Draw the canvas
const canvas = drawCanvas();
// 3. Draw the axes
horizontalAxis.draw({ data: normalizedData, svg: canvas });
verticalAxis.draw({ data: normalizedData, svg: canvas });
// 4. Draw the content
drawContent({ data: normalizedData, svg: canvas });
// Always be rendering
return canvas.node();
}
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.
