data = FileAttachment("aapl-bollinger.csv").csv({typed: true})
x = d3.scaleUtc()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.upper)])
.range([height - margin.bottom, margin.top])
{
let path = `M${x(data[0].date)},${y(data[0].close)}`;
for (let i = 1; i < data.length; ++i) {
path += `L${x(data[i].date)},${y(data[i].close)}`;
}
return path;
}
line = d3.line()
.x(d => x(d.date))
.y(d => y(d.close))
line(data)
htl.html`<svg viewBox="0 0 ${width} ${height}">
<path d="${line(data)}" fill="none" stroke="steelblue" stroke-width="1.5" stroke-miterlimit="1"></path>
${d3.select(htl.svg`<g>`).call(xAxis).node()}
${d3.select(htl.svg`<g>`).call(yAxis).node()}
</svg>`
area = d3.area()
.x(d => x(d.date))
.y0(y(0))
.y1(d => y(d.close))
htl.html`<svg viewBox="0 0 ${width} ${height}">
<path fill="steelblue" d="${area(data)}"></path>
${d3.select(htl.svg`<g>`).call(xAxis).node()}
${d3.select(htl.svg`<g>`).call(yAxis).node()}
</svg>`
areaBand = d3.area()
.x(d => x(d.date))
.y0(d => y(d.lower))
.y1(d => y(d.upper))
htl.html`<svg viewBox="0 0 ${width} ${height}">
<path d="${areaBand(data)}" fill="steelblue"></path>
${d3.select(htl.svg`<g>`).call(xAxis).node()}
${d3.select(htl.svg`<g>`).call(yAxis).node()}
</svg>`
lineMiddle = d3.line()
.x(d => x(d.date))
.y(d => y(d.middle))
htl.html`<svg viewBox="0 0 ${width} ${height}">
<path d="${areaBand(data)}" fill="#ddd"></path>
<g fill="none" stroke-width="1.5" stroke-miterlimit="1">
<path d="${lineMiddle(data)}" stroke="#00f"></path>
<path d="${line(data)}" stroke="#000"></path>
</g>
${d3.select(htl.svg`<g>`).call(xAxis).node()}
${d3.select(htl.svg`<g>`).call(yAxis).node()}
</svg>`
htl.html`<svg viewBox="0 0 ${width} ${height}">
<path d="${areaBand(data)}" fill="#ddd"></path>
<g fill="none" stroke-width="1.5" stroke-miterlimit="1">
<path d="${areaBand.lineY0()(data)}" stroke="#00f"></path>
<path d="${areaBand.lineY1()(data)}" stroke="#f00"></path>
</g>
${d3.select(htl.svg`<g>`).call(xAxis).node()}
${d3.select(htl.svg`<g>`).call(yAxis).node()}
</svg>`
arc = d3.arc()
.innerRadius(210)
.outerRadius(310)
.startAngle(([startAngle, endAngle]) => startAngle)
.endAngle(([startAngle, endAngle]) => endAngle)
arc([Math.PI / 2, Math.PI]) // from 90° to 180°
htl.html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;">
${Array.from({length: n}, (_, i) => htl.svg`<path stroke="black" fill="${d3.interpolateRainbow(i / n)}" d="${arc([i / n * 2 * Math.PI, (i + 1) / n * 2 * Math.PI])}"></path>`)}
</svg>`
fruits = [
{name: "🍊", count: 21},
{name: "🍇", count: 13},
{name: "🍏", count: 8},
{name: "🍌", count: 5},
{name: "🍐", count: 3},
{name: "🍋", count: 2},
{name: "🍎", count: 1},
{name: "🍉", count: 1}
]
pieArcData = d3.pie()
.value(d => d.count)
(fruits)
arcPie = d3.arc()
.innerRadius(210)
.outerRadius(310)
.padRadius(300)
.padAngle(2 / 300)
.cornerRadius(8)
htl.html`<svg viewBox="-320 -320 640 640" style="max-width: 640px;" text-anchor="middle" font-family="sans-serif">
${pieArcData.map(d => htl.svg`
<path fill="steelblue" d="${arcPie(d)}"></path>
<text fill="white" transform="translate(${arcPie.centroid(d).join(",")})">
<tspan x="0" font-size="24">${d.data.name}</tspan>
<tspan x="0" font-size="12" dy="1.3em">${d.value.toLocaleString("en")}</tspan>
</text>
`)}
</svg>`
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(height / 40))
.call(g => g.select(".domain").remove())
height = 240
margin = ({top: 20, right: 30, bottom: 30, left: 40})
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.
