nhsd-dataviz

v1.1.0

Published

2 years ago

NHS Digital's Data Visualisation Library

Downloads

0High
0Medium
0Low

geoffreyhayward

leja3

NHSD Data Visualisation Library

This is the repository for NHSD's data visualisation library.

The purpose of this library is create accessible data visualisations for web with HTML/SVG, JPG & PNG fallbacks where JavaScript isn't avaliable.

Getting Started

Download the latest release

To you can download the latest releases on the release page.

Build from source

Alternatively you may clone and build your own distribution:

git clone https://github.com/NHS-digital-website/nhsd-dataviz.git
npm install
npm run build

Usage

The following code snippet demonstrates loading the data visualisation library and creating a basic chart:

<html>
    <head>
      <script src="nhsd-dataviz.min.js"></script>
    </head>
    <body>
      <div id="viz"></div>
      <script>
      nhsdviz.chart('#viz', {
        "data": {
            "date": "2022",
            "percent": 18,
            "subject": "adults",
            "description": "had a possible eating disorder",
            "change": {
                "percent": -3,
                "date": "2021"
            }
        }
      });
      </script>
    </body>
</html>

API

Create a chart

nhsdviz.chart(selector, options)

# Options object

| Property | Value | Description | |-------------------|------------------------------------------------------|------------------------------------------| | vizType | "pie" | "doughnut" | "icon" | "stat" | "column" | Chart type (default: pie) | | title | String | Chart title text | | introText | String | Chart introductory text | | data | Data object | Chart data | | source | { text: String, href: String } | Source text | | palette | String | Chart palette | | icon | String (icon name) | Chart icon | | desktopViewport | number (px) | Desktop viewport (default: 1024) |

# Data object

| Property | Value | Description | |--------------|-------------------------------------------------|--------------------------------------| | description | String | Chart description | | subject | String | Data subject | | change | { percent: number, from: number, date: string } | Chart change text | | yAxis | { title: string, start: number, end: number } | yAxis options (column) | | xAxis | { title: string } | xAxis options (column) | | percent | number | Chart percent value (pie & doughnut) | | ratio | { numerator: number, denominator: number } | Chart ratio value (icon) | | quantity | number | Chart quantity value (stat) | | series | { name: string, value: [number] } | Chart series data (column) |

# Supported icons

If building from source icons should be placed in the assets/icons/ directory, these icons can then be referenced by their file names.

If using the distribution library the following icons are avaliable:

arrow-down
arrow-up
calendar
invite
person
tooth
wine-glass

Examples

Pie Chart

https://jsfiddle.net/LEJA3/cq8rbs12/

Doughnut Chart

https://jsfiddle.net/LEJA3/f4o6v2xh/

Icon Chart

https://jsfiddle.net/LEJA3/kroLbf4z/

Statistics Chart

https://jsfiddle.net/LEJA3/rov9weby/

Column Chart

https://jsfiddle.net/LEJA3/fqtphz7o/

Colour palette

nhsdviz.createPalette(name, palette)

# Palette object

| Property | Value | Description | |--------------|-------------------------------------------------|--------------------------------------| | primary | String (Hex colour code) | Primary chart colour | | secondary | String (Hex colour code) | Secondary chart colour | | background | String (Hex colour code) | Background chart colour | | text | String (Hex colour code) | Main text colour | | text2 | String (Hex colour code) | Secondary text colour |

Example

https://jsfiddle.net/LEJA3/k2tL0pcq/