d3-stacked-rect

Draw d3 stacked rect SVG based on their weights

Installation

npm

$ npm install --save d3-stacked-react

Usage

Below is the example of custom components:

<D3StackedRect data={data} height={700} color="#96cc66" />

Options

data: PropTypes.object.isRequired

const data = {
  titles: {
    P3: 10,
    P4: 12,
    P5: 13,
    P6: 8,
    P7: 3,
    P8: 3,
    P9: 2,
  },
  subTitles: {
    P3: 'Junior Engineer',
    P4: 'Engineer',
    P5: 'Senior Engineer',
    P6: '',
    P7: 'Senior Principle Engineer',
    P8: 'Lead Principle Engineer',
    P9: 'Distinguised Engineer',
  },
};

Note: if associated title field in subTitles is empty, it won't render the subTitles. Otherwise, it will add '-' to the subTitles.

height

height: PropTypes.number.isRequired

Set the height of of the SVG.

color (optional)

color: PropTypes.string

Set the color of of the SVG, should be a hash string like '#96cc66', if not given, will use random color

Development

This project use Parcel. If you hasn't install it, you might need install Parcel first.

npm install -g parcel-bundler

or

yarn global add parcel-bundler

$ git clone [email protected]:cthroo/d3-stacked-rect.git
$ cd d3-stacked-rect
$ npm install
$ npm run dev

Then

open http://localhost:1234

## License

MIT