https://github.com/michionlion/roundar-chart
Generate rounded SVG radar charts.
https://github.com/michionlion/roundar-chart
chart d3 dataviz radar-chart svg
Last synced: 8 months ago
JSON representation
Generate rounded SVG radar charts.
- Host: GitHub
- URL: https://github.com/michionlion/roundar-chart
- Owner: Michionlion
- License: mit
- Created: 2023-03-17T23:42:16.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-15T19:40:03.000Z (over 2 years ago)
- Last Synced: 2025-01-04T07:26:49.553Z (9 months ago)
- Topics: chart, d3, dataviz, radar-chart, svg
- Language: TypeScript
- Homepage: https://michionlion.github.io/roundar-chart/
- Size: 185 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Roundar — Rounded Radar Charts
[](https://www.npmjs.com/package/roundar-chart) 
This library uses Typescript (compiled to Javascript), [`d3-shape`](https://github.com/d3/d3-shape) (bundled), and browser DOM manipulation to build an SVG element depicting a radar chart with rounded data shapes.
It's designed for use in frontend interfaces to easily generate a `` for insertion into any `` element you may want.
**Check [the example website](https://michionlion.github.io/roundar-chart/) for an interactive chart example.**
## Installing
```shell
yarn add roundar-chart
```
## Usage
```typescript
import roundar from "roundar-chart"
// chart is a DOM element
const chart = roundar(
{
// columns
battery: 'Battery Capacity',
design: 'Design',
useful: 'Usefulness'
},
[
{
// data (between 0.0 and 1.0)
battery: 0.7,
design: 0.9,
useful: 0.4
},
{
battery: 0.4,
design: 0.6,
useful: 0.8
}
]
)
const svg = document.getElementById("#svg-chart");
svg.appendChild(chart);
// OR, if you want to get a string to pass on to some other frontend framework:
const svgElement = `
.axis {
stroke-width: 0.2;
}
.scale {
stroke-width: 0.2;
}
.shape {
fill-opacity: 0.33;
}
.shape:hover {
fill-opacity: 0.67;
}
${chart.outerHTML}
`;
```
## API
```typescript
function roundar(
axes: {[key: string]: string},
dataset: Array<{[key: string]: number | string}>,
options: Options = defaults
): SVGElement
```
`axes` must be an object mapping keys to string values. The keys are column identifiers, values are captions.
`dataset` must be a list of data points. Each data point must be an object with keys that must match column identifiers from `axes`. Any extra keys in that object are added as attributes to the shape's `` element.
`options` is an optional options object and has the following default values:
```typescript
const defaults = {
size: 100, // size of the chart (including labels)
axes: true, // show axes?
scales: 3, // show scale circles?
labels: true, // show labels?
padding: 5, // the padding around the chart in svg units
labelFontSize: 2, // font size in ems
dx: 0, // offset of chart on x-axis
dy: 0, // offset of chart on y-axis
pathMaker: smoothingPathMaker, // shape smoothing function
};
```
The function for `pathMaker` must match the signature `(points: Array<[number, number]>) => string` and must return [valid SVG `` commands](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d).
The returned result will be inserted into the `d` attribute of each dataset's `` SVGPathElement.
Changing `pathMaker` allows you to specify your own shape smoothing (or non-smoothing) function.
## 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/michionlion/roundar-chart/issues).