@ovos-media/svg-radar-chart-es5
v0.1.0
Published
A reusable radar chart in SVG.
Downloads
4
Readme
svg-radar-chart
A reusable radar chart in SVG.
This library is inspired by 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.- Because radar-chart-d3 includes D3, it weighs
212k
.svg-radar-chart
weighs9k
.
Installing
npm install svg-radar-chart
Usage
const radar = require('svg-radar-chart')
const stringify = require('virtual-dom-stringify')
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}
])
process.stdout.write(`
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
.axis {
stroke: #555;
stroke-width: .2;
}
.scale {
fill: #f0f0f0;
stroke: #999;
stroke-width: .2;
}
.shape {
fill-opacity: .3;
}
.shape:hover { fill-opacity: .6; }
</style>
${stringify(chart)}
</svg>
`)
Check the website or the example on how to customize charts further.
Smoothing
You can pass the cardinal-closed smoothing function as follows, but it will add another 14k
to your bundle.
const smoothing = require('svg-radar-chart/smoothing')
radar(columns, data, {
smoothing: smoothing(.3) // tension of .3
})
API
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:
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 <path>
commands.
See also
svg-patterns
– Create SVG patterns programmatically to visualize data.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.