• 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:
    {
        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, ...],
            ...
        }
    }
    */
    
    import * as scrawl from '../../source/scrawl.js';
  • §

    We need to adapt the graph 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-stacked-bars.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));
        });
    }
  • §

    Rearrange data

    • From ‘by-category’ - as supplied in the raw data
    • To ‘by-year’ - required for this graph’s display
    const extractDataByYear = (yearLabels, categoryLabels, categoryData) => {
    
        let d = {};
    
        for (let i = 0; i < yearLabels.length; i++) {
    
            d[yearLabels[i]] = [];
        }
    
        for (let i = 0; i < categoryLabels.length; i++) {
    
            let cData = categoryData[categoryLabels[i]];
    
            for (let j = 0; j < yearLabels.length; j++) {
    
                d[yearLabels[j]].push(cData[j]);
            }
        }
        return d;
    };
  • §

    The exported ‘build’ function

    const build = function (namespace, canvas, dataSource) {
    
        getRawData (dataSource)
        .then (rawData => {
  • §

    Reconstruct data into formats required by this graph type

            let area = rawData.area,
                yearLabels = rawData.years,
                categoryData = rawData.crimesByCategory,
                categoryLabels = Object.keys(categoryData),
                yearData = extractDataByYear(yearLabels, categoryLabels, categoryData);
    
            let data = {
                area,
                yearLabels,
                categoryLabels,
                yearData,
            };
  • §

    Build the graph

            graph.build(namespace, canvas, data);
  • §

    Update the frame with additional data

            frame.updateTitle(`${data.area} Crime Statistics - Overview`);
            frame.updateBackground(data.area);
        })
        .catch (error => console.log(error.message));
    };
  • §

    Other exported functions

    • Piping these through from graph module exported functions
    const kill = graph.kill;
    const hide = graph.hide;
    const show = graph.show;
    
    export {
        build,
        kill,
    
        hide,
        show,
    }