readme.md

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 weighs 9k.

Installing

npm install svg-radar-chart

Usage

const radar = require('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, so you can decide what to do with it.

To generate an SVG string from it, use virtual-dom-stringify:

const stringify = require('virtual-dom-stringify')

const svg = `
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<style>
		.axis {
			stroke-width: .2;
		}
		.scale {
			stroke-width: .2;
		}
		.shape {
			fill-opacity: .3;
		}
		.shape:hover {
			fill-opacity: .6;
		}
	</style>
	${stringify(chart)}
</svg>
`

You may now create an SVG file using Node.js:

process.stdout.write(svg)

Or insert it into the DOM:

document.querySelector('#my-chart').innerHTML = 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.