scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
464 lines (311 loc) • 18.7 kB
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:
{
area: 'area-label',
yearLabels: ['year-1-label', 'year-2-label', ...],
categoryLabels: ['category-1-label', 'category-2-label', ...],
yearData: {
'year-1-label': [category-1-data, category-2-data, ...],
'year-2-label': [category-1-data, category-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 graph 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-stacked-bars.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>Rearrange data</p>
<ul>
<li>From ‘by-category’ - as supplied in the raw data</li>
<li>To ‘by-year’ - required for this graph’s display</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">extractDataByYear</span> = (<span class="hljs-params">yearLabels, categoryLabels, categoryData</span>) => {
<span class="hljs-keyword">let</span> d = {};
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < yearLabels.<span class="hljs-property">length</span>; i++) {
d[yearLabels[i]] = [];
}
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>; i < categoryLabels.<span class="hljs-property">length</span>; i++) {
<span class="hljs-keyword">let</span> cData = categoryData[categoryLabels[i]];
<span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> j = <span class="hljs-number">0</span>; j < yearLabels.<span class="hljs-property">length</span>; j++) {
d[yearLabels[j]].<span class="hljs-title function_">push</span>(cData[j]);
}
}
<span class="hljs-keyword">return</span> d;
};</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</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, dataSource</span>) {
getRawData (dataSource)
.<span class="hljs-property">then</span> (<span class="hljs-function"><span class="hljs-params">rawData</span> =></span> {</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Reconstruct data into formats required by this graph type</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> area = rawData.<span class="hljs-property">area</span>,
yearLabels = rawData.<span class="hljs-property">years</span>,
categoryData = rawData.<span class="hljs-property">crimesByCategory</span>,
categoryLabels = <span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(categoryData),
yearData = <span class="hljs-title function_">extractDataByYear</span>(yearLabels, categoryLabels, categoryData);
<span class="hljs-keyword">let</span> data = {
area,
yearLabels,
categoryLabels,
yearData,
};</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Build the graph</p>
</div>
<div class="content"><div class='highlight'><pre> graph.<span class="hljs-title function_">build</span>(namespace, canvas, data);</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Update the frame with additional data</p>
</div>
<div class="content"><div class='highlight'><pre> frame.<span class="hljs-title function_">updateTitle</span>(<span class="hljs-string">`<span class="hljs-subst">${data.area}</span> Crime Statistics - Overview`</span>);
frame.<span class="hljs-title function_">updateBackground</span>(data.<span class="hljs-property">area</span>);
})
.<span class="hljs-property">catch</span> (<span class="hljs-function"><span class="hljs-params">error</span> =></span> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error.<span class="hljs-property">message</span>));
};</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>Other exported functions </p>
<ul>
<li>Piping these through from graph module exported functions</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> kill = graph.<span class="hljs-property">kill</span>;
<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,
kill,
hide,
show,
}</pre></div></div>
</li>
</ul>
</div>
</body>
</html>