scrawl-canvas

<!DOCTYPE html> <html> <head> <title>Demo Modules 001</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-001">Demo Modules 001</h1> <p>Scrawl-canvas modularized code - London crime charts</p> <p>Related files:</p> <ul> <li><a href="../modules-001.html">London crime charts - main module</a></li> <li><a href="./london-crime-graphic.html">London crime graphic module</a></li> <li><a href="./london-crime-lines.html">London crime lines module</a></li> <li><a href="./london-crime-stacked-bars.html">London crime stacked bar module</a></li> <li><a href="./simple-chart-frame.html">Simple chart frame module</a></li> <li><a href="./simple-chart-frame-tests.html">Simple chart frame tests module</a></li> <li><a href="./simple-graph-lines.html">Simple graph lines module</a></li> <li><a href="./simple-graph-stacked-bars.html">Simple graph stacked bars module</a></li> </ul> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-comment">/* Data fetched from server as JSON String with structure: { "area": "area-label", "years": ["year-1-label", "year-2-label", ...], "crimesByCategory": { "category-1-label": [year-1-data, year-2-data, ...], "category-2-label": [year-1-data, year-2-data, ...], ... } } Data supplied to graph module as Javascript object with structure: { yearLabels: ['year-1-label', 'year-2-label', ...], data: [year-1-data, year-2-data, ...], } */</span> <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>We need to adapt the chart frame with data specific to this graph</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> frame <span class="hljs-keyword">from</span> <span class="hljs-string">'./simple-chart-frame.js'</span>;</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> <p>The graph we are adapting our data for</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> graph <span class="hljs-keyword">from</span> <span class="hljs-string">'./simple-graph-lines.js'</span></pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> <p>The asynchronous data fetch</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">getRawData</span> = (<span class="hljs-params">file</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> { fetch (<span class="hljs-keyword">new</span> <span class="hljs-title class_">Request</span>(file)) .<span class="hljs-property">then</span> (<span class="hljs-function"><span class="hljs-params">response</span> =></span> { <span class="hljs-keyword">if</span> (!response.<span class="hljs-property">ok</span>) <span class="hljs-keyword">throw</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Error</span>(<span class="hljs-string">`Network Error <span class="hljs-subst">${response.status}</span>: <span class="hljs-subst">${response.statusText}</span>`</span>); <span class="hljs-keyword">return</span> response.<span class="hljs-title function_">json</span>(); }) .<span class="hljs-property">then</span> (<span class="hljs-function"><span class="hljs-params">rawData</span> =></span> <span class="hljs-title function_">resolve</span>(rawData)) .<span class="hljs-property">catch</span> (<span class="hljs-function"><span class="hljs-params">e</span> =></span> <span class="hljs-title function_">reject</span>(e)); }); };</pre></div></div> </li> <li id="section-5"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-5">§</a> </div> <p>Add some module state</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> currentData, isBuilt;</pre></div></div> </li> <li id="section-6"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-6">§</a> </div> <p>Extract relevant data for the graph being requested</p> </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">category</span>) => { <span class="hljs-keyword">return</span> { <span class="hljs-attr">yearLabels</span>: currentData.<span class="hljs-property">years</span>, <span class="hljs-attr">data</span>: currentData.<span class="hljs-property">crimesByCategory</span>[category] }; };</pre></div></div> </li> <li id="section-7"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-7">§</a> </div> <p>The exported ‘build’ function</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> build = <span class="hljs-keyword">function</span> (<span class="hljs-params">namespace, canvas, data, category</span>) { <span class="hljs-keyword">if</span> (!isBuilt) { getRawData (data) .<span class="hljs-property">then</span> (<span class="hljs-function"><span class="hljs-params">rawData</span> =></span> { currentData = rawData; graph.<span class="hljs-title function_">build</span>(namespace, canvas, <span class="hljs-title function_">getData</span>(category)); isBuilt = <span class="hljs-literal">true</span>; <span class="hljs-title function_">update</span>(namespace, canvas, category); }) .<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-property">message</span>));; } }</pre></div></div> </li> <li id="section-8"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-8">§</a> </div> <p>The exported ‘update’ function</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">update</span> = (<span class="hljs-params">namespace, canvas, category</span>) => {</pre></div></div> </li> <li id="section-9"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-9">§</a> </div> <p>Only update if we already have data available</p> </div> <div class="content"><div class='highlight'><pre> <span class="hljs-keyword">if</span> (currentData) { <span class="hljs-keyword">let</span> myData = <span class="hljs-title function_">getData</span>(category); <span class="hljs-keyword">if</span> (!isBuilt) { graph.<span class="hljs-title function_">build</span>(namespace, canvas, myData); isBuilt = <span class="hljs-literal">true</span>; } <span class="hljs-keyword">else</span> graph.<span class="hljs-title function_">update</span>(); frame.<span class="hljs-title function_">updateTitle</span>(<span class="hljs-string">`<span class="hljs-subst">${currentData.area}</span> Crimes: <span class="hljs-subst">${category}</span>`</span>); frame.<span class="hljs-title function_">updateBackground</span>(category); } };</pre></div></div> </li> <li id="section-10"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-10">§</a> </div> <p>The exported ‘kill’ function</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">kill</span> = (<span class="hljs-params"></span>) => { graph.<span class="hljs-title function_">kill</span>(); currentData = <span class="hljs-literal">false</span>; isBuilt = <span class="hljs-literal">false</span>; };</pre></div></div> </li> <li id="section-11"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-11">§</a> </div> <p>Other exported functions</p> </div> <div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> hide = graph.<span class="hljs-property">hide</span>; <span class="hljs-keyword">const</span> show = graph.<span class="hljs-property">show</span>; <span class="hljs-keyword">export</span> { build, update, hide, show, kill, }</pre></div></div> </li> </ul> </div> </body> </html>