• Jump To … +
    ./demo/canvas-001.js ./demo/canvas-002.js ./demo/canvas-003.js ./demo/canvas-004.js ./demo/canvas-005.js ./demo/canvas-006.js ./demo/canvas-007.js ./demo/canvas-008.js ./demo/canvas-009.js ./demo/canvas-010.js ./demo/canvas-011.js ./demo/canvas-012.js ./demo/canvas-013.js ./demo/canvas-014.js ./demo/canvas-015.js ./demo/canvas-016.js ./demo/canvas-017.js ./demo/canvas-018.js ./demo/canvas-019.js ./demo/canvas-020.js ./demo/canvas-021.js ./demo/canvas-022.js ./demo/canvas-023.js ./demo/canvas-024.js ./demo/canvas-025.js ./demo/canvas-026.js ./demo/canvas-027.js ./demo/canvas-028.js ./demo/canvas-029.js ./demo/canvas-030.js ./demo/canvas-031.js ./demo/canvas-032.js ./demo/canvas-033.js ./demo/canvas-034.js ./demo/canvas-035.js ./demo/canvas-036.js ./demo/canvas-037.js ./demo/canvas-038.js ./demo/canvas-039.js ./demo/canvas-040.js ./demo/canvas-041.js ./demo/canvas-042.js ./demo/canvas-043.js ./demo/canvas-044.js ./demo/canvas-045.js ./demo/canvas-046.js ./demo/canvas-047.js ./demo/canvas-048.js ./demo/canvas-049.js ./demo/canvas-050.js ./demo/canvas-051.js ./demo/canvas-052.js ./demo/canvas-053.js ./demo/canvas-054.js ./demo/canvas-055.js ./demo/canvas-056.js ./demo/canvas-057.js ./demo/canvas-058.js ./demo/canvas-059.js ./demo/canvas-060.js ./demo/canvas-061.js ./demo/canvas-062.js ./demo/canvas-063.js ./demo/canvas-064.js ./demo/canvas-065.js ./demo/canvas-066.js ./demo/canvas-067.js ./demo/canvas-068.js ./demo/canvas-069.js ./demo/canvas-070.js ./demo/canvas-071.js ./demo/canvas-072.js ./demo/canvas-073.js ./demo/canvas-074.js ./demo/canvas-201.js ./demo/canvas-202.js ./demo/canvas-203.js ./demo/canvas-204.js ./demo/canvas-205.js ./demo/canvas-206.js ./demo/canvas-207.js ./demo/canvas-208.js ./demo/canvas-209.js ./demo/canvas-210.js ./demo/canvas-211.js ./demo/canvas-212.js ./demo/delaunator-001.js ./demo/delaunator-002.js ./demo/dom-001.js ./demo/dom-002.js ./demo/dom-003.js ./demo/dom-004.js ./demo/dom-005.js ./demo/dom-006.js ./demo/dom-007.js ./demo/dom-008.js ./demo/dom-009.js ./demo/dom-010.js ./demo/dom-011.js ./demo/dom-012.js ./demo/dom-013.js ./demo/dom-015.js ./demo/dom-016.js ./demo/dom-017.js ./demo/dom-018.js ./demo/dom-019.js ./demo/dom-020.js ./demo/dom-021.js ./demo/filters-001.js ./demo/filters-002.js ./demo/filters-003.js ./demo/filters-004.js ./demo/filters-005.js ./demo/filters-006.js ./demo/filters-007.js ./demo/filters-008.js ./demo/filters-009.js ./demo/filters-010.js ./demo/filters-011.js ./demo/filters-012.js ./demo/filters-013.js ./demo/filters-014.js ./demo/filters-015.js ./demo/filters-016.js ./demo/filters-017.js ./demo/filters-018.js ./demo/filters-019.js ./demo/filters-020.js ./demo/filters-021.js ./demo/filters-022.js ./demo/filters-023.js ./demo/filters-024.js ./demo/filters-025.js ./demo/filters-026.js ./demo/filters-027.js ./demo/filters-028.js ./demo/filters-029.js ./demo/filters-030.js ./demo/filters-031.js ./demo/filters-032.js ./demo/filters-033.js ./demo/filters-034.js ./demo/filters-035.js ./demo/filters-036.js ./demo/filters-037.js ./demo/filters-038.js ./demo/filters-039.js ./demo/filters-040.js ./demo/filters-041.js ./demo/filters-101.js ./demo/filters-102.js ./demo/filters-103.js ./demo/filters-104.js ./demo/filters-105.js ./demo/filters-501.js ./demo/filters-502.js ./demo/filters-503.js ./demo/filters-504.js ./demo/filters-505.js ./demo/js/client-zip.js ./demo/js/mediapipe/tasks-vision/vision-bundle.js ./demo/js/mediapipe/tasks-vision/wasm/vision_wasm_internal.js ./demo/js/mediapipe/tasks-vision/wasm/vision_wasm_nosimd_internal.js ./demo/mediapipe-001.js ./demo/mediapipe-002.js ./demo/mediapipe-003.js ./demo/modules-001.js ./demo/modules-002.js ./demo/modules-003.js ./demo/modules-004.js ./demo/modules-005.js ./demo/modules-006.js ./demo/modules/canvas-minimap.js ./demo/modules/canvas-scene-editor.js ./demo/modules/demo-m006-c1.js ./demo/modules/demo-m006-c2.js ./demo/modules/demo-m006-c3.js ./demo/modules/demo-m006-c4.js ./demo/modules/demo-m006-utils.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-lines.js ./demo/modules/london-crime-stacked-bars.js ./demo/modules/lottie-loader.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/packets-001.js ./demo/packets-002.js ./demo/particles-001.js ./demo/particles-002.js ./demo/particles-003.js ./demo/particles-004.js ./demo/particles-005.js ./demo/particles-006.js ./demo/particles-007.js ./demo/particles-008.js ./demo/particles-009.js ./demo/particles-010.js ./demo/particles-011.js ./demo/particles-012.js ./demo/particles-013.js ./demo/particles-014.js ./demo/particles-015.js ./demo/particles-016.js ./demo/particles-017.js ./demo/snippets-001.js ./demo/snippets-002.js ./demo/snippets-003.js ./demo/snippets-004.js ./demo/snippets-005.js ./demo/snippets-006.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/word-highlighter-snippet.js ./demo/snippets/worley-text-gradient-snippet.js ./demo/temp-001.js ./demo/temp-shape-scale-investigation.js ./demo/tensorflow-001.js ./demo/tensorflow-002.js ./demo/utilities.js
  • §

    Demo Modules 001

    Scrawl-canvas modularized code - London crime charts

    Related files:

    • London crime charts - main module
    • London crime lines module
    • London crime stacked bar module
    • Simple chart frame 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, ...],
            ...
        }
    }
    */
  • §

    Imports and exports

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

    import { api as frame } from './simple-chart-frame.js';
  • §

    The graph we are adapting our data for

    import { api as graph } from './simple-graph-stacked-bars.js';
  • §

    Export

    export const api = {};
  • §

    Data manipulation

    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) => {
    
        const d = {};
    
        for (let i = 0; i < yearLabels.length; i++) {
    
            d[yearLabels[i]] = [];
        }
    
        for (let i = 0; i < categoryLabels.length; i++) {
    
            const cData = categoryData[categoryLabels[i]];
    
            for (let j = 0; j < yearLabels.length; j++) {
    
                d[yearLabels[j]].push(cData[j]);
            }
        }
        return d;
    };
  • §

    Build function

    api.build = (items) => {
    
        const { namespace, canvas, dataSource, scrawl } = items;
    
        if (namespace && canvas && dataSource && scrawl) {
  • §

    Kill function

    • We pass the namespace through to the stacked-bars module, so we can handle kill functionality here rather than there
            api.kill = () => {
                console.log('killing namespace', namespace);
                scrawl.purge(namespace);
            };
  • §

    Fetch data, manipulate it, and pass it through to the stacked-bars module

            getRawData (dataSource)
            .then (rawData => {
  • §

    Reconstruct data into formats required by this graph type

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

    Build the graph

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

    Update the frame with additional data

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