Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/derhuerst/svg-radar-chart
Generate SVG radar charts.
https://github.com/derhuerst/svg-radar-chart
chart dataviz svg virtual-dom
Last synced: 5 days ago
JSON representation
Generate SVG radar charts.
- Host: GitHub
- URL: https://github.com/derhuerst/svg-radar-chart
- Owner: derhuerst
- License: isc
- Created: 2016-10-23T15:56:57.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-06-26T15:00:22.000Z (5 months ago)
- Last Synced: 2024-10-03T23:58:40.287Z (about 1 month ago)
- Topics: chart, dataviz, svg, virtual-dom
- Language: JavaScript
- Homepage: https://derhuerst.github.io/svg-radar-chart/
- Size: 318 KB
- Stars: 87
- Watchers: 3
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: readme.md
- License: license.md
Awesome Lists containing this project
README
# [svg-radar-chart](https://derhuerst.github.io/svg-radar-chart/)
**Generate SVG radar charts.**
[](https://www.npmjs.com/package/svg-radar-chart)
[](https://github.com/sponsors/derhuerst)
[](https://twitter.com/derhuerst)
This library is inspired by [radar-chart-d3](https://github.com/alangrafu/radar-chart-d3) but tries to do a few things differently:
- `svg-radar-chart` does not limit you in which frontend stack you use. It just returns [virtual-dom nodes](https://github.com/Matt-Esch/virtual-dom#dom-model).
- Because [radar-chart-d3](https://github.com/alangrafu/radar-chart-d3) includes [D3](https://d3js.org/), it weighs `212k`. `svg-radar-chart` weighs `9k`.
- Because [angular-radial-plot](https://github.com/colorfulgrayscale/angular-radial-plot) includes includes [D3](https://d3js.org/), it weighs roughly `160k`. `svg-radar-chart` weighs `9k`.
*Note*: This library is an opinionated tool; I maintain it with my personal use cases in mind. I do'nt intend to cover every feature a radar chart library might possibly need.
## Installing
```shell
npm install svg-radar-chart
```
## Usage
```js
import {radar} from 'svg-radar-chart'
const chart = radar({
// columns
battery: 'Battery Capacity',
design: 'Design',
useful: 'Usefulness',
}, [
// data
{class: 'iphone', battery: .7, design: 1, useful: .9},
{class: 'galaxy', battery: 1, design: .6, useful: .8},
{class: 'nexus', battery: .8, design: .7, useful: .6},
])
```
**`svg-radar-chart` returns [virtual-dom](https://github.com/Matt-Esch/virtual-dom#dom-model), so you can decide what to do with it.**
To generate an SVG string from it, use [virtual-dom-stringify](https://github.com/alexmingoia/virtual-dom-stringify):
```js
import stringify from 'virtual-dom-stringify'
const svg = `
.axis {
stroke-width: .2;
}
.scale {
stroke-width: .2;
}
.shape {
fill-opacity: .3;
}
.shape:hover {
fill-opacity: .6;
}
${stringify(chart)}
`
```
You may now create an SVG file using Node.js:
```js
process.stdout.write(svg)
```
```shell
node generate-chart.js >chart.svg
```
Or insert it into the DOM:
```js
document.querySelector('#my-chart').innerHTML = svg
```
**Check [the website](https://derhuerst.github.io/svg-radar-chart/) or [the example](example.js) on how to customize charts further.**
### Smoothing
You can pass the [cardinal-closed smoothing function](https://github.com/d3/d3-shape/blob/master/README.md#curveCardinalClosed) as follows, but it will add another `18k` to your bundle, if you use [`common-shakeify`](https://www.npmjs.com/package/common-shakeify), otherwise a bit more.
```js
import {smoothing} from 'svg-radar-chart/smoothing.js'
radar(columns, data, {
smoothing: smoothing(.3), // tension of .3
})
```
## API
```js
radar(columns, data, opt = {})
```
`columns` must be an object. The values are captions.
`data` must be an array of data points. The keys in one `data` points must exist in `columns`.
`opt` is optional and has the following default values:
```js
const defaults = {
size: 100, // size of the chart (including captions)
axes: true, // show axes?
scales: 3, // show scale circles?
captions: true, // show captions?
captionsPosition: 1.2, // where on the axes are the captions?
smoothing: noSmoothing, // shape smoothing function
axisProps: () => ({className: 'axis'}),
scaleProps: () => ({className: 'scale', fill: 'none'}),
shapeProps: () => ({className: 'shape'}),
captionProps: () => ({
className: 'caption',
textAnchor: 'middle', fontSize: 3,
fontFamily: 'sans-serif',
}),
}
```
`smoothing(points)` must return [valid SVG `` commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).
## See also
- [`svg-patterns`](https://github.com/derhuerst/svg-patterns) – Create SVG patterns programmatically to visualize data.
- [`svg-world-map`](https://github.com/derhuerst/svg-world-map) – Render a world map with a pin at a specific location.
## Contributing
If you **have a question**, **found a bug** or want to **propose a feature**, have a look at [the issues page](https://github.com/derhuerst/svg-radar-chart/issues).