@redsift/d3-rs-circlepack

Generates circlepack charts using D3v4.

Usage no npm install needed!

<script type="module">
  import redsiftD3RsCirclepack from 'https://cdn.skypack.dev/@redsift/d3-rs-circlepack';
</script>

README

d3-rs-circlepack

Circle CI npm MIT

d3-rs-circlepack generate a circlepack flow via the D3 reusable chart convention.

Example

View @redsift/d3-rs-√ on Codepen

Line chart

Sample bars with a bottom orientation

Multiple series

Sample bars with a left orientation

Usage

Browser

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

ES6

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

Require

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

TODO

  • text outline for other themes
  • text label fn callback
  • text fill fn callback