# packages/core/src/features/viz/lib/utc-scale.ts
This is the source snapshot used to build these API details. [View this revision on GitHub](https://github.com/benlesh/pibbl/blob/272a94aaf62e0bd6ad8726a4c607a76a9ec44ca1/packages/core/src/features/viz/lib/utc-scale.ts#L118).

[Back to reference](/reference/functions/utc-domains/)

<pre class="api-source"><code><span id="L1"><a href="#L1" aria-label="Line 1">1</a> import type { UTCScale } from &quot;./utc-scale-component.js&quot;;</span>
<span id="L2"><a href="#L2" aria-label="Line 2">2</a> import type { LinearDomain, ResolvedUtcScale, ScaleRange } from &quot;./types.js&quot;;</span>
<span id="L3"><a href="#L3" aria-label="Line 3">3</a> import { resolveLinearScale } from &quot;./linear-scale.js&quot;;</span>
<span id="L4"><a href="#L4" aria-label="Line 4">4</a> const LIMIT = 8_640_000_000_000_000;</span>
<span id="L5"><a href="#L5" aria-label="Line 5">5</a> const DAY = 86_400_000;</span>
<span id="L6"><a href="#L6" aria-label="Line 6">6</a> </span>
<span id="L7"><a href="#L7" aria-label="Line 7">7</a> function timestamp(value: number, integer = false): number {</span>
<span id="L8"><a href="#L8" aria-label="Line 8">8</a>   if (typeof value !== &quot;number&quot; || !Number.isFinite(value) || Math.abs(value) &gt; LIMIT || (integer &amp;&amp; !Number.isSafeInteger(value)))</span>
<span id="L9"><a href="#L9" aria-label="Line 9">9</a>     throw new RangeError(&quot;UTC timestamps must be finite milliseconds within Date range; domain endpoints must be safe integers.&quot;);</span>
<span id="L10"><a href="#L10" aria-label="Line 10">10</a>   return value;</span>
<span id="L11"><a href="#L11" aria-label="Line 11">11</a> }</span>
<span id="L12"><a href="#L12" aria-label="Line 12">12</a> function validateDomain(domain: LinearDomain): void {</span>
<span id="L13"><a href="#L13" aria-label="Line 13">13</a>   if (!Array.isArray(domain) || domain.length !== 2)</span>
<span id="L14"><a href="#L14" aria-label="Line 14">14</a>     throw new RangeError(&quot;UTC domain requires two endpoints.&quot;);</span>
<span id="L15"><a href="#L15" aria-label="Line 15">15</a>   timestamp(domain[0], true);</span>
<span id="L16"><a href="#L16" aria-label="Line 16">16</a>   timestamp(domain[1], true);</span>
<span id="L17"><a href="#L17" aria-label="Line 17">17</a> }</span>
<span id="L18"><a href="#L18" aria-label="Line 18">18</a> interface Cadence {</span>
<span id="L19"><a href="#L19" aria-label="Line 19">19</a>   first: number;</span>
<span id="L20"><a href="#L20" aria-label="Line 20">20</a>   last: number;</span>
<span id="L21"><a href="#L21" aria-label="Line 21">21</a>   at(index: number): number;</span>
<span id="L22"><a href="#L22" aria-label="Line 22">22</a> }</span>
<span id="L23"><a href="#L23" aria-label="Line 23">23</a> function monthAt(ordinal: number): number {</span>
<span id="L24"><a href="#L24" aria-label="Line 24">24</a>   const date = new Date(0);</span>
<span id="L25"><a href="#L25" aria-label="Line 25">25</a>   date.setUTCFullYear(Math.floor(ordinal / 12), ((ordinal % 12) + 12) % 12, 1);</span>
<span id="L26"><a href="#L26" aria-label="Line 26">26</a>   return date.getTime();</span>
<span id="L27"><a href="#L27" aria-label="Line 27">27</a> }</span>
<span id="L28"><a href="#L28" aria-label="Line 28">28</a> const fixedSteps = [1, 2, 5, 10, 20, 50, 100, 200, 500,</span>
<span id="L29"><a href="#L29" aria-label="Line 29">29</a>   ...[1, 2, 5, 10, 15, 30].map(n =&gt; n * 1000),</span>
<span id="L30"><a href="#L30" aria-label="Line 30">30</a>   ...[1, 2, 5, 10, 15, 30].map(n =&gt; n * 60_000),</span>
<span id="L31"><a href="#L31" aria-label="Line 31">31</a>   ...[1, 2, 3, 6, 12].map(n =&gt; n * 3_600_000), DAY, 2 * DAY];</span>
<span id="L32"><a href="#L32" aria-label="Line 32">32</a> function selectCadence(lo: number, hi: number, count: number): Cadence {</span>
<span id="L33"><a href="#L33" aria-label="Line 33">33</a>   for (const step of [...fixedSteps, 7 * DAY]) {</span>
<span id="L34"><a href="#L34" aria-label="Line 34">34</a>     const offset = step === 7 * DAY ? -3 * DAY : 0;</span>
<span id="L35"><a href="#L35" aria-label="Line 35">35</a>     const first = Math.floor((lo - offset) / step) + 1;</span>
<span id="L36"><a href="#L36" aria-label="Line 36">36</a>     const last = Math.ceil((hi - offset) / step) - 1;</span>
<span id="L37"><a href="#L37" aria-label="Line 37">37</a>     if (Math.max(0, last - first + 1) &lt;= count - 2)</span>
<span id="L38"><a href="#L38" aria-label="Line 38">38</a>       return { first, last, at: index =&gt; index * step + offset };</span>
<span id="L39"><a href="#L39" aria-label="Line 39">39</a>   }</span>
<span id="L40"><a href="#L40" aria-label="Line 40">40</a>   // Two Date objects for endpoint ordinals; candidate counting is arithmetic.</span>
<span id="L41"><a href="#L41" aria-label="Line 41">41</a>   const start = new Date(lo), stop = new Date(hi);</span>
<span id="L42"><a href="#L42" aria-label="Line 42">42</a>   const lowMonth = start.getUTCFullYear() * 12 + start.getUTCMonth();</span>
<span id="L43"><a href="#L43" aria-label="Line 43">43</a>   const highMonth = stop.getUTCFullYear() * 12 + stop.getUTCMonth();</span>
<span id="L44"><a href="#L44" aria-label="Line 44">44</a>   const highBoundary = stop.getUTCDate() === 1 &amp;&amp; stop.getUTCHours() === 0 &amp;&amp;</span>
<span id="L45"><a href="#L45" aria-label="Line 45">45</a>     stop.getUTCMinutes() === 0 &amp;&amp; stop.getUTCSeconds() === 0 &amp;&amp; stop.getUTCMilliseconds() === 0;</span>
<span id="L46"><a href="#L46" aria-label="Line 46">46</a>   const steps = [1, 2, 3, 6,</span>
<span id="L47"><a href="#L47" aria-label="Line 47">47</a>     ...Array.from({ length: 7 }, (_, exponent) =&gt; [1, 2, 5].map(n =&gt; 12 * n * 10 ** exponent)).flat()];</span>
<span id="L48"><a href="#L48" aria-label="Line 48">48</a>   for (const step of steps) {</span>
<span id="L49"><a href="#L49" aria-label="Line 49">49</a>     const first = Math.floor(lowMonth / step) + 1;</span>
<span id="L50"><a href="#L50" aria-label="Line 50">50</a>     const last = Math.floor(highMonth / step) - (highBoundary &amp;&amp; highMonth % step === 0 ? 1 : 0);</span>
<span id="L51"><a href="#L51" aria-label="Line 51">51</a>     if (Math.max(0, last - first + 1) &lt;= count - 2)</span>
<span id="L52"><a href="#L52" aria-label="Line 52">52</a>       return { first, last, at: index =&gt; monthAt(index * step) };</span>
<span id="L53"><a href="#L53" aria-label="Line 53">53</a>   }</span>
<span id="L54"><a href="#L54" aria-label="Line 54">54</a>   // Every epoch-aligned cadence crosses year zero for a straddling domain.</span>
<span id="L55"><a href="#L55" aria-label="Line 55">55</a>   // Two-tick output is endpoints-only; keep already integral millisecond bounds</span>
<span id="L56"><a href="#L56" aria-label="Line 56">56</a>   // rather than overflow Date trying ever coarser calendar boundaries.</span>
<span id="L57"><a href="#L57" aria-label="Line 57">57</a>   if (count === 2) return { first: lo + 1, last: hi - 1, at: index =&gt; index };</span>
<span id="L58"><a href="#L58" aria-label="Line 58">58</a>   throw new RangeError(&quot;UTC could not select a bounded cadence.&quot;);</span>
<span id="L59"><a href="#L59" aria-label="Line 59">59</a> }</span>
<span id="L60"><a href="#L60" aria-label="Line 60">60</a> function tickCount(count: number): void {</span>
<span id="L61"><a href="#L61" aria-label="Line 61">61</a>   if (!Number.isInteger(count) || count &lt; 2 || count &gt; 100)</span>
<span id="L62"><a href="#L62" aria-label="Line 62">62</a>     throw new RangeError(&quot;UTC ticks count must be an integer from 2 to 100.&quot;);</span>
<span id="L63"><a href="#L63" aria-label="Line 63">63</a> }</span>
<span id="L64"><a href="#L64" aria-label="Line 64">64</a> function utcTicks(domain: LinearDomain, count: number): readonly number[] {</span>
<span id="L65"><a href="#L65" aria-label="Line 65">65</a>   tickCount(count);</span>
<span id="L66"><a href="#L66" aria-label="Line 66">66</a>   if (count === 2) return Object.freeze([...domain]);</span>
<span id="L67"><a href="#L67" aria-label="Line 67">67</a>   const lo = Math.min(...domain), hi = Math.max(...domain);</span>
<span id="L68"><a href="#L68" aria-label="Line 68">68</a>   const cadence = selectCadence(lo, hi, count);</span>
<span id="L69"><a href="#L69" aria-label="Line 69">69</a>   const ticks = [lo];</span>
<span id="L70"><a href="#L70" aria-label="Line 70">70</a>   for (let i = cadence.first; i &lt;= cadence.last; i++) {</span>
<span id="L71"><a href="#L71" aria-label="Line 71">71</a>     const value = cadence.at(i);</span>
<span id="L72"><a href="#L72" aria-label="Line 72">72</a>     if (value &gt; lo &amp;&amp; value &lt; hi) ticks.push(timestamp(value, true));</span>
<span id="L73"><a href="#L73" aria-label="Line 73">73</a>   }</span>
<span id="L74"><a href="#L74" aria-label="Line 74">74</a>   ticks.push(hi);</span>
<span id="L75"><a href="#L75" aria-label="Line 75">75</a>   return Object.freeze(domain[0] &gt; domain[1] ? ticks.reverse() : ticks);</span>
<span id="L76"><a href="#L76" aria-label="Line 76">76</a> }</span>
<span id="L77"><a href="#L77" aria-label="Line 77">77</a> export function resolveUtcScale(domain: LinearDomain, range: ScaleRange, reverse: boolean, width: number, height: number): ResolvedUtcScale {</span>
<span id="L78"><a href="#L78" aria-label="Line 78">78</a>   validateDomain(domain);</span>
<span id="L79"><a href="#L79" aria-label="Line 79">79</a>   const linear = resolveLinearScale(domain, range, reverse, width, height);</span>
<span id="L80"><a href="#L80" aria-label="Line 80">80</a>   return Object.freeze({</span>
<span id="L81"><a href="#L81" aria-label="Line 81">81</a>     ...linear,</span>
<span id="L82"><a href="#L82" aria-label="Line 82">82</a>     type: &quot;utc&quot;,</span>
<span id="L83"><a href="#L83" aria-label="Line 83">83</a>     map: (value: number) =&gt; linear.map(timestamp(value)),</span>
<span id="L84"><a href="#L84" aria-label="Line 84">84</a>     ticks: (count = 5) =&gt; utcTicks(linear.domain, count),</span>
<span id="L85"><a href="#L85" aria-label="Line 85">85</a>     formatTick: (value: number) =&gt; new Date(timestamp(value)).toISOString(),</span>
<span id="L86"><a href="#L86" aria-label="Line 86">86</a>   });</span>
<span id="L87"><a href="#L87" aria-label="Line 87">87</a> }</span>
<span id="L88"><a href="#L88" aria-label="Line 88">88</a> </span>
<span id="L89"><a href="#L89" aria-label="Line 89">89</a> /**</span>
<span id="L90"><a href="#L90" aria-label="Line 90">90</a>  * Expands a numeric timestamp domain to enclosing UTC calendar boundaries.</span>
<span id="L91"><a href="#L91" aria-label="Line 91">91</a>  * @param domain - Safe integer epoch-millisecond endpoints, possibly equal or descending.</span>
<span id="L92"><a href="#L92" aria-label="Line 92">92</a>  * @param options - Optional bounded target tick count (default 5).</span>
<span id="L93"><a href="#L93" aria-label="Line 93">93</a>  * @returns A frozen outward-rounded domain preserving its direction. See {@link LinearDomain}.</span>
<span id="L94"><a href="#L94" aria-label="Line 94">94</a>  * @see {@link UTCScale}</span>
<span id="L95"><a href="#L95" aria-label="Line 95">95</a>  */</span>
<span id="L96"><a href="#L96" aria-label="Line 96">96</a> export function niceUTCDomain(domain: LinearDomain, options: { readonly count?: number } = {}): LinearDomain {</span>
<span id="L97"><a href="#L97" aria-label="Line 97">97</a>   validateDomain(domain);</span>
<span id="L98"><a href="#L98" aria-label="Line 98">98</a>   const count = options.count ?? 5;</span>
<span id="L99"><a href="#L99" aria-label="Line 99">99</a>   tickCount(count);</span>
<span id="L100"><a href="#L100" aria-label="Line 100">100</a>   if (domain[0] === domain[1]) {</span>
<span id="L101"><a href="#L101" aria-label="Line 101">101</a>     const lo = Math.max(-LIMIT, Math.min(LIMIT - 2, domain[0] - 1));</span>
<span id="L102"><a href="#L102" aria-label="Line 102">102</a>     return Object.freeze([lo, lo + 2]);</span>
<span id="L103"><a href="#L103" aria-label="Line 103">103</a>   }</span>
<span id="L104"><a href="#L104" aria-label="Line 104">104</a>   const lo = Math.min(...domain), hi = Math.max(...domain);</span>
<span id="L105"><a href="#L105" aria-label="Line 105">105</a>   const cadence = selectCadence(lo, hi, count);</span>
<span id="L106"><a href="#L106" aria-label="Line 106">106</a>   const start = timestamp(cadence.at(cadence.first - 1), true);</span>
<span id="L107"><a href="#L107" aria-label="Line 107">107</a>   const stop = timestamp(cadence.at(cadence.last + 1), true);</span>
<span id="L108"><a href="#L108" aria-label="Line 108">108</a>   return Object.freeze(domain[0] &gt; domain[1] ? [stop, start] : [start, stop]);</span>
<span id="L109"><a href="#L109" aria-label="Line 109">109</a> }</span>
<span id="L110"><a href="#L110" aria-label="Line 110">110</a> </span>
<span id="L111"><a href="#L111" aria-label="Line 111">111</a> /**</span>
<span id="L112"><a href="#L112" aria-label="Line 112">112</a>  * Computes a finite numeric extent in source order, skipping only null and undefined.</span>
<span id="L113"><a href="#L113" aria-label="Line 113">113</a>  * @param data - Source rows, which are never sorted or mutated.</span>
<span id="L114"><a href="#L114" aria-label="Line 114">114</a>  * @param value - Accessor called once per row with its index and original array.</span>
<span id="L115"><a href="#L115" aria-label="Line 115">115</a>  * @returns A frozen minimum/maximum pair, or undefined when every row is missing.</span>
<span id="L116"><a href="#L116" aria-label="Line 116">116</a>  * @see {@link niceUTCDomain}</span>
<span id="L117"><a href="#L117" aria-label="Line 117">117</a>  */</span>
<span id="L118"><a href="#L118" aria-label="Line 118">118</a> export function extent&lt;D&gt;(data: readonly D[], value: (datum: D, index: number, data: readonly D[]) =&gt; number | null | undefined): LinearDomain | undefined {</span>
<span id="L119"><a href="#L119" aria-label="Line 119">119</a>   if (!Array.isArray(data) || typeof value !== &quot;function&quot;) throw new TypeError(&quot;extent requires an array and accessor.&quot;);</span>
<span id="L120"><a href="#L120" aria-label="Line 120">120</a>   let min = Infinity, max = -Infinity;</span>
<span id="L121"><a href="#L121" aria-label="Line 121">121</a>   for (let i = 0; i &lt; data.length; i++) {</span>
<span id="L122"><a href="#L122" aria-label="Line 122">122</a>     const v = value(data[i], i, data);</span>
<span id="L123"><a href="#L123" aria-label="Line 123">123</a>     if (v === null || v === undefined) continue;</span>
<span id="L124"><a href="#L124" aria-label="Line 124">124</a>     if (typeof v !== &quot;number&quot; || !Number.isFinite(v)) throw new TypeError(&quot;extent values must be finite numbers or missing.&quot;);</span>
<span id="L125"><a href="#L125" aria-label="Line 125">125</a>     min = Math.min(min, v); max = Math.max(max, v);</span>
<span id="L126"><a href="#L126" aria-label="Line 126">126</a>   }</span>
<span id="L127"><a href="#L127" aria-label="Line 127">127</a>   return min === Infinity ? undefined : Object.freeze([min, max]);</span>
<span id="L128"><a href="#L128" aria-label="Line 128">128</a> }</span>
<span id="L129"><a href="#L129" aria-label="Line 129">129</a> </span></code></pre>

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.
