OI Lume Viz

Open Innovations charting in Lume

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 one we aim to keep bandwidth use down and only use limited front-end Javascript to add some interactivity.

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.

import oiCharts from 'oi-lume-charts/mod.ts';

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

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)

Visualisation types

TODO add some documentation!

dashboard

Creates a simple panelled dashboard. See dashboard samples.

chart.line

Creates a line chart. See line chart samples.

chart.scatter

Similar to line charts but with lines turned off. See scatter chart samples.

chart.bar

Creates a simple horizontal bar chart. See bar chart samples.

hierarchy.treemap

Creates a hierarchical treemap. See treemap samples.

map.leaflet

Creates a Leaflet-based slippy map. See Leaflet map samples.

map.svg

Creates a simple SVG-based map using a Web Mercator projection. See SVG map samples.

map.hex_cartogram

Creates a hexagonal cartogram using HexJSON layouts. See hex cartogram samples.

Building a string

Often, within visualisations, there is a need to construct tooltips or labels from attributes in the data. In such cases we've allowed pattern-based-strings to be defined which will take values from the data using a double curly braces syntax e.g. {{ key }}. For instance, say the data rows for a visualisation contain the attributes ConstituencyName and population. We can build a very simple tooltip string as {{ ConstituencyName }}: {{ population }}. In this case {{ ConstituencyName }} will be replaced by that row's ConstituencyName value and {{ population }} by the population value.

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