30: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; }31: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; }32: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; }33: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; }34: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; }35: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")}

` */36:[] 2e:{"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"},{"id":6647,"value":"md`This timeline is alive [now](https://github.com/observablehq/stdlib#now)!`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":8250,"value":"md`Finally, critique and suggestions would be appreciated, I am learning.`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":4869,"value":"md`## Variations`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"id":4863,"value":"timelineTop = (scale, MF) => timeline(\"Top\", scale, MF)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4873,"value":"timelineBottom = (scale, MF) => timeline(\"Bottom\", scale,MF)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":5027,"value":"timelineRight = (scale, MF) => timeline(\"Right\", scale, MF)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5030,"value":"timelineLeft = (scale, MF) => timeline(\"Left\", scale, MF)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":31,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6406,"value":"md`**timeline** creates a d3 axis with adaptive format and centered labels:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":9715,"value":"md`**rootLabel** creates a label relevant to a scale's domain`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9490,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":9716,"value":"md`**grid** creates a gridlines:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9553,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9484,"value":"md`**grouping** partitions svg creating functions while enabling group methods:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9042,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":3378,"value":"md`## Formatting`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":1444,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":6347,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":2427,"value":"selectFormatBySpan = (mf, span) =>\n formatLibrary[d3.least(mf, f => diffA([formatLibrary[f].span, span]))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md`## Utils`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":216,"value":"function cage(a, low, high) {\n return Math.min(Math.max(a, low), high);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3175,"value":"diffA = arr => Math.abs(diff(arr))","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"diff = arr => arr.reduce((a, b) => b - a)","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":209,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8829,"value":"import { domainZoom } from \"b6eb2af8e1e6b237\" //@notanaccent/domainZoom","pinned":false,"hidden":false,"mode":"ojs"},{"id":5660,"value":"import { table } from \"@tmcw/tables@531\"\n//import { table } from \"@tmcw/tables/2\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3@6\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}