roundar-chart

Roundar — Rounded Radar Charts

This library uses Typescript (compiled to Javascript), 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 <g> for insertion into any <svg> element you may want.

Check the example website for an interactive chart example.

Installing

yarn add roundar-chart

Usage

import roundar from "roundar-chart"

// chart is a DOM <g> 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 = `
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
 <style>
  .axis {
   stroke-width: 0.2;
  }
  .scale {
   stroke-width: 0.2;
  }
  .shape {
   fill-opacity: 0.33;
  }
  .shape:hover {
   fill-opacity: 0.67;
  }
 </style>
 ${chart.outerHTML}
</svg>
`;

API

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

options is an optional options object and has the following default values:

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 <path> commands. The returned result will be inserted into the d attribute of each dataset's <path> 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.