Charts built with D3
Published
Edited
Jul 21, 2020
dataset = d3.csvParse(await FileAttachment("aapl-bollinger.csv").text(), d3.autoType)
horzScale = d3.scaleUtc()
.domain(d3.extent(dataset, (d)=>d.date))
.range([margin.left, width - margin.right])
vertScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d)=>d.upper)])
.range([height - margin.bottom, margin.top])
Area = d3.area()
.x((d)=>horzScale(d.date))
.y0(vertScale(0))
.y1((d)=>vertScale(d.close))
horzAxis = (g)=>g.attr("transform", `translate(0, ${height - margin.bottom})`)
.call(d3.axisBottom(horzScale))
vertAxis = (g)=>g.attr("transform", `translate(${margin.left}, 0)`)
.call(d3.axisLeft(vertScale).ticks(10))
.call((g)=>g.select(".domain").remove())
html`<svg width="${width}" height="${height}">
<g fill="steelblue">
<path d="${Area(dataset)}"/>
</g>
${d3.select(svg`<g>`).call(horzAxis).node()}
${d3.select(svg`<g>`).call(vertAxis).node()}
</svg>`
Area2 = d3.area()
.x((d)=>horzScale(d.date))
.y0((d)=>vertScale(d.lower))
.y1((d)=>vertScale(d.upper))
html`<svg width="${width}" height="${height}">
<g>
<path d="${Area2(dataset)}" fill="#eeee"/>
<path d="${Area2.lineY0()(dataset)}" stroke="green" stroke-width="1" fill="none"/>
<path d="${Area2.lineY1()(dataset)}" stroke="red" stroke-width="1" fill="none"/>
</g>
${d3.select(svg`<g>`).call(horzAxis).node()}
${d3.select(svg`<g>`).call(vertAxis).node()}
</svg>`
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.
