31:T743,md`# Intervals Timeline - SVG See also: https://observablehq.com/@severo/intervals-timeline --- A control to show intervals on one line, and select a time instant. This control implements the [Zoomable Timeline specification](https://observablehq.com/d/f48b7d02f25f093c). Install ~~~js import {intervals} from '90116279eaf6d983' ~~~ 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) `32:T1934,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 svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .attr('width', width) .attr('height', height) .classed('intervals', true); const svgId = DOM.uid().id; svg.attr('id', svgId); svg.node().appendChild(html` `); const control = svg.node(); const controlInvalidation = disposal(control); const zoomBehavior = d3 .zoom() .scaleExtent(zoomScaleExtent) .translateExtent([ [zoomTranslateExtent[0], 0], [zoomTranslateExtent[1], 0] ]); // a g element, with g children (one per interval) const intervalsGroup = svg.append('g').classed('intervals-group', true); function updateData(data) { intervalsGroup .selectAll('g') .data(data, JSON.stringify) .join( enter => enter .append('g') .classed('interval', true) .attr('transform', d => `translate(0, ${height / 2})`) .append('rect') .attr('x', 0) // init .attr('y', -rectHeight / 2) .attr('width', 1) // init .attr('height', rectHeight) .attr('fill', color) .attr('strokeWidth', strokeWidth) .attr('stroke', (d, i) => d3.color(color(d, i)).darker()), update => update, exit => exit.remove() ); } function drawIntervals() { const { k, x: tx } = d3.zoomTransform(svg.node()); //intervalsGroup.attr("transform", `translate(${tx}, 0) scale(${k}, 1)`); intervalsGroup .selectAll('rect') .attr('x', d => tx + k * Math.min(startof(d), endof(d))) .attr('width', d => Math.max(k * Math.abs(endof(d) - startof(d)), minWidth) ); } 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); svg.call(zoomBehavior.transform, transform); zoomBehavior.on("zoom", eventListener); } // init updateData(data); updateZoom(); drawIntervals(); // 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(); } drawIntervals(); } 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 originalElement = d3.select(event.target.closest('g.interval')); if (originalElement.size() !== 1) return; state.set('currentValue', restrictValue(startof(originalElement.datum())), { by: 'click' }); control.dispatchEvent(new Event("input")); // animate the selected element originalElement .select('rect') .transition() .attr('y', -rectHeight) .attr('height', rectHeight * 2) .transition() .attr('y', -rectHeight / 2) .attr('height', rectHeight); } svg.selectAll('.interval').on("click", onIntervalClick); controlInvalidation.then(() => svg.selectAll('.interval').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)); svg.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: () => intervalsGroup.selectAll('g').data(), set: value => { // call validateData? updateData(value); } }); // Return the control return control; }33:[] 2f:{"title":"Intervals Timeline - SVG","cells":[{"id":0,"value":"$31","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: 10\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/23: add a stroke of 1px width\n- 2021/03/23: add minWidth in pixels\n- 2021/03/21: add startof and endof accessors\n- 2021/03/16: don't check for equality when setting the properties, and never emit events in setters (zoomTransform)\n- 2021/01/28: fix color to take the datum as an input, not datum.start\n- 2021/01/27: fix color validation to accept strings\n- 2021/01/26: add a zoomTranslateExtent option\n- 2021/01/26: don't limit anymore the zoom range based on [min, max]\n- 2021/01/25: \\`.data\\` getter and setter\n- 2021/01/19: creation\n\n### TODO\n\n- don't filter the data in .data getter: we should return what has been set, not what is seen in the zoom range\n- show the current time\n- add precision options\n- add height option\n- add a tooltip with the hovered interval value\n- visually represent the min and max values\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":3116,"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":3119,"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":"$32","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":"$W33","stdlib":"1","titling":"auto"}