md`interpolated value at date (${day}) ${x.invert(Interpolated.x)}: ${y.invert(Interpolated.y)}`
height = 500
margin = ({top: 20, right: 30, bottom: 30, left: 40})
x = d3.scaleTime()
.domain(d3.extent(data, d => d.date))
.range([margin.left, width - margin.right])
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
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))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(data.y))
line = d3.line()
.defined(d => x(d.date)%300 < 200)
.x(d => x(d.date))
.y(d => y(d.value))
.curve(d3[curveType])
md`## Interpolate between data points`
import {SVGPathInterpolator} from "c47dbd136d77b682"
interpolator = SVGPathInterpolator(line(data, 1))
x.invert(interpolator(500).x)
data = Object.assign((await d3.csv("https://gist.githubusercontent.com/mbostock/14613fb82f32f40119009c94f5a46d72/raw/d0d70ffb7b749714e4ba1dece761f6502b2bdea2/aapl.csv", d3.autoType)).map(({date, close}) => ({date, value: close})), {y: "$ Close"}).filter((d, i) => i%50 == 0)
d3 = require("d3@^5.9")
import {radio} from "@jashkenas/inputs"
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.
