d3-rs-polars

d3-rs-polars generate a range of pie charts.

Builds

Example

View @redsift/d3-rs-polars on Codepen

Line chart

Area chart

Combination

Usage

Browser

<script src="//static.redsift.io/reusable/d3-rs-polars/latest/d3-rs-polars.umd-es2015.min.js"></script>
<script>
    var chart = d3_rs_lines.html();
    d3.select('body').datum([ 1, 2, 3, 10, 100 ]).call(chart);
</script>

ES6

import { chart } from "@redsift/d3-rs-polars";
let eml = chart.html();
...

Require

var chart = require("@redsift/d3-rs-polars");
var eml = chart.html();
...

Datum

• Simplest form, array of unit numbers: [0.1, 1, 0.5 ,0.3...]

Parameters

Property	Description	Transition	Preview
classed	String SVG custom class	N
width, height, size, scale	Integer SVG container sizes. Typically, use size to scale the chart	Y
margin	Object, Number Margin affecting all chart elements
inset	Number Margin affecting primary chart element
style	String Custom CSS to inject into chart	N
background	Color
theme	*light	dark*
language	String
outerRadius	Integer Radius of the largest arc. Default is null and is set automatically as a funciton of the size
padding	Number Pixels between polar arcs
thickness	Number Pixel thickness of the arc
cornerRadius	Number Pixel rounding of the arc ends
reverse	Boolean Reverse the arc fill computation
padAngle	Number Radians to pad between the data values 0 and 1. By default, an arc between 0 and 1 will form a complete circle
startAngle	Number Radian position of 0
displayValue
displayFormatValue
fill
displayTip
legend	Array