designer-radar/example.js at master · pmarquees/designer-radar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
'use strict'

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

const chart = radar({
	// columns
	ui: 'UI Design',
	interaction: 'Interaction',
	strategy: 'Strategy',
	research: 'Research',
	leadership: 'Leadership',
	content:'Content Design'
}, [
	// data
	{class: 'iphone', ui: .4, research: .7, strategy: 1, interaction: .9, leadership: .9, content: .2},
], {
	shapeProps: (data) => ({className: 'shape ' + data.class})
})

process.stdout.write(`
<svg version="1" xmlns="http://www.w3.org/2000/svg" width="1000" height="200" viewBox="-200 0 500 100">
	<style>
		.axis {
			stroke: #555;
			stroke-width: .2;
		}
		.scale {
			fill: #f0f0f0;
			stroke: #999;
			stroke-width: .2;
		}
		.shape {
			fill-opacity: .3;
			stroke-width: .5;
		}
		.shape:hover { fill-opacity: .6; }

		.shape.iphone { fill: #0066FF; stroke: #0066FF; }
	</style>
	${stringify(chart)}
</svg>
`)