30:T7e9,md`# Intervals Timeline A control to show intervals on one line, and select a time instant. Mouse-scroll when hovering the timeline to zoom in or out, click on an interval to select the starting time. This control implements the [Zoomable Timeline specification](https://observablehq.com/d/f48b7d02f25f093c). Install ~~~js import {intervals} from '@severo/intervals-timeline' ~~~ Use ~~~js viewof t = intervals(options) ~~~ --- ### Options All properties in [Zoomable Timeline specification](https://observablehq.com/d/f48b7d02f25f093c) and:

\`data\`: an iterable of intervals. The rendering order is the iterable order: the first interval is painted first and might be occulted behind the following intervals. Defaults to an empty array []
\`startof\`: a function that takes an interval and returns the value of the start value. Defaults to \`d => d.start\`
\`endof\`: a function that takes an interval and returns the value of the end value. Defaults to \`d => d.end\`
\`color\`: a [CSS Color Module Level 3](http://www.w3.org/TR/css3-color/#colorunits) specifier string, or a function that takes an interval object and returns a color string. Defaults to \`(d, i) => '#CCCCCC88'\`
\`minWidth\`: the minimal width of each interval, in pixels. Defaults to 0
\`height\`: height of the control in pixels. Defaults to 20
\`rectHeight\`: height of the interval rectangles, that are vertically centered, in pixels. Defaults to 10

### Returns The control. It's an Observable "view": it has a \`value\` getter, and it dispatches an \`input\` event on interactions. ### Getters and setters The \`.data\` option can be get and set. ### Events See [Zoomable Timeline specification](https://observablehq.com/d/f48b7d02f25f093c) ### Note This control uses a canvas. See https://observablehq.com/@severo/intervals-timeline-svg for an SVG version. `31:T150f,function intervals(options = {}) { // TODO: rename the option or the function in order to avoid confusion? // Validation const { value: currentValue, min, max, step, width, zoomRange, zoomTranslateExtent, zoomScaleExtent, zoomDisabled, data, color, startof, endof, minWidth, height, rectHeight } = validate(options); const pixelRange = [0, width]; const strokeWidth = 1; // We use the state as an intermediary to throttle the interactions const initState = { value: { currentValue, zoomRange }, timeout: 0 }; const state = createState(initState); function clamp(v) { return Math.min(Math.max(v, min), max); } function snap(v) { const reference = min === -Infinity ? 0 : min; const n = Math.round((v - reference) / step); const u = reference + n * step; return u > max ? u - step : u; } const restrictValue = step === 'any' ? clamp : v => snap(clamp(v)); const zoomedScale = d3.scaleLinear().range(pixelRange); function getZoomRangeFromTransform(transform) { const { k, x: tx } = transform; const za = -tx / k; const zb = (width - tx) / k; return [za, zb]; } function getTransformFromZoomRange(zoomRange) { const [za, zb] = zoomRange; const k = width / (zb - za); const tx = -za * k; return d3.zoomIdentity.translate(tx, 0).scale(k); } // Create the control const ctx = DOM.context2d(width, height); // uses the current devicePixelRatio const canvas = ctx.canvas; canvas.classList.add('intervals'); const control = canvas; const controlInvalidation = disposal(control); const zoomBehavior = d3 .zoom() .scaleExtent(zoomScaleExtent) .translateExtent([ [zoomTranslateExtent[0], 0], [zoomTranslateExtent[1], 0] ]); const y0 = (height - rectHeight) / 2; function draw() { const { k, x: tx } = d3.zoomTransform(canvas); ctx.clearRect(0, 0, canvas.width, canvas.height); for (const [i, d] of canvas.userData.data.entries()) { ctx.beginPath(); ctx.rect( tx + k * Math.min(startof(d), endof(d)), y0, Math.max(k * Math.abs(endof(d) - startof(d)), minWidth), rectHeight ); ctx.lineWidth = strokeWidth; ctx.fillStyle = color(d, i); ctx.fill(); ctx.strokeStyle = d3.color(color(d, i)).darker(); ctx.stroke(); } } function updateZoom() { const transform = getTransformFromZoomRange(state.zoomRange); // setters must not emit events, but zoomBehavior.transform does // we thus stop listening to the "start", "zoom" and "end" events meanwhile, // and enable the event listeners back afterwards // note that we know that only 1 listener is registered for 'zoom', // and 0 for 'start' and 'end', so we keep the code simple const eventListener = zoomBehavior.on("zoom"); zoomBehavior.on("zoom", null); d3.select(canvas).call(zoomBehavior.transform, transform); zoomBehavior.on("zoom", eventListener); } // init canvas.userData = { data }; updateZoom(); draw(); // React to changes in the state // function onStateCurrentValue(event) { // // nothing to redraw // } // state.addEventListener('currentValue', onStateCurrentValue); // controlInvalidation.then(() => // state.removeEventListener('currentValue', onStateCurrentValue) // ); function onStateZoomRange(event) { if (event.detail.by !== zoomBehavior) { updateZoom(); } draw(); } state.addEventListener('zoomRange', onStateZoomRange); controlInvalidation.then(() => state.removeEventListener('zoomRange', onStateZoomRange) ); // Interactions that modify the current value (click, setter) function onIntervalClick(event) { // ignore the click if a drag has been started - https://observablehq.com/@d3/click-vs-drag if (event.defaultPrevented) return; // dragged const [x] = d3.pointer(event); const { k, x: tx } = d3.zoomTransform(canvas); state.set('currentValue', (x - tx) / k, { by: 'click' }); control.dispatchEvent(new Event("input")); } d3.select(canvas).on("click", onIntervalClick); controlInvalidation.then(() => d3.select(canvas).on('click', null)); Object.defineProperty(control, 'value', { enumerable: true, get: () => state.currentValue, set: value => { state.set('currentValue', value, { by: 'outside' }); } }); // Interactions that change the zoom range (zoom, setter) if (!zoomDisabled) { function onZoomBehaviorZoom(event) { state.set('zoomRange', getZoomRangeFromTransform(event.transform), { by: zoomBehavior }); control.dispatchEvent(new Event("zoomed")); } zoomBehavior.on("zoom", onZoomBehaviorZoom); controlInvalidation.then(() => zoomBehavior.on("zoom", null)); d3.select(canvas).call(zoomBehavior); } Object.defineProperty(control, 'zoomRange', { enumerable: true, get: () => state.zoomRange, set: value => { state.set('zoomRange', value, { by: 'outside' }); } }); // Interactions that change the data Object.defineProperty(control, 'data', { enumerable: true, get: () => canvas.userData.data, set: value => { // call validateData? canvas.userData.data = value; draw(); } }); // Return the control return control; }32:[] 2e:{"title":"Intervals Timeline","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1995,"value":"md`## Examples\n\nControl with default options:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2002,"value":"viewof t1 = intervals()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2004,"value":"t1","pinned":true,"hidden":false,"mode":"ojs"},{"id":2007,"value":"md`Control with all the options:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2981,"value":"viewof t2.data","pinned":true,"hidden":false,"mode":"ojs"},{"id":2983,"value":"// Uncomment\n//\n// (viewof t2.data = [\n// // { start: -1, end: 1 },\n// // { start: 0, end: 2 },\n// { start: 3, end: 6 }\n// // { start: 2.5, end: 7 }\n// ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":790,"value":"viewof t2 = {\n const min = -2;\n const max = 10;\n const colorScale = d3\n .scaleLinear()\n .domain([min, max])\n .range([\"#a52a2a88\", \"#4682b488\"])\n .interpolate(d3.interpolateHcl);\n return intervals({\n value: 5.72,\n min,\n max,\n step: 0.1,\n width: 600,\n zoomRange: [min, max],\n zoomTranslateExtent: [-5, 11],\n zoomScaleExtent: [1, 10000],\n zoomDisabled: false,\n data: [\n //{ start: -1, end: 1 },\n { début: 0, end: 2 },\n { début: 1, end: 2 },\n { début: 3, end: 5 }\n // { start: 2.5, end: 7 }\n ],\n color: d => colorScale(d.début),\n startof: d => d.début,\n endof: d => d.end,\n height: 12,\n rectHeight: 8\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1052,"value":"t2","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`---\n\n### Credits\n\n_Developed for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage._\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`\n### CHANGELOG\n\n- 2021/05/11: published\n- 2021/03/29: add height and rectHeight options\n- 2021/03/27: fork of https://observablehq.com/d/90116279eaf6d983\n\n### TODO\n\n See upstream.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2322,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2326,"value":"defaultValues = ({\n data: [],\n color: '#CCCCCC88',\n startof: d => d.start,\n endof: d => d.end,\n minWidth: 0,\n height: 20,\n rectHeight: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2335,"value":"function validateData(value, { defaultValue, mandatory = false }) {\n const definedValue = getDefinedValue({ value, defaultValue, mandatory });\n if (!isIterable(definedValue)) {\n throw new Error('must be an iterable');\n }\n return [...definedValue];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2877,"value":"function validateColor(value, { defaultValue, mandatory = false }) {\n const definedValue = getDefinedValue({ value, defaultValue, mandatory });\n const color =\n typeof definedValue === 'string' ? (d, i) => definedValue : definedValue;\n if (typeof color != 'function') {\n throw new Error('must be a string or a function');\n }\n return color;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3057,"value":"function validateStartof(value, { defaultValue, mandatory = false }) {\n const startof = getDefinedValue({ value, defaultValue, mandatory });\n if (typeof startof != 'function') {\n throw new Error('must be a function');\n }\n return startof;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3060,"value":"function validateEndof(value, { defaultValue, mandatory = false }) {\n const endof = getDefinedValue({ value, defaultValue, mandatory });\n if (typeof endof != 'function') {\n throw new Error('must be a function');\n }\n return endof;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3086,"value":"function validateMinWidth(value, { defaultValue, mandatory = false }) {\n const minWidth = +getDefinedValue({ value, defaultValue, mandatory });\n if (isNaN(minWidth)) {\n throw new Error('must be a number');\n }\n return minWidth;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3138,"value":"function validateHeight(value, { defaultValue, mandatory = false }) {\n const height = +getDefinedValue({ value, defaultValue, mandatory });\n if (isNaN(height)) {\n throw new Error('must be a number');\n }\n return height;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3141,"value":"function validateRectHeight(value, { defaultValue, mandatory = false }) {\n const rectHeight = +getDefinedValue({ value, defaultValue, mandatory });\n if (isNaN(rectHeight)) {\n throw new Error('must be a number');\n }\n return rectHeight;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"function validate(options) {\n return {\n ...validateCommon(options),\n data: validateData(options.data, {\n mandatory: false,\n defaultValue: defaultValues.data\n }),\n startof: validateStartof(options.startof, {\n mandatory: false,\n defaultValue: defaultValues.startof\n }),\n endof: validateEndof(options.endof, {\n mandatory: false,\n defaultValue: defaultValues.endof\n }),\n color: validateColor(options.color, {\n mandatory: false,\n defaultValue: defaultValues.color\n }),\n minWidth: validateMinWidth(options.minWidth, {\n mandatory: false,\n defaultValue: defaultValues.minWidth\n }),\n height: validateHeight(options.height, {\n mandatory: false,\n defaultValue: defaultValues.height\n }),\n rectHeight: validateRectHeight(options.rectHeight, {\n mandatory: false,\n defaultValue: defaultValues.rectHeight\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2015,"value":"import {\n validate as validateCommon,\n getDefinedValue,\n isIterable\n} from 'f48b7d02f25f093c'","pinned":false,"hidden":false,"mode":"ojs"},{"id":774,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2403,"value":"import { intrinsicHeight, intrinsicWidth } from '@severo/canvasimagesource'","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"import { createState } from '70f545ce6ecf7963'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1187,"value":"d3 = require('d3@6')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2681,"value":"import { disposal } from '@mbostock/disposal'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}