2b:null 2c:["$","title",null,{"children":"Timeline | notanaccent | Observable"}] 31:Tf73,//template: https://github.com/d3/d3-axis/blob/master/src/axis.js function timeline(orient = "Top", scale = d3.scaleTime()) { const charAspectRatio = 1.5, translateX = shift => `translate(${shift},0)`, translateR = shift => `rotate(90)translate(0,-12)`, translateL = shift => `rotate(-90)translate(0,-12)`; let anchor = [0, 0], format = formatLibrary.none, fontPx = 18, MF = defaultMF, tag = "timeline" + orient, clipID = "clip-" + tag, transform = orient === "Top" || orient === "Bottom" ? translateX : orient === "Right" ? translateR : translateL; function axis(context) { scale.domain().map(a => (typeof a == "number" ? new Date(a) : a)); let selection = context.selection ? context.selection() : context, timeline = selection.selectAll("." + tag).data([null]), clipEnter = selection .selectAll('#' + clipID) .data([null]) .enter(), d3Axis; const range = scale.range(), domain = scale.domain(), pd = diff(range) / diff(domain); // pixels per ms; format = selectFormatByCD(MF, (pd / fontPx) * charAspectRatio); const shift = (scale(+domain[0] + format.span) - scale(+domain[0])) / 2; const farLeft = +scale.domain()[0] - format.span; //format.interval.offset(+scale.domain()[0], -1); const rangeStep = scale.range()[0] - scale(farLeft); timeline .join(enter => enter.insert("g").attr("class", tag)) .attr( 'transform', orient === "Top" || orient == "Bottom" ? `translate(${anchor[0]},${anchor[1]})` : `translate(${anchor[0]},${anchor[1]})` ) .attr("clip-path", `url(#${clipID})`) .style("font-size", fontPx + "px") .call( d3["axis" + orient]( scale .copy() .domain([farLeft, scale.domain()[1]]) .range([scale(farLeft), scale.range()[1]]) ) .ticks(format.interval) .tickFormat(format.label) ) .call(g => g .selectAll('text') .attr( 'transform', transform(Math.min(rangeStep / 2, diff(scale.range()) / 2)) ) ) .call(g => { if (orient === "Top") { g.select("path").attr( "d", `M0.5,-6V0.5H${diff(scale.range()) - 1}V-6` ); } else if (orient === "Bottom") { g.select("path").attr("d", `M0.5,6V0.5H${diff(scale.range()) - 1}V6`); } else if (orient === "Right") { g.select("path").attr("d", `M6,0.5H0.5V${diff(scale.range()) - 1}H6`); } else if (orient === "Left") { g.select("path").attr( "d", `M-6,0.5H0.5V${diff(scale.range()) - 1}H-6` ); } }); clipEnter .append("clipPath") .attr("id", clipID) .append("rect") .attr("x", orient === "Top" || orient === "Bottom" ? anchor[0] : -1e4) .attr("y", orient === "Left" || orient === "Right" ? anchor[1] : -1e4) .attr( "width", orient == "Top" || orient == "Bottom" ? diff(scale.range()) : 2e4 ) .attr( "height", orient == "Left" || orient == "Right" ? diff(scale.range()) : 2e4 ); } axis.scale = function(_) { return arguments.length ? ((scale = _), axis) : scale; }; axis.orient = function(_) { return arguments.length ? ((orient = _), axis) : orient; }; axis.anchor = function(_) { return arguments.length ? ((anchor = _), axis) : anchor; }; axis.format = function(_) { return arguments.length ? ((format = _), axis) : format; }; axis.fontPx = function(_) { return arguments.length ? ((fontPx = _), axis) : fontPx; }; axis.MF = function(_) { return arguments.length ? ((MF = _), axis) : MF; }; axis.tag = function(_) { return arguments.length ? ((tag = _), axis) : tag; }; return axis; }32:T540,rootLabel = function(scale = d3.scaleLinear) { let MF = rootMF, fontPx = 18, visible = true, anchor = [0, 0]; function me(context) { const selection = context.selection ? context.selection() : context, rootFormat = selectFormatBySpan(MF, diff(scale.domain())); selection .selectAll(".rootLabel") .data([null]) .join(enter => { const g = enter .insert("g") .attr("class", "rootLabel") .style("font-size", fontPx + "px") .style("font-style", "italic") .style("font-align", "mid") .attr("text-anchor", "end") .attr('transform', `translate(${anchor[0]},${anchor[1]})`); g.insert("text") .style("alignment-baseline", "middle") .attr("dx", -10); return g; }) .select("text") .attr("visibility", visible ? "visible" : "hidden") .text(rootFormat.label(scale.domain()[0])); } me.anchor = function(_) { return arguments.length ? ((anchor = _), me) : anchor; }; me.fontPx = function(_) { return arguments.length ? ((fontPx = _), me) : fontPx; }; me.scale = function(_) { return arguments.length ? ((scale = _), me) : scale; }; me.visible = function(_) { return arguments.length ? ((visible = _), me) : visible; }; return me; }33:T5ba,grid = function(scale = d3.scaleLinear) { let dim = "x", stretch = 1000, visible = true, MF = defaultMF, fontPx = 18, charAspectRatio = 1.7; function me(context) { const selection = context.selection ? context.selection() : context, otherDim = dim == "x" ? "y" : "x", pd = diff(scale.range()) / diff(scale.domain()), // pixels per ms; format = selectFormatByCD(MF, (pd / fontPx) * charAspectRatio); selection .selectAll(".grid") .data([null]) .join(enter => enter .insert("g") .attr("class", "grid") .style("stroke", "currentColor") .style("stroke-opacity", 0.3) .style("stroke-dasharray", 5) ) .selectAll("line") .data(scale.ticks(format.interval)) .join("line") .attr("visibility", visible ? "visible" : "hidden") .attr(dim + "1", t => 0.5 + scale(t)) .attr(dim + "2", t => 0.5 + scale(t)) .attr(otherDim + "2", stretch); } me.dim = function(_) { return arguments.length ? ((dim = _), me) : dim; }; me.stretch = function(_) { return arguments.length ? ((stretch = _), me) : stretch; }; me.MF = function(_) { return arguments.length ? ((MF = _), me) : MF; }; me.scale = function(_) { return arguments.length ? ((scale = _), me) : scale; }; me.visible = function(_) { return arguments.length ? ((visible = _), me) : visible; }; return me; }34:T601,grouping = function(tag = "grouping") { let i = 0, children = {}, properties = {}; function root(context) { const selection = context.selection ? context.selection() : context, group = selection .selectAll("." + tag) .data([null]) .join("g") .attr("class", tag) .selectAll("g .partition") .data(Object.keys(children)) .join("g") .attr("class", d => "partition " + d) .each(function(d) { d3.select(this).call((g, varargin) => children[d](g, varargin)); }); return group; } root.tag = function(_) { return arguments.length ? ((tag = _), root) : tag; }; root.children = function(_) { return arguments.length ? ((children = _), root) : children; }; root.child = function(name, _) { return arguments.length > 1 ? ((children[name] = _), root) : children[name]; }; root.method = function(method, setter) { this[method] = function(_) { if (typeof setter === 'function' && typeof _ !== 'undefined') { setter(children, _); } return arguments.length ? ((properties[method] = _), root) : properties[method]; }; return root; }; root.remove = function(_) { return context => { const selection = context.selection ? context.selection() : context, group = selection.selectAll("." + tag); return arguments.length ? group.select("g .partition ." + _).remove() : group.remove(); }; }; return root; }35:T1c75,//https://github.com/d3/d3-scale/blob/v2.2.2/README.md#time_ticks //https://github.com/d3/d3-time-format/blob/v2.2.3/README.md#locale_format formatLibrary = { let me = { none: { interval: d3.timeYear.every(1e5), // d3 time interval label: () => "", // Formatting function, eg. d3.timeFormat() characters: 0 // Maximum characters that the label will required }, decaSecond: { interval: d3.timeMillisecond.every(100), label: t => d3.timeFormat("%S.")(t) + d3 .timeFormat("%L")(t) .slice(0, 1), characters: 4 }, shortSecond: { interval: d3.timeSecond.every(1), label: t => d3.timeFormat("%Ss")(t), characters: 3 }, secondly: { interval: d3.timeSecond.every(1), label: d3.timeFormat("%H:%M:%S"), characters: 8 }, fiveSecondly: { interval: d3.timeSecond.every(5), label: d3.timeFormat("%H:%M:%S"), characters: 8 }, tenSecondly: { interval: d3.timeSecond.every(10), label: d3.timeFormat("%H:%M:%S"), characters: 8 }, quarterMinutely: { interval: d3.timeSecond.every(15), label: d3.timeFormat("%H:%M:%S"), characters: 8 }, halfMinutely: { interval: d3.timeSecond.every(30), label: d3.timeFormat("%H:%M:%S"), characters: 8 }, minutely: { interval: d3.timeMinute.every(1), label: d3.timeFormat("%H:%M"), characters: 5 }, fiveMinutely: { interval: d3.timeMinute.every(5), label: d3.timeFormat("%H:%M"), characters: 5 }, quarterHourly: { //21:15 interval: d3.timeMinute.every(15), label: d3.timeFormat("%H:%M"), characters: 5 }, hourly: { interval: d3.timeHour.every(1), label: d3.timeFormat("%H:00"), characters: 5 }, fourHourly: { interval: d3.timeHour.every(4), label: d3.timeFormat("%H:00"), characters: 5 }, quarterDaily: { interval: d3.timeHour.every(6), label: d3.timeFormat("%I%p"), characters: 4 }, fullDate: { interval: d3.timeDay.every(1), label: d3.timeFormat("%e %B"), characters: 12 }, weekDay: { interval: d3.timeDay.every(1), label: d3.timeFormat("%A"), characters: 9 }, shortDate: { interval: d3.timeDay.every(1), label: d3.timeFormat("%e %b"), characters: 6 }, dayInYear: { interval: d3.timeDay.every(1), label: d3.timeFormat("D%j"), characters: 4 }, shortWeekDay: { interval: d3.timeDay.every(1), label: d3.timeFormat("%a"), characters: 3 }, weekDayLetter: { interval: d3.timeDay.every(1), label: d => d3.timeFormat("%a")(d)[0], characters: 1.2 //weird right? }, weekInYear: { interval: d3.timeWeek.every(1), label: d3.timeFormat("Week %V"), characters: 7 }, shortWeekDate: { interval: d3.timeWeek.every(1), label: d3.timeFormat("%e %b"), characters: 6 }, fullMonth: { interval: d3.timeMonth.every(1), label: d3.timeFormat("%B"), characters: 9 }, shortMonth: { interval: d3.timeMonth.every(1), label: d3.timeFormat("%b"), characters: 3 }, monthLetter: { interval: d3.timeMonth.every(1), label: d => d3.timeFormat("%b")(d)[0], characters: 1.2 }, season: { interval: timeSeason, label: e => ['Spring', 'Summer', 'Fall', 'Winter'][(e.getMonth() - 2) / 3], characters: 6 }, fullYear: { interval: d3.timeYear.every(1), label: d3.timeFormat("%Y"), characters: 4 }, shortYear: { interval: d3.timeYear.every(1), label: d3.timeFormat("\'%y"), characters: 3 }, biYear: { //2022 interval: d3.timeYear.every(2), label: d3.timeFormat("%Y"), characters: 4 }, semiDecade: { //2025 interval: d3.timeYear.every(5), label: d3.timeFormat("%Y"), characters: 4 }, decade: { //2030s interval: d3.timeYear.every(1e1), label: d3.timeFormat("%Ys"), characters: 5 }, biDecade: { //2040 interval: d3.timeYear.every(2e1), label: d3.timeFormat("%Y"), characters: 4 }, semiCentury: { //2050 interval: d3.timeYear.every(5e1), label: d3.timeFormat("%Y"), characters: 4 }, century: { //2100 interval: d3.timeYear.every(1e2), label: d3.timeFormat("%Y"), characters: 4 }, centuryCE: { //2100CE interval: d3.timeYear.every(1e2), label: d => Math.abs(Math.floor(d.getYear() + 1900)) + (d.getYear() > -1900 ? "CE" : d.getYear() < -1900 ? "BCE" : ""), characters: 7 }, biCentury: { //2200CE interval: d3.timeYear.every(2e2), label: d => Math.abs(Math.floor(d.getYear() + 1900)) + (d.getYear() > -1900 ? "CE" : d.getYear() < -1900 ? "BCE" : ""), characters: 7 }, semiMillenium: { //2500CE interval: d3.timeYear.every(5e2), label: d => Math.abs(Math.floor(d.getYear() + 1900)) + (d.getYear() > -1900 ? "CE" : d.getYear() < -1900 ? "BCE" : ""), characters: 7 }, milleniumYA: { //3 kYA interval: d3.timeYear.every(1e3), label: d => Math.abs(Math.floor((d.getYear() + 1900) / 1e3)) + (d.getYear() >= -1900 ? " k" : " kYA"), characters: 5 }, millenium: { //3k interval: d3.timeYear.every(1e3), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 }, biMillenium: { //4k interval: d3.timeYear.every(2e3), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 }, semiDecMil: { //5k interval: d3.timeYear.every(5e3), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 }, decMil: { //10k interval: d3.timeYear.every(1e4), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 }, biDecMil: { //20k interval: d3.timeYear.every(2e4), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 }, semiCentMil: { //50k interval: d3.timeYear.every(5e4), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 }, centMil: { //"100k interval: d3.timeYear.every(1e5), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 }, biCentMil: { //200k interval: d3.timeYear.every(2e5), label: d => Math.floor((d.getYear() + 1900) / 1e3) + "k", characters: 4 } }; //CALCULATED VALUES function calcSpan(f) { const t0 = f.interval(Date.now()); return f.interval.offset(t0, 1) - t0; } function calcCD(f) { return f.characters / f.span; } function example(f) { return f.label(f.interval(new Date(Date.now()))); } Object.keys(me).forEach(k => { me[k].span = calcSpan(me[k]); me[k].cd = calcCD(me[k]); me[k].example = example(me[k]); }); return me; }36:T697,table( Object.keys(formatLibrary) .map(k => Object.assign( { name: k }, (({ example, span, cd }) => ({ example, span, cd }))(formatLibrary[k]) ) ) .sort((a, b) => b.cd - a.cd), { rank: true, paged: 10, style: 'compact', columns: { span: { formatter(val, i) { return niceTimeSpan(val); } }, cd: { formatter(val, i) { return niceTimeSpan(val, true) .split(" ") .join(" ch"); } } } } ) /*VERSION 2 //import { table } from "@tmcw/tables/2" table( Object.keys(formatLibrary) .map(k => { const f = formatLibrary[k]; return { KEY: k, EXAMPLE: f.example, CHARS: f.characters.toString(), SPAN: niceTimeSpan(f.span), CD: niceTimeSpan(f.cd, true) .split(" ") .join(" ch") }; }) .sort((a, b) => formatLibrary[b.KEY].cd - formatLibrary[a.KEY].cd) ) */ /* VERSION 1 html` ${Object.keys(formatLibrary) .map(k => Object.assign( { name: k }, (({ example, maxChar, span, cd }) => ({ example, maxChar, span, cd }))(formatLibrary[k]) ) ) .sort((a, b) => b.cd - a.cd) .map( (f, i) => html`` )}

#	Key	Example	Characters	Span	CD
${i}	${f.name}	${f.example}	${ f.maxChar }	${niceTimeSpan(f.span)}	${niceTimeSpan(f.cd, true) .split(" ") .join(" ch")}

` */37:[] 2f:{"id":"f853cb5c31f5f93f","slug":"timeline","title":"Timeline","thumbnail":"e8f1496a7030ae2aedbbda578fd53dc48448422b799c7178e160d6cdf9b0d9e4","access_level":"public","create_time":"$D2020-08-29T16:42:08.125Z","update_time":"$D2023-02-12T09:45:31.880Z","view_time":null,"first_public_time":"$D2020-09-23T19:24:55.213Z","fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"bc6b9021599bcf55","login":"notanaccent","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b94c500c7691cb0a3e4d8b84b846c7171a4f09348a3b5be1110d9874e6195351","tier":"starter_2024"},"version":9841,"publish_version":9841,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce955889d463ad2d","login":"notanaccent","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b94c500c7691cb0a3e4d8b84b846c7171a4f09348a3b5be1110d9874e6195351","tier":null}],"members":[{"type":"individual","id":"ce955889d463ad2d","login":"notanaccent","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b94c500c7691cb0a3e4d8b84b846c7171a4f09348a3b5be1110d9874e6195351","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":7,"collection":{"id":"50fc42abd0bcfecf","slug":"timeline","title":"Timeline","owner":{"id":"bc6b9021599bcf55","login":"notanaccent","name":""}},"type":"notebook","body":{"title":"Timeline","cells":[{"id":0,"value":"md`# Timeline\nHere is a multi-format d3 timeline that:\n+ adapts format to domain and range,\n+ centers labels, and\n+ avoids overlap.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6647,"value":"md`This timeline is alive [now](https://github.com/observablehq/stdlib#now)!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5176,"value":"d3\n .create('svg')\n .attr(\"viewBox\", [-50, -25, width + 50, 50])\n .call(timelinePlus(xGen(now, ms.second * 5)))\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6653,"value":"md`This timeline has pan and zoom [behaviour](#behaviour) built with [d3.zoom](https://github.com/d3/d3-zoom).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6511,"value":"d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, -25, width, 50])\n .attr(\"cursor\", \"ew-resize\")\n .call(\n domainZoom()\n .x(xGen(Date.now(), ms.year))\n .axisX(timelineDouble())\n )\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5164,"value":"//produces a d3.scaleTime with domain from t to t + dt\nxGen = (t, dt) =>\n d3\n .scaleTime()\n .range([0, width])\n .domain([new Date(+t), new Date(+t + +dt)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4614,"value":"md`The remainder of this [collection](https://observablehq.com/collection/@notanaccent/timeline) has examples and variations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8250,"value":"md`Finally, critique and suggestions would be appreciated, I am learning.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6687,"value":"md`## Use in your own notebook:\nBut please note that this is a work in progress.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`### Static\n~~~js\n d3.create('svg')\n .attr(\"viewBox\", [0, 0, width, 25])\n .call(timelineBottom(x))\n .node()\n\n x = d3\n .scaleTime()\n .range([0, width])\n\n import {timelineBottom} from \"@notanaccent/timeline\"\n\n d3 = require('d3@6')\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6622,"value":"md`### Interactive\n~~~js\n d3.create(\"svg\")\n .attr(\"viewBox\",[0,0,width,25]\n .call(behaviour)\n .node()\n\n behaviour = domainZoom().x(x)\n .pinX(\"left\")\n .axisX(timelineBottom())\n //.link((context,x,y) => drawData())\n\n x = d3.scaleTime()\n .range([0, width])\n\n import {domainZoom} from \"@notanaccent/domainZoom\"\n\n import {timelineBottom} from \"@notanaccent/timeline\"\n\n d3 = require(\"d3@6\")\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4869,"value":"md`## Variations`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9505,"value":"timelinePlus = scale =>\n grouping()\n .child(\"root\", rootLabel(scale))\n .child(\"top\", timelineTop(scale).MF(majorMF))\n .child(\n \"bottom\",\n timelineBottom(scale)\n .MF(minorMF)\n .fontPx(15)\n )\n .child(\"grid\", grid(scale).MF(majorMF))\n .method(\n \"scale\",\n (c, v) => (\n c.grid.scale(v), c.top.scale(v), c.bottom.scale(v), c.root.scale(v)\n )\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5226,"value":"d3\n .create('svg')\n .attr(\"viewBox\", [-60, -25, width + 60, 50])\n .attr(\"cursor\", \"ew-resize\")\n .call(\n domainZoom()\n .x(xGen(Date.now(), ms.month * 6))\n .axisX(timelinePlus())\n )\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4885,"value":"timelineDouble = scale =>\n grouping()\n .child(\"top\", timelineTop(scale).MF(majorMF))\n .child(\"bottom\", timelineBottom(scale).MF(minorMF))\n .method(\"scale\", (c, value) => (c.top.scale(value), c.bottom.scale(value)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5212,"value":"d3\n .create('svg')\n .attr(\"viewBox\", [0, -25, width, 50])\n .attr(\"cursor\", \"ew-resize\")\n .call(\n domainZoom()\n .x(xGen(Date.now(), ms.day * 2))\n .axisX(timelineDouble())\n )\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4863,"value":"timelineTop = (scale, MF) => timeline(\"Top\", scale, MF)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"d3\n .create('svg')\n .attr(\"viewBox\", [0, -24, width, 25])\n .attr(\"cursor\", \"ew-resize\")\n .call(\n domainZoom()\n .x(xGen(Date.now(), ms.week))\n .axisX(timelineTop())\n )\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4873,"value":"timelineBottom = (scale, MF) => timeline(\"Bottom\", scale,MF)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7848,"value":"d3\n .create('svg')\n .attr(\"viewBox\", [0, 0, width, 25])\n .attr(\"cursor\", \"ew-resize\")\n .call(\n domainZoom()\n .x(xGen(Date.now(), ms.year))\n .axisX(timelineBottom())\n )\n .node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5027,"value":"timelineRight = (scale, MF) => timeline(\"Right\", scale, MF)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5030,"value":"timelineLeft = (scale, MF) => timeline(\"Left\", scale, MF)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5184,"value":"{\n const chart = d3\n .create('svg')\n .attr(\"viewBox\", [-25, 0, width + 50, 300])\n .attr(\"cursor\", \"ns-resize\");\n\n const y = xGen(Date.now(), ms.month * 4).range([0, 300]);\n\n const sidelines = grouping()\n .child(\"left\", timelineLeft())\n .child(\"right\", timelineRight().anchor([width, 0]))\n .child(\"grid\", grid().dim(\"y\"))\n .method(\n \"scale\",\n (c, value) => (\n c.left.scale(value), c.right.scale(value), c.grid.scale(value)\n )\n );\n\n const behaviour = domainZoom()\n .y(y)\n .axisY(sidelines);\n\n return chart.call(behaviour).node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6406,"value":"md`**timeline** creates a d3 axis with adaptive format and centered labels:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9715,"value":"md`**rootLabel** creates a label relevant to a scale's domain`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9490,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9716,"value":"md`**grid** creates a gridlines:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9553,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9484,"value":"md`**grouping** partitions svg creating functions while enabling group methods:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9042,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3378,"value":"md`## Formatting`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6216,"value":"md`**Multi-formats** (MF) are a subset from the Format Library, defined by a list of keys.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2414,"value":"rootMF = [\n // List of Root Label Formats\n // aim for format that gives overview of current domain\n // order does not matter\n 'minutely',\n 'hourly',\n 'shortDate',\n 'fullYear',\n 'millenium'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":255,"value":"minorMF = [\n // List of Minor Axis Formats\n // Aim for a scale of 2 - 5 between formats in terms of characters per day\n // order does not matter\n 'decaSecond',\n 'shortSecond',\n 'secondly',\n 'fiveSecondly',\n 'quarterMinutely',\n 'minutely',\n 'fiveMinutely',\n 'quarterHourly',\n 'hourly',\n 'quarterDaily',\n 'weekDay',\n 'weekDayLetter',\n 'fullMonth',\n 'shortMonth',\n 'monthLetter'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2106,"value":"majorMF = [\n // List of Major Axis Formats\n // Aim for a scale of 2 - 5 between formats in terms of characters per day\n // order does not matter\n 'minutely',\n 'hourly',\n 'fullDate',\n 'shortDate',\n 'weekInYear',\n 'season',\n 'fullYear',\n 'biYear',\n 'semiDecade',\n 'decade',\n 'biDecade',\n 'semiCentury',\n 'centuryCE',\n 'biCentury',\n 'semiMillenium',\n 'millenium',\n 'biMillenium',\n 'semiDecMil',\n 'decMil',\n 'biDecMil',\n 'semiCentMil',\n 'centMil',\n 'biCentMil',\n 'semiMag',\n 'megaannum'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5123,"value":"defaultMF = [\n // List of Minor Axis Formats\n // Aim for a scale of 2 - 5 between formats in terms of characters per day\n // order does not matter\n 'decaSecond',\n 'shortSecond',\n 'secondly',\n 'fiveSecondly',\n 'quarterMinutely',\n 'minutely',\n 'fiveMinutely',\n 'quarterHourly',\n 'hourly',\n 'fourHourly',\n 'weekDay',\n 'weekDayLetter',\n 'shortDate',\n 'fullDate',\n 'weekInYear',\n 'fullMonth',\n 'shortMonth',\n 'monthLetter',\n 'season',\n 'fullYear',\n 'biYear',\n 'semiDecade',\n 'decade',\n 'biDecade',\n 'semiCentury',\n 'centuryCE',\n 'biCentury',\n 'semiMillenium',\n 'millenium',\n 'biMillenium',\n 'semiDecMil',\n 'decMil',\n 'biDecMil',\n 'semiCentMil',\n 'centMil',\n 'biCentMil',\n 'semiMag',\n 'megaannum'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6221,"value":"md`**Format Library** pairs [d3 time intervals](https://github.com/d3/d3/blob/master/API.md#time-intervals-d3-time) with label formats.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1444,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6347,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6201,"value":"md`**Adaptive Format Selection** relies on the metrics: \n+ Character Density (CD)\n + describes a label's ***density*** in the time-domain, and\n + is used to select a tick format that will ***fit*** on the axis.\n+ Span\n + is the ***duration*** of a time interval, and\n + is used to select a root label that is ***relevant*** to the axis.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1446,"value":"function selectFormatByCD(mf, cd) {\n // Selects the largest format that fits between ticks\n // characters density (CD) is the metric used\n\n let bestCD = 0;\n let bestFormat = \"none\"; // a harmless default format\n\n // search to find the maximum format.cd below cd\n mf.forEach(f => {\n const test = formatLibrary[f]?.cd;\n if (test < cd && test > bestCD && test) {\n bestCD = test;\n bestFormat = f;\n }\n });\n\n return formatLibrary[bestFormat];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2427,"value":"selectFormatBySpan = (mf, span) =>\n formatLibrary[d3.least(mf, f => diffA([formatLibrary[f].span, span]))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":212,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5849,"value":"function niceTimeSpan(t, inv = false) {\n let tail = 'ms',\n k = 0;\n\n const steps = [\n [1, 'ms'],\n [1000, 's'],\n [60, 'min'],\n [60, 'hr'],\n [24, 'day'],\n [365 / 12, 'mth'],\n [12, 'yr'],\n [100, 'cyr'],\n [10, 'kyr'],\n [1000, 'byr']\n ],\n sign = Math.sign(t),\n test = step => (inv ? (t *= step) >= 1 : (t /= step) < steps[k + 1][0]);\n\n t = Math.abs(t);\n for (const [step, unit] of steps) {\n if (test(step)) {\n return Math.round(sign * t) + \" \" + (inv ? \"/\" : \"\") + unit;\n }\n k++;\n }\n\n return 'NaN';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2143,"value":"timeSeason = d3.timeInterval(\n //https://github.com/d3/d3-time#timeInterval\n function(date) {\n //floor function\n var newM = (Math.floor(((date.getMonth() + 1) % 12) / 3) * 3 + 11) % 12;\n if (newM > date.getMonth()) {\n date.setYear(date.getFullYear() - 1);\n }\n date.setMonth(newM);\n date.setDate(1);\n date.setHours(0, 0, 0, 0);\n },\n function(date, step) {\n //step function\n date.setMonth(date.getMonth() + step * 3);\n },\n function(start, end) {\n //count function\n return (\n (end.getFullYear() - start.getFullYear()) * 4 +\n (end.getMonth() - start.getMonth()) / 3\n );\n },\n function(date) {\n //field function\n return (Math.floor(((date.getMonth() + 1) % 12) / 3) * 3 + 11) % 12;\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"function cage(a, low, high) {\n return Math.min(Math.max(a, low), high);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3175,"value":"diffA = arr => Math.abs(diff(arr))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":221,"value":"diff = arr => arr.reduce((a, b) => b - a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":215,"value":"ms = ({\n second: 1000,\n minute: 60 * 1000,\n hour: 60 * 60 * 1000,\n day: 24 * 60 * 60 * 1000,\n week: 7 * 24 * 60 * 60 * 1000,\n month: (365 / 12) * 24 * 60 * 60 * 1000,\n year: 365 * 24 * 60 * 60 * 1000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":209,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8829,"value":"import { domainZoom } from \"b6eb2af8e1e6b237\" //@notanaccent/domainZoom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5660,"value":"import { table } from \"@tmcw/tables@531\"\n//import { table } from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"