• Jump To … +
    ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/dom-entity-editor.js ./demo/modules/entity-copy-paste.js ./demo/modules/entity-manipulation-gui.js ./demo/modules/entity-navigation.js ./demo/modules/entity-ring-builder.js ./demo/modules/london-crime-graphic.js ./demo/modules/london-crime-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.js ./demo/modules/simple-chart-frame-tests.js ./demo/modules/simple-chart-frame.js ./demo/modules/simple-graph-lines.js ./demo/modules/simple-graph-stacked-bars.js ./demo/modules/wikipedia-views-spiral-chart.js ./demo/snippets/animated-highlight-gradient-text-snippet.js ./demo/snippets/animated-hover-gradient-snippet.js ./demo/snippets/animated-word-gradient-snippet.js ./demo/snippets/before-after-slider-infographic.js ./demo/snippets/bubbles-text-snippet.js ./demo/snippets/green-box-snippet.js ./demo/snippets/jazzy-button-snippet.js ./demo/snippets/page-performance-snippet-test.js ./demo/snippets/page-performance-snippet.js ./demo/snippets/pan-image-snippet.js ./demo/snippets/placeholder-effect-snippet.js ./demo/snippets/ripple-effect-snippet.js ./demo/snippets/risograph-text-gradient-snippet.js ./demo/snippets/spotlight-text-snippet-test.js ./demo/snippets/spotlight-text-snippet.js ./demo/snippets/swirling-stripes-text-snippet.js ./demo/snippets/text-snippet-helper.js ./demo/snippets/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js
  • §

    Demo Modules 001

    Scrawl-canvas modularized code - London crime charts

    Related files:

    • London crime charts - main module
    • London crime graphic module
    • London crime lines module
    • London crime stacked bar module
    • Simple chart frame module
    • Simple chart frame tests module
    • Simple graph lines module
    • Simple graph stacked bars module
    /*
    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, ...],
    }
    */
    
    import * as scrawl from '../../source/scrawl.js';
  • §

    We need to adapt the chart frame with data specific to this graph

    import * as frame from './simple-chart-frame.js';
  • §

    The graph we are adapting our data for

    import * as graph from './simple-graph-lines.js'
  • §

    The asynchronous data fetch

    const getRawData = (file) => {
    
        return new Promise ((resolve, reject) => {
    
            fetch (new Request(file))
            .then (response => {
    
                if (!response.ok) throw new Error(`Network Error ${response.status}: ${response.statusText}`);
                return response.json();
            })
            .then (rawData => resolve(rawData))
            .catch (e => reject(e));
        });
    };
  • §

    Add some module state

    let currentData, isBuilt;
  • §

    Extract relevant data for the graph being requested

    const getData = (category) => {
    
        return {
            yearLabels: currentData.years,
            data: currentData.crimesByCategory[category]
        };
    };
  • §

    The exported ‘build’ function

    const build = function (namespace, canvas, data, category) {
    
        if (!isBuilt) {
    
            getRawData (data)
            .then (rawData => {
    
                currentData = rawData;
    
                graph.build(namespace, canvas, getData(category));
                isBuilt = true;
    
                update(namespace, canvas, category);
            })
            .catch(e => console.log(e.message));;
        }
    }
  • §

    The exported ‘update’ function

    const update = (namespace, canvas, category) => {
  • §

    Only update if we already have data available

        if (currentData) {
    
            let myData = getData(category);
    
            if (!isBuilt) {
    
                graph.build(namespace, canvas, myData);
                isBuilt = true;
            }
            else graph.update();
    
            frame.updateTitle(`${currentData.area} Crimes: ${category}`);
            frame.updateBackground(category);
        }
    };
  • §

    The exported ‘kill’ function

    const kill = () => {
    
        graph.kill();
        currentData = false;
        isBuilt = false;
    };
  • §

    Other exported functions

    const hide = graph.hide;
    const show = graph.show;
    
    export {
        build,
        update,
    
        hide,
        show,
    
        kill,
    }