OI Lume Viz

At Open Innovations, we’ve started using the Lume Static Site Generator to build data microsites for people. This gives us the benefits of a static HTML site, with associated manageability, efficiency, and maintainability benefits, whilst giving us a framework for extending.

To support some of the more complex visualisations we undertake, we’ve encapsulated a number of our charting libraries in this. With each visualisation type we aim to:

• keep bandwidth use down
• only use limited front-end Javascript to add some interactivity (and limit what is loaded to what is needed)
• keep visualisations as accessible as possible

Using the library

To use this in your Lume project, include the following in your Lume _config.js or _config.ts file. WARNING! This is strictly a pre-release version, and interfaces are very likely to change.

You can include your config directly in your Lume _config.js or _config.ts file:

import oiLumeViz from "https://deno.land/x/oi_lume_viz@v0.15.12/mod.ts";

site.use(oiLumeViz({
  assetPath: 'assets/oi',
  componentNamespace: 'oi',
}));

Or move the OI Lume Viz config into an external file using:

import oiLumeViz from "https://deno.land/x/oi_lume_viz@v0.15.12/mod.ts";

import oiVizConfig from "./oi-viz-config.ts";
site.use(oiLumeViz(oiVizConfig));

Then, in oi-viz-config.ts you’d include your config e.g.:

export default {
    "assetPath": '/assets',
    "componentNamespace": 'oi',
    "colour": {
        "names": {
            "gold": "#F7AB3D",
            "orange": "#E55912",
            "turquoise": "#69C2C9",
            "cherry": "#E52E36",
            "chartreuse": "#C7B200",
            "plum": "#7D2248",
            "grey": "#B2B2B2",
            "blue": "#005776",
            "raisin": "#874245",
            "rose": "#FF808B",
            "forest": "#4A783C",
            "richblack": "#000000",
        },
        "scales": {
            "example": "#ff0000 0%, #0000ff 100%",
        }
    }
}

You can provide the following options:

• assetPath path to locate the Javascript assets that are loaded (default: /assets)
• componentNamespace namespace where the charts are accessible e.g. comp.oi.dashboard() (default: oi)
• colour - site-wide colours by name, series, and scale
• font - site-wide fonts
• map - site-wide map tile layers.

Visualisation types

We have a variety of visualisation types available:

• Tables
• Dashboards
• Treemaps
• Charts:
  • Bar charts
  • Scatter charts
  • Line charts
  • Calendar charts
  • Ridgeline charts
  • Ranking charts
  • Waffle charts
• Maps:
  • Zoomable maps
  • SVG maps
  • Hex cartograms

Testing

Run a test with the following command. Replace the file path with the tests you want to run. If you provide a directory path and Deno will find any test files in the directory and it’s sub-directories.

deno test --unstable --allow-read --no-check components/chart/bar.test.ts

To make Deno continually run these tests, add the --watch flag. This will then run each time the input files change.

deno test --unstable --allow-read --no-check --watch components/chart/bar.test.ts