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.
To you can download the latest releases on the release page..
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
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>
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 |
| 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) |
https://jsfiddle.net/LEJA3/cq8rbs12/
https://jsfiddle.net/LEJA3/f4o6v2xh/
https://jsfiddle.net/LEJA3/kroLbf4z/
https://jsfiddle.net/LEJA3/rov9weby/
https://jsfiddle.net/LEJA3/fqtphz7o/
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 |