margin = ({top: 25, right: 0, bottom: 25, left: 0})
x = d3.scaleLinear()
.domain([0,width/10])
.range([0,width])
xAxis = svg=>svg
.attr("transform", `translate(0,${-margin.bottom})`)
.call(d3.axisBottom(x))
y=d3.scaleLinear()
.domain([height/10,0])
.range([-height,0])
yAxis = svg => svg
.attr("transform",`translate(0,${-margin.bottom})`)
.call(d3.axisRight(y))
height = 300
d3 = require("d3@6")
sim_scrubber = (n_frames) => Scrubber(Array.from({length: n_frames}, (_, i) => i), {
format: i => "Time: " + (i/100),
delay: 10,
autoplay: false,
loop: false
})
import {Scrubber} from "@mbostock/scrubber"
import {slider,checkbox,select,text,button} from "@jashkenas/inputs"
import { knob } from "@toja/knob-input"
import { view } from "@tomlarkworthy/view"
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.
