- Jump To … +
  ./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/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 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.library.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));
          }
      };