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> Scrawl-canvas modularized code - London crime charts Related files: <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> import * as scrawl from './source/scrawl.js'; let canvas = scrawl.library.canvas.mycanvas, namespace = 'London-crimes'; import * as frame from './simple-chart-frame.js';</pre></div></div> </li> <li id="section-2"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-2">§</a> </div> import * as tests from ‘./simple-chart-frame-tests.js’; </div> <div class="content"><div class='highlight'><pre>import * as barGraph from './london-crime-stacked-bars.js'; import * as lineGraph from './london-crime-lines.js'; canvas.set({ backgroundColor: 'lemonchiffon', label: 'Crime statistics for London areas - from 1999 to 2017', description: 'Interactive graphic showing crimes recorded in various London areas, broken down into crime types. Data taken from https://data.london.gov.uk/dataset/recorded_crime_rates', fit: 'contain', checkForResize: true, }).setBase({ width: 600, height: 600, }); let report = function () { let assets = scrawl.library.assetnames, groups = scrawl.library.groupnames, entitys = scrawl.library.entitynames, reporter = document.querySelector('#library-reporter'); return function () { reporter.textContent = `Assets: ${assets.join(', ')} Groups: ${groups.join(', ')} Entitys: ${entitys.join(', ')}`; } }(); scrawl.makeRender({ name: `${namespace}-animation`, target: canvas, afterShow: report, }); scrawl.addListener( 'move', () => canvas.cascadeEventAction('move'), canvas.domElement );</pre></div></div> </li> <li id="section-3"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-3">§</a> </div> tests.activateButton( <code>${namespace}-frame</code>, canvas, document.querySelector(‘#test-controls’), document.querySelector(‘#tests-button’), ‘Other Notifiable Offences’); </div> <div class="content"><div class='highlight'><pre> let currentGraphType = 'bars', currentArea = 'Hackney', currentCategory = 'Burglary'; let crimeCategoryInput = document.querySelector('#crime-categories'); scrawl.addNativeListener(['input', 'change'], function (e) { if (e && e.target) { e.preventDefault(); e.stopPropagation(); let target = e.target.id, value = e.target.value; switch (target) { case 'areas' : if (value !== currentArea) { currentArea = value; if (currentGraphType === 'bars') { barGraph.kill(); barGraph.build( `${namespace}-bars`, canvas, `crimes-in-${currentArea.toLowerCase()}.json` ); } else if (currentGraphType === 'lines') { lineGraph.kill(); lineGraph.build( `${namespace}-lines`, canvas, `crimes-in-${currentArea.toLowerCase()}.json`, currentCategory ); } } break; case 'graph-types' : if (value !== currentGraphType) { currentGraphType = value; if (currentGraphType === 'bars') { lineGraph.kill(); barGraph.build( `${namespace}-bars`, canvas, `crimes-in-${currentArea.toLowerCase()}.json` ); crimeCategoryInput.setAttribute('disabled', ''); } else if (currentGraphType === 'lines') { barGraph.kill(); lineGraph.build( `${namespace}-lines`, canvas, `crimes-in-${currentArea.toLowerCase()}.json`, currentCategory ); crimeCategoryInput.removeAttribute('disabled'); } } break; case 'crime-categories' : if (currentGraphType === 'lines' && value !== currentCategory) { currentCategory = value; lineGraph.update( `${namespace}-lines`, canvas, currentCategory ); } break; } } }, '.control-item');</pre></div></div> </li> <li id="section-4"> <div class="annotation"> <div class="sswrap "> <a class="ss" href="#section-4">§</a> </div> Initial display </div> <div class="content"><div class='highlight'><pre>frame.build(`${namespace}-frame`, canvas, 'Hackney'); barGraph.build(`${namespace}-bars`, canvas, 'crimes-in-hackney.json'); crimeCategoryInput.value = 'Burglary'; crimeCategoryInput.setAttribute('disabled', ''); console.log(scrawl.library);</pre></div></div> </li> </ul> </div> </body> </html>