1import{n as M,a as $,t as rn}from"../chunks/disclose-version.CYRus3_n.js";import"../chunks/legacy.D5VIDL1L.js";import{f as W,y as X,x as J,j as n,C as R,aa as w,t as l,i as u,s as e,g as H,k as K,r as i}from"../chunks/index.BFLD-r1F.js";import{h as N}from"../chunks/html.DJp1TmCa.js";import{p as kn,l as dn,s as gn}from"../chunks/props.BqrOA4w1.js";import{M as mn}from"../chunks/MarkdownLayout.CfOqJUas.js";import{H as hn}from"../chunks/Head.ClEXiONq.js";import{s as B}from"../chunks/render.DgXvYnEL.js";import{e as V,i as I}from"../chunks/each.BSc35976.js";import{s as a}from"../chunks/attributes.BAFHm5L1.js";import{p as Y}from"../chunks/proxy.CXhvWRiY.js";import{o as Q}from"../chunks/index-client.CRKmWoC4.js";import{c as Z}from"../chunks/dsv.XhNTmijJ.js";import{t as nn,b as an}from"../chunks/linear.BNRZS3tC.js";import{t as sn,a as tn}from"../chunks/time.gi09wnfM.js";import{e as q}from"../chunks/extent.Ccx1MofX.js";import{s as pn}from"../chunks/sequential.DsTbRAS3.js";import{l as en}from"../chunks/line.DSxv-mNs.js";import{i as vn}from"../chunks/if.Bi6JYQB7.js";import{D as fn}from"../chunks/DiscordClick.9GVmGGRY.js";function on(s){return s=Math.max(0,Math.min(1,s)),"rgb("+Math.max(0,Math.min(255,Math.round(34.61+s*(1172.33-s*(10793.56-s*(33300.12-s*(38394.49-s*14825.05)))))))+", "+Math.max(0,Math.min(255,Math.round(23.31+s*(557.33+s*(1225.33-s*(3574.96-s*(1073.77+s*707.56)))))))+", "+Math.max(0,Math.min(255,Math.round(27.2+s*(3211.1-s*(15327.97-s*(27814-s*(22569.18-s*6838.66)))))))+")"}function cn(s,k){this._context=s,this._t=k}cn.prototype={areaStart:function(){this._line=0},areaEnd:function(){this._line=NaN},lineStart:function(){this._x=this._y=NaN,this._point=0},lineEnd:function(){0<this._t&&this._t<1&&this._point===2&&this._context.lineTo(this._x,this._y),(this._line||this._line!==0&&this._point===1)&&this._context.closePath(),this._line>=0&&(this._t=1-this._t,this._line=1-this._line)},point:function(s,k){switch(s=+s,k=+k,this._point){case 0:this._point=1,this._line?this._context.lineTo(s,k):this._context.moveTo(s,k);break;case 1:this._point=2;default:{if(this._t<=0)this._context.lineTo(this._x,k),this._context.lineTo(s,k);else{var _=this._x*(1-this._t)+s*this._t;this._context.lineTo(_,this._y),this._context.lineTo(_,k)}break}}this._x=s,this._y=k}};function ln(s){return new cn(s,.5)}const yn=!0,Qn=Object.freeze(Object.defineProperty({__proto__:null,prerender:yn},Symbol.toStringTag,{value:"Module"}));var xn=M('<text class="fill-gray-400" dy="0.71em" font-size="14px" text-anchor="middle"> </text>'),wn=M('<text class="fill-gray-400" dy="0.32em" font-size="14px" text-anchor="end"> </text><line stroke="currentColor" stroke-opacity="0.1"></line>',1),_n=M("<stop></stop>"),bn=M('<svg style="max-width: 100%; height: auto;"><g><!><line stroke="currentColor" stroke-opacity="0.1"></line></g><g><!><text class="fill-gray-400" font-size="14px" text-anchor="start">Temperature (°F) â</text></g><defs><linearGradient id="temperature-gradient" gradientUnits="userSpaceOnUse" x1="0" x2="0"></linearGradient></defs><path opacity="1" fill="none" stroke="url(#temperature-gradient)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"></path></svg>');function Sn(s,k){W(k,!0);let _=X(Y([]));Q(async()=>{try{const p=await Z("/data/temperature.csv");J(_,Y(p.map(d=>({date:new Date(d.date),temperature:+d.temperature})))),console.log(p,n(_))}catch(p){console.error("Error loading CSV file:",p)}});const f=928,y=500,c={top:20,right:130,bottom:30,left:40};let o=w(()=>sn().domain(q(n(_),p=>p.date)).range([c.left,f-c.right])),h=w(()=>an().domain(q(n(_),p=>p.temperature)).nice().range([y-c.bottom,c.top])),x=w(()=>pn(n(h).domain(),on)),O=w(()=>en().curve(ln).defined(p=>!isNaN(p.temperature)).x(p=>n(o)(p.date)).y(p=>n(h)(p.temperature))),L=w(()=>nn(0,1,10));R(()=>console.log(n(L)));let E=w(()=>n(o).ticks(f/80)),U=w(()=>n(h).ticks(5));var S=bn();a(S,"width",f),a(S,"height",y),a(S,"viewBox",`0 0 ${f} ${y}`);var v=u(S),T=u(v);V(T,17,()=>n(E),I,(p,d)=>{var m=xn();l(()=>a(m,"x",n(o)(n(d)))),a(m,"y",6);var t=u(m,!0);l(()=>B(t,tn("%b")(n(d)))),i(m),$(p,m)});var G=e(T);i(v);var D=e(v),b=u(D);V(b,17,()=>n(U),I,(p,d)=>{var m=wn(),t=H(m);a(t,"x",-6),l(()=>a(t,"y",n(h)(n(d))));var r=u(t,!0);i(t);var g=e(t);a(g,"x1",0),l(()=>a(g,"y1",n(h)(n(d)))),l(()=>a(g,"y2",n(h)(n(d)))),l(()=>{B(r,n(d)),a(g,"x2",f-c.left-c.right)}),$(p,m)});var A=e(b);a(A,"x",-26),l(()=>a(A,"y",n(h)(n(h).domain()[1]))),i(D);var j=e(D),C=u(j);V(C,21,()=>n(L),I,(p,d)=>{var m=_n();l(()=>a(m,"stop-color",n(x).interpolator()(n(d)))),l(()=>a(m,"offset",n(d))),$(p,m)}),i(C),i(j);var z=e(j);l(()=>a(z,"d",n(O)(n(_)))),i(S),l(()=>{a(v,"transform",`translate(0, ${y-c.bottom})`),a(G,"x1",c.left),a(G,"x2",f-c.right),a(D,"transform",`translate(${c.left}, 0)`),a(C,"y1",y-c.bottom),a(C,"y2",c.top)}),$(s,S),K()}var jn=M('<text class="fill-gray-400" dy="0.71em" font-size="14px" text-anchor="middle"> </text>'),Cn=M('<text class="fill-gray-400" dy="0.32em" font-size="14px" text-anchor="end"> </text><line stroke="currentColor" stroke-opacity="0.1"></line>',1),$n=M("<stop></stop>
1"),Tn=M('<path opacity="1" fill="none" stroke="url(#temperature-gradient)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"></path>'),Gn=M('<svg style="max-width: 100%; height: auto;"><g><!><line stroke="currentColor" stroke-opacity="0.1"></line></g><g><!><text font-size="10" text-anchor="end">°F</text></g><defs><linearGradient id="temperature-gradient" gradientUnits="userSpaceOnUse" x1="0" x2="0"></linearGradient></defs><rect y="0" fill="url(#temperature-gradient)"></rect><!></svg>');function Dn(s,k){W(k,!0);let _=kn(k,"overlay",3,!0),f=X(Y([]));Q(async()=>{try{const t=await Z("/data/temperature.csv");J(f,Y(t.map(r=>({date:new Date(r.date),temperature:r.temperature})))),console.log(t,n(f))}catch(t){console.error("Error loading CSV file:",t)}});const y=928,c=500,o={top:20,right:30,bottom:30,left:40};let h=w(()=>sn().domain(q(n(f),t=>t.date)).range([o.left,y-o.right])),x=w(()=>an().domain(q(n(f),t=>t.temperature)).nice().range([c-o.bottom,o.top])),O=w(()=>pn(n(x).domain(),on)),L=w(()=>en().curve(ln).defined(t=>!isNaN(t.temperature)).x(t=>n(h)(t.date)).y(t=>n(x)(t.temperature))),E=w(()=>nn(0,1,10));R(()=>console.log(n(E)));let U=w(()=>n(h).ticks(y/80)),S=w(()=>n(x).ticks(5));var v=Gn();a(v,"width",y),a(v,"height",c),a(v,"viewBox",`0 0 ${y} ${c}`);var T=u(v),G=u(T);V(G,17,()=>n(U),I,(t,r)=>{var g=jn();l(()=>a(g,"x",n(h)(n(r)))),a(g,"y",6);var F=u(g,!0);l(()=>B(F,tn("%b")(n(r)))),i(g),$(t,g)});var D=e(G);i(T);var b=e(T),A=u(b);V(A,17,()=>n(S),I,(t,r)=>{var g=Cn(),F=H(g);a(F,"x",-6),l(()=>a(F,"y",n(x)(n(r))));var un=u(F,!0);i(F);var P=e(F);a(P,"x1",0),l(()=>a(P,"y1",n(x)(n(r)))),l(()=>a(P,"y2",n(x)(n(r)))),l(()=>{B(un,n(r)),a(P,"x2",y-o.left-o.right)}),$(t,g)});var j=e(A);a(j,"x",-6),l(()=>a(j,"y",n(x)(n(x).domain()[1])-10)),i(b);var C=e(b),z=u(C);V(z,21,()=>n(E),I,(t,r)=>{var g=$n();l(()=>a(g,"stop-color",n(O).interpolator()(n(r)))),l(()=>a(g,"offset",n(r))),$(t,g)}),i(z),i(C);var p=e(C),d=e(p);{var m=t=>{var r=Tn();l(()=>a(r,"d",n(L)(n(f)))),$(t,r)};vn(d,t=>{_()&&t(m)})}i(v),l(()=>{a(T,"transform",`translate(0, ${c-o.bottom})`),a(D,"x1",o.left),a(D,"x2",y-o.right),a(b,"transform",`translate(${o.left}, 0)`),a(z,"y1",c-o.bottom),a(z,"y2",o.top),a(p,"opacity",_()?.5:1),a(p,"x",o.left),a(p,"height",c-o.bottom),a(p,"width",y-o.left-o.right)}),$(s,v),K()}var zn=rn(`<!> <h2 id="creating-a-gradient-encoded-line-chart-in-svelte-with-d3">Creating a Gradient-Encoded Line Chart in Svelte with D3<a aria-hidden="true" tabindex="-1" href="#creating-a-gradient-encoded-line-chart-in-svelte-with-d3" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h2> <p>In this tutorial, weâll learn how to build a gradient-encoded line chart using Svelte 5 and D3.js. The gradient will not only enhance the visual appeal of the chart but also encode temperature data directly into the lineâs styling.</p> <!> <br> <p>What Youâll Learn</p> <ul><li>Importing and setting up D3 modules in a Svelte project.</li> <li>Using scales to map data values to visual properties.</li> <li>Generating an SVG <path>for the line.</path></li> <li>Adding a vertical color gradient that fills the line.</li></ul> <h2 id="full-code-preview">Full Code Preview<a aria-hidden="true" tabindex="-1" href="#full-code-preview" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h2> <pre class="language-svelte"><!></pre> <h2 id="parsing-and-loading-data">Parsing and Loading Data<a aria-hidden="true" tabindex="-1" href="#parsing-and-loading-data" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h2> <ul><li>You can download the data <a href="https://datavisualizationwithsvelte.com/data/temperature.csv" rel="nofollow" target="_blank" aria-label="Copy link to this paragraph">here</a></li></ul> <p>
1We use d3-fetch to load CSV data and process it for use in our chart. The dates are parsed into JavaScript Date objects, and temperature values, initially read as strings, are converted to numbers.</p> <p>By default, <code>d3.csv</code> treats all values in the CSV as strings. This creates issues when we try to compute the domain for the y-axis scale using <code>extent(data, d => d.temperature)</code>. Without conversion, the temperature values are treated as strings and sorted lexicographically, which leads to incorrect scaling or errors in the chart.</p> <p>To fix this, we convert the temperature values to numbers using <code>+d.temperature</code>. Hereâs the essential block:</p> <pre class="language-js"><!></pre> <h3 id="creating-the-scales">Creating the Scales<a aria-hidden="true" tabindex="-1" href="#creating-the-scales" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <p>Scales are critical for mapping data values to visual properties.</p> <ul><li><code>xScale</code> maps dates to horizontal positions on the chart.</li> <li><code>yScale</code> maps temperatures to vertical positions.</li> <li><code>colorScale</code> is a sequential color scale (interpolateTurbo) that defines the gradientâs color progression based on temperature values.</li></ul> <pre class="language-js"><!></pre> <h3 id="generating-the-line">Generating the Line<a aria-hidden="true" tabindex="-1" href="#generating-the-line" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <p>To draw the temperature trend line, we use D3âs line() generator with <code>curveStep</code> for a stepped appearance.</p> <pre class="language-js"><!></pre> <h3 id="adding-the-gradient">Adding the Gradient<a aria-hidden="true" tabindex="-1" href="#adding-the-gradient" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <p>The vertical gradient is defined using an SVG <code><linearGradient></code> inside <code><defs></code> element and is applied to the line.</p> <h4 id="what-is--ltdefsgt">What is <code><defs></code>?<a aria-hidden="true" tabindex="-1" href="#what-is--ltdefsgt" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h4> <p><code><defs></code> is a container for graphical elements that you want to define once and reuse multiple times. 2The elements inside <code><defs></code> are not rendered directly in the SVG. Instead, they can be referenced using an <code>id</code> attribute in other elements (e.g., lines, shapes). 3In this example, the <code><linearGradient></code> with the ID temperature-gradient is stored within <code><defs></code> and later applied to the chart elements using stroke or fill attributes.</p> <pre class="language-svelte"><!></pre> <h3 id="key-points">Key Points:<a aria-hidden="true" tabindex="-1" href="#key-points" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <ul><li><code>gradientUnits="userSpaceOnUse"</code>: Aligns the gradient with the chartâs coordinate system, ensuring it maps correctly to the chart dimensions.</li> <li>x1, y1, x2, y2: Define the start <code>(x1, y1)</code> and end <code>(x2, y2)</code> points of the gradient. Here, the gradient transitions vertically, spanning the y-axis.</li> <li>gradientStops: Dynamically generates 10 evenly spaced stops (using d3.ticks), with each stop assigned a color from the colorScale. The colorScale maps the y-axis domain (e.g., temperature values) to the gradientâs range of colors. This ensures that any y-value corresponds to one of the gradient colors..</li></ul> <h3 id="adding-gradient-to-the-line-path">Adding gradient to the Line Path<a aria-hidden="true" tabindex="-1" href="#adding-gradient-to-the-line-path" aria-label="Copy link to this paragraph">
3<img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <p>Finally, we apply the gradient to the line itself using the stroke attribute:</p> <pre class="language-svelte"><!></pre> <h3 id="gradient-example-explanation">Gradient Example Explanation<a aria-hidden="true" tabindex="-1" href="#gradient-example-explanation" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <p>This is similar to applying a gradient as a background to a rect element. Instead of drawing a line, we can fill a rect with the same gradient. This allows us to visualize how the gradient would appear across the entire chart area:</p> <pre class="language-svelte"><!></pre> <!> <h3 id="adding-axes">Adding Axes<a aria-hidden="true" tabindex="-1" href="#adding-axes" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <p>Both x-axis and y-axis ticks are rendered with simple loops using D3-generated ticks.</p> <pre class="language-svelte"><!></pre> <h3 id="final-result">Final Result<a aria-hidden="true" tabindex="-1" href="#final-result" aria-label="Copy link to this paragraph"><img src="/link.svg" alt="Copy link to this paragraph" class="icon icon-link"></a></h3> <p>The completed chart includes:</p> <ul><li>A stepped line encoding temperature trends.</li> <li>A gradient fill below the line for enhanced visual impact.</li> <li>X and Y axes for context.</li></ul> <p>By following these steps, you can create a visually appealing and functional gradient-encoded line chart!</p> <!>`,1);function Zn(s,k){const _=dn(k,["children","$$slots","$$events","$$legacy"]);mn(s,gn(()=>_,{children:(f,y)=>{var c=zn(),o=H(c);hn(o,{title:"Creating a Gradient Line Chart with Svelte 5 and D3.js",description:"Learn how to create a gradient line chart using Svelte and D3. This beginner-friendly guide walks you through building dynamic and visually appealing line charts with vertical gradients for effective data visualization.",keywords:"Svelte, D3, gradient line chart, responsive data visualizations, tutorials, guides, interactive charts, JavaScript frameworks, SVG gradients",ogImage:"og/line-gradient.jpg",imageAlt:"Gradient line chart of temperature data, built using Svelte and d3-scale-chromatic interpolateTurbo utility"});var h=e(o,6);Sn(h,{});var x=e(h,10),O=u(x);N(O,()=>`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> 4 <span class="token keyword">import</span> <span class="token punctuation">{</span> scaleTime<span class="token punctuation">,</span> scaleLinear<span class="token punctuation">,</span> scaleSequential <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d3-scale'</span><span class="token punctuation">;</span> 5 <span class="token keyword">import</span> <span class="token punctuation">{</span> extent<span class="token punctuation">,</span> ticks <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d3-array'</span><span class="token punctuation">;</span> 6 <span class="token keyword">import</span> <span class="token punctuation">{</span> interpolateTurbo <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d3-scale-chromatic'</span><span class="token punctuation">;</span> 7 <span class="token keyword">import</span> <span class="token punctuation">{</span> line<span class="token punctuation">,</span> curveStep <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d3-shape'</span><span class="token punctuation">;</span> 8 <span class="token keyword">import</span> <span class="token punctuation">{</span>
8 timeFormat <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d3-time-format'</span><span class="token punctuation">;</span> 9 <span class="token keyword">import</span> <span class="token punctuation">{</span> csv <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'d3-fetch'</span><span class="token punctuation">;</span> 10 <span class="token keyword">import</span> <span class="token punctuation">{</span> onMount <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'svelte'</span><span class="token punctuation">;</span> 11 12 <span class="token keyword">let</span> data <span class="token operator">=</span> <span class="token function">$state</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 13 14 <span class="token function">onMount</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 15 <span class="token keyword">try</span> <span class="token punctuation">{</span> 16 <span class="token keyword">const</span> rawData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">csv</span><span class="token punctuation">(</span><span class="token string">'/data/temperature.csv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Change the path if needed</span> 17 data <span class="token operator">=</span> rawData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> 18 <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>date<span class="token punctuation">)</span><span class="token punctuation">,</span> 19 <span class="token literal-property property">temperature</span><span class="token operator">:</span> d<span class="token punctuation">.</span>temperature 20 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 21 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>rawData<span class="token punctuation">,</span> data<span class="token punctuation">)</span><span class="token punctuation">;</span> 22 <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span> 23 console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'Error loading CSV file:'</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span><span class="token punctuation">;</span> 24 <span class="token punctuation">}</span> 25 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 26 <span class="token comment">// Chart dimensions</span> 27 <span class="token keyword">const</span> width <span class="token operator">=</span> <span class="token number">928</span><span class="token punctuation">;</span> 28 <span class="token keyword">const</span> height <span class="token operator">=</span> <span class="token number">500</span><span class="token punctuation">;</span> 29 <span class="token keyword">const</span> margin <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">40</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> 30 31 <span class="token comment">// Scales</span> 32 <span class="token keyword">let</span> xScale <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span> 33 <span class="token function">
33scaleTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 34 <span class="token punctuation">.</span><span class="token function">domain</span><span class="token punctuation">(</span><span class="token function">extent</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> d<span class="token punctuation">.</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span> 35 <span class="token punctuation">.</span><span class="token function">range</span><span class="token punctuation">(</span><span class="token punctuation">[</span>margin<span class="token punctuation">.</span>left<span class="token punctuation">,</span> width <span class="token operator">-</span> margin<span class="token punctuation">.</span>right<span class="token punctuation">]</span><span class="token punctuation">)</span> 36 <span class="token punctuation">)</span><span class="token punctuation">;</span> 37 38 <span class="token keyword">let</span> yScale <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span> 39 <span class="token function">scaleLinear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 40 <span class="token punctuation">.</span><span class="token function">domain</span><span class="token punctuation">(</span><span class="token function">extent</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> d<span class="token punctuation">.</span>temperature<span class="token punctuation">)</span><span class="token punctuation">)</span> 41 <span class="token punctuation">.</span><span class="token function">nice</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 42 <span class="token punctuation">.</span><span class="token function">range</span><span class="token punctuation">(</span><span class="token punctuation">[</span>height <span class="token operator">-</span> margin<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> margin<span class="token punctuation">.</span>top<span class="token punctuation">]</span><span class="token punctuation">)</span> 43 <span class="token punctuation">)</span><span class="token punctuation">;</span> 44 45 <span class="token keyword">let</span> colorScale <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span><span class="token function">scaleSequential</span><span class="token punctuation">(</span>yScale<span class="token punctuation">.</span><span class="token function">domain</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> interpolateTurbo<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 46 47 <span class="token comment">// Line generator</span> 48 <span class="token keyword">let</span> lineGenerator <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span> 49 <span class="token function">line</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 50 <span class="token punctuation">.</span><span class="token function">curve</span><span class="token punctuation">(</span>curveStep<span class="token punctuation">)</span> 51 <span class="token punctuation">.</span><span class="token function">defined</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>temperature<span class="token punctuation">)</span><span class="token punctuation">)</span>
52 <span class="token punctuation">.</span><span class="token function">x</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">xScale</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span> 53 <span class="token punctuation">.</span><span class="token function">y</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">yScale</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>temperature<span class="token punctuation">)</span><span class="token punctuation">)</span> 54 <span class="token punctuation">)</span><span class="token punctuation">;</span> 55 56 <span class="token comment">// Gradient stops</span> 57 <span class="token keyword">let</span> gradientStops <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span><span class="token function">ticks</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 58 <span class="token function">$effect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>gradientStops<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 59 <span class="token comment">// Axis ticks</span> 60 <span class="token keyword">let</span> xTicks <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span>xScale<span class="token punctuation">.</span><span class="token function">ticks</span><span class="token punctuation">(</span>width <span class="token operator">/</span> <span class="token number">80</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 61 <span class="token keyword">let</span> yTicks <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span>yScale<span class="token punctuation">.</span><span class="token function">ticks</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 62</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> 63 64<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>svg</span> 65 <span class="token language-javascript"><span class="token punctuation">{</span>width<span class="token punctuation">}</span></span> 66 <span class="token language-javascript"><span class="token punctuation">{</span>height<span class="token punctuation">}</span></span> 67 <span class="token attr-name">viewBox=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">0 0 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>width<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>height<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span> 68 <span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>max-width: 100%; height: auto;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 69 <span class="token comment"><!-- X-axis --></span> 70 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">transform=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">translate(0, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>height <span class="token operator">-</span> margin<span class="token punctuation">.</span>bottom<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span> 71 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">xTicks </span><span class="token keyword">as</span> <span class="token language-javascript">tick<span class="token punctuation">}</span></span></span>
72 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> 73 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fill-gray-400<span class="token punctuation">"</span></span> 74 <span class="token attr-name">x=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">xScale</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 75 <span class="token attr-name">y=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> 76 <span class="token attr-name">dy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.71em<span class="token punctuation">"</span></span> 77 <span class="token attr-name">font-size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>14px<span class="token punctuation">"</span></span> 78 <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 79 <span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">timeFormat</span><span class="token punctuation">(</span><span class="token string">'%b'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 80 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> 81 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span> 82 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span> 83 <span class="token attr-name">x1=</span><span class="token language-javascript"><span class="token punctuation">{</span>margin<span class="token punctuation">.</span>left<span class="token punctuation">}</span></span> 84 <span class="token attr-name">x2=</span><span class="token language-javascript"><span class="token punctuation">{</span>width <span class="token operator">-</span> margin<span class="token punctuation">.</span>right<span class="token punctuation">}</span></span> 85 <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span> 86 <span class="token attr-name">stroke-opacity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> 87 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> 88 89 <span class="token comment"><!-- Y-axis --></span> 90 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">transform=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">translate(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>margin<span class="token punctuation">.</span>left<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, 0)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span> 91 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">yTicks </span><span class="token keyword">as</span> <span class="token language-javascript">tick<span class="token punctuation">}</span></span></span>
92 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> 93 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fill-gray-400<span class="token punctuation">"</span></span> 94 <span class="token attr-name">x=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">6</span><span class="token punctuation">}</span></span> 95 <span class="token attr-name">y=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">yScale</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 96 <span class="token attr-name">dy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.32em<span class="token punctuation">"</span></span> 97 <span class="token attr-name">font-size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>14px<span class="token punctuation">"</span></span> 98 <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 99 <span class="token language-javascript"><span class="token punctuation">{</span>tick<span class="token punctuation">}</span></span> 100 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> 101 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>line</span> 102 <span class="token attr-name">x1=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">0</span><span class="token punctuation">}</span></span> 103 <span class="token attr-name">x2=</span><span class="token language-javascript"><span class="token punctuation">{</span>width <span class="token operator">-</span> margin<span class="token punctuation">.</span>left <span class="token operator">-</span> margin<span class="token punctuation">.</span>right<span class="token punctuation">}</span></span> 104 <span class="token attr-name">y1=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">yScale</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 105 <span class="token attr-name">y2=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">yScale</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 106 <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>currentColor<span class="token punctuation">"</span></span> 107 <span class="token attr-name">stroke-opacity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.1<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> 108 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span> 109 <span class="token comment"><!-- Y Axis Label --></span> 110 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> 111 <span class="token attr-name">x=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">26</span><span class="token punctuation">}</span></span>
112 <span class="token attr-name">y=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">yScale</span><span class="token punctuation">(</span>yScale<span class="token punctuation">.</span><span class="token function">domain</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> 113 <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>fill-gray-400<span class="token punctuation">"</span></span> 114 <span class="token attr-name">font-size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>14px<span class="token punctuation">"</span></span> 115 <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>start<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 116 Temperature (°F) â 117 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> 118 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> 119 120 <span class="token comment"><!-- Gradient --></span> 121 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>defs</span><span class="token punctuation">></span></span> 122 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>linearGradient</span> 123 <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>temperature-gradient<span class="token punctuation">"</span></span> 124 <span class="token attr-name">gradientUnits</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userSpaceOnUse<span class="token punctuation">"</span></span> 125 <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> 126 <span class="token attr-name">y1=</span><span class="token language-javascript"><span class="token punctuation">{</span>height <span class="token operator">-</span> margin<span class="token punctuation">.</span>bottom<span class="token punctuation">}</span></span> 127 <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> 128 <span class="token attr-name">y2=</span><span class="token language-javascript"><span class="token punctuation">{</span>margin<span class="token punctuation">.</span>top<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> 129 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">gradientStops </span><span class="token keyword">as</span> <span class="token language-javascript">stop<span class="token punctuation">,</span> i<span class="token punctuation">}</span></span></span> 130 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>stop</span> <span class="token attr-name">offset=</span><span class="token language-javascript"><span class="token punctuation">{</span>stop<span class="token punctuation">}</span></span> <span class="token attr-name">stop-color=</span><span class="token language-javascript"><span class="token punctuation">{</span>colorScale<span class="token punctuation">.</span><span class="token function">interpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>stop<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
131 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span> 132 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>linearGradient</span><span class="token punctuation">></span></span> 133 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span> 134 <span class="token comment"><!-- Line --></span> 135 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> 136 <span class="token attr-name">opacity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> 137 <span class="token attr-name">d=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">lineGenerator</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 138 <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> 139 <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url(#temperature-gradient)<span class="token punctuation">"</span></span> 140 <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1.5<span class="token punctuation">"</span></span> 141 <span class="token attr-name">stroke-linejoin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> 142 <span class="token attr-name">stroke-linecap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> 143<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>svg</span><span class="token punctuation">></span></span></code>`),i(x);var L=e(x,12),E=u(L);N(E,()=>`<code class="language-js"><span class="token function">onMount</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> 144 <span class="token keyword">const</span> rawData <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">csv</span><span class="token punctuation">(</span><span class="token string">'/data/temperature.csv'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 145 data <span class="token operator">=</span> rawData<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> 146 <span class="token literal-property property">date</span><span class="token operator">:</span> <span class="token function">parseDate</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>date<span class="token punctuation">)</span><span class="token punctuation">,</span> 147 <span class="token literal-property property">temperature</span><span class="token operator">:</span> <span class="token operator">+</span>d<span class="token punctuation">.</span>temperature <span class="token comment">// Convert string to number</span> 148 <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 149<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code>`),i(L);var U=e(L,8),S=u(U);N(S,()=>`<code class="language-js"><span class="token keyword">let</span> xScale <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span> 150 <span class="token function">scaleUtc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 151 <span class="token punctuation">.</span><span class="token function">domain</span><span class="token punctuation">(</span><span class="token function">extent</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> d<span class="token punctuation">.</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span> 152 <span class="token punctuation">.</span><span class="token function">range</span><span class="token punctuation">(</span><span class="token punctuation">[</span>margin<span class="token punctuation">.</span>left<span class="token punctuation">,</span> width <span class="token operator">-</span> margin<span class="token punctuation">.</span>right<span class="token punctuation">]</span><span class="token punctuation">)</span> 153<span class="token punctuation">)</span><span class="token punctuation">;</span> 154<span class="token keyword">let</span> yScale <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span> 155 <span class="token function">scaleLinear</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 156 <span class="token punctuation">.</span><span class="token function">domain</span><span class="token punctuation">(</span><span class="token function">extent</span><span class="token punctuation">(</span>data<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> d<span class="token punctuation">.</span>temperature<span class="token punctuation">)</span><span class="token punctuation">)</span> 157 <span class="token punctuation">.</span><span class="token function">nice</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 158 <span class="token punctuation">.</span><span class="token function">range</span><span class="token punctuation">(</span><span class="token punctuation">[</span>height <span class="token operator">-</span> margin<span class="token punctuation">.</span>bottom<span class="token punctuation">,</span> margin<span class="token punctuation">.</span>top<span class="token punctuation">]</span><span class="token punctuation">)</span> 159<span class="token punctuation">)</span><span class="token punctuation">;</span> 160<span class="token keyword">let</span> colorScale <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span><span class="token function">scaleSequential</span><span class="token punctuation">(</span>yScale<span class="token punctuation">.</span><span class="token function">domain</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> interpolateTurbo<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code>`),i(U);var v=e(U,6),T=u(v);N(T,()=>`<code class="language-js"><span class="token keyword">let</span> lineGenerator <span class="token operator">=</span> <span class="token function">$derived</span><span class="token punctuation">(</span> 161 <span class="token function">line</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 162 <span class="token punctuation">.</span><span class="token function">curve</span><span class="token punctuation">(</span>curveStep<span class="token punctuation">)</span> 163 <span class="token punctuation">.</span><span class="token function">defined</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token operator">!</span><span class="token function">isNaN</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>temperature<span class="token punctuation">)</span><span class="token punctuation">)</span> 164 <span class="token punctuation">.</span><span class="token function">x</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">xScale</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>date<span class="token punctuation">)</span><span class="token punctuation">)</span> 165 <span class="token punctuation">.</span><span class="token function">y</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">d</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">yScale</span><span class="token punctuation">(</span>d<span class="token punctuation">.</span>temperature<span class="token punctuation">)</span><span class="token punctuation">)</span> 166<span class="token punctuation">)</span><span class="token punctuation">;</span></code>`),i(v);var G=e(v,10),D=u(G);N(D,()=>`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>defs</span><span class="token punctuation">></span></span> 167 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>linearGradient</span> 168 <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>temperature-gradient<span class="token punctuation">"</span></span> 169 <span class="token attr-name">gradientUnits</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userSpaceOnUse<span class="token punctuation">"</span></span> 170 <span class="token attr-name">x1</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> 171 <span class="token attr-name">y1=</span><span class="token language-javascript"><span class="token punctuation">{</span>height <span class="token operator">-</span> margin<span class="token punctuation">.</span>bottom<span class="token punctuation">}</span></span> 172 <span class="token attr-name">x2</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> 173 <span class="token attr-name">y2=</span><span class="token language-javascript"><span class="token punctuation">{</span>margin<span class="token punctuation">.</span>top<span class="token punctuation">}</span></span><span class="token punctuation">></span></span> 174 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">gradientStops </span><span class="token keyword">as</span> <span class="token language-javascript">stop<span class="token punctuation">,</span> i<span class="token punctuation">}</span></span></span>
175 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>stop</span> <span class="token attr-name">offset=</span><span class="token language-javascript"><span class="token punctuation">{</span>stop<span class="token punctuation">}</span></span> <span class="token attr-name">stop-color=</span><span class="token language-javascript"><span class="token punctuation">{</span>colorScale<span class="token punctuation">.</span><span class="token function">interpolator</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span>stop<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span> 176 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span> 177 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>linearGradient</span><span class="token punctuation">></span></span> 178<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>defs</span><span class="token punctuation">></span></span></code>`),i(G);var b=e(G,10),A=u(b);N(A,()=>`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>path</span> 179 <span class="token attr-name">d=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">lineGenerator</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 180 <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>none<span class="token punctuation">"</span></span> 181 <span class="token attr-name">stroke</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url(#temperature-gradient)<span class="token punctuation">"</span></span> 182 <span class="token attr-name">stroke-width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1.5<span class="token punctuation">"</span></span> 183 <span class="token attr-name">stroke-linejoin</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> 184 <span class="token attr-name">stroke-linecap</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>round<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></code>`),i(b);var j=e(b,6),C=u(j);N(C,()=>`<code class="language-svelte"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>rect</span> 185 <span class="token attr-name">opacity</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> 186 <span class="token attr-name">x=</span><span class="token language-javascript"><span class="token punctuation">{</span>margin<span class="token punctuation">.</span>left<span class="token punctuation">}</span></span> 187 <span class="token attr-name">y</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> 188 <span class="token attr-name">fill</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>url(#temperature-gradient)<span class="token punctuation">"</span></span> 189 <span class="token attr-name">height=</span><span class="token language-javascript"><span class="token punctuation">{</span>height <span class="token operator">-</span> margin<span class="token punctuation">.</span>bottom<span class="token punctuation">}</span></span> 190 <span class="token attr-name">width=</span><span class="token language-javascript"><span class="token punctuation">{</span>width <span class="token operator">-</span> margin<span class="token punctuation">.</span>left <span class="token operator">-</span> margin<span class="token punctuation">.</span>right<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>rect</span><span class="token punctuation">></span></span></code>`),i(j);var z=e(j,2);Dn(z,{overlay:!1});var p=e(z,6),d=u(p);N(d,()=>`<code class="language-svelte"><span class="token comment"><!-- X-axis --></span> 191<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">transform=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">translate(0, </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>height <span class="token operator">-</span> margin<span class="token punctuation">.</span>bottom<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span> 192 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">xTicks </span><span class="token keyword">as</span> <span class="token language-javascript">tick<span class="token punctuation">}</span></span></span> 193 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span>
194 <span class="token attr-name">x=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">xScale</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 195 <span class="token attr-name">y=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token number">6</span><span class="token punctuation">}</span></span> 196 <span class="token attr-name">dy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.71em<span class="token punctuation">"</span></span> 197 <span class="token attr-name">font-size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>14px<span class="token punctuation">"</span></span> 198 <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>middle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 199 <span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">timeFormat</span><span class="token punctuation">(</span><span class="token string">'%b'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> 200 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> 201 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span> 202<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span> 203 204<span class="token comment"><!-- Y-axis --></span> 205<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>g</span> <span class="token attr-name">transform=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">translate(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>margin<span class="token punctuation">.</span>left<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">, 0)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span> 206 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">#each</span> <span class="token language-javascript">yTicks </span><span class="token keyword">as</span> <span class="token language-javascript">tick<span class="token punctuation">}</span></span></span> 207 <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>text</span> <span class="token attr-name">x=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token operator">-</span><span class="token number">6</span><span class="token punctuation">}</span></span> <span class="token attr-name">y=</span><span class="token language-javascript"><span class="token punctuation">{</span><span class="token function">yScale</span><span class="token punctuation">(</span>tick<span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token attr-name">dy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>0.32em<span class="token punctuation">"</span></span> <span class="token attr-name">font-size</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">text-anchor</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>end<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
208 <span class="token language-javascript"><span class="token punctuation">{</span>tick<span class="token punctuation">}</span></span> 209 <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>text</span><span class="token punctuation">></span></span> 210 <span class="token each"><span class="token punctuation">{</span><span class="token keyword">/each</span><span class="token punctuation">}</span></span> 211<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>g</span><span class="token punctuation">></span></span></code>`),i(p);var m=e(p,10);fn(m,{}),$(f,c)},$$slots:{default:!0}}))}export{Zn as component,Qn as universal}; 212//# sourceMappingURL=16.C_VlP1fF.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.