The avatar for @severo
Sylvain Lesage
Software engineer at Hugging Face. Prototyping here with JS, d3, three.js.
Published
Inputs
Edited
May 12, 2021
Fork of Intervals Timeline - SVG
Importers
Inputs
Buttons TimelineSpring Ruler TimelineIntervals TimelineUnbind two synchronized inputsInput: draw points on imageToggle inputVideo Time Zoom
Points Timeline
Intervals Timeline - SVGThumbnails TimelineTimeline controlsRuler TimelineStack TimelineInputs + setterselectScaleChromaticLog sliderInput: Draw an arrow on an imageInput: Draw an arrow on a mapDetached video controlsInvisible Capture AreaPointer trace on imagePointer traceStore and Synchronized ViewsInput: Two-variables inputInput: move skeleton jointsInput: draw a box on image
Insert cell
Insert cell
Insert cell
viewof t1 = points()
Insert cell
t1
Insert cell
Insert cell
viewof t2.data
Insert cell
// Uncomment
//
// (viewof t2.data = [{ value: -1 }, { value: 0 }])
Insert cell
viewof t2 = {
const min = -2;
const max = 10;
const colorScale = d3
.scaleLinear()
.domain([min, max])
.range(["blue", "red"])
.interpolate(d3.interpolateHcl);
const color = d => colorScale(d);
return points({
value: 5.72,
min,
max,
step: 0.1,
width: 600,
zoomRange: [min, max],
zoomTranslateExtent: [-5, 11],
zoomScaleExtent: [1, 10000],
zoomDisabled: false,
data: [-1, 0, 2, 4, 1.9],
color,
snap: true
});
}
Insert cell
t2
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
defaultValues = ({
data: [],
color: '#CCCCCC88',
snap: true,
valueof: d => d
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more