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 |