scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Modules 002</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> <link rel="stylesheet" media="all" href="../../docco.css" /> </head> <body> <div id="container"> <div id="background"></div> <ul id="jump_to"> <li> <a class="large" href="javascript:void(0);">Jump To …</a> <a class="small" href="javascript:void(0);">+</a> <div id="jump_wrapper"> <div id="jump_page_wrapper"> <div id="jump_page"> <a class="source" href="canvas-minimap.html"> ./demo/modules/canvas-minimap.js </a> <a class="source" href="canvas-scene-editor.html"> ./demo/modules/canvas-scene-editor.js </a> <a class="source" href="dom-entity-editor.html"> ./demo/modules/dom-entity-editor.js </a> <a class="source" href="entity-copy-paste.html"> ./demo/modules/entity-copy-paste.js </a> <a class="source" href="entity-manipulation-gui.html"> ./demo/modules/entity-manipulation-gui.js </a> <a class="source" href="entity-navigation.html"> ./demo/modules/entity-navigation.js </a> <a class="source" href="entity-ring-builder.html"> ./demo/modules/entity-ring-builder.js </a> <a class="source" href="london-crime-graphic.html"> ./demo/modules/london-crime-graphic.js </a> <a class="source" href="london-crime-lines.html"> ./demo/modules/london-crime-lines.js </a> <a class="source" href="london-crime-stacked-bars.html"> ./demo/modules/london-crime-stacked-bars.js </a> <a class="source" href="lottie-loader.html"> ./demo/modules/lottie-loader.js </a> <a class="source" href="simple-chart-frame-tests.html"> ./demo/modules/simple-chart-frame-tests.js </a> <a class="source" href="simple-chart-frame.html"> ./demo/modules/simple-chart-frame.js </a> <a class="source" href="simple-graph-lines.html"> ./demo/modules/simple-graph-lines.js </a> <a class="source" href="simple-graph-stacked-bars.html"> ./demo/modules/simple-graph-stacked-bars.js </a> <a class="source" href="wikipedia-views-spiral-chart.html"> ./demo/modules/wikipedia-views-spiral-chart.js </a> <a class="source" href="../snippets/animated-highlight-gradient-text-snippet.html"> ./demo/snippets/animated-highlight-gradient-text-snippet.js </a> <a class="source" href="../snippets/animated-hover-gradient-snippet.html"> ./demo/snippets/animated-hover-gradient-snippet.js </a> <a class="source" href="../snippets/animated-word-gradient-snippet.html"> ./demo/snippets/animated-word-gradient-snippet.js </a> <a class="source" href="../snippets/before-after-slider-infographic.html"> ./demo/snippets/before-after-slider-infographic.js </a> <a class="source" href="../snippets/bubbles-text-snippet.html"> ./demo/snippets/bubbles-text-snippet.js </a> <a class="source" href="../snippets/green-box-snippet.html"> ./demo/snippets/green-box-snippet.js </a> <a class="source" href="../snippets/jazzy-button-snippet.html"> ./demo/snippets/jazzy-button-snippet.js </a> <a class="source" href="../snippets/page-performance-snippet-test.html"> ./demo/snippets/page-performance-snippet-test.js </a> <a class="source" href="../snippets/page-performance-snippet.html"> ./demo/snippets/page-performance-snippet.js </a> <a class="source" href="../snippets/pan-image-snippet.html"> ./demo/snippets/pan-image-snippet.js </a> <a class="source" href="../snippets/placeholder-effect-snippet.html"> ./demo/snippets/placeholder-effect-snippet.js </a> <a class="source" href="../snippets/ripple-effect-snippet.html"> ./demo/snippets/ripple-effect-snippet.js </a> <a class="source" href="../snippets/risograph-text-gradient-snippet.html"> ./demo/snippets/risograph-text-gradient-snippet.js </a> <a class="source" href="../snippets/spotlight-text-snippet-test.html"> ./demo/snippets/spotlight-text-snippet-test.js </a> <a class="source" href="../snippets/spotlight-text-snippet.html"> ./demo/snippets/spotlight-text-snippet.js </a> <a class="source" href="../snippets/swirling-stripes-text-snippet.html"> ./demo/snippets/swirling-stripes-text-snippet.js </a> <a class="source" href="../snippets/text-snippet-helper.html"> ./demo/snippets/text-snippet-helper.js </a> <a class="source" href="../snippets/word-highlighter-snippet.html"> ./demo/snippets/word-highlighter-snippet.js </a> <a class="source" href="../snippets/worley-text-gradient-snippet.html"> ./demo/snippets/worley-text-gradient-snippet.js </a> </div> </div> </li> </ul> <ul class="sections"> <li id="section-1"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-1">§</a> </div> <h1 id="demo-modules-002">Demo Modules 002</h1> <p>Spiral charts</p> <p>Related files:</p> <ul> <li><a href="../modules-002.html">Spiral charts - main module</a></li> </ul> <p>Import the Scrawl-canvas object </p> <ul> <li>There’s various ways to do this. See <a href="../dom-001.html">Demo DOM-001</a> for more details</li> </ul> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> scrawl <span class="hljs-keyword">from</span> <span class="hljs-string">'../../source/scrawl.js'</span>;</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> <p>Function to fetch and parse Wikipedia page view timeseries data</p> <ul> <li>Wikipedia implements the <a href="https://www.mediawiki.org/wiki/API:Main_page">Mediawiki Action API</a>, meaning we can retrieve page views statistics by calling the appropriate endpoint URL</li> <li>The fetch call is asynchronous, thus all calls get wrapped in Javascript Promises</li> <li>Function default action is to retrieve data for views of the Wikipedia Cat page for the past three years</li> </ul> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">getData</span> = (<span class="hljs-params">page = <span class="hljs-string">'Cat'</span></span>) => { <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> { <span class="hljs-keyword">const</span> data = { <span class="hljs-attr">page</span>: <span class="hljs-string">''</span>, <span class="hljs-attr">max</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">min</span>: <span class="hljs-number">0</span>, <span class="hljs-attr">fromdate</span>: <span class="hljs-string">'20200101'</span>, <span class="hljs-attr">todate</span>: <span class="hljs-string">'20200101'</span>, <span class="hljs-attr">sunday</span>: [], <span class="hljs-attr">monday</span>: [], <span class="hljs-attr">tuesday</span>: [], <span class="hljs-attr">wednesday</span>: [], <span class="hljs-attr">thursday</span>: [], <span class="hljs-attr">friday</span>: [], <span class="hljs-attr">saturday</span>: [], }; <span class="hljs-keyword">let</span> t = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(), f = <span class="hljs-keyword">new</span> <span class="hljs-title class_">Date</span>(); t.<span class="hljs-title function_">setDate</span>(t.<span class="hljs-title function_">getDate</span>() - <span class="hljs-number">1</span>); f.<span class="hljs-title function_">setFullYear</span>(f.<span class="hljs-title function_">getFullYear</span>() - <span class="hljs-number">3</span>); <span class="hljs-keyword">let</span> fromdate = f.<span class="hljs-title function_">toISOString</span>().<span class="hljs-title function_">split</span>(<span class="hljs-string">'T'</span>)[<span class="hljs-number">0</span>].<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/-/g</span>, <span class="hljs-string">''</span>), todate = t.<span class="hljs-title function_">toISOString</span>().<span class="hljs-title function_">split</span>(<span class="hljs-string">'T'</span>)[<span class="hljs-number">0</span>].<span class="hljs-title function_">replace</span>(<span class="hljs-regexp">/-/g</span>, <span class="hljs-string">''</span>), dayCounter = f.<span class="hljs-title function_">getDay</span>(), maxViews = <span class="hljs-number">0</span>, minViews = -<span class="hljs-number">1</span>; <span class="hljs-keyword">let</span> url = <span class="hljs-string">`https://wikimedia.org/api/rest_v1/metrics/pageviews/per-article/en.wikipedia/all-access/user/<span class="hljs-subst">${page}</span>/daily/<span class="hljs-subst">${fromdate}</span>/<span class="hljs-subst">${todate}</span>`</span>; <span class="hljs-title function_">fetch</span>(url) .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">response</span> =></span> response.<span class="hljs-title function_">json</span>()) .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">dataObject</span> =></span> { <span class="hljs-keyword">let</span> dataArray = dataObject.<span class="hljs-property">items</span>; <span class="hljs-keyword">let</span> results = [[],[],[],[],[],[],[]]; dataArray.<span class="hljs-title function_">forEach</span>(<span class="hljs-function"><span class="hljs-params">d</span> =></span> { <span class="hljs-keyword">let</span> views = d.<span class="hljs-property">views</span>; maxViews = (views > maxViews) ? views : maxViews; <span class="hljs-keyword">if</span> (minViews < <span class="hljs-number">0</span>) minViews = maxViews; <span class="hljs-keyword">else</span> minViews = (views < minViews) ? views : minViews; results[dayCounter].<span class="hljs-title function_">push</span>(views); dayCounter++; dayCounter = dayCounter % <span class="hljs-number">7</span>; }); data.<span class="hljs-property">page</span> = page; data.<span class="hljs-property">max</span> = maxViews; data.<span class="hljs-property">min</span> = minViews; data.<span class="hljs-property">fromdate</span> = fromdate; data.<span class="hljs-property">todate</span> = todate; data.<span class="hljs-property">sun</span> = results[<span class="hljs-number">0</span>]; data.<span class="hljs-property">mon</span> = results[<span class="hljs-number">1</span>]; data.<span class="hljs-property">tue</span> = results[<span class="hljs-number">2</span>]; data.<span class="hljs-property">wed</span> = results[<span class="hljs-number">3</span>]; data.<span class="hljs-property">thu</span> = results[<span class="hljs-number">4</span>]; data.<span class="hljs-property">fri</span> = results[<span class="hljs-number">5</span>]; data.<span class="hljs-property">sat</span> = results[<span class="hljs-number">6</span>]; <span class="hljs-title function_">resolve</span>(data); }) .<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =></span> { <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(e); <span class="hljs-title function_">reject</span>(data); }); }); };</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> <p>We export a function which issues the fetch call and then builds a chart in a Cell. The function requires the following arguments:</p> <ul> <li><strong>page</strong> - String value of the Wikipedia page, whose views statistics are to be charted: <a href="https://en.wikipedia.org/wiki/__Cat">https://en.wikipedia.org/wiki/__Cat</a>__</li> <li><strong>canvasWrapper</strong> - a Scrawl-canvas Canvas wrapper object</li> <li><em><strong>reqs</strong></em> - (not required) a Javascript Object containing key:value attributes that help define the appearance of the chart.</li> </ul> <p>We include functionality to action the following attributes in the reqs object argument: </p> <ul> <li><em><strong>size</strong></em> - Number - the size of the (square) generated chart. Default: 400</li> <li><em><strong>backgroundColor</strong></em> - CSS Color String - the background color of the generated chart. Default: ‘transparent’</li> <li><em><strong>minimumColor</strong></em> - CSS Color String - color used to display low daily views datapoints. Default: ‘azure’</li> <li><em><strong>medialColor</strong></em> - CSS Color String - color used to display average daily views datapoints. Default: ‘blue’</li> <li><em><strong>maximumColor</strong></em> - CSS Color String - color used to display high daily views datapoints. Default: ‘red’</li> </ul> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">function</span> (<span class="hljs-params">page, canvasWrapper, reqs = {}</span>) {</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <p>We will eventually return a Picture entity to the calling invocation - but generating it takes time, hence we return a promise and resolve the Picture entity in due course</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <p>We will create a new Cell for the chart, fabricate the required entitys, render the Cell, then capture the output into a single Picture entity which we assign to the canvasWrapper’s Group. After this all completes we can kill the Cell, its Group, and all of the Group’s entitys</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> cell = canvasWrapper.<span class="hljs-title function_">buildCell</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-cell`</span>, <span class="hljs-attr">width</span>: reqs.<span class="hljs-property">size</span> || <span class="hljs-number">400</span>, <span class="hljs-attr">height</span>: reqs.<span class="hljs-property">size</span> || <span class="hljs-number">400</span>, <span class="hljs-attr">cleared</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">compiled</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">shown</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">backgroundColor</span>: reqs.<span class="hljs-property">backgroundColor</span> || <span class="hljs-string">'transparent'</span>, }); <span class="hljs-keyword">const</span> chartGroup = scrawl.<span class="hljs-property">library</span>.<span class="hljs-property">group</span>[cell.<span class="hljs-property">name</span>];</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <p>Use Color objects to determine the appropriate color for each charted view value. Again, we’ll kill these objects once we’ve finished with them</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> lowViewsFactory = scrawl.<span class="hljs-title function_">makeColor</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-low-views`</span>, <span class="hljs-attr">minimumColor</span>: reqs.<span class="hljs-property">minimumColor</span> || <span class="hljs-string">'azure'</span>, <span class="hljs-attr">maximumColor</span>: reqs.<span class="hljs-property">medialColor</span> || <span class="hljs-string">'blue'</span>, }); <span class="hljs-keyword">const</span> highViewsFactory = scrawl.<span class="hljs-title function_">makeColor</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-high-views`</span>, <span class="hljs-attr">minimumColor</span>: reqs.<span class="hljs-property">medialColor</span> || <span class="hljs-string">'blue'</span>, <span class="hljs-attr">maximumColor</span>: reqs.<span class="hljs-property">maximumColor</span> || <span class="hljs-string">'red'</span>, });</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <p>We start by retrieving the data from Wikipedia</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-title function_">getData</span>(page) .<span class="hljs-title function_">then</span>(<span class="hljs-function"><span class="hljs-params">data</span> =></span> {</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <p>Some initial calculations</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> maxViews = data.<span class="hljs-property">max</span>, minViews = data.<span class="hljs-property">min</span>, medianViews = (maxViews - minViews) / <span class="hljs-number">2</span>; <span class="hljs-keyword">const</span> maxDataLen = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">max</span>(data.<span class="hljs-property">mon</span>.<span class="hljs-property">length</span>, data.<span class="hljs-property">tue</span>.<span class="hljs-property">length</span>, data.<span class="hljs-property">wed</span>.<span class="hljs-property">length</span>, data.<span class="hljs-property">thu</span>.<span class="hljs-property">length</span>, data.<span class="hljs-property">fri</span>.<span class="hljs-property">length</span>, data.<span class="hljs-property">sat</span>.<span class="hljs-property">length</span>, data.<span class="hljs-property">sun</span>.<span class="hljs-property">length</span>);</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <p>Each day series is a spiral of Line entitys. We’ll cut down on the code by creating a factory to generate each day’s spiral</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">const</span> buildDayChart = <span class="hljs-keyword">function</span> (<span class="hljs-params">dayData, offsetVal, dayName, missFirst</span>) { <span class="hljs-keyword">let</span> currentWeek, currentYear, nextWeek, nextYear; <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>, iz = dayData.<span class="hljs-property">length</span> - <span class="hljs-number">2</span>; i < iz; i++) { <span class="hljs-keyword">if</span> (missFirst) { currentWeek = (i + <span class="hljs-number">1</span>) % <span class="hljs-number">52</span>; currentYear = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>((i + <span class="hljs-number">1</span>) / <span class="hljs-number">52</span>); nextWeek = (i + <span class="hljs-number">2</span>) % <span class="hljs-number">52</span>; nextYear = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>((i + <span class="hljs-number">2</span>) / <span class="hljs-number">52</span>); nextWeek = nextWeek % <span class="hljs-number">52</span>; } <span class="hljs-keyword">else</span> { currentWeek = i % <span class="hljs-number">52</span>; currentYear = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(i / <span class="hljs-number">52</span>); nextWeek = (i + <span class="hljs-number">1</span>) % <span class="hljs-number">52</span>; nextYear = <span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>((i + <span class="hljs-number">1</span>) / <span class="hljs-number">52</span>); nextWeek = nextWeek % <span class="hljs-number">52</span>; } <span class="hljs-keyword">let</span> views = dayData[i] - minViews, dataColor;</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <p>Get the appropriate color for this data point’s value</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (views < medianViews) dataColor = lowViewsFactory.<span class="hljs-title function_">getRangeColor</span>(views / medianViews); <span class="hljs-keyword">else</span> dataColor = highViewsFactory.<span class="hljs-title function_">getRangeColor</span>((views - medianViews) / medianViews);</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> <p>Each line represents a siongle data point, positioned in its appropriate place on the spiral by reference to the chart’s spoke lines</p> </div> <div class="content"><div class='highlight'><pre> scrawl.<span class="hljs-title function_">makeLine</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-<span class="hljs-subst">${dayName}</span>-line-<span class="hljs-subst">${i}</span>`</span>, <span class="hljs-attr">group</span>: chartGroup, <span class="hljs-attr">lineWidth</span>: <span class="hljs-number">5</span>, <span class="hljs-attr">strokeStyle</span>: dataColor, <span class="hljs-attr">path</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-week-line-<span class="hljs-subst">${currentWeek}</span>`</span>, <span class="hljs-attr">pathPosition</span>: (currentYear * <span class="hljs-number">0.33</span>) + offsetVal, <span class="hljs-attr">lockTo</span>: <span class="hljs-string">'path'</span>, <span class="hljs-attr">endPath</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-week-line-<span class="hljs-subst">${nextWeek}</span>`</span>, <span class="hljs-attr">endPathPosition</span>: (nextYear * <span class="hljs-number">0.33</span>) + offsetVal, <span class="hljs-attr">endLockTo</span>: <span class="hljs-string">'path'</span>, <span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>, }); } }</pre></div></div> </li> <li id="section-12"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-12">§</a> </div> <p>A year is made up of 52 weeks. We create 52 Line entity spokes around a central point to act as the frame for our chart. By setting an appropriate value for each Line’s handleY and roll attributes means that when it comes to building the day spirals we just need to pivot those Lines to our spokes - positioning made easy!</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-number">52</span>; i++) { scrawl.<span class="hljs-title function_">makeLine</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-week-line-<span class="hljs-subst">${i}</span>`</span>, <span class="hljs-attr">group</span>: chartGroup, <span class="hljs-attr">start</span>: [<span class="hljs-number">200</span>, <span class="hljs-number">220</span>], <span class="hljs-attr">end</span>: [<span class="hljs-number">200</span>, (<span class="hljs-number">220</span> - <span class="hljs-number">120</span>)], <span class="hljs-attr">handle</span>: [<span class="hljs-number">0</span>, ((i / <span class="hljs-number">52</span>) * (<span class="hljs-number">120</span> / <span class="hljs-number">3</span>)) + <span class="hljs-number">30</span>], <span class="hljs-attr">roll</span>: (i / <span class="hljs-number">52</span>) * <span class="hljs-number">360</span>, <span class="hljs-attr">useAsPath</span>: <span class="hljs-literal">true</span>,</pre></div></div> </li> <li id="section-13"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-13">§</a> </div> <p>We don’t need to see the spokes in the finished chart; we just need them positioned correctly</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-attr">method</span>: <span class="hljs-string">'none'</span>, }); }</pre></div></div> </li> <li id="section-14"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-14">§</a> </div> <p>Build each day’s spiral</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-title function_">buildDayChart</span>(data.<span class="hljs-property">mon</span>, <span class="hljs-number">0</span>, <span class="hljs-string">'mon'</span>, (data.<span class="hljs-property">mon</span>.<span class="hljs-property">length</span> < maxDataLen) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>); <span class="hljs-title function_">buildDayChart</span>(data.<span class="hljs-property">tue</span>, <span class="hljs-number">0.042</span>, <span class="hljs-string">'tue'</span>, (data.<span class="hljs-property">tue</span>.<span class="hljs-property">length</span> < maxDataLen) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>); <span class="hljs-title function_">buildDayChart</span>(data.<span class="hljs-property">wed</span>, <span class="hljs-number">0.084</span>, <span class="hljs-string">'wed'</span>, (data.<span class="hljs-property">wed</span>.<span class="hljs-property">length</span> < maxDataLen) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>); <span class="hljs-title function_">buildDayChart</span>(data.<span class="hljs-property">thu</span>, <span class="hljs-number">0.126</span>, <span class="hljs-string">'thu'</span>, (data.<span class="hljs-property">thu</span>.<span class="hljs-property">length</span> < maxDataLen) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>); <span class="hljs-title function_">buildDayChart</span>(data.<span class="hljs-property">fri</span>, <span class="hljs-number">0.168</span>, <span class="hljs-string">'fri'</span>, (data.<span class="hljs-property">fri</span>.<span class="hljs-property">length</span> < maxDataLen) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>); <span class="hljs-title function_">buildDayChart</span>(data.<span class="hljs-property">sat</span>, <span class="hljs-number">0.21</span>, <span class="hljs-string">'sat'</span>, (data.<span class="hljs-property">sat</span>.<span class="hljs-property">length</span> < maxDataLen) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>); <span class="hljs-title function_">buildDayChart</span>(data.<span class="hljs-property">sun</span>, <span class="hljs-number">0.252</span>, <span class="hljs-string">'sun'</span>, (data.<span class="hljs-property">sun</span>.<span class="hljs-property">length</span> < maxDataLen) ? <span class="hljs-literal">true</span> : <span class="hljs-literal">false</span>);</pre></div></div> </li> <li id="section-15"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-15">§</a> </div> <p>Now all the chart entitys have been created, we no longer need the Color objects</p> </div> <div class="content"><div class='highlight'><pre> lowViewsFactory.<span class="hljs-title function_">kill</span>(); highViewsFactory.<span class="hljs-title function_">kill</span>();</pre></div></div> </li> <li id="section-16"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-16">§</a> </div> <p>We will render this Cell manually, outside of the Display cycle animation loop</p> </div> <div class="content"><div class='highlight'><pre> cell.<span class="hljs-title function_">clear</span>();</pre></div></div> </li> <li id="section-17"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-17">§</a> </div> <p>Setup the cell to capture its image as it compiles …</p> </div> <div class="content"><div class='highlight'><pre> scrawl.<span class="hljs-title function_">createImageFromCell</span>(cell, <span class="hljs-literal">true</span>);</pre></div></div> </li> <li id="section-18"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-18">§</a> </div> <p>… and invoke the compile step</p> </div> <div class="content"><div class='highlight'><pre> cell.<span class="hljs-title function_">compile</span>()</pre></div></div> </li> <li id="section-19"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-19">§</a> </div> <p>The compile step will (eventually) add a hidden <img> element to the DOM. This means we no longer require the Cell or its entitys. We need to kill the Cell’s Group before we kill the Cell itself</p> </div> <div class="content"><div class='highlight'><pre> chartGroup.<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>); cell.<span class="hljs-title function_">kill</span>();</pre></div></div> </li> <li id="section-20"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-20">§</a> </div> <p>Now we can create a single Picture entity for display in the canvasWrapper’s <canvas> element</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> img = scrawl.<span class="hljs-title function_">makePicture</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-chart-image`</span>, <span class="hljs-attr">group</span>: canvasWrapper.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>, <span class="hljs-attr">asset</span>: <span class="hljs-string">`<span class="hljs-subst">${page}</span>-cell-image`</span>, <span class="hljs-attr">dimensions</span>: [<span class="hljs-string">'100%'</span>, <span class="hljs-string">'100%'</span>], <span class="hljs-attr">copyDimensions</span>: [<span class="hljs-string">'100%'</span>, <span class="hljs-string">'100%'</span>], }); <span class="hljs-title function_">resolve</span>(img); }) .<span class="hljs-title function_">catch</span>(<span class="hljs-function"><span class="hljs-params">e</span> =></span> { <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'buildChart error'</span>, e); <span class="hljs-title function_">resolve</span>(<span class="hljs-literal">false</span>); }); }); };</pre></div></div> </li> </ul> </div> </body> </html>