Skip to main content
The Deno 2 Release Candidate is here
Learn more

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