scrawl-canvas
Version:
Version 8.9.4 - 19 Nov 2022
620 lines (413 loc) • 27.9 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 format requirements - a 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>Calculate height of the largest year</p>
<ul>
<li>Rounded up to nearest thousand</li>
</ul>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">extractHighestAnnualMaximum</span> = (<span class="hljs-params">yearLabels, yearData</span>) => {
<span class="hljs-keyword">let</span> max = <span class="hljs-number">0</span>;
<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++) {
<span class="hljs-keyword">let</span> total = yearData[yearLabels[i]].<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">a, v</span>) =></span> a + v, <span class="hljs-number">0</span>);
<span class="hljs-keyword">if</span> (total > max) max = total;
}
<span class="hljs-keyword">return</span> ((<span class="hljs-title class_">Math</span>.<span class="hljs-title function_">floor</span>(max / <span class="hljs-number">1000</span>)) * <span class="hljs-number">1000</span>) + <span class="hljs-number">1000</span>;
};
<span class="hljs-keyword">const</span> colorArray = [<span class="hljs-string">'#257394'</span>, <span class="hljs-string">'#947a25'</span>, <span class="hljs-string">'#fc0004'</span>, <span class="hljs-string">'#00fcbd'</span>, <span class="hljs-string">'#de9bc8'</span>, <span class="hljs-string">'#9bdeaf'</span>, <span class="hljs-string">'#970b99'</span>, <span class="hljs-string">'#0b9910'</span>, <span class="hljs-string">'#5f11f0'</span>, <span class="hljs-string">'#66f011'</span>, <span class="hljs-string">'#a09de0'</span>, <span class="hljs-string">'#d1e09d'</span>];</pre></div></div>
</li>
<li id="section-4">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-4">§</a>
</div>
<p>Variables shared across functions</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">let</span> group,
space,
selectedColumn,
selectedRow,
currentData,
currentDatapoint;</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-5">§</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</span>) {
space = namespace;
selectedColumn = <span class="hljs-number">0</span>;
selectedRow = <span class="hljs-number">0</span>;
currentData = data;</pre></div></div>
</li>
<li id="section-6">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-6">§</a>
</div>
<p>Local variables defined at the top of the build function</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-keyword">let</span> area = data.<span class="hljs-property">area</span>,
yearLabels = data.<span class="hljs-property">yearLabels</span>,
categoryLabels = data.<span class="hljs-property">categoryLabels</span>,
yearData = data.<span class="hljs-property">yearData</span>,
gap = <span class="hljs-number">1</span>,</pre></div></div>
</li>
<li id="section-7">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-7">§</a>
</div>
<p>Magic numbers</p>
</div>
<div class="content"><div class='highlight'><pre> graphWidth = frame.<span class="hljs-property">graphWidth</span>,
graphHeight = frame.<span class="hljs-property">graphHeight</span>,
graphBottom = frame.<span class="hljs-property">graphBottom</span>,
graphLeft = frame.<span class="hljs-property">graphLeft</span> + (gap / <span class="hljs-number">2</span>),</pre></div></div>
</li>
<li id="section-8">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-8">§</a>
</div>
<p>Graph baseline calculations</p>
</div>
<div class="content"><div class='highlight'><pre> maximumBarTotal = <span class="hljs-title function_">extractHighestAnnualMaximum</span>(yearLabels, yearData),
numberOfYears = yearLabels.<span class="hljs-property">length</span>,
barDistance = graphWidth / numberOfYears,
barWidth = <span class="hljs-string">`<span class="hljs-subst">${barDistance - gap}</span>%`</span>,
singleCrimeHeight = graphHeight / maximumBarTotal;</pre></div></div>
</li>
<li id="section-9">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-9">§</a>
</div>
<p>Create group</p>
</div>
<div class="content"><div class='highlight'><pre> group = scrawl.<span class="hljs-title function_">makeGroup</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-bargroup`</span>,
<span class="hljs-attr">host</span>: canvas.<span class="hljs-property">base</span>.<span class="hljs-property">name</span>,
<span class="hljs-attr">order</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">visibility</span>: <span class="hljs-literal">false</span>,
});</pre></div></div>
</li>
<li id="section-10">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-10">§</a>
</div>
<p>Build bars</p>
</div>
<div class="content"><div class='highlight'><pre> yearLabels.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">year, yearIndex</span>) =></span> {
<span class="hljs-keyword">let</span> xPosition = (barDistance * yearIndex) + graphLeft,
localHeight = <span class="hljs-number">0</span>;
<span class="hljs-keyword">const</span> categoryLen = categoryLabels.<span class="hljs-property">length</span>;
categoryLabels.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">category, categoryIndex</span>) =></span> {
<span class="hljs-keyword">let</span> categoryItem = yearData[year][categoryIndex],
crimeHeight = categoryItem * singleCrimeHeight;
localHeight += crimeHeight;
scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${year}</span>-<span class="hljs-subst">${category}</span>`</span>,
group,
<span class="hljs-attr">width</span>: barWidth,
<span class="hljs-attr">height</span>: <span class="hljs-string">`<span class="hljs-subst">${crimeHeight}</span>%`</span>,
<span class="hljs-attr">startX</span>: <span class="hljs-string">`<span class="hljs-subst">${xPosition}</span>%`</span>,
<span class="hljs-attr">startY</span>: <span class="hljs-string">`<span class="hljs-subst">${graphBottom - localHeight}</span>%`</span>,
<span class="hljs-attr">fillStyle</span>: colorArray[categoryIndex % categoryLen],
<span class="hljs-attr">onEnter</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {
selectedColumn = yearIndex;
selectedRow = categoryIndex;
<span class="hljs-title function_">updateSelected</span>();
},
});
});
});
currentDatapoint = scrawl.<span class="hljs-title function_">makeBlock</span>({
<span class="hljs-attr">name</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-dataframe`</span>,
group,
<span class="hljs-attr">mimic</span>: <span class="hljs-string">`<span class="hljs-subst">${namespace}</span>-<span class="hljs-subst">${selectedColumn}</span>-<span class="hljs-subst">${selectedRow}</span>`</span>,
<span class="hljs-attr">useMimicDimensions</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicStart</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">useMimicHandle</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">lockTo</span>: <span class="hljs-string">'mimic'</span>,
<span class="hljs-attr">lineWidth</span>: <span class="hljs-number">6</span>,
<span class="hljs-attr">strokeStyle</span>: <span class="hljs-string">'yellow'</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">'draw'</span>,
});</pre></div></div>
</li>
<li id="section-11">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-11">§</a>
</div>
<p>Personalize the chart frame to meet this graph’s requirements</p>
</div>
<div class="content"><div class='highlight'><pre> frame.<span class="hljs-title function_">updateSubtitle</span>(<span class="hljs-string">'No data selected'</span>);
frame.<span class="hljs-title function_">updateXLeft</span>(yearLabels[<span class="hljs-number">0</span>]);
frame.<span class="hljs-title function_">updateXRight</span>(yearLabels[numberOfYears - <span class="hljs-number">1</span>]);
frame.<span class="hljs-title function_">updateYTop</span>(maximumBarTotal.<span class="hljs-title function_">toLocaleString</span>());</pre></div></div>
</li>
<li id="section-12">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-12">§</a>
</div>
<p>Accessibility</p>
</div>
<div class="content"><div class='highlight'><pre> frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'up'</span>, <span class="hljs-function">() =></span> <span class="hljs-title function_">doNavigation</span>(<span class="hljs-string">'up'</span>));
frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'down'</span>, <span class="hljs-function">() =></span> <span class="hljs-title function_">doNavigation</span>(<span class="hljs-string">'down'</span>));
frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'left'</span>, <span class="hljs-function">() =></span> <span class="hljs-title function_">doNavigation</span>(<span class="hljs-string">'left'</span>));
frame.<span class="hljs-title function_">setArrowAction</span>(<span class="hljs-string">'right'</span>, <span class="hljs-function">() =></span> <span class="hljs-title function_">doNavigation</span>(<span class="hljs-string">'right'</span>));</pre></div></div>
</li>
<li id="section-13">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-13">§</a>
</div>
<p>Display the graph entitys</p>
</div>
<div class="content"><div class='highlight'><pre> <span class="hljs-title function_">updateSelected</span>();
<span class="hljs-title function_">show</span>();
};</pre></div></div>
</li>
<li id="section-14">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-14">§</a>
</div>
<p>Accessibility</p>
</div>
<div class="content"><div class='highlight'><pre><span class="hljs-keyword">const</span> <span class="hljs-title function_">doNavigation</span> = (<span class="hljs-params">direction</span>) => {
<span class="hljs-keyword">const</span> {yearLabels, categoryLabels} = currentData;
<span class="hljs-keyword">const</span> columnLen = yearLabels.<span class="hljs-property">length</span>,
rowLen = categoryLabels.<span class="hljs-property">length</span>;
<span class="hljs-keyword">switch</span> (direction) {
<span class="hljs-keyword">case</span> <span class="hljs-string">'up'</span> :
selectedRow++;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'down'</span> :
selectedRow--;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'left'</span> :
selectedColumn--;
<span class="hljs-keyword">break</span>;
<span class="hljs-keyword">case</span> <span class="hljs-string">'right'</span> :
selectedColumn++;
<span class="hljs-keyword">break</span>;
}
<span class="hljs-keyword">if</span> (selectedColumn < <span class="hljs-number">0</span>) selectedColumn = columnLen - <span class="hljs-number">1</span>;
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (selectedColumn >= columnLen) selectedColumn = <span class="hljs-number">0</span>;
<span class="hljs-keyword">if</span> (selectedRow < <span class="hljs-number">0</span>) selectedRow = rowLen - <span class="hljs-number">1</span>;
<span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (selectedRow >= rowLen) selectedRow = <span class="hljs-number">0</span>;
<span class="hljs-title function_">updateSelected</span>();
};
<span class="hljs-keyword">const</span> <span class="hljs-title function_">updateSelected</span> = (<span class="hljs-params"></span>) => {
<span class="hljs-keyword">const</span> {yearLabels, categoryLabels, yearData} = currentData;
<span class="hljs-keyword">const</span> category = categoryLabels[selectedRow],
year = yearLabels[selectedColumn],
data = yearData[year][selectedRow];
currentDatapoint.<span class="hljs-title function_">set</span>({
<span class="hljs-attr">mimic</span>: <span class="hljs-string">`<span class="hljs-subst">${space}</span>-<span class="hljs-subst">${year}</span>-<span class="hljs-subst">${category}</span>`</span>,
});
frame.<span class="hljs-title function_">updateSubtitle</span>(<span class="hljs-string">`<span class="hljs-subst">${category}</span> in <span class="hljs-subst">${year}</span>: §RED§<span class="hljs-subst">${data.toLocaleString()}</span>`</span>);
};</pre></div></div>
</li>
<li id="section-15">
<div class="annotation">
<div class="sswrap ">
<a class="ss" href="#section-15">§</a>
</div>
<p>Other exported functions</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>) => group.<span class="hljs-title function_">kill</span>(<span class="hljs-literal">true</span>);
<span class="hljs-keyword">const</span> <span class="hljs-title function_">hide</span> = (<span class="hljs-params"></span>) => group.<span class="hljs-property">visibility</span> = <span class="hljs-literal">false</span>;
<span class="hljs-keyword">const</span> <span class="hljs-title function_">show</span> = (<span class="hljs-params"></span>) => group.<span class="hljs-property">visibility</span> = <span class="hljs-literal">true</span>;
<span class="hljs-keyword">export</span> {
build,
kill,
hide,
show,
}</pre></div></div>
</li>
</ul>
</div>
</body>
</html>