@ovos-media/svg-radar-chart-es5

0.1.0 • Public • Published

svg-radar-chart

A reusable radar chart in SVG.

an example

npm version build status dependency status dev dependency status ISC-licensed

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 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.

Package Sidebar

Install

npm i @ovos-media/svg-radar-chart-es5

Weekly Downloads

1

Version

0.1.0

License

ISC

Last publish

Collaborators

  • sopaaneta
  • es-ovos
  • khaldoun1
  • marcingil
  • flipace
  • mhawk
  • milanorszagh
  • denis.loncaric
  • ovos_bot
  • adifuchs